es6语法菜鸟教程,es6语法特性

http://www.itjxue.com  2023-01-17 05:50  来源:未知  点击次数: 

ES6常见的新语法

现:在ES6中使用剩余参数运算符则更为简洁,可读性提高:

这种函数表达式形式称为简写主体语法:1.在函数主体周围没有花括号,2.自动返回表达式

sundae这个构造函数内的this的值是实例对象, 因为他使用new被调用.

3.5.2. 指定的对象

函数使用call/apply被调用,this的值指向指定的obj2,因为call()第一个参数明确设置this的指向

3.5.3. 上下`文对象

函数是对象的方法, this指向就是那个对象,此处this就是指向data.

3.5.3. 全局对象或 undefined

此处是this指向全局对象,在严格模式下,指向undefined.

传递给 setTimeout() 的函数被调用时没用到 new、call() 或 apply(),也没用到上下文对象。意味着函数内的 this 的值是全局对象,不是 dessert 对象。实际上发生的情况是,创建了新的 scoops 变量(默认值为 undefined),然后递增(undefined + 1 结果为 NaN);解决此问题的方式之一是使用闭包(closure)

箭头函数的作用正是如此, 将setTimeOut()的函数改为剪头函数:

greet() 函数中混乱的前两行的作用是什么?它们的作用是当所需的参数未提供时,为函数提供默认的值。但是看起来很麻烦, ES6引入一种新的方式创建默认值, 他叫默认函数参数:

createGrid() 函数预期传入的是数组。它通过解构将数组中的第一项设为 width,第二项设为 height。如果数组为空,或者只有一项,那么就会使用默认参数,并将缺失的参数设为默认值 5。但是存在一个问题:

现:出现错误,因为 createGrid() 预期传入的是数组,然后对其进行解构。因为函数被调用时没有传入数组,所以出现问题。但是,我们可以使用默认的函数参数!

现:

在 createSundae() 函数使用对象默认值进行解构时,如果你想使用 scoops 的默认值,但是更改 toppings,那么只需使用 toppings 传入一个对象

将上述示例与使用数组默认值进行解构的同一函数相对比。

前:

对于这个函数,如果想使用 scoops 的默认数量,但是更改 toppings,则必须以这种奇怪的方式调用你的函数:

因为数组是基于位置的,我们需要传入 undefined 以跳过第一个参数(并使用默认值)来到达第二个参数。

花括号 { } 表示被解构的对象,type、color 和 karat 表示要将对象中的属性存储到其中的变量

现:使用和所分配的变量名称相同的名称初始化对象时如果属性名称和所分配的变量名称一样,那么就可以从对象属性中删掉这些重复的变量名称。

匿名函数被分配给属性 calculateWorth,但是真的需要 function 关键字吗?在 ES6 中不需要!

for...of循环是最新添加到javaScript循环系列中的循环。

它结合了其兄弟循环形式for循环和for...in循环的优势,可以循环任何可迭代(也就是遵守可迭代协议)类型的数据。默认情况下,包含以下数据类型:String、Array、Map、Set,注意不包含Object数据类型(即{})。

默认情况下,对象是不可迭代的

for...of 循环还具有其他优势,解决了 for 和 for...in 循环的不足之处。你可以随时停止或退出 for...of 循环。

不用担心向对象中添加新的属性。for...of 循环将只循环访问对象中的值。

javascript中类其实只是function, 方法之间不能使用,,不用逗号区分属性和方法.

1.关键字class带来其他基于类的语言的很多思想,但是没有向javascript中添加此功能

2.javascript类实际上还是原型继承

3.创建javascript类的新实例时必须使用new关键字

es6语法是什么?

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。

最常用的ES6特性

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments。

这些是ES6最常用的几个语法,基本上学会它们,我们就可以走遍天下都不怕啦!我会用最通俗易懂的语言和例子来讲解它们,保证一看就懂,一学就会。

let, const

这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途。

首先来看下面这个例子:

var name = 'zach'while (true) { ? ?var name = 'obama'

console.log(name) ?//obamabreak}console.log(name) ?//obama

使用var 两次输出都是obama,这是因为ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。

JS基础(十八) ES6中定义类的新语法

script

? ? ? ? /* // 定义一个Person类型

? ? ? ? class Person{

? ? ? ? ? ? // 构造函数

? ? ? ? ? ? constructor ( name,age,gender ){

? ? ? ? ? ? ? ? this.name = name,

? ? ? ? ? ? ? ? this.age = age

? ? ? ? ? ? ? ? this.gender = gender

? ? ? ? ? ? }

? ? ? ? ? ? // 给类添加一个方法

? ? ? ? ? ? sayHi() {

? ? ? ? ? ? ? ? console.log(this.name,this.age,this.gender);

? ? ? ? ? ? }

? ? ? ? ? ? //用这种方式定义的方法,是将方法定义到类的原型对象中去

? ? ? ? ? ? sayHello() {

? ? ? ? ? ? ? ? console.log('hello!');

? ? ? ? ? ? }

? ? ? ? } */

? ? ? ? // 继承

? ? ? ? /* // ES5:

? ? ? ? // 定义一个人类

? ? ? ? function Person(name, age, gender) {

? ? ? ? ? ? this.name = name

? ? ? ? ? ? this.age = age

? ? ? ? ? ? this.gender = gender

? ? ? ? }

? ? ? ? Person.prototype.eat = function () {

? ? ? ? ? ? console.log(`我叫${this.name},我在吃饭...`);

? ? ? ? }

? ? ? ? Person.prototype.say = function () {

? ? ? ? ? ? console.log(`大家好!我叫${this.name} 今年${this.age}岁 性别是${this.gender}`);

? ? ? ? }

? ? ? ? // 通过Person类型,创建出了两个对象

? ? ? ? let p1 = new Person('刘德龙', 20, '男')

? ? ? ? p1.say()

? ? ? ? p1.eat()

? ? ? ? let p2 = new Person('高德政', 21, '男')

? ? ? ? p1.say()

? ? ? ? p1.eat()

? ? ? ? console.log('-------------------------------------');

? ? ? ? //定义了学生类

? ? ? ? function Student(name, age, gender, no) {

? ? ? ? ? ? // 继承Person类的属性

? ? ? ? ? ? Person.call(this, name, age, gender)

? ? ? ? ? ? // Student类特有的属性

? ? ? ? ? ? this.no = no

? ? ? ? }

? ? ? ? // 给Student类的prototype属性 new 一个Person类型的对象

? ? ? ? // 用于继承Person类的方法

? ? ? ? Student.prototype = new Person()

? ? ? ? Student.prototype.study = function () {

? ? ? ? ? ? console.log(`我叫${this.name},我的学号是${this.no},我在学习...`);

? ? ? ? }

? ? ? ? let s1 = new Student('张三', 20, '女', '1001')

? ? ? ? s1.study()

? ? ? ? s1.eat()

? ? ? ? s1.say() */

? ? ? ? // ES6:

? ? ? ? // 定义人类

? ? ? ? class Person {

? ? ? ? ? ? // 定义构造函数

? ? ? ? ? ? constructor(name, age, gender) {

? ? ? ? ? ? ? ? this.name = name

? ? ? ? ? ? ? ? this.age = age

? ? ? ? ? ? ? ? this.gender = gender

? ? ? ? ? ? }

? ? ? ? ? ? // 说话方法

? ? ? ? ? ? say() {

? ? ? ? ? ? ? ? console.log(`大家好!我叫${this.name} 今年${this.age}岁 性别是${this.gender}`);

? ? ? ? ? ? }

? ? ? ? ? ? // 吃方法

? ? ? ? ? ? eat() {

? ? ? ? ? ? ? ? console.log(`我叫${this.name},我在吃饭...`);

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // 每个类型都一个prototype属性,我们称它为类的原型对象。

? ? ? ? // 类的 原型对象中的成员 ,给类的 所有实例 (实例就是类创建出来的对象) 共享 。

? ? ? ? console.log(Person.prototype);

? ? ? ? // 通过Person类型,创建出了两个对象

? ? ? ? let p1 = new Person('刘德龙', 20, '男')

? ? ? ? console.log(p1);

? ? ? ? p1.say()

? ? ? ? p1.eat()

? ? ? ? let p2 = new Person('高德政', 21, '男')

? ? ? ? console.log(p2);

? ? ? ? p1.say()

? ? ? ? p1.eat()

? ? ? ? console.log('-------------------------------------');

? ? ? ? // extends关键字,表示继承

? ? ? ? class Student extends Person{

? ? ? ? ? ? // 构造函数

? ? ? ? ? ? constructor(name, age, gender,no){

? ? ? ? ? ? ? ? // 调用父类的构造函数

? ? ? ? ? ? ? ? super(name, age, gender)

? ? ? ? ? ? ? ? // 学生特有的属性

? ? ? ? ? ? ? ? this.no = no

? ? ? ? ? ? }

? ? ? ? ? ? //学生学习的方法

? ? ? ? ? ? study(){

? ? ? ? ? ? ? ? console.log(`我叫${this.name},我的学号是${this.no},我在学习...`);

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? let s1 = new Student('张三', 20, '女', '1001')

? ? ? ? console.log(s1);

? ? ? ? s1.study()

? ? ? ? s1.eat()

? ? ? ? s1.say()

/script

ES6基础入门教程(九)修改对象的键值

ES6 允许字面量定义对象时,即把表达式放在方括号内。

在ES5中创建对象的键就三种object.xx、object['xx']、Object.defineProperty可以用来构建对象的键。在ES6中可以使用更多的方法来创建。

有的时候 ,我们可能需要修改键的名字,es5怎么写我就不管了。。因为太复杂了,你看下es6就行了。

“[ ]” 括号里面可以放方法 也可以放对象 随你喜欢。

根据属性名表达式,还他妈能直接在里面运行方法,贼变态:

ES6基础入门教程(十六)promise异步队列

es6中加入了promise来统一规范异步行为。promise中可以接收两个参数,res代表成功获得异步的值以后运行什么方法,rej代表失败以后运行什么方法。

1.创建的时候就会立刻执行;

2.一旦开始就不能停止;

3.必须通过catch返回错误,否则不会弹出错误。

promise 在处理多个异步函数执行的时候,有很大的优势,

尤其是他在处理正确和错误的时候,分的特别明确,

他唯一的缺点是当你需要一个队列的时候,你就需要一个then一个then往下写,

非常难受。

这里就为es7中async和await的诞生埋下了伏笔。

1.跟then相对的方法,是catch,也可以一个catch接着一个往下写,是一样的。

2.然后all方法,是按照队列里面速度最慢的那个去执行的,

他还有一个race方法,是谁速度快先执行谁,但是还是并行的,无法解决队列的问题。

ES6语法——Number的扩展

一、 二进制和八进制表示法

????????ES6语法中 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。

二、 Number.isFinite(), Number.isNaN()

? ? ? ?ES6中在Number对象上,新增了?Number.isFinite(), Number.isNaN()两个方法。

? ? ? ?(一) Number.isFinite()用来检查一个数值是否为有限的(finite)

? ? ? ????????? ——1.Number.isFinite()对于非数字,不会做隐式类型转换,直接返回false

????????(二)Number.isNaN()用来检查一个值是否为NaN

????????(三) 它们与传统的全局方法isFinite()和isNaN()的区别在于,传统方法先调用Number()将非数值的值转为数值,再进行判断,而这两个新方法只对数值有 效,Number.isFinite(? )对于非数值一律返回false, Number.isNaN(? )只有对于NaN(是真的NaN,或者表达式运算之后得到的NaN)才返回true,非NaN一律返回false。

三、Number.parseInt(? ), Number.parseFloat(? )

? ??????ES6 将ES5的全局方法parseInt( )和parseFloat(? ),移植到Number对象上面,两者的行为完全保持不变。

????????(一) Number.parseFloat(string) 方法可解析一个字符串,并返回一个浮点数。 指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。

????????(二)Number.parseInt(string,radix) 方法可解析一个字符串,并返回一个整数 。radix表示要解析的数字的基数。该值介于 2 ~ 36 之间

四、Number.isInteger(number)

????????Number.isInteger()用来判断一个值是否为整数。需要注意的是,在 JavaScript 内部,整数和浮点数是同样的储存方法, 所以 32 和 32.00 被视为同一个 值。

五、安全整数和 Number.isSafeInteger()

????????JavaScript 能够准确表示的整数范围在-2^53到2^53之间(不含两个端点),ES6 引入了 Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 这两个常量,用来表示这个范围的上下限。超过这个范围,JavaScript无法精确表示这个值。

ES6中新增了Number.isSafeInteger()方法,是用来判断一个整数是否落在这个范围之内。

? ?????? 值得注意的是: 如果我们需要验证一个算式(一个超级大的数减去一个超级大的数得到一个很小的数的情况)的结果是不是落在安全整数之内,除了验证结果意外,参与算式的每一个数都应该去验证是否在安全整数范围内。

六、Math.sign(? )

???????? Math.sign(? )方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。

? ??????它会返回五种值。

???????? 参数为正数,返回+1;

????????参数为负数,返回-1;

????????参数为 0,返回0;

????????参数为-0,返回-0;

????????其他值,返回NaN。

? ? ? ? 这里说明一下:null、空字符串' '、false通过 Number 对象转换后为数字0,true通过Number对象转换后为数字1,undefined通过 Number 对象转换后为 NaN

七、Math.cbrt( )

????????Math.cbrt( )方法用于计算一个数的立方根。

八、Math.trunc()

????????(一) Math.trunc( )方法用于去除一个数的小数部分,返回整数部分。

????????(二) 对于非数值,Math.trunc( )内部使用Number方法将其先转为数值。

????????(三) 对于空值和无法截取整数的值,返回NaN。

九、Math 对象的扩展

????????ES6 在 Math 对象上新增了 17 个与数学相关的方法。所有这些方法都是静态方法,只能在 Math 对象上调用。

十、指数运算符

? ? ? ? ES6新增 ** 为指数运算符。注意,在 V8 引擎中,指数运算符与Math.pow的实现不相同,对于特别大的运算结果,两者会有细微的差异(数据的最后一位有效数字会有差异)。

(责任编辑:IT教学网)

更多

推荐时间特效文章