ES 6常用api

let和const命令

在es6中可以使用let声明变量，用法类似var

块级作用域

let声明的变量，只在let命令所在的代码块内有效

{
    let a = 10;
    var b = 10;
}
console.log(a); //a is not defined
console.log(b); //10

不存在变量提升

let所声明的变量一定在声明后使用，否则报错

var命令会发生变量提升现象，即变量可以在声明之前使用，值为undefined。

//var的情况
console.log(a);//输出undefined
var a = 30;


//let的情况
console.log(a);// 报错ReferenceError
let a = 30;

不允许重复声明

let a = 10;
let a = 20;
console.log(a); //报错

function func(a) {
  let a; // 报错
}

块级作用域解决循环计数问题

var arr = []
for(var i = 0; i < 10; i++){
    arr[i] = function(){
        return i;
    }
}
console.log(arr[5]());//10

变量i只用来控制循环，但是循环结束后，它并没有消失，用于变量提升，泄露成了全局变量。

//解决方式一：使用闭包
var arr = []
for(var i = 0; i < 10; i++){
    arr[i] = (function(n){
        
        return function(){
            return n;
        }
    })(i)
}
//解决方式二：使用let声明i

var arr = []
for(let i = 0; i < 10; i++){
    arr[i] = function () {
        return i;
    }
}

const基本用法-声明只读的常量

const只声明不赋值，就会报错。

块级作用域
暂时性死区
不可重复声明

const a = 10;
a = 20;//报错

const b; //报错

在默认情况下用const,而只有你在知道变量值需要被修改的情况下使用let

模板字符串

通过模板字符串识别js代码，解决传统的 JavaScript 语言输出繁琐的问题

let htmlTel = `<ul>
    <li>
    <p>id:${id}</p>
    <p>name:${name}</p>
    </li>
</ul>`;

解构赋值

解构赋值是对赋值运算符的一种扩展。它通常针对数组和对象进行操作。

数组解构

ES6允许我们这样写:

let [a,b,c] = [1,2,3];

/*相当于
let a = 1;
let b = 2;
let c = 3;
*/

如果解构不成功，变量的值就等于undefined

let [foo] = [];
let [bar, foo] = [1];
//foo的值都会等于undefined

对象解构

let node = {
    type:'text',
    name:'hhh'
}

let {type,name} = node;
console.log(type,name)//text hhh

let obj = {
    a:{
        name:'张三'
    },
    b:[],
    c:'hello world'
}
//可忽略 忽略b,c属性
let {a} = obj;
//剩余运算符 使用此法将其它属性展开到一个对象中存储
let {a,...res} = obj;
console.log(a,res);

默认值

let {a,b = 10} = {a:20};

用途

交换变量的值

let x = 1;
let y = 2;
let [x,y] = [y,x];

从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

提取JSON数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;
//对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者
console.log(id, status, number);
// 42, "OK", [867, 5309]

函数的扩展

带参数默认值的函数

ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法

function log(x,y){
    y = y || 'world';
    console.log(x,y);
}
log('hello');//hello world
log('hello','china') //hello china
log('hello','')//hello world

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

默认的表达式可以是一个函数

function getVal(val) {
    return val + 5;
}
function add2(a, b = getVal(5)) {
    return a + b;
}
console.log(add2(10));

rest参数

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
 
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

上面代码的add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数。

箭头函数

ES6允许使用箭头=>定义函数

let f = v=>v;
//等同于
let f = function(v){
    return v;
}

// 有一个参数
let add = value => value;

// 有两个参数
let add = (value,value2) => value + value2;

let add = (value1,value2)=>{
    
    return value1 + value2;
} 
// 无参数
let fn = () => "hello world";

let doThing = () => {

}
//如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
let getId = id => ({id: id,name: 'mjj'}) //注意
let obj = getId(1);

使用注意点

没有this绑定

let PageHandler = {
    id:123,
    init:function(){
        document.addEventListener('click',function(event) {
            this.doSomeThings(event.type);
        },false);
    },
    doSomeThings:function(type){
        console.log(`事件类型:${type},当前id:${this.id}`);
    }
}
PageHandler.init();

//解决this指向问题
let PageHandler = {
    id: 123,
    init: function () {
        // 使用bind来改变内部函数this的指向
        document.addEventListener('click', function (event) {
            this.doSomeThings(event.type);
        }.bind(this), false);
    },
    doSomeThings: function (type) {
        console.log(`事件类型:${type},当前id:${this.id}`);
    }
}
PageHandler.init();

let PageHandler = {
    id: 123,
    init: function () {
        // 箭头函数没有this的指向，箭头函数内部的this值只能通过查找作用域链来确定

        // 如果箭头函数被一个非箭头函数所包括，那么this的值与该函数的所属对象相等，否则 则是全局的window对象
        document.addEventListener('click', (event) => {
            console.log(this);
            this.doSomeThings(event.type);
        }, false);
    },
    doSomeThings: function (type) {
        console.log(`事件类型:${type},当前id:${this.id}`);
    }
}
PageHandler.init();

箭头函数中没有arguments对象

var getVal = (a,b) => {
    console.log(arguments);
    return a + b;
}
console.log(getVal(1,2)); //arguments is not defined

箭头函数不能使用new关键字来实例化对象

let Person = ()=>{}
let p1 = new Person();// Person is not a constructor