JavaScript高阶之ES6day05

---

-----------------------2020.12.20开始 为啥换老师了呢呜呜----------------------------------

什么是ES6

其实就是一个版本，泛指，是ES5的延续

为什么使用ES6呢？

变量提升特性增加了程序运行时的不可预测性；
语法过于松散，实现相同的功能不同的人会写不同的代码，为了代码规范化；

ES6新增语法

let关键字

• let声明变量只在所处的块级（{}里面的内容）有效
• 防止循坏变量变成全局变量
• let声明的变量不存在变量提升
• 暂时性死区，声明的变量和块级域绑定在一起

var tmp = 123;
        if (true) {
            console.log(tmp); //也会报错暂时性死区
            let tmp = 'abc';
        }

例子

<script>
        var arr = [];
        for (var i = 0; i < 2; i++) {
            //给arr[i]一个函数但是并没有执行这个函数
            arr[i] = function() {
                console.log(i);
            }
        };
        //调用数组中的函数，下面函数执行时，循坏已经结束，i又是全局作用域所以是2
        arr[0](); //2
        arr[1](); //2
    </script>

const 声明常量

• 具有块级作用域
• const声明常量必须赋值const PI = 3.14;
• 常量复制后，值不能修改；但是复杂类型里面的值可以更改；

const ary = [100, 200];
        ary[0] = 123; //允许
        ary = [1, 2]; //不允许
        console.log(ary);

let const var 区别

• var 作用域为该语句所在的函数内，存在变量提升；
• let 作用域为该语句所在的代码块内，不存在变量提升
• const 不能修改该常量的值，但是复杂数据类型可以更改内部的值；
  

什么时候使用这三个关键字 const效率比let高

解构赋值

1. 数组解构

let ary = [1, 2, 3];
        let [a, b, c, d, e] = ary;
        console.log(a); //1
        console.log(b); //2
        console.log(c); //3
        console.log(d); //undefined
        console.log(e); //undefined

2. 对象解构

<script>
        //对象解构允许使用变量的名字匹配对象的属性 
        let person = {
            name: 'zhangsan',
            age: 12,
            sex: '男'
        };
        let {
            name,
            age,
            sex
        } = person;
        console.log(name); //zhangsan
        console.log(age); //12
        console.log(sex); //男
    </script>

下面代码里面的myName才是变量名

let {
            name: myName
        } = person;
        console.log(name);
        console.log(myName);

箭头函数

• 箭头函数用来简化函数定义语法的

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

• 函数体中只有一句代码，且代码执行结果就是返回值，可以省略大括号

const sum = (num1, num2) => num1 + num2;
        const result = sum(1, 3);
        console.log(result);

• 形参只有一个，可以省略小括号

const fn = (v) => {
            alert(v);
        };
        fn(22);

以上代码可以替换为：

const fn = v => alert(v);
        fn(22);

• 箭头函数中的this，指向的是函数定义位置的上下文的this

function fn() {
            console.log(this);
            return () => {
                console.log(this); //箭头函数this指向定义这个函数的位置(fn函数里面)的this
            }
        };
        const obj = {
            name: 'zhangsan'
        };
        const resFn = fn.call(obj);
        resFn(); //输出两个obj

• 但是需要注意的是obj对象不能产生作用域，所以在对象里面的箭头函数的this指向的是全局作用域的this，window?

var age = 100;
        var obj = {
            age: 20,
            say: () => {
                alert(this.age); //弹出的是window对象下面的age,因为obj不能产生作用域
            }
        }
        obj.say();

剩余参数

函数实参数量大于形参数量，会将不定数量的参数表示为一个数组，比如形参个数为2，实参个数为3，则会把实参后两个当作数组看；

const sum = (...args) => {
            //args表示数组？
            let total = 0;
            args.forEach((item) => {
                total += item;
            })
            return total;
        };
        console.log(sum(2, 3));
        // sum(10, 20, 30);
        console.log(sum(1, 2, 3));
        // sum(10, 20);

上面的代码里面的args.forEach可以更改为：

剩余参数配合解构

加…就能实现多个参数组合数组？

let ary1 = ['张三', '李四', '王五'];
        let [s1, ...s2] = ary1;
        console.log(s1); //张三
        console.log(s2); //["李四","王五"]

Aarry扩展方法

扩展运算符，也是加…可以把数组元素单个输出代码如下：

<script>
        let ary = ["a", "b", "c"];
        console.log(...ary); //a b c
        console.log(ary); //输出的是一个数组不是单个的字符
        console.log("a", "b", "c"); // a b c
    </script>

1. 扩展运算符可以用于合并数组；let ary3 = [...ary1, ...ary2];可以将ary1 ary2两个数组合并
2. 用push和解构结合的方法合并数组ary1.push(...ary2);，将ary2数组和ary1数组合并
   将类数组或可遍历对象转换为真正的数组

var oDivs = document.getElementsByTagName('div');
        console.log(oDivs);
        var ary = [...oDivs]; //将伪数组转换为真正的数组

构造函数方法：Array.from();

var arrayLike = {
            "0": "张三",
            "1": "李四",
            "2": "王五",
            "length": 3
        }
        var ary = Array.from(arrayLike);
        console.log(ary); //输出的数组["张三","李四","王五"]

实例方法：find()
找到第一个符合条件的数组成员，如果没有找到返回undefined

var ary = [{
            id: 1,
            name: '张三'
        }, {
            id: 2,
            name: '李四'
        }];
        //查找数组中id=2的对象 数组中元素是对象
        let target = ary.find((item) => item.id == 2);
        console.log(target);

实例方法：findIndex()
找到第一个符合条件的数组成员的位置，没有找到就返回-1

let ary = [1, 5, 10, 15];
        let index = ary.findIndex((value) => value > 10);//找到数组中值大于10的元素的位置
        console.log(index);

实例方法：includes();
某个数组是否包含给定的值，返回布尔值；

let ary = [2, 3, 6, 7];
        let result = ary.includes(2);
        console.log(result);

String扩展方法

模板字符串：

let name = `张三`;
        console.log(name);
        let sayHello = `hello my name is ${name}`; //`而不是'
        console.log(sayHello);

模板字符串可以换行：可以调用函数；

const fn = () => {
            return '我是fn函数'
        }
        let html = `我是模板字符串${fn()}`;
        console.log(html); //我是模板字符串我是fn函数

实例方法：startsWith() endsWith()
startsWith();表示参数字符串是否在原字符串头部，返回布尔值 let r1 = str.startsWith('Hello');判断字符串是否以Hello开头
endsWith():表示参数字符串是否在原字符串尾部，返回布尔值let r2 = str.endsWith(2018);判断字符串是否以2018结尾

实例方法：repeat()
将原来的字符串重复n次，返回新的字符串

let str1 = 'x'.repeat(3);
        console.log(str1); //xxx

Set数据结构

ES6提供了新的数据结构Set，类似于数组，但是成员的值都是唯一的，没有重复的值；
可以用于搜索历史关键字；
Set本身是一个构造函数，用来生成Set数据结构；set会自动把重复的去掉，所以可以用来数据去重

const s3 = new Set(["a", "b", "c", "c"]);
        console.log(s3.size); //3 set会自动把重复的去掉，所以可以用来数据去重

数据去重：

const s3 = new Set(["a", "b", "c", "c"]);
        console.log(s3.size); //3 set会自动把重复的去掉，所以可以用来数据去重
        const ary = [...s3];
        console.log(ary); //["a","b","c"]

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

const s4 = new Set();
        //向set结构中添加值 add
        let newS = s4.add('a').add('b');
        console.log(newS);
        console.log(s4.size);
        //从set结构中删除值，delete 删除不存在的值会返回false
        const r1 = s4.delete('c');
        console.log(s4.size);
        console.log(r1);
        const r2 = s4.has('a');
        console.log(r2);
        //清空set
        s4.clear();
        console.log(s4.size);
        const s5 = new Set(['a', 'b', 'c']);
        s5.forEach(value => {
            console.log(value);
        })

-----------------------------------2020.12.20JavaScript 高级之day05ES6结束--------------------------------

---

总结