笔记--ES6

1. ES6新增语法

1.1 let

ES6新增的用于声明变量的关键字。
	-let声明的变量只在所处于的块级有效。
	-不存在变量提升。
	-暂时性死区。
注意：使用let声明的变量才有块级作用域，使用var声明的的变量不具备块级作用域特性。

if(true){
	let e = 777;
	var str = 'abc';
}
console.log(str);  // abc
console.log(e);  // e is not defined
// 不存在变量提升
conslole.log(o); // o is not defined
var o = 999;
// 暂时性死区
var num = 999;
if(true){
	console.log(num); // Cannot access 'num' before initialization 暂时性死区
	let num = 203;
}

1.2 const

作用：声明变量，常量就是值(内存地址)不能变化的量。
	-具有块级作用域。
	-声明变量时必须赋值。
	-常量赋值后，值不能修改。

1.3 let，const，var 的区别

1.4. 解构赋值

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

1.4.1 数组解构

        // 数组解构
        let arr = [1, 2, 3];
        let [a, b, c] = arr;
        console.log(a);
        console.log(b);
        console.log(c);
        // 如果解构不成功，变量的值就为undefined
        let [z, x, v, d] = arr;
        console.log(d); // undefined

        let [p] = arr;
        console.log(p); // 1

1.4.2 对象解构

        // 对象解构
        // 对象解构允许我们使用对象的名字匹配对象的属性，匹配成功
        // 将对象属性的值赋值给变量
        let person = {
            uname: '张三',
            age: 231
        };
        let {
            uname,
            age,
            un
        } = person;
        console.log(uname); // 张三
        console.log(age); // 231
        console.log(un); // undefined

        // 对象解构的另一种方法
        let {
            uname: u,
            age: ag
        } = person;
        console.log(u); // 张三
        console.log(ag); // 231

1.5 箭头函数

        const fn = () => {
            console.log(666);
        }
        fn();
        // 如果函数题里面只有一句代码，大括号也可以省略，返回计算结果
        const sum = (n1, n2) => n1 + n2;
        console.log(sum(90, 9));
        // 如果形参只有一个，可以省略小括号
        const f = v => v;
        console.log(f(2)); // 2

        // 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this
        const obj = {
            uname: '张三'
        };

        function fun() {
            console.log(this); // 张三
            return () => {
                console.log(this); // 张三
            }
        }
        const resFn = fun.call(obj);
        resFn();

经典问题：
        var age = 100;
        var obj = {
            age: 33,
            say: () => {
                console.log(this.age); // 100
            }
        }
        obj.say();

1.6 剩余参数

        // 剩余函数
        const sum = (first, ...arg) => {
            let total = 0;
            console.log(first);
            arg.forEach((e) => {
                total = total + e;
            });
            return total;
        }
        console.log(sum(1, 2, 3));

        // 剩余参数和解构配合使用
        const obj = ['山三', '李四', '王麻子'];
        const [str, ...str2] = obj;
        console.log(str); // 山三
        console.log(str2); // 李四，王麻子

2. ES6 的内置对象扩展

2.1 Array 的扩展方法

2.1.1 扩展运算符(展开语法)

合并数组

将类数组或可遍历对象转换为真正的数组Array.from()

        let arrlike = {
            '0': '张三',
            '1': '李四',
            '2': '王麻子',
            length: 3
        }
        let arr = Array.from(arrlike, item => item);
        console.log(arr);

实例方法 find()

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

        // 实例方法 find()
        let obj = [{
            id: 1,
            uname: '张三'
        }, {
            id: 2,
            uname: '李四'
        }];
        let o = obj.find((item, index) => {
            return item.id == 1;
        });
        console.log(o);

实例方法：findIndex()

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

        // 实例方法：findIndex()
        let obj = [{
            id: 1,
            uname: '张三'
        }, {
            id: 2,
            uname: '李四'
        }];
        let o = obj.findIndex((item) => item.id == 1);
        console.log(o);

实例方法：includes()

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

2.2 String 的扩展方法

模板字符串

        // 模板字符串
        let uname = '张三';
        let str = `${uname}的模板字符串`;
        console.log(str);

        // 模板字符串可以换行
        let str = {
            uname: '张三',
            age: 9000,
            sex: '男'
        };
        let div =
            `
            <div>
                <span>${str.uname}</span>
                <span>${str.age}</span>
                <span>${str.sex}</span>
            </div>`;
        console.log(div);

        // 模板字符串可以调用函数
        function say() {
            return '你就是一个大傻逼'
        }
        let sy = `${say()},小丑竟是我自己`;
        console.log(sy);

实例方法：startsWith() 和 endsWith()

	-startsWith(): 表示参数字符串是否在原字符串的头部，返回布尔值。
	-endsWith(): 表示字符串是否在原字符串的尾部，返回布尔值。

        // 实例方法：startsWith() 和 endsWith()
        let str = 'hello world!';
        console.log(str.startsWith('hello')); // true
        console.log(str.endsWith('!')); // true

实例方法：repeat()

3. Set 数据结构

ES6 新增了新的数据结构Set。它类似数组，但是成员的值是唯一的，没有重复的值。

        let arr = [1, 23, 2, 4, 5, 5, 6, 3, 3, 3];
        let newArr = new Set(arr);
        // set增加值
        newArr.add(232323).add(44);
        console.log(...newArr); //1 23 2 4 5 6 3 232323 44

        // 删除值
        newArr.delete(23);
        console.log(...newArr); //20 1 2 4 5 6 3 232323

        // 查找值
        newArr.has(2);
        console.log(newArr.has(2)); // true
        
        // 清空所有值
        newArr.clear();

遍历Set