ES6常见API

let与const

let关键字，用来声明变量，它的用法类似于var。

let不允许重复声明变量；

var a = 1;
var a = 2;
console.log(a);

let b = 1;
let b = 2;
console.log(b);//报错

let声明变量仅在块级作用域内有效；

for (var i = 0; i < 10; i++) {
    console.log(i);
};
alert(i);

for (let v = 0; v < 10; v++) {
    console.log(v);
}
alert(v);//报错

不能通过let声明和形参相同的变量；

function test(a) {
    let a = 123;//报错
    console.log(a);
}
test(456);

let声明变量不会提升；

alert(a); 
var a = 2;

alert(b); 
let b = 2;//报错

注意：let声明的变量一定要在声明之后使用，否则报错。
暂时性死区TDZ
ES6规定在某个区块中， 一旦用let或const声明一个变量，那么这个区块就变成块级作用域，用let或const声明的变量就“绑定”这个区域，不再受外部的影响。 在该变量声明之前不可以用，在语法上我们叫这种情况为：暂时性死区 (temporal dead zone，简称 TDZ)。

var v = 1;
if (true) {
    console.log(v);
    let v = 2;//形成暂时性死区
}
console.log(v);

上面代码中，存在全局变量v，但是块级作用域内let又声明了一个局部变量v，导致后者绑定这个块级作用域，所以在let声明变量之前，使用v会报错。
const关键字，用来声明一个只读的常量。
const与let类似，但是，const常量一旦声明，常量将不能重新赋值！

const AGE = 18;
alert(AGE);
AGE = 20;
alert(AGE);

意味着，const一旦声明，就必须立即初始化，不能留到以后赋值！
const AGE;

本质：const实际上保证的，并不是值不能改变，而是指向的那个内存地址不能改变。

const FOO = {name: 'xm'};
FOO.age = 18;
console.log(FOO.age);
FOO = {name: 'xh'};

注意：为了和变量区分，一般常量用大写字母。
如：const PI = 3.14;

arrow functions(箭头函数)

定义：( 形参 ) => { 函数体 }

var box = document.getElementById('box');
box.onclick = function () { // ES5
    console.log(this);
}
box.onclick = () => { // ES6
    console.log(this);//window
}

用箭头函数来写比原来的function写法要简洁很多（针对匿名函数使用）。

var reflect = function (value){ //ES5
    return value;
};
let reflect = value => value; //ES6

箭头函数与传统的JavaScript函数主要区别在于以下几点：
1.对 this 的关联。函数内部的 this 指向，取决于箭头函数定义的位置，而非箭头函数的调用对象。

var name = 'xh';
var obj = {
    name: 'xm',
    say: () => {
        alert(this.name);//xh
    }
}
obj.say();

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

var box = document.getElementById('box');
box.onclick = function () {
    setTimeout(() => {
        console.log(this);//box
    },2000);
}

2.new 不可用。箭头函数不能使用 new 关键字来实例化对象，不然会报错。

var Test = function () {};
var obj = new Test();
console.log(obj);

var Test = () => {};
var obj = new Test(); //Test is not a constructor

3.this 不可变。函数内部 this 不可变，在函数体内整个执行环境中为常量。

var obj1 = {
    name: '隔壁王叔叔',
    age: 33
}
setTimeout(() => {
    console.log(this);
}.bind(obj1),1000); //报错

4.没有arguments对象。更不能通过arguments对象访问传入参数。

function fn(){
    console.log(arguments[0]);
    console.log(arguments[1]);
}
fn(1,2);


var fn = () => {
    console.log(arguments[0]); //报错
}
fn(3);

template string(（字符串模板）

ES6中字符串模板使用反引号 表示，字符串模板中可以解析变量和函数，使用 ${ } 解析

var sname = "小错";
function fnAge(){
    return 18;
}
var str = `大家好，我叫${sname},我今年${fnAge()}岁了`;
alert( str );

字符串模板非常有用，当我们要插入大段的html内容到文档中时，传统的写法非常麻烦

var box = document.getElementById('box');
var val1 = 11, val2 = 22, val3 = 33;
box.innerHTML = '<ul><li>'+val1+'</li><li>'+val2+'</li><li>'+val3+'</li></ul>';
box.innerHTML = '<ul>'+
                                '<li>'+val1+'</li>'+
                                '<li>'+val2+'</li>'+
                                '<li>'+val3+'</li>'+
                            '</ul>';

使用ES6字符串模板：

box.innerHTML = `
    <ul>
        <li>${val1}</li>
        <li>${val2}</li>
        <li>${val3}</li>
    </ul>
`;

Destructuring（解构赋值）

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

var x = 10 , y = 20 , z = 30;

var cat = 'ken';
var dog = 'lili';
var zoo = {cat: cat, dog: dog};
console.log(zoo);

用ES6完全可以像下面这么写：

var [x,y,z] = [10,20,30];
var {sname,age} = {age : 10, sname : "xm" }
console.log( sname );
console.log( age );

let cat = 'ken';
let dog = 'lili';
let zoo = {cat, dog};
console.log(zoo);

反过来可以这么写：

let dog = {type: 'animal', many: 2};
let { type, many} = dog;
console.log(type);
console.log(many);

解构赋值可以作用在函数的参数上，让函数参数的值传递顺序改变

function fn( {sname,age} ){
return `大家好我叫${sname}，我今年${age}岁了`;
}
console.log( fn( {age:23,sname:"jack"} ) );

函数的默认参数

// 基本用法
function first(x = 1, y = 2) {
    console.log("x："+x ,"y："+ y);
}
first(); // 'x:1 y:2'
first(100); // 'x:100 y:2'

// 与解构赋值结合
function second({x, y = 2}) {
    console.log("x："+x ,"y："+ y);
}
second({}); // 'x:undefined y:2'
second({x:100}); // 'x:100 y:2'
second({x:100,y:200}); // 'x:100 y:200'

// 这种写法在传入多个形参时可以不按顺序写入，会方便很多，但有个问题，
// 没有默认值时，每次都要传“{}”就会显得很麻烦，于是我们可以再设置一次默认值。

// 双重默认值
function third({x = 1 ,y = 2} = {}) {
    console.log("x："+x ,"y："+ y);
}
third(); // 'x:00 y:2'
third({x:100,y:200}); // 'x:100 y:200'
third({x:100}); // 'x:100 y:2'

includes()方法

数组的 includes() 方法用来判断一个数组是否包含一个指定的值，返回布尔值
arr.includes(value,index);
value 要查找的元素值
index 从 index 索引处开始查找 value，默认为 0，可选

字符串的 includes() 方法用于判断一个字符串是否包含一个指定的值，返回布尔值
str.includes(searchString,index);
searchString 要搜索的字符串
index 从 index 索引处开始搜索searchString ，默认为 0，可选

Array.from( )

Array.from：将含有length属性，以数字为key的对象、类数组转成真正的数组。
Array.from(obj, map函数);
第一个参数为要转换的对象，第二个参数为一个函数，可选，类似map函数。
map函数 : 遍历数组–操作数组–返回数组

var arr = [1,2,3,4,5];
var newArr = arr.map( (item) => { return item*2 } );
console.log( newArr );

类数组元素集合：

var lis = document.getElementsByTagName("li");
console.log(lis);
lis.push('abc');
console.log(lis);

将lis集合（类数组）转成 数组：

lis = Array.from(lis);
console.log( lis )
lis.push('abc');
console.log(lis);

将对象转成 数组：

var obj = {
    "0" : 10 ,
    "1" : 20 ,
    "2" : 30 ,
    "length" : 3
};
var arr = Array.from( obj );
console.log( arr );

第二个参数是一个匿名函数 实现的是map功能：

var newArr = Array.from( obj , (item) => { return item*2; } )
console.log( newArr );

三个点（…）

扩展运算符用三个点号表示，其功能是把数组或类数组对象（部署了iterator接口）展开成一系列用逗号隔开的参数序列。

console.log(...[1, 2, 3]);
console.log(1, ...[2, 3, 4], 5);

var lis = document.getElementsByTagName("li");
console.log([...lis]);

其他用法：

var arr1 = [1,2];
var arr2 = [3,4,5];
function addItems(arr, ...items) {
    arr.push(...items);
};
addItems(arr1,...arr2);  =>  addItems(arr1,3,4,5);
console.log(arr1);

arr.push(…items) 和 addItems(arr1,…arr2) 函数调用都使用了扩展运算符将数组变为参数序列
注意这行：function addItems(arr, …items) 这里的三个点并不是扩展运算符，而是 rest运算符

rest运算符也是三个点，其功能与扩展运算符恰好相反，把逗号隔开的参数序列组合成一个数组

var arr = [1,2,3];
function fn(...args) {// rest运算符 组合数组
console.log(args);
};
fn(...arr);// 扩展运算符 展开数组
console.log(...arr);

Object扩展

Object.getOwnPropertySymbols(obj)
方法会返回当前对象的所有 Symbol 属性，返回数组

Object.setPrototypeOf(obj1,obj2)
方法用来设置一个对象的 prototype 对象，与Object.getPrototypeOf 方法配套

es5 实现原型链接
var obj1 = Object.create(obj2); // 创建一个空对象,并把该对象的原型链接到obj2对象

es6 实现原型链接
Object.setPrototypeOf(obj1,obj2); // 把对象obj1的原型链接到obj2

Object. getOwnPropertyDescriptors(obj)
获取指定对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。

var obj2 = {
    name: 'xm',
    age: 23
}
var attrObj1 = Object.getOwnPropertyDescriptor(obj2,'name'); // ES5获取一个属性的描述符
var attrObj2 = Object. getOwnPropertyDescriptors(obj2); // 获取所有自身属性的描述符
console.log(attrObj1);
console.log(attrObj2);
{
    configable: true,
    enumerable: true,
    writeable: true,
    value: 'xm'
}

Object.values(obj)
方法返回一个数组，成员是参数对象自身的所有可枚举属性的值（与Object.keys配套）
var obj = { foo: ‘abc’, baz: 123 };
console.log(Object.values(obj));

Object.entries(obj)
方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。
const obj = { foo: ‘bar’, baz: 42 };
Object.entries(obj); // [ [“foo”, “bar”], [“baz”, 42] ]

Object.entries方法可以将对象转为真正的Map结构
const obj = { foo: ‘bar’, baz: 42 };
const map = new Map(Object.entries(obj));
console.log(map); // Map { foo: “bar”, baz: 42 }

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

var obj1 = {a: 1, b: 2, c: {d: 4, e: 5}};
var obj2 = Object.assign({}, obj1);
console.log(obj1.c === obj2.c); // ture

Object.assign 方法是一种对象浅拷贝，如果对象属性是引用类型，只能是拷贝引用地址

对象深拷贝

var obj1 = {a: 1, b: 2, c: {d: 4, e: 5}};
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj1.c === obj2.c); // false

jQuery.extend(boolean,target,source);

Object.is(val1,val2)
方法用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。
不同之处只有两个：一是: +0不等于-0，二是: NaN等于自身。

+0 === -0 //true
NaN === NaN // false

{} === {} // false
Object.is({}, {}); // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

**

若需要面试指导可私聊哈，包拿offer～

**