一、函数扩展:

1.剩余参数:

1) 语法：...变量名（形参名）

2) 返回值：数组

3) 注意：必须将剩余参数放到最后一个形参的位置

        // function m1({x=10,y=20}){
        //     console.log(x,y)
        // }

        // function m2({x=10,y=20}={}){
        //     console.log(x,y)
        // }

        //  function m3({x,y}={x:10,y:20}){
        //     console.log(x,y)
        // }

        // m1({})
        // m2({})
        // m3({})

        // 剩余参数
        // type  number string boolean undefined function object


        // function fn() {
        //     // 判断是否为一个数组
        //     // console.log(Array.isArray(arguments))
        //     // console.log(arguments instanceof Array)
        //     // console.log(Object.prototype.toString.call(arguments))

        //     // 伪数组转真数组
        //     // ES5 
        //     // let x = Array.prototype.slice.call(arguments)
        //     // let x = [].slice.call(arguments)

        //     // ES6 
        //     // let x = Array.from(arguments)
        //     // console.log(x)
        //     // console.log(Array.isArray(x))
        // }
        // fn(1, 2, 3, 4)


        // ...变量名 剩余参数
        function fn(x, y, ...rest) {
            console.log(rest)
            console.log(Array.isArray(rest))
        }；
        fn(1, 2, 3, 4)；           

扩展运算符：

1. 数组的扩展运算符：

1）结合set 实现数组去重

let arr = [1,3,4,5,3,1,4];

let newArr = [...new Set(arr)];

 console.log(newArr); // [1,3,4,5]

 　// 之前用的一种数组去重方法

    let newArr2 = arr.filter((item,index)=>{

         return arr.indexOf(item) === index;

    });

    console.log(newArr2);// [1,3,4,5]

2）浅拷贝

 let arr1 = [1, 2, 3, [10, 20]];

 let arr2 = [...arr1];

 arr1[0] = "hello";

 arr1[3][0] = "world";

 console.log(arr1, arr2);

 3）数组的拉平

        // 拉平
        let arr1 = [
            [1, 2, 3],
            [4, 5, 6, [1, 2, 3, [3, 4]]]
        ];
        let arr2 = arr1.flat(Infinity);
        console.log(arr2); // [1, 2, 3, 4, 5, 6, 1, 2, 3, 3, 4]            

对象的扩展运算符：

1）实现浅拷贝

2）模拟vuex数据

  let mapState = {

            userInfo: {

                uname: "xiaoming"

            }

  };

 

        let mapMutations = {

            fn() {

                console.log("fn")

            }

        };

 

        let vm = {

            data: {...mapState

            },

            methods: {...mapMutations

            }

        };

2.箭头函数：

2.1 语法：

1）参数：参数为一个值的时候可以省略（）

2）函数体：函数体内只有一句话的时候，可以省略{}和return，但是要注意是对象的时候，要在对象外面加（），防止代码歧义；

        // function fn(){}；
        // let f = function(){}；

        // 语法：
        // let f = () => {}；

        // 箭头的左边:
        // 1.没有参数
        // let fn = () => {
        //     console.log("demo")
        // };
        // fn()；

        // 2.只有一个参数,可以省略（）
        // let fn = x => {
        //     console.log(x)
        // }；
        // fn("hello")；

        // 3.多个参数不可以省略()
        // let fn = (x, y) => {
        //     console.log(x, y)
        // }；

        // fn("hello", 10)；

        // 箭头的右边：函数体
        // 1. 一句话 ,可以省略return和{};但是要注意，如果return出来的结果是对象，为了避免代码歧义，需要在对象外加（）

        // let fn = () => "hello";
        // let fn = x => x;
        // let fn = () => [1, 2, 3];

        // let fn = () => ({
        //     a: 10,
        //     b: 20
        // });
        // console.log(fn())；

        // 2.多句话，不可以省略return和{}
        // let fn = x => {
        //     if (x % 2 == 0) {
        //         return "偶数"
        //     } else {
        //         return "奇数"
        //     }；
        // }；

        // console.log(fn(9))；

        // arr.forEach(()=>{})；
        // arr.map(()=>{})；
        // arr.filter(()=>{})；
        // arr.every(()=>{})；
        // arr.some(()=>{})；

        // setInterval(()=>{},2000)；

2.2 特点：

1）this指向的是定义时所在的对象（跟着爹走）；

2）Call,apply,bind不能够改变箭头函数的this指向；

3）箭头函数中没有prototype原型

4）箭头函数没有constrcutor没有构造器

5）不能够使用new进行实例化

6）箭头函数中不能够使用arguments对象，用剩余参数来代替；

2.3 不适用场景：

1）对象函数简写不推荐使用箭头函数；

2）事件的绑定要分情况使用箭头函数；

二、art-template

1. 引入art-template.js文件

2. 使用script标签定义模板内容，必须id，type指定

　　　3. 在js中通过template(),进行模板的查找和传递

   let html = template("temp", { arr });

4.在模板引擎当中进行逻辑处理

5.追加元素；

三、Symbol第七种数据类型：基本类型

1. 特点：独一无二

2. 作用：从根本上防止属性名的冲突

3. Symbol()可以加字符串，但是只是标识符的作用；  s1.description 获取标识符

4.  

   Symbol.for() 可以使symbol相同

5. Symbol.keyFor(s1) 取值　　

四、set和map  数据结构：

1.Set 类似数组的数据结构；不允许有重复项；

  常用方法：

 s.size返回的是长度

s.add() 添加内容

s.delete(删除的元素) 删除一个内容

s.has(元素) 判断一个元素是否存在

s.clear()清楚所有的成员

可以使用forEach()

  // iterator
        let s = new Set([1, 2, 3, 1, 2, 3]);
        console.log(s);  // Set(3) {1, 2, 3}
        console.log(Array.isArray(s));  // false
        console.log(s.size);   // 3
        s.add("hello");
        console.log(s);   //  Set(4) {1, 2, 3, "hello"}
        s.delete(2);
        console.log(s);   //  Set(3) {1, 3, "hello"}
        console.log(s.has(1));   // true
        s.forEach(item => {
            console.log(item);    // 1  3  hello 
        });                 
        s.clear();
        console.log(s);  //  Set(0) {}

2.map 类似对象的数据结构；可以让任意类型的值，作为key

常用方法:

m.size 成员的个数

m.set([1, 2, 3], "content3")  添加一个内容

m.get(属性) 获取对应的值

m.has(属性) 判断属性是否存在

m.delete(属性) 删除属性

m.clear()  删除所有的属性

可以使用forEach循环遍历；

  　　　let m = new Map([
            [true, "content1"],
            [
                [1, 2, 3], "content2"
            ]
        ]);  
        console.log(m.size);     // 2
        m.set(null, "content3");
        console.log(m);     //  Map(3) {true => "content1", Array(3) => "content2", null => "content3"}
        console.log(m.get(null));  // content3
        console.log(m.has(null));  // true
        m.delete(null);
        console.log(m);     // Map(2) {true => "content1", Array(3) => "content2"}
        m.forEach(item => {
            console.log(item);   //  content1  content2
        });
        m.clear();
        console.log(m);   //  Map(0) {}