ES5和ES6的区别以及ES6常用特性 | 您所在的位置:网站首页 › es6和ec6差别 › ES5和ES6的区别以及ES6常用特性 |
代码转换
到目前为止,还没有完全支持ES6功能的浏览器。 但是,我们可以使用转译将ES6代码转换为ES5代码。 有两个主要的编译器Babel和Traceur,用于在构建过程中将ES6代码转换为ES5代码。 点差运算符(…)它在ES6中引入,使合并数组和对象变得容易。
ES6常用特性: 一、let和const命令 1、let:(1)基本用法 ES6 新增了let命令,用来声明变量。类似于var,但是所声明的变量,只在let命令所在的代码块内有效。 ![]()
(2)let在for循环中使用 ![]()
这个例子中,i 由 var 声明,在全局范围有效,a 的所有组员里面的 i 都是指向同一个 i,导致所有组员运行输出的都是最后一轮的 i 的值。 ![]() 这个例子中, i 由 let 声明,当前的 i 只在本轮循环有效,所有每次循环的 i 其实都是一个新的变量。Tips: 每轮循环的 i 都是重新声明的,JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的 i 时,就在上一轮循环的基础上进行计算。
(3)for循环的特别之处 在 for 循环中,设置循环变量的那部分是一个父作用域,而循环内部是一个单独的子作用域。 ![]()
(4)不能重复声明 let 不允许在相同作用域内,重复声明同一个变量。 ![]()
(5)不存在变量提升 var 命令会发生“变量提升”现象,即变量可以在声明之前使用,值为 undefined。 let 命令改变了语法行为,它所声明的变量一定要在声明后使用,否则会报错。 console.log(foo); //undefined var foo = 2; console.log(bar); // ReferenceError: bar is not defined let bar = 2;
(6)暂时性死区 ES6规定,如果区块中存在 let 和 const 命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前使用这些变量,就会报错。这在语法上称为 “暂时性死区”。 var tmp = 123; if(true){ tmp = 'abc'; // ReferenceError: tmp is not defined let tmp; }Tips:“暂时性死区”的本质就是:只要一进入当前作用域,所要使用的变量就已经存在了,但不可获取(否则报错),只有等到声明的那一行代码出现,才可以获取和使用。 2、const:const命令的用法和let相似,最大不同点就是:const声明一个只读的常量。一旦声明,常量的值就不能改变。 Tips:这个不可改变的是指针,所以对于const声明的对象和数组还是可以改变的。如果真的想将对象冻结,应该使用Object.freeze方法。 3、let和const部分补充: ES5 只有两种声明变量的方法:var命令和function命令。 ES6 除了添加let和const命令,另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有 6 种声明变量的方法。
顶层对象:在浏览器环境指的是window对象,在 Node 指的是global对象。ES5 之中,顶层对象的属性与全局变量是等价的。 ES6为了保持兼容性,规定:a. var 命令和 function 命令声明的全局变量,依旧是顶层对象的属性。b. let,const,class 命令声明的全局变量,不属于顶层对象的属性。 var a = 1; window.a; // 1 let b = 2; window.b; // undefined 回到顶部 二、变量的解构赋值ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 1、数组的解构赋值 (1)基本用法 ![]()
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。 ![]() 如果解构不成功,变量的值就等于undefined。
上面一种情况是解构不成功的;另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。 let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4上面两个例子,都属于不完全解构,但是可以成功。
如果等号的右边不是数组,那么将会报错。 ![]()
(2)默认值 解构赋值允许指定默认值。例如: ![]()
Tips:ES6 内部使用严格相等运算符(===)去判断一个位置是否有值。所以,只有当一个数组成员严格等于 undefined ,默认值才会生效。例如: let [x = 1] = [undefined]; x // 1 let [x = 1] = [null]; x // null - 默认值就不会生效,因为null不严格等于undefined
默认值可以引用解构赋值的其他变量,但该变量必须已经声明。 ![]() 2、对象的解构赋值 (1)基本用法 ![]()
对象的解构与数组的解构,一个重要的不同点在于: 数组元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量名与属性同名,才能取到正确的值。 如果没有与变量名对应的属性名,导致取不到值,最后等于undefined。
如果变量名和属性名不一样,必须写才下面这样: ![]()
这实际上说明,对象的解构赋值是下面形式的简写: let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。 let { foo: baz } = { foo: "aaa", bar: "bbb" }; baz // "aaa" foo // error: foo is not defined 上面代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。
(2)默认值 对象的解构也可以指定默认值。默认值生效的条件是对象的属性值严格等于 undefined。 ![]()
Tips:如果要将一个已经声明的变量用于解构赋值,需要注意: ![]() 3、字符串的解构赋值 字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。 ![]()
类似数组的对象都有一个 length 属性,因此还可以对这个属性解构赋值。 let {length: len} = 'hello'; len;// 54、数值和布尔值的解构赋值 解构赋值时,如果等号右边是数值和布尔值,则会先转化为对象: let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true上面代码中,数值和布尔值的包装对象都有 toString 属性,因此变量 s 都可以取到值。
解构赋值的规则是:只要等号右边的值不是对象或数组,就先将其转化为对象。 由于 undefined 和 null 无法转化为对象,所以对他们进行解构赋值都会报错。 5、函数参数的解构赋值 ![]() 上面代码中,函数 add 的参数看似是一个数组,但在传入参数时,数组参数就解构为变量 x 和 y。对于函数内部代码来说,参数就是 x 和 y。
函数参数的解构也可以使用默认参数: ![]() 上例中,函数 move 的参数是一个对象,通过对这个对象进行解构,得到变量 x 和 y 的值。如果解构失败,x 和 y 等于默认值。
再看下面这种写法: ![]() 上面的代码是为函数 move 的参数指定默认值,而不是为变量 x 和 y 指定默认值。 6、解构的用途 (1)交换变量的值 let x = 1; let y = 2; [x, y] = [y, x]; x;// 2 y;// 1
(2)从函数返回多个值函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里面返回。有了解构赋值,取出这些值就非常方便。 ![]()
(3)函数参数的定义解构赋值可以方便的将一组参数与变量名对应起来。 ![]()
(4)提取JSON数据 ![]()
(5)遍历Map解构 ![]() ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 ![]() 上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World。这种写法的缺点在于,如果参数y赋值了,但是对应的布尔值为false,则该赋值不起作用。就像上面代码的最后一行,参数y等于空字符,结果被改为默认值。 为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值。 if (typeof y === 'undefined') { y = 'World'; }
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。 ![]() 2、与解构赋值默认值结合使用 ![]() 上面代码只使用了对象的解构赋值默认值,没有使用函数参数的默认值。只有当函数foo的参数是一个对象时,变量x和y才会通过解构赋值生成。 如果函数foo调用时没提供参数,变量x和y就不会生成,从而报错。
通过提供函数参数的默认值,就可以避免这种情况。 function foo({x, y = 5} = {}) { console.log(x, y); } foo() // undefined 5
下面是另一个解构赋值默认值的例子: ![]() 上面代码中,如果函数fetch的第二个参数是一个对象,就可以为它的三个属性设置默认值。 这种写法不能省略第二个参数,如果结合函数参数的默认值,就可以省略第二个参数。这时,就出现了双重默认值。 ![]() 上面代码中,函数fetch没有第二个参数时,函数参数的默认值就会生效,然后才是解构赋值的默认值生效,变量method才会取到默认值GET。
因此,与解构赋值默认值结合使用时,切记,函数要定义默认参数,防止函数不传参时报错。 四、模板字符串 模板字符串是增强版的字符串,用反引号 (`) 标识。它可以当普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。 1、基本用法 ![]() Tips:a. 如果在模板字符串中需要使用反引号,则前面需要使用反斜杠转义。b. 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。 2、在模板字符串使用变量 (1) 在模板字符串中嵌入变量,需要将变量名写在 ${} 之中。(2) 大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。(3) 模板字符串之中还能调用函数。(4) 如果大括号中的值不是字符串,将按照一般的规则转为字符串。如: 如果大括号中是一个对象,将默认调用对象的 toString 方法。(5) 如果模板字符串中的变量没有声明将会报错。(6) 如果大括号内部是一个字符串,将原样输出。 ![]() ES6 允许使用 “箭头” (=>)定义函数。 1、基本用法 var f = v => v; //等同于 var f = function (v) { return v; }=> 前面的部分是函数的参数,=> 后面的部分是函数的代码块。
(1)如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。 ![]()
(2)如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用 return 语句返回。 var sum = (num1,num2) => { return num1 + num2; }
(3)由于大括号会被解释为代码块,所以如果箭头函数直接返回一个对象,就必须在对象外面加上括号,否则会报错。 ![]()
(4)箭头函数内部,可以嵌套箭头函数 ![]() 2、箭头函数与变量解构结合使用 ![]() 3、rest 参数与箭头函数结合 const numbers = (...nums) => nums; numbers(1,2,3,4);// [1, 2, 3, 4] const headAndTail = (head, ...tail) => [head, tail]; headAndTail(1,2,3,4);// [1,[2,3,4]] 4、箭头函数的优点 (1)简化代码 const isEven = n => n%2 == 0; isEven(3);// false isEven(4);// true
(2)简化回调函数 [1, 2, 3].map( x => x*x ); //[1, 4, 9] [3,2,5].sort((a, b) => a - b); // [2, 3, 5]5、箭头函数的注意点——this ES5中 this 的指向是可变的,但是箭头函数中 this 指向固定化。 ![]()
this 指向的固定化,并不是因为箭头函数内部有绑定 this 的机制,实际原因是箭头函数内部根本没有自己的this,导致内部的this 就是外层代码块的 this 。
箭头函数的this是比较难理解的,但只要能想象到他是如何从ES5转化来的,就可以完全理解它的作用对象。 箭头函数转成 ES5 的代码如下: ![]()
Tips: (1) 函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。(2) 不可以当构造函数,即不可以使用 new 命令,因为它没有 this,否则会抛出一个错误。(3) 箭头函数没有自己的 this,所以不能使用 call()、apply()、bind() 这些方法去改变 this 指向。(4) 不可以使用arguments 对象,该对象在函数体内不存在。如果要用,可以使用rest参数代替。 回到顶部 六、数组的扩展(扩展运算符) 1、扩展运算符(1)基本用法 扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。 console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [, , ]
该运算符主要用于函数调用。扩展运算符与正常的函数参数可以结合使用,非常灵活。 ![]()
如果扩展运算符后面是一个空数组,则不产生任何效果。 [...[], 1] // [1]
注意,扩展运算符如果放在括号中,JavaScript 引擎就会认为这是函数调用,否则就会报错。 ![]() 2、替代函数的apply方法 由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。 ![]()
3、扩展运算符引用 (1)复制数组 数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针(浅拷贝),而不是克隆一个全新的数组。 如何实现深拷贝呢?下面看看ES5和ES6的实现: ![]()
(2)合并数组 ![]()
不过,这两种方法都是浅拷贝,使用的时候需要注意。如果修改了原数组的成员,会同步反映到新数组。 ![]()
(3)与解构赋值结合 ![]()
注意:如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。 const [...butLast, last] = [1, 2, 3, 4, 5]; // 报错 const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 报错
(4)字符串 扩展运算符可以将字符串和函数参数arguments转成真正的数组 [...'hello'] // [ "h", "e", "l", "l", "o" ] function (){ let arr = [...arguments]; } 七、对象的扩展1、属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 ![]()
上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值
属性简写: ![]()
方法简写: ![]()
CommonJS 模块输出一组变量,就非常合适使用简洁写法。 ![]()
2、属性名表达式 JavaScript 定义对象的属性,有两种方法。 // 方法一 obj.foo = true; // 方法二 obj['a' + 'bc'] = 123;上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。 但是,如果使用字面量方式定义对象(使用大括号),在 ES5 中只能使用方法一(标识符)定义属性。 var obj = { foo: true, abc: 123 };
ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。 ![]()
表达式还可以用于定义方法名。比如我们熟悉的Vuex定义Mutation就是推荐这种方式: ![]()
![]() 八、Array 的扩展方法 扩展运算符(展开语法):扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 let ary = [1, 2, 3]; ...ary // 1, 2, 3 console.log(...ary); // 1 2 3,相当于下面的代码 console.log(1,2,3);扩展运算符可以应用于合并数组 // 方法一 let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5]; let ary3 = [...ary1, ...ary2]; // 方法二 ary1.push(...ary2);
构造函数方法:Array.from() 将伪数组或可遍历对象转换为真正的数组 //定义一个集合 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; //转成数组 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组 let arrayLike = { "0": 1, "1": 2, "length": 2 } let newAry = Array.from(arrayLike, item => item *2)//[2,4] 注意:如果是对象,那么属性需要写对应的索引实例方法:find() 用于找出第一个符合条件的数组成员,如果没有找到返回undefined let ary = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]; let target = ary.find((item, index) => item.id == 2);//找数组里面符合条件的值,当数组中元素id等于2的查找出来,注意,只会匹配第一个实例方法:findIndex() 用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1 let ary = [1, 5, 10, 15]; let index = ary.findIndex((value, index) => value > 9); console.log(index); // 2实例方法:includes() 判断某个数组是否包含给定的值,返回布尔值。 [1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // falsearr.splice(index,len,[item]) 表示从数组中删除或者添加元素,返回新数组保存所有删除的元素index表示要操作的索引位置,len表示要删除的个数,如果len的值为0表示不删除,item表示要添加的元素,可以是多个 let ary = [10, 20, 50]; // 把20给删除 // ary.splice(1, 1); // console.log(ary); // 把20删除,替换成30 // ary.splice(1, 1, 30); // console.log(ary); // 在20前面加上15 // ary.splice(1, 0, 15); // console.log(ary); // 在50前面加上30,40 ary.splice(2, 0, 30, 40); console.log(ary);arr.filter() 返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组 // 返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组 // let result = ary.filter(item => item > 150); // console.log(result)String 的扩展方法 实例方法:repeat() repeat方法表示将原字符串重复n次,返回一个新字符串 'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello"
Set 数据结构 ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set本身是一个构造函数,用来生成 Set 数据结构 const s = new Set();Set函数可以接受一个数组作为参数,用来初始化。 const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}实例方法 add(value):添加某个值,返回 Set 结构本身 delete(value):删除某个值,返回一个布尔值,表示删除是否成功 has(value):返回一个布尔值,表示该值是否为 Set 的成员 clear():清除所有成员,没有返回值 const s = new Set(); s.add(1).add(2).add(3); // 向 set 结构中添加值 s.delete(2) // 删除 set 结构中的2值 s.has(1) // 表示 set 结构中是否有1这个值 返回布尔值 s.clear() // 清除 set 结构中的所有值 //注意:删除的是元素的值,不是代表的索引遍历 Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值。 s.forEach(value => console.log(value))
|
CopyRight 2018-2019 实验室设备网 版权所有 |