2.ES6新增（一）①let和const块级作用域②解构赋值（三点符号...做什么的）③模板字符串④对象的简化写法⑤箭头函数⑥forEach循环

美美| ू•ૅω•́)ᵎᵎᵎ

已于 2022-03-22 16:36:53 修改

阅读量245

点赞数

分类专栏： ES5和ES6 文章标签： html5 java html

于 2021-09-06 23:40:41 首次发布

本文链接：https://blog.csdn.net/lazylYYY/article/details/120143413

版权

ES5和ES6 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

2. 还可以利用和...args剩余参数一样的特性将剩余的放进另一个数组里

3.①原先的：数组里两个数交换位置声明的数组后面一定要写分号;

3.举例：箭头函数遍历数组和forEach遍历数组

4.forEach遍历数组

5.箭头函数注意事项

①this 的值是固定不变的，永远指向外层作用域下的this值，箭头函数都无法覆盖

不写花括号, 当代码体只有一条语句的时候, 并且语句的执行结果为函数返回值的 (如果不写花括号的话, return 也不能写)

6.箭头函数案例：

①需求1 点击div 2s后颜色变成粉色

②需求2 从数组中返回偶数的元素数组方法filter()筛选

一：块级作用域：

二：解构数组：

1.①原先的：将数组元素分别赋值给变量

②现在的：将数组元素分别赋值给变量

2. 还可以利用和...args剩余参数一样的特性将剩余的放进另一个数组里

3.①原先的：数组里两个数交换位置(声明的数组后面一定要写分号;)

②现在的：数组里两个数交换位置

4.①原先的：数组求和

②现在的：数组求和

三：解构对象

①原先的：赋值取对象属性并输出

②现在的：取对象属性并输出

四：模板字符串``

1. ``可以保持原有格式

2. 字符串中进行变量拼接 $(变量名)

五：对象的简化写法

六：箭头函数

1.箭头函数的声明和调用

2.举例：

3.举例：箭头函数遍历数组和forEach遍历数组

4.forEach遍历数组

5.箭头函数注意事项

①this 的值是固定不变的，永远指向外层作用域下的this值，箭头函数都无法覆盖

②不能作为构造函数使用，无法实例化对象

③不能使用arguments

④箭头函数的简写：

不写小括号, 当形参有且只有一个的时候

不写花括号, 当代码体只有一条语句的时候, 并且语句的执行结果为函数返回值的 (如果不写花括号的话, return 也不能写)

        // 1.this 的值是固定不变的，永远指向外层作用域下的this值，箭头函数都无法覆盖
        // 2.不能作为构造函数使用 ， 无法实例化对象
        // 3.不能使用arguments
        // 4.箭头函数的简写
        //  ①不写小括号, 当形参有且只有一个的时候
        //  ②不写花括号, 当代码体只有一条语句的时候, 并且语句的执行结果为函数返回值的 (如果不写花括号的话, return 也不能写)
        let s = num => console.log(num + num)
        s(5) //10

6.箭头函数案例：

①需求1 点击div 2s后颜色变成粉色

②需求2 从数组中返回偶数的元素数组方法filter()筛选

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>


    <body>
    <div id='a'></div>
    <script>
        // 需求1 点击div 2s后 颜色变成粉色
        let a = document.getElementById('a')
        a.addEventListener('click', function () {
            // 旧方法
            // let that = this  //保存this的值
            // setTimeout(function () {
            //     console.log(this) //window
            //     that.style.background = 'pink'
            // }, 2000)

            //  新方法：用箭头函数 this指向上级作用域的this值
            setTimeout(() => {
                this.style.background = 'pink'
            }, 2000)
        })

        // 需求2 从数组中返回偶数的元素
        let x = [1, 5, 32, 4, 87, 65, 645, 5, 8, 15, 68]

        // 原先：
        // let newX = x.filter(function (item) {
        //     // 判断是否为偶数
        //     // if (item % 2 == 0) {
        //     //     return true
        //     // } else {
        //     //     return false
        //     // }
        //     return item % 2 == 0 ? item : false
        // })
        // 箭头函数 简写 没有花括号就没有return
        let newX = x.filter(item => item % 2 == 0)
        console.log(newX)
        console.log(x)

    </script>
</body>