es6---新增语法&内置对象拓展

一、新增语法

解构赋值

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

数组解构

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

解构不成功，变量值为undefined

        let [x] = [];
        console.log(x);   //undefined


        let [a, b] = [1];
        console.log(a, b);   //1 undefined

对象解构

        let person = { name: '张三', age: 18 };
        let { name, age, sex } = person;
        console.log(name);   //张三
        console.log(age);   //18
        console.log(sex);   //undefined

        let { name: myName, age: myAge } = person;// myName myAge 属于别名
        console.log(myName);    //张三
        console.log(myAge);    //18
    

箭头函数

const fn = () => {}

//如果函数体只有一句代码，大括号可以省略

//如果形参只有一个，可以去掉()

//箭头函数不绑定this关键字，箭头函数中的this指向的是函数定义位置的作用域的this

求两个数的和  这里的this指向window

        const sum = (num1, num2) => {
            console.log(this);  //window
            return num1 + num2;
        };
        console.log(sum(1, 2));

当this关键字被绑定时，指向绑定对象  

这里的this指向 {name: "zs"}

        const obj={name:'zs'};
        function fn(){
            console.log(this);
            return () =>{
                console.log(this);
            }
        }
        const resFn=fn.call(obj);
        resFn();

        var age = 100;
        var obj = {
            age: 20,
            say: () => {
                alert(this.age)    //100
            }
        }
        obj.say()

剩余参数

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

        function sum(first,...args){
            console.log(first);
            console.log(args);
        }
        sum(1, 2, 3, 4, 5, 6)    //1 [2,3,4,5,6]

求若干个数字的和

        const sum = (...args) => {
            let total = 0;
            args.forEach(item => total += item);
            return total;
        }
        console.log(sum(12,11,1));  //24

当实参个数多于形参时，只取形参的个数

求两个数的和

        var sum = (a, b) => a + b;
        var arr = [12, 11, 1];
        console.log(sum(...arr));   //23

剩余参数和解构配合使用

        let stus=['zs','ls','ww'];
        let[s1,...s]=stus;
        console.log(s1);    //zs
        console.log(s);     // ["ls", "ww"]

二、内置对象拓展

Array 的扩展方法

1、扩展运算符

可以将数组或者对象转为用逗号分隔的参数序列。

        let arr=['a','b','c'];
        console.log(...arr);    //a b c

合并数组

        let arr1 = [1, 2, 3]
        let arr2 = [3, 4, 5]

        //方法一
        let arr = [...arr1, ...arr2]
        console.log(arr);   //[1, 2, 3, 3, 4, 5]

        //方法二
        arr1.push(...arr2);
        console.log(arr1);  //[1, 2, 3, 3, 4, 5]

将类数组或可遍历对象转换为真正的数组

        var divs=document.querySelectorAll('div');
        var arr=[...divs];

2、构造函数方法Array.from()

将类数组或可遍历对象转换为真正的数组

        let arrayLike = {
            '0': 'a',
            '1': 'b',
            '2': 'c',
            length: 3
        };
        let arr2 = Array.from(arrayLike);
        console.log(arr2);  // ["a", "b", "c"]

还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

        let arr = {
            "0": 1,
            "1": 2,
            "length": 2
        }
        let newArr = Array.from(arr, item => item * 2)
        console.log(newArr);    // [2, 4]


        //map()方法
        // var arr = [1, 2, 3, 4, 5];
        // var newArr = arr.map(i => i * i);
        // console.log(newArr);    //[1, 4, 9, 16, 25]

3、实例方法：find()

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

        let arr = [{
            id: 1,
            name: 'zs'
        }, {
            id: 2,
            name: 'ls'
        }];
        let target = arr.find((item, index) => item.id === 2);
        console.log(target);    //{id: 2, name: "ls"}

4、实例方法：findIndex()

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

        let arr = [1, 5, 10, 15];
        let index = arr.findIndex((value, index) => value > 9);
        console.log(index); //2

5、实例方法：includes()

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

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

String 的扩展方法

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

        const doing = function () {
            return '敲代码';
        };
        let sth=`${doing()}啦啦啦`;
        console.log(sth);   //敲代码啦啦啦

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

// startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值

// endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

        let str='qwertyuiop';
        console.log(str.startsWith('qwe')); //true
        console.log(str.endsWith('p')); //true

3、实例方法：repeat()

repeat()表示将原字符串重复n次，返回一个新字符串。

        console.log('x'.repeat(3)); //xxx
        console.log('rick'.repeat(2));  //rickrick

Set数据结构

set类似于数组，但是成员的值都是唯一的，没有重复的值。

var s=new Set([1,2,2,3,3,4,5,5]);
console.log(s);    //Set(5) [ 1, 2, 3, 4, 5 ]

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

const s = new Set();

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

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

1、实例方法

add(value)：添加某个值，返回 Set 结构本身

        s.add(1).add(2).add(3);
        console.log(s); //Set(3) {1, 2, 3}

delete(value)：删除某个值，返回一个布尔值，表示删除是否成功

        console.log(s.delete(2));   //true
        console.log(s); //Set(2) {1, 3}

has(value)：返回一个布尔值，表示该值是否为 Set 的成员

console.log(s.has(1));  //true

clear()：清除所有成员，没有返回值

        s.clear();
        console.log(s); //Set(0) {}

2、forEach遍历

        s.add(12).add(22).add(44);
        s.forEach(value => console.log(value));