ECMAScript——let、const、解构赋值、模板字符串、对象的简化、箭头函数

最新推荐文章于 2022-12-29 16:43:25 发布

h_jQuery

最新推荐文章于 2022-12-29 16:43:25 发布

阅读量103

点赞数

分类专栏： es6 Vue javascript 文章标签： ecmascript javascript node.js vue let

本文链接：https://blog.csdn.net/h_jQuery/article/details/120198158

版权

javascript 同时被 3 个专栏收录

123 篇文章 0 订阅

订阅专栏

Vue

86 篇文章 0 订阅

订阅专栏

es6

73 篇文章 0 订阅

订阅专栏

ECMAScript

ES全称EcmaScript，是脚本语言的规范，javascript就是es的一种实现，所以es的新特性就是js的新特性

新特性的特点：

1.语法简洁，功能丰富

2.框架开发应用

3.前端开发职位要求

let

let是用来声明变量的

特性：

1. 变量不能重复声明
2. 块级作用域（全局，函数，eval，在{}内）
3. 不存在变量提升
4. 不影响作用域链（内层没有，向外层寻找）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2 {
            border-bottom: 1px solid gainsboro;
        }
        
        .item {
            float: left;
            width: 200px;
            height: 100px;
            margin: 0 10px;
            border: 1px solid gold;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>点击切换颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        // 获取div元素对象
        let item = document.getElementsByClassName('item');
        // 循环遍历
        // var定义的i是全局的,let定义的i是块级作用域内的，在每一个循环中有效都是独立
        for (let i = 0; i < item.length; i++) {
            item[i].onclick = function() {
                // 修改当前元素的背景颜色
                // this.style.background = 'pink'
                item[i].style.background = 'pink'
            }
        }
        /* {
            // 这里的i只在当前这个{}内有效
            let i = 0;//1,2都是一样
            item[i].onclick = function() {
                // 修改当前元素的背景颜色
                // this.style.background = 'pink'
                // 在这个函数里面没有i，就会往外层找
                item[i].style.background = 'pink'
            }
        } */
    </script>
</body>

</html>

const

const是用来声明常量的（赋值后，值不可再改变）

特性：

1.一定要赋初始值

2.一般常量使用大写（浅规则）

3.常量的值不能修改

4.块级作用域

5.对于数组和对象的元素修改，不算做对常量的修改，不会报错

注意：声明数组和对象时，可用const

解构赋值

解构赋值：ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.数组解构
        /*  const arr = ['张三', '李四', '王五', '周六'];
         let [zs, ls, ww, zl] = arr;
         console.log(zs);
         console.log(ls);
         console.log(ww);
         console.log(zl); */
        // 2.对象解构
        const obj = {
            name: '赵本山',
            age: '不详',
            func: function() {
                console.log('hello');
            }
        };
        // 相当于声明了三个变量(变量名要与对应的对象的属性名一致————同名赋值)，并对其进行赋值
        /* let {
            name,
            age,
            func
        } = obj;
        console.log(name);
        console.log(age);
        // console.log(func);
        func(); */
        let {
            func
        } = obj;
        func()
    </script>

</body>

</html>

模板字符串

用来声明字符串的，用**``**（反引号）括起来

特性：

1.声明

2.内容中可以直接出现换行符

3.变量拼接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 模板字符串是string类型
        // 声明
        /* let str = `我是一个模板字符串`;
        console.log(typeof str); */
        // 可出现换行符(回车)
        /* let str = `<div>
            <p>我换行了</p>
            <p>我换行了</p>
            <p>我换行了</p>
            <p>我换行了</p>
            </div>`;
        document.write(str) */
        // 变量拼接，固定格式：${变量}
        let str = 'hello';
        let all = `${str}，我是xxx`;
        document.write(all)
    </script>
</body>

</html>

对象的简化

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法，这样书写更加简洁

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let name = '张三';
        let fn = function() {
            console.log('处理函数');
        };
        const school = {
        //直接写入变量
            name,
            fn,
            //直接写入函数
            /* imp: function() {
                console.log('方法简化：简化了“:function”部分');
            } */
            imp() {
                console.log('方法简化：简化了“:function”部分');
            }
        };
        let {
            imp
        } = school;
        imp()
    </script>
</body>

</html>

箭头函数

ES6允许使用箭头（=>）定义函数

特性：

1.箭头函数中的this是静态的，this始终指向函数声明时所在作用域下的this的值（离自己最近的外部环境，不一定是window）

2.不能作为构造实例化对象

3.不能使用arguments(一个数组对象)

4.箭头函数的简写

4.1省略小括号当形参有且只有一个的时候

4.2省略花括号，当代码体只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.声明一个函数
        // 传统方式
        /* function fn() {
            console.log('传统方式创建函数');
        }; */
        // 定义一个变量
        /* let fn = () => {
            console.log('箭头式函数');
        };
        // 调用函数时是一样的调用方式
        fn() */
        // 2.this指向
        /* function fn() {
            console.log(this.name);
        };
        // 在window环境下创建的
        let func = () => {
            console.log(this.name);
        };
        window.name = '张三';
        const school = {
            name: '李四',
        }; */
        // 直接调用，两个函数的this都是指向window
        /*   fn();
          func(); */
        // call调用
        /* fn.call(school); //李四
        func.call(school); //张三 */
        // 2.不能作为构造实例化对象
        /*  let Person = (name, age) => {
             this.name - name;
             this.age = age;
         };
         // 正确
         // let Person = function(name, age) {
         //     this.name - name;
         //     this.age = age;
         // }
         let obj = new Person('zs', 22);
         console.log(obj); //报错：Uncaught TypeError: Person is not a constructor */
        // 3.不能使用arguments(一个数组对象)
        /* let fn = () => {
            console.log(arguments);
        }; 
        // 正确
        // function fn() {
        //     console.log(arguments);
        // }
        fn(1, 2, 3, 4, 5) //报错：Uncaught ReferenceError: arguments is not defined*/
        // 4.箭头函数的简写
        // 4.1省略小括号当形参有且只有一个的时候
        /* let add = n => {
            return n + 1
        };
        console.log(add(1));//2 */
        // 4.2省略花括号，当代码体只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值

        let num = n => n * n; //4
        console.log(num(2));
    </script>
</body>

</html>

箭头函数实践

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: indianred;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        // 需求：1.点击div，2s后颜色变成[粉色]；
        let box = document.getElementById('box');
        box.addEventListener('click', function() {
            // console.log(this);
            // 是方法的形式，this指向它的调用者
            // 将这个作用域下的this保存到一个变量内
            /* let _this = this
            setTimeout(function() {
                //函数的形式，this指向window
                // setTimeout内的this：非严格模式会指向window（或全局），严格模式指向undefined
                // 这里面没有_this,向外层寻找
                _this.style.background = 'pink';
            }, 300) */
            setTimeout(() => {
                // 箭头函数的this是静态的，this指向声明时所在的作用域下的this，在点击事件的回调函数的作用域下
                console.log(this); //指向当前的dom元素
                this.style.background = 'pink'
            }, 300)
        });
        // 2.从数组中返回偶数的元素
        const arr = [1, 5, 9, 7, 6, 8, 10, 2, 3, 4];
        // 返回过滤结果为真的项，不通过的淘汰
        /* const res = arr.filter(function(item) {
            // if (item % 2 === 0) {
            //     return true
            // } else {
            //     return false
            // }
            return item % 2 === 0
        }); */
        /*  const res = arr.filter(item => {
             return item % 2 === 0
         }) */
        //  简写
        const res = arr.filter(item => item % 2 === 0)
        console.log(res);
    </script>
</body>

</html>

箭头函数适合使用于与this无关的回调，例如：定时器，数组的方法的回调

箭头函数不适合使用于与this有关的回调，例如：（dom元素）事件回调，对象的方法

h_jQuery

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECMAScript——let、const、解构赋值、模板字符串、对象的简化、箭头函数

ECMAScriptES全称EcmaScript，是脚本语言的规范，javascript就是es的一种实现，所以es的新特性就是js的新特性新特性的特点：1.语法简洁，功能丰富2.框架开发应用3.前端开发职位要求letlet是用来声明变量的特性：1. 变量不能重复声明2. 块级作用域（全局，函数，eval，在{}内）3. 不存在变量提升4. 不影响作用域链（内层没有，向外层寻找）<!DOCTYPE html><html lang="en"><h
复制链接

扫一扫