ES6新增特性 --语法篇（一） --- 语法特性

1、语法特性

1.1、变量

• let
• const

特性：

1. 无法重复声明

let a = "1";
let a = "2"  // 报错，重复声明

2. const 是定义常量的，无法修改

const a = 1;
a = 2;   // 报错，常量再分配错误

/* 但是因为function、Array、Object是引用值，不会报错 */
const b = {name: "duck"};
b.name = "pig"  // 不会报错

3. 具有块级作用域

最著名的闭包问题，就是因为var没有属于自己的块级作用域（函数级作用域）才会出现的，所以需要使用一个函数来包裹它，给它一个块级作用域

let btns = document.getElementsByTagName("button");
 for(var i = 0; i < btns.length; i++) {
     (function (i){
         btns[i].onclick = function() {
             console.log(i)
         };
     })(i)
 }

但如果使用有块级作用域的变量let，就不会出现这个问题了

let btns = document.getElementsByTagName("button");

for(let i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        console.log(i)
    };
}

1.2、解构赋值

作用：

方便取出 json、Array、Object的值

比较适合取出一个大的结构的一个你要的数据，

经常是在网络请求ajax获取里面的值

使用：

1. 两边的结构必须一样
2. 右边必须是个（对象）
3. 赋值和解构同时完成

/* 使用方法 */

// json = {a: 12, b:5}
let { a, b } = json

// array
array = [12, 5, 8];
let [ a, b, c ] = array;

1.3、箭头函数

注意：

箭头函数和普通函数除了写法不同，还有就是this的不同

箭头函数的this：**来自函数作用域链，它的取值遵循普通普通变量一样的规则，在函数作用域链中一层一层往上找。**换句话说，箭头函数的this，就是最近作用域的this

使用：

1. 如果只有一个参数，() 可以不写
2. 如果只有一个语句，并且是return，{} 也可以不写

let array = [12, 8, 37, 26, 9];

 /* 使用原生 函数 */
 // array.sort(function(a, b) {
 //     return a - b
 // });

/* 使用箭头函数 */
array.sort((a, b) => a - b)

console.log(array)

1.4、参数拓展 …

1. 参数收集

/*将剩余的参数全部放进c里面 */
function show(a, b, ...c) {
   console.log(a, b, c) // 1, 2, Array(5)
}

show(1, 2, 3, 4, 5, 6, 7) 

2. 数组展开

let arr = [];
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [6, 7, 8, 9];
arr = [...arr1, ...arr2];
console.log(...arr);

3. json展开

let json1 = {
    a: 1,
    b: 2
}
let json2 = {
    ...json1,
    c: 3
}
console.log(json2)

1.5、模板字符串``

模板字符串是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能

在模板字符串里面使用 ${} 插入变量值

let name = 'duck';
console.log(`我的名字叫${name}`);