函数——es6函数扩展(二)

　　一、声明

　　　　1. let(变量)

　　　　可以只声明不给值（默认为undefined）,或者是先声明后给值，但是必需声明后再使用,可以重复赋值，可以防止变量泄露；

　　　　同一作用域里不能重复的声明，不同作用域里可以，不会被预解析；

　　　　声明的变量不再属于window的属性

　　　　2. const(常量)

　　　　必需先声明后使用，声明的时候必需要赋值；声明后不能进行修改，但是const声明的对象中的属性可以修改；

　　　　同一作用域里不能重复的声明，不同作用域里可以，不会被预解析；

　　　　具有块级作用域，声明的变量不再属于window的属性

    <script>
        let a;
        console.log(a); //undefined

        a = 'dvaina';
        console.log(a, window.a); //dvaina undefined

        const b = 10;
        const obj = {
            c: 10,
            d: 20
        }
        obj.d = 30;
        console.log(b, obj.c, obj.d); //10 10 30
    </script>

　　二、结构赋值

　　　　允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解析。

　　　　1、数组的解构赋值

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

        //　前后的模式必须匹配，如果前面声明的是二维数组，后面的也是二维数组
        let [d, [e]] = [1, [2]];
        console.log(d, e);////1 2

        //前少后多，用上拓展运算符，不定参数解构赋值
        let [g, ...h] = [1, 2, 3, 4];
        console.log(g, h); //1 (3) [2, 3, 4]

        //前少后多，省略赋值
        let [i, , j] = [11, 2, 3];
        console.log(i, j); //11 3

        let [k, l] = [1, 2, 3];
        console.log(k, l) //1 2

        //前多后少的情况下，某些变量只声明未定义
        let [m, n] = [2];
        console.log(m, n); //2 undefined
    </script>

　　　　2、对象和函数的解构赋值

    <script>
        //根据key值进行匹配
        let { a, b, c } = { a: 'lisa', b: 'davina' }
        console.log(a, b, c) //lisa davina undefined  

        //变量提前被声明，变量也可以设置默认值
        let name, age;
        ({ name, age, love='reading' } = { name: 'davina', age: 18 })
        console.log(name, age, love); //davina 18 reading
    </script>

    <script>
        //变量设置默认值
        function fn(a, b, c = 5) {
            console.log(a, b, c); //4 5 5
            console.log(arguments) //[4,5]
        }
        fn(4, 5);
    </script>

　　　3、字符串，数值，和布尔值的解构赋值

    <script>
        //字符串的解构赋值，字符串，被转成一个类似数组的对象,未声明为undefined，有length属性
        const [a, b, c, d, e, f, g] = 'davina';
        console.log(a, b, c, d, e, f, g);  //d a v i n a undefined
        console.log([a, b, c, d, e, f, g].length) //7

        //数值和布尔值的解构赋值,如果等号右边是数值或者是布尔值会先转为对象
        let { toString: s } = 123;
        console.log(s === Number.prototype.toString); //true

        let { toString: S } = false;
        console.log(S === Boolean.prototype.toString); //true
        //undefined和null无法转为对象，所以对它们进行解构赋值,报错
    </script>

　　4、解析赋值的用途

    <script>
        //交接变量的值
        let x = 3;
        let y = 4;
        [x, y] = [y, x];
        console.log(x, y); //4 3

        //从函数返回多个值
        function test() {
            return [1, 2, 3]
        }
        let [a, b, c] = test();
        console.log(a, b, c) //1 2 3 

        function test2() {
            return {
                foo: 1,
                bar: 2
            }
        }
        let { foo, bar } = test2();
        console.log(foo, bar); //1 2

        //快速的提取json值
        let json = {
            'id': 2,
            'name': 'peng',
            'sex': 'male',
            'date': [1, 2]
        }
        let { id, name, sex, date } = json;
        console.log(id, name, sex, date); //2 "peng" "male" (2) [1, 2]

        //函数参数的默认值
        //遍历Map结构
    </script>

　　5、扩展运算符

　　　　　扩展运算符（...）主要用于函数的调用，也可以将某些数据结构转为数组。

    <script>
        //扩展运算符
        console.log(1, [2, 3, 4], 5);  //1 (3) [2, 3, 4] 5
        console.log(1, ...[2, 3, 4], 5); //1 2 3 4 5

        //函数调用
        var arr = [1, 2, 3];
        function fn(arr) {
            return [...arr];
        }
        console.log(fn(arr)); //(3) [1, 2, 3]
        function fn1(a, b, c) {
            return a + b + c;
        }
        console.log(fn1(...arr)); //6

        //扩展运算符后面还可以放置表达式
        let x = 2;
        console.log(...(x > 0 ? ['a'] : []));  //a

        //如果扩展运算符后面是一个空数组不产生任何效果
        console.log(...[], 3); //3

        //函数中的参数用...x 代表实参为数组
        function show(y, ...x) {
            console.log(x)
        }
        show(1, 2, 3, 4) //[2, 3, 4]
        //
        let a = `<div></div>`;
        document.write(a.repeat(5));
        console.log([...document.querySelectorAll('div')]); //[div, div, div, div, div]
    </script>

　　　　扩展运算符的作用

    <script>
        //复制数组
            const arr = [1, 2, 3];

            // const arr1 = arr;
            // arr[2] = 0;
            // console.log(arr, arr1); //(3) [1, 2, 0] (3) [1, 2, 0]
            // //从中我们可以看出，arr1并不是arr的克隆，它只复制了指向底层数据结构的指针，如是arr1变化，那arr也会改变。

            //es5中要想实现克隆如下:
            const arr3 = arr.concat();
            arr3[2] = 4;
            console.log(arr3, arr); //(3) [1, 2, 4]  (3) [1, 2, 3]

            //es6中可以用到...
            const arr2 = [...arr];
            console.log(arr2); //(3) [1, 2, 3]

        //合并数组
            let a = [1, 2];
            let b = [3];

            //es5中
            console.log(a.concat(b)); //(3) [1, 2, 3]
            //es6中
            console.log([...a, ...b]); //(3) [1, 2, 3]

        //与解构赋值结合，可以生成新的数组
            const [num1,...numn]=[1,2,3,4,5,6];
            console.log(num1,numn); //1 (5) [2, 3, 4, 5, 6]

        //将字符串转成真正的数组
            console.log([...'davina']); //(6) ["d", "a", "v", "i", "n", "a"]
    </script>

　　　　实例：用es6中新学的内容写选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            display: none;
        }

        div:first-of-type {
            display: block;
        }
    </style>
</head>
<body>
    <input type="button" value="vlaue1">
    <input type="button" value="value2">
    <input type="button" value="value3">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <script>
        //选项卡
        [...document.querySelectorAll('input')].find((x, y) => {
            x['onclick']= () => {
                [...document.querySelectorAll('div')].find(d => {
                    d.style.display = 'none';
                });
                [...document.querySelectorAll('div')][y].style.display = 'block';
            }
        })
    </script>
</body>
</html>

　　三、字符串

　　　　方法：

　　　　1. fromCharCode / charCodeAt　接受 Unicode 值，返回一个字符串  /   返回 Unicode 编码

    <script>
        let name = '';
        for (let i = 0x4e00; i < 0x9fa5; i++) {
            name += String.fromCharCode(i);
        };
        console.log(name.length);  //20901
    </script>

　　　　2 . repeat    字符串复制指定次数

    <script>
        let div = '<div></div>';
        console.log(div.repeat(4)); //<div></div><div></div><div></div><div></div>
    </script>

　　　　3.  includes(有点像indexOf)    判断一个数组是否包含一个指定的值，如果是返回 true，否则false  第一个参数  要找的内容  第二个参数   从第几位开始

    <script>
        var ua = window.navigator.userAgent;
        console.log(ua.includes('Chrome')); //true
    </script>

　　　　4.  startsWith/endsWith 检查字符串是否是以指定子字符串开头/结尾，还回布尔值 第一参数：判断的字符  第二参数：从第几位开始

    <script>
        let str = 'dafjdfdfjad3r34jfk32435fdgjiera';
        console.log(str.startsWith('p', 4), str.endsWith('a')); //false true
    </script>

　　　    5.  padStart/padEnd  用于补全头部/尾部，返回补全后的字符串。第一参数：补全后字符串最大长度，第二个是要补的字母

    <script>
        let str = 'davina';
        let str1 = 'dvaina'
        console.log(str.padStart(10, 'love')); //lovedavina;
        console.log(str1.padEnd(7)); //dvaina 没有第二个参数时用空格替代
        console.log(str1.padStart(5, 'love'))  //dvaina 原字符串长度大于第一个参数还回原字符串
    </script>

　　模版（`${}`）

　　　　es6中的模版字符串替代了原有的字符串拼接的功能，字符串越长，或字符串中有特殊字符这种方法就更加的好用。

　　　　用法：“``”:  使用反引号将要拼接的模版包起来。“${}”:  使用${}将变量包起来

    <script>
        //es5中拼接方法 ：用到+号
        let name = 'davina';
        const age = 18;
        let str = '我的名字是\'' + name + '\'，我今年' + age + '岁。'
        console.log(str) //我的名字是'davina'，我今年18岁。

        //es6中
        let str1 = `我的名字是'${name}'，我今年${age}岁。`;
        console.log(str1)  //我的名字是'davina'，我今年18岁。

       let json={
           'div':`<div></div>`,
           'spna':`<span></span>`
       }
       document.write(`${json.div+json.spna}`)
    </script>

　　四、数组

　　　1.  find 参数为函数，函数可以接收3个参数，值x、索引i、数组arr，回调函数默认返回值x

    <script>
        let arr = [1, 'davina', 2, 4];
        arr.find((x, y, z) => {
            console.log(x, y, z);
            console.log(z[y]);
        })
    </script>

　　　2.   filter  过滤，筛选。 参数为函数。返回新新数组，不会对原数组有影响，可以遍历完数组。（es5）

    <script>
        let arr = [1, 'davina', 2, 4];
        var arr2 = arr.filter(item => {
            return typeof item === 'number';
        })
        console.log(arr2); //(3) [1, 2, 4]
    </script>

　　　3.  reduce/reduceRight  返回最后一次调用函数获得累积结果  参数：prev:上一次调用函数时返回的结果，cur当前元素，index 当前索引，arr：循环数组  reduceRigth是从右往左开始。

    <script>
        //元素相加
        let arr = [1, 2, 3, 4, 5];
        var arr2 = arr.reduce((prev, cur, index, arr) => {
            return prev + cur;
        });
        console.log(arr2); //15
        //合并数组
        const arr3 = [[0, 1], [3, 4], [5, 6]].reduce((a, b) => {
            return a.concat(b);
        })
        console.log(arr3); //(6) [0, 1, 3, 4, 5, 6]
        //数组去重
        var arr4 = [12, 43, 1, 2, 54, 1, 2, 234, 4, 5, 54, 45];
        var arr5 = arr4.sort().reduce((prev, cur) => {
            if (prev.length === 0 || prev[prev.length - 1] !== cur) {
                prev.push(cur);
            }
            return prev;
        }, [])
    </script>

　　　4.  map  返回新数组，原来的数组不会改变，可以在原有的基础上做运算(es5)

    <script>
        var arr = [1, 2, 3, 4, 5];
        var arr2 = arr.map((num) => {
            return num * 2
        })
        console.log(arr2); //[2, 4, 6, 8, 10]

        var arr3 = [
            { name: 'davina', age: 18, sex: '女' },
            { name: 'lisa', age: 20, sex: '女' },
            { name: 'amy', age: 21, sex: '女' }
        ]
        var arr4 = arr3.map((name) => {
            return name.name;
        })
        console.log(arr4); //["davina", "lisa", "amy"]
    </script>

　　　5.  for...of         数组的遍历

　　　　arr.keys()  方法是对key值进行遍历

　　　　arr.values()方法是对value值进行遍历

　　　　arr.entries()方法是对键值对进行遍历

    <script>
        let arr = ['davina', 'lisa', 'amy'];
        for (let item of arr) {
            console.log(item); //davina lisa amy
        }

        for (let index of arr.keys()) {
            console.log(index);  //0 1 2
        }

        for (let [index, val] of arr.entries()) {
            console.log(index, val);  //0 "davina" 1 "lisa" 2 "amy"
        }
    </script>

　　　 6.  Array.of　　将一组转化为数组

    <script>
        arr = Array.of(3, 4, 'dvaina', 'lisa');
        console.log(arr.length);//4
        console.log(arr[2]); //dvaina
    </script>

　　　 7.  Array.from   将类数组对象和可遍历的对象转换成真正的数组，第一个参数：类数组对象或者可遍历对象，第二参数：函数，第三个参数：第二个参数所代表的回调函数的this值。如果是一个真正的数组，Array.from会返回一个一样的新数组

    <script>
        let person = {
            '0': 'davina',  //key值必须是0，1，2...可以是数字或者是字符串
            '1': 'lisa',
            length: 2, //必须要有这个特殊的属性
        }

        //es5写法
        var array1 = [].slice.call(person);
        console.log(array1);  //
        //es6写法
        let array = Array.from(person);
        console.log(array); // ["davina", "lisa"]

        console.log(Array.from('davina')); //["d", "a", "v", "i", "n", "a"]

        //只要部署了Iterator接口的数据结构都可以被转化成真正的数组
        let set = new Set(['a', 'b']);//字符串和 Set 结构都具有 Iterator 接口
        console.log(Array.from(set)) //["a", "b"]
    </script>

　　　 8. copyWithin  在当前数组内部，将指定位置的成员复制到其它位置（会覆盖原数据），返回当前数组。会修改当前的数组。第一个参数：从该位置开始替换的数组，第二个参数：可选，从该位置开始读取数据默认为0负值为倒数，第三参数：可选 到该位置前停止读取，默认为数组长度

    <script>
        let arr = [1, 2, 3, 4, 5];
        //console.log(arr.copyWithin(4));  [4, 5, 3, 4, 5]
        //console.log(arr.copyWithin(4,3)); //[1, 2, 3, 4, 4]
        console.log(arr.copyWithin(2, 1, 4)); // [1, 2, 2, 3, 4]
    </script>