点击蓝字
关注我们
前言
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。ECMA Script,JavaScript的语言标准。至今已经发布5年多了，但是因为蕴含的语法之广，完全消化需要一定的时间，这里我总结了部分ES6，以及ES6以后新语法的知识点，使用场景，希望对各位有所帮助
let和const
let
用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，即let声明的是一个块作用域内的变量。
特点：
-
不存在变量提升。
-
暂时性死区——只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
-
不允许重复声明。
-
块级作用域——被{}包裹，外部不能访问内部。
应用案例与分析：
// 使用varfor (var i = 0; i < 5; i++) {setTimeout(function () {console.log(i);});} // => 5 5 5 5 5// 使用letfor (let i = 0; i < 5; i++) {setTimeout(function () {console.log(i);});} // => 0 1 2 3 4
上面使用let的代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算所以最后能正常输出i的值。
注意：
for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域，所以我们可以在循环体内部访问到i的值。
let和var全局声明时，var可以通过window的属性访问而let不能。
const
const声明一个只读的常量。一旦声明，常量的值就不能改变。const实际上保证的是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。
因此，我们使用const时，不能只声明而不初始化值，否则会报错：
const a;// SyntaxError: Missing initializer in const declaration
二、数组的扩展
扩展运算符
扩展运算符（spread）是三个点（...），将一个数组转为用逗号分隔的参数序列
应用场景：
1 复制数组
const a1 = [1, 2];const a2 = [...a1];
const arr1 = ['1', '2'];const arr2 = ['c', {a:1} ];// ES6 的合并数组[...arr1, ...arr2]
3 将字符串转化为数组
使用扩展运算符能够正确识别四个字节的 Unicode 字符。凡是涉及到操作四个字节的 Unicode 字符的函数，都有这个问题。因此，最好都用扩展运算符改写。
[...'xuxi']// [ "x", "u", "x", "i" ]
let nodeList = document.querySelectorAll('div');let arr = [...nodeList];
Array.from()
Array.from方法用于将类对象转为真正的数组：类似数组的对象和可遍历的对象（包括 ES6 新增的数据结构 Set 和 Map）。
实际应用中我们更多的是将Array.from用于DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。
// NodeList对象let nodeList = document.querySelectorAll('p')let arr = Array.from(nodeList)// arguments对象function say() {let args = Array.from(arguments);}
Array.from([1, 2, 4], (x) => x + 1)// [2, 3, 5]
Array.of方法用于将一组值，转换为数组。Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。
Array.of() // []Array.of(undefined) // [undefined]Array.of(2) // [21]Array.of(21, 2) // [21, 2]
Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值。该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。
[1, 4, 3].includes(2) // true[1, 2, 4].includes(3) // false[1, 5, NaN, 6].includes(NaN) // true
三、对象的扩展
对象的扩展运算符
对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中，等同于使用Object.assign()方法。
let a = {w: 'xu', y: 'xi'}let b = {name: '12'}let ab = { ...a, ...b };// 等同于let ab = Object.assign({}, a, b);用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致;不同之处只有两个：一是+0不等于-0，二是NaN等于自身。
+0 === -0 //trueNaN === NaN // falseObject.is(+0, -0) // falseObject.is(NaN, NaN) // true
用于对象的合并，将源对象的所有可枚举属性，复制到目标对象; 如果只有一个参数，Object.assign会直接返回该参数; 由于undefined和null无法转成对象，所以如果它们作为参数，就会报错; 其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错。但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。
// 合并对象const target = { a: 1, b: 1 };const source1 = { b: 2, c: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}// 非对象和字符串的类型将忽略const a1 = '123';const a2 = true;const a3 = 10;const obj = Object.assign({}, a1, a2, a3);console.log(obj); // { "0": "1", "1": "2", "2": "3" }
Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。
对于嵌套的对象，遇到同名属性，Object.assign的处理方法是替换，而不是添加
Object.assign可以用来处理数组，但是会把数组视为对象。
Object.assign([1, 2, 3], [4, 5])// [4, 5, 3]
const a = {get num() { return 1 }};const target = {};Object.assign(target, a)// { num: 1 }
-
为对象添加属性和方法
-
克隆/合并对象
-
为属性指定默认值
Object.keys()
返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键名。
const obj = { 100: '1', 2: '2', 7: '3' };Object.values(obj)// ["100", "2", "7"]
返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值。注意：返回数组的成员顺序：如果属性名为数值的属性，是按照数值大小，从小到大遍历的。
const obj = { 100: '1', 2: '2', 7: '3' };Object.values(obj)// ["2", "3", "1"]
四、set和map数据结构
set
ES6提供了新的数据结构Set,类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。
实例属性和方法：
-
add(value)：添加某个值，返回Set结构本身。
-
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
-
has(value)：返回一个布尔值，表示该值是否为Set的成员。
-
clear()：清除所有成员，没有返回值。
s.add(1).add(3).add(3);// 注意3被加入了两次s.size // 2s.has(1) // trues.has(2) // falses.delete(3);s.has(3) // false
-
keys()：返回键名的遍历器
-
values()：返回键值的遍历器
-
entries()：返回键值对的遍历器
-
forEach()：使用回调函数遍历每个成员
Set的遍历顺序就是插入顺序，这个特性有时非常有用，比如使用Set保存一个回调函数列表，调用时就能保证按照添加顺序调用。
应用场景：
// 数组去重let arr = [1，2，2，3];let unique = [...new Set(arr)];// orfunction dedupe(array) {return Array.from(new Set(array));}let a = new Set([1, 2, 3]);let b = new Set([4, 3, 2]);// 并集let union = new Set([...a, ...b]);// Set {1, 2, 3, 4}// 交集let intersect = new Set([...a].filter(x => b.has(x)));// set {2, 3}// 差集let difference = new Set([...a].filter(x => !b.has(x)));// Set {1}
类似于对象，也是键值对的集合，各种类型的值（包括对象）都可以当作键。Map结构提供了“值与值”的对应，是一种更完善的Hash结构实现。
实例属性和方法:
-
size属性: 返回Map结构的成员总数。
-
set(key, value): set方法设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键,set方法返回的是Map本身，因此可以采用链式写法。
-
get(key) : get方法读取key对应的键值，如果找不到key，返回undefined。
-
has(key) : has方法返回一个布尔值，表示某个键是否在Map数据结构中。
-
delete(key) : delete方法删除某个键，返回true。如果删除失败，返回false。
-
clear() : clear方法清除所有成员，没有返回值。
遍历方法和set类似，Map结构转为数组结构，比较快速的方法是结合使用扩展运算符（...）：
let map = new Map([[1, 'one'],[2, 'two'],[3, 'three'],]);[...map.keys()]// [1, 2, 3][...map.values()]// ['one', 'two', 'three'][...map.entries()]// [[1,'one'], [2, 'two'], [3, 'three']][...map]// [[1,'one'], [2, 'two'], [3, 'three']]
new Map([[true, 7], [{foo: 3}, ['abc']]])// Map {true => 7, Object {foo: 3} => ['abc']}
function strMapToObj(strMap) {let obj = Object.create(null);for (let [k,v] of strMap) {obj[k] = v;}return obj;}let myMap = new Map().set('yes', true).set('no', false);strMapToObj(myMap)// { yes: true, no: false }
function objToStrMap(obj) {let strMap = new Map();for (let k of Object.keys(obj)) {strMap.set(k, obj[k]);}return strMap;}objToStrMap({yes: true, no: false})// [ [ 'yes', true ], [ 'no', false ] ]
—总结—
总的来说，虽然支持es6的情况到目前还不是很乐观，但es6的新语法特性让前端和后端的差异越来越小了，这是一个新时代的开始，我们必须要了解这些新的前沿知识，才能跟上时代的步伐。
HTTP状态码你还记得哪些？举几个例子吧！
你知道如何自定义call和bind吗？（内附代码）
了解函数防抖、节流吗？还不进来看看？
百度二面：你了解instanceof原理吗？
发表评论