JavaScript进阶 - ES6

---

一、ES6的新增语法

let : let声明的变量只在所处于的块级有效
使用let关键字声明的变量具有块级作用域。
使用var声明的变量不具备块级作用域特性。

<script>
    if (true) {
        let b = 20;
        console.log(b); // 20
    }
    console.log(b);  // b is not defined
</script>

使用let关键字声明的变量不存在变量提升

<script>
    console.log(b);  // Cannot access 'b' before initialization
    let b = 10;
</script>

使用let关键字声明的变量存在暂时性死区
在块级作用域下，使用let关键字声明的变量会被整体绑定到块级作用域，不受外部代码影响。

<script>
    var tmp = 123;
    if (true) {
        tmp = 'abc';  // Cannot access 'tmp' before initialization
        let tmp;
    }
</script>

练习题

<script>
    var arr = [];
    for (var i = 0; i < 2; i++) {
        arr[i] = function () {
            console.log(i);
        }
    }
    arr[0]();  // 2
    arr[1]();  // 2
</script>

<script>
    var arr = [];
    for (let i = 0; i < 2; i++) {
        arr[i] = function () {
            console.log(i);
        }
    }
    arr[0]();  // 0
    arr[1]();  // 1
</script>

二、const

声明常量，常量就是值不能变化的量

使用const声明的常量具有块级作用域

<script>
    if (true) {
        const a = 10;
        console.log(a);  // 10
    }
    console.log(a);  // a is not defined
</script>

声明常量时必须赋值

<script>
    const a;  // Missing initializer in const declaration
    const b = 10;
</script>

常量赋值后，值不能修改

<script>
    const a = 10;
    const a = 20;  //  Identifier 'a' has already been declared
</script>

<script>
    const ary = [100, 200];
    // 并没有更改ary常量在内存中的地址。
    ary[0] = 101;
    console.log(ary);  // [101, 200]
    ary = ['a', 'b']  // Assignment to constant variable.
</script>

三、解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构

数组解构

<script>
    let [a, b, c] = [1, 2, 3]
    console.log(a);  // 1
    console.log(b);  // 2
    console.log(c);  // 3
</script>

let [a, b, c] = [1, 2, 3] 中的 let [a, b, c] 代表解构，中括号中写的实际是变量的名字。
中括号中的变量和右边数组里面的值是一一对应的。

对象解构

按照一定模式，从数组中或对象中提取值，将提取出来的值赋值给另外的变量。

<script>
    let person = { name: 'zhangsan', age: 20 };
    let { name, age } = person;
    console.log(name);  // zhangsan
    console.log(age);  // 20
</script>

四、箭头函数

() => {}

()里面放置形参，{}里面放函数体
通常我们会将箭头函数赋值给一个变量

 <script>
    const fn = () => {
        console.log("123");
    }
    fn();  // 123
</script>

在箭头函数中，如果函数体中只有一句代码，并代码的执行结果就是函数的返回值，函数体大括号可以省略

<script>
    const sum = (n1, n2) => n1 + n2;
    const result = sum(2, 3);
    console.log(result);  // 5
</script>

箭头函数中的this

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this
也就是说箭头函数定义在哪儿，this就指向哪儿。

<script>
    const obj = { name: '张三' };
    function fn() {
        console.log(this);
        return () => {
            console.log(this);
        }
    }
    const resFn = fn.call(obj);
    resFn(); // {name: "张三"}
             // { name: "张三" }
</script>

五、剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

<script>
   	function sum(first, ...args) {
        console.log(first);  // 10
        console.log(args);  // [20, 30]
    }
    sum(10, 20, 30);
</script>

六、扩展运算符

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

<script>
    let ary = [1, 2, 3];
    console.log(...ary);  // 1 2 3
</script>

将伪数组转换为真正的数组

<script>
    var divs = document.querySelectorAll("div");
    console.log(divs);  // NodeList(5) [div, div, div, div, div]
    var ary = [];
    ary.push(...divs);
    console.log(ary);  // (5) [div, div, div, div, div]
</script>

七、Array的扩展方法

find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

<script>
    let ary = [{
        id: 1,
        name: '张三'
    }, {
        id: 2,
        name: '李四'
    }]
    let target = ary.find((item) => item.id == 2);
    console.log(target);
</script>

findIndex()

用于找出第一个符合条件的数组成员的位置。如果没有找到返回-1
用法和find方法一样

includes()

表示某个数组是否包含给定的值，返回布尔值。

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false

八、String的扩展方法

模板字符串

使用反引号定义

let name = `zhangsan`;

模板字符串中可以解析变量

<script>
    let name = `zhangsan`;
    let say = `wo shi ${name}`;
    console.log(say);  // wo shi zhangsan
</script>

模板字符串可以换行

<script>
let result = {
    name: "张三",
    age: 20
}
let html = `
    <div>
        <span>${result.name}</span>    
        <span>${result.age}</span>
    </div>
`
console.log(html);
</script>

模板字符串中可以调用函数

<script>
    let result = {
        name: "张三",
        age: 20
    }
    const sayHello = function () {
        return "hello";
    }
    let greet = `${sayHello()}${result.name}`;
    console.log(greet);  // hello
</script>

startsWith() 和 endsWith()

startsWith() ：表示参数字符串是否在原字符串的头部。
endsWith() ：表示参数字符串是否在原字符串的尾部。

<script>
    let str = 'Hello world!';
    console.log(str.startsWith('H'));  // true
    console.log(str.endsWith('!'));  // true
</script>

repeat()方法

repeat方法表示将原字符串重复n次，返回一个新字符串

<script>
    var x = 'x'.repeat(2);
    console.log(x);  // xx
</script>

九、Set数据结构

Set类似于数组
和数组的不同是里面的成员都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成Set数据结构

const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化。

<script>
    const set = new Set([1, 2, 3, 4, 5, 4]);
    console.log(set);  // {1, 2, 3, 4, 5}
</script>

Set的实例方法

• add(value) ：添加某个值，返回Set结构本身
• delete(value) ：删除某个值，返回一个布尔值，表示是否删除成功
• has(value) ：返回一个布尔值，表示该值是否为Set的成员
• clear() ：清除所有成员，没有返回值

<script>
    const s = new Set();
    s.add(1).add(2);
    console.log(s);  // {1, 2}
    s.delete(1);
    console.log(s);  // {2}
    console.log(s.has(2));  // true
</script>

遍历set

s.forEach(value => console.log(value));

<script>
    const s1 = new Set([1, 2, 3, 4, 5]);
    s1.forEach(value => console.log(value));  // 1 2 3 4 5
</script>