ES6函数特性

箭头函数

简写方式

-- 如果有且只有1个参数，（）可以不写
-- 如果有且仅有一个语句并且是return,{}可以不写

    <script>
        let arr = [23, 34, 56, 77]
        //正常写法
        arr.sort(function (n1, n2) {
            return n1 - n2;
        })
        //有且仅有一个语句并且是return,{}可以不写
        arr.sort((n1, n2) => n1 - n2);
        console.log(arr);
    </script>

箭头函数的this

• 使用箭头函数，可固定当前的环境(执行时候的环境);

 <script>
        let jsons = {
            a: 12,
            fn: function () {
                console.log(this)
            },
            fs: () => {
                console.log(this)
            }
        }
        jsons.fn();//此处输出的事jsons的this

        let oDate = new Date();
        oDate.fn = jsons.fn;
        oDate.fn();//此处输出的事jsons的this就编程了oDate
        oDate.fs = jsons.fs;
        oDate.fs();//当前执行环境为window;

        //在Json里面声明了this,用=>函数会固定这个数值
        class Json {
            constructor() {
                this.a = 12,
                    this.fn = () => {
                        alert(this.a)
                    }
            }
        }
        let json = new Json();
        let oDate = new Date();
        oDate.fn = json.fn;
        oDate.fn();
</script>

数据展开与合并

使用 ... 可收集或展开数据

<script>
        //收集剩余参数
        //...必须是最后一个参数
        function show(a, b, ...c) {
            console.log(a, b, ...c)
        }
        show(2, 3, 4, 6, 7, 8, 9, 10, 23);

        //数组的展开
        let arr1 = [123, 56, 67];
        let arr2 = [34, 56, 89];
        let arr = [...arr1, ...arr2]//与数组连接-将arr1+arr2添加至arr
        function showArr(...arr) {
            console.log(...arr)
        }
        showArr(...arr);

        //json展开
        let json = { a: "番", b: "茄", c: "向", d: "前", e: "看" }
        let json2 = {
            ...json,//与数据合并
            z: 999
        }
        console.log(json2)
</script>

原生对象扩展

• map映射

<script>
        let arr = [68, 25, 98, 62, 35, 33, 68, 34, 67, 44, 100]
        //map 映射 --一一对应
        let arr2 = arr.map((item, index) => item >= 60 ? '及格' : '不及格')
        console.log(arr);
        console.log(arr2)
</script>

• reduce 汇总

<script>
        let arr = [68, 25, 98, 62, 35, 33, 68, 34, 67, 44, 100]
        //reduce 1个值例如：对数据求平均数 /tmp为临时数/
        let arr3 = arr.reduce((tmp, item, index) => {
            if (index == arr.length - 1) {
                return (tmp += item) / arr.length;
            } else {
                return tmp += item;
            }
        })
        console.log(arr3)
    </script>

• filter 过滤器

<script>
        let arr = [68, 25, 98, 62, 35, 33, 68, 34, 67, 44, 100]
      //filter 过滤
        let arr4 = arr.filter((item, index) => item % 2 == 0)
        console.log(arr)
        console.log(arr4)
    </script>

• forEach 循环

<script>
        let arr = [68, 25, 98, 62, 35, 33, 68, 34, 67, 44, 100]
       //forEach 遍历，没有return,
        let arr5 = arr.forEach(function (item, index) {
            //console.log('第' + index + '个' + item);
            //模板字符串`
            console.log(`第${index}个:${item}`)
        })
</script>

• 模板字符串“·”

<script>
 console.log(`第${index}个:${item}`)
</script>

• JSON 对象新方法

<script>
        //stringify 可以将JSON格式解析为字符串成；
        let Json = { a: 123, b: "345", c: "456", d: [1, 2, 4, 5, 6] }
        console.log(JSON.stringify(Json));
        //stringify 可以将字符串成解析为JSON格式；
        let Str = '{ "a": "123", "b":"345",  "c": "456", "d": "[1, 2, 4, 5, 6]"}';
        console.log(JSON.parse(Str));
</script>