es6小结

模板字符串
字符串拼接不需要+，而是用``,变量用${变量名}表示

function makeListHTML(arr) {
    return `<ul>${arr.map(function(item){
            return `<li><a href="${item.href}">${item.text}</a></li>`
        }).join('')}</ul>`
}

Tips:模板字符串里的变量的值取模板字符串定义时，变量的值，以后变量的值改变，模板字符串的值并不会变

let 和 var
let为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。

var name = 'zach'
while (true) {
    var name = 'obama'
    console.log(name)  //obama
    break
}
console.log(name)  //obama

var name = 'zach'
while (true) {
    let name = 'obama'
    console.log(name)  //obama
    break
}
console.log(name)  /zach

函数默认参数

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}
const p = new Point();

解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

let dog = {type: 'animal', hobbies:['eat','walk','sleep']}
let {type:a,hobbies:[,b,c]} = dog
console.log(a, b,c)   //animal walk sleep

解构可以和默认参数一起使用

function average({x=0,y=1}={}) {
    return `${x}和${y}平均值为${(x+y)/2}`;
}
average();//0和1平均值为0.5；
average({x:3,y:4})//3和4平均值为3.5
// 参数为对象

箭头函数

var f = function(v) {
  return v;
}
var f = v=>v;
var result = values.sort((a, b) => a - b);

() => ... // 函数值内容只要一行，可省略 {}
() => { ... } // 零个参数用 () 表示；
x => { ... } // 一个参数可以省略 ()；
(x, y) => { ... } // 多参数不能省略 ()

扩散操作符和剩余操作符（...）

扩散操作符
用扩散操作符可以方便做的数组，对象的复制，合并操作等

var arr = [1, 2, 3]
// 复制数组
var arr2 = ...arr 
// 数组合并
var arr3 = [0, ...arr, 4] // [0, 1, 2, 3, 4]
// 对象合并
var obj = {a:1,c:4}
var obj2 = {b:2, ...obj} // {b:2,a:1,c:4}

剩余操作符
用于获取函数的多余参数，这样就不需要使用 arguments 对象了

//写一个填充数组内容的函数 fillArray。第一个参数是要填充的数组，其余参数是填充的内容
var fillArray=(arr, ...values)=>arr.push(...values);
var arr = [1,2,3]
fillArray(arr, 3, 4, 5)
arr // [1,2,3,3, 4, 5]

Tips:剩余操作符之后不能再有其他参数（即只能是最后一个参数）

对象拓展

Object.assign(target,...source)
用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象(target)

//相同属性会被合并
var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, f: 2 ,d:4};
var o3 = { c: 3 };
var o4 = {a:4,g:5};
var obj = Object.assign({}, o1, o2, o3);
//obj={a: 1, b: 2, c: 3, f: 2, d: 4}
Object.assign(o4, o1);
//o4={a: 1, g: 5, b: 1, c: 1}

Object.is()
Object.is方法用来判断两个值是否相等，和 === 类似，比较时不会进行类型转换。

不同点是
+0 === -0 //true
Object.is(+0, -0) // false
NaN === NaN // false
Object.is(NaN, NaN) // true

es6小结

推荐阅读更多精彩内容