【ES6丨前端进阶基础】ES6的关键字，新特性以及解构赋值

💂 个人主页：Aic山鱼****

个人社区：山鱼社区****

💬 如果文章对你有所帮助请点个👍吧!

欢迎关注、点赞、收藏(一键三连)和订阅专

前言

ES全称EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript，是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性

什么是ecmascrpit

ECMA (European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会，这组织的目标是评估、开发和认可电信和计算机标准。1994年后该组织改名为Ecma国际。ecmascrpit是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。

一，let关键字的特点

1.不能重复声明变量

<script>
         let name = 'shanyu';
         let name = 'AIC';
</script>

2.块级作用域

只能在块内使用，否则会报错

<script>       
 // 2.块级作用域，只在块内可使用（如：if，for，while，else）
         {
             let name = '陆小果';
         }
         console.log(name);
</script>

3.不存在变量提升

<script>
        // 3.不存在变量提升（也就是不允许先使用后声明）
         console.log(start);
         let start = '武器大师';
</script>

4.不影响作用域链

二，let的使用

<body>
    <div class="container">
        <h2 class="page-header">点击切换颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        let item = document.getElementsByClassName('item');
        // 使用let声明变量，所声明的变量只在该块内使用所以可以用item[i]
        for (let i = 0; i < item.length; i++) {
            item[i].onclick = function () {
                item[i].style.background = 'skyblue';
            }
        }
    </script>
</body>

三，const 声明常量以及特点

<body>
    <script>
        // 声明常量
        // 1.必须要赋初始值
        const NAME = '山鱼';
        // 2.一般常量使用大写（当然小写也不会报错，不成文规定）
        // 3.常量的值不能修改
        NAME = 'JHXL';
        // 4.块级作用域
        {
            const START = 'BALEITE';
        }
        console.log(START);
        // 5.对于数组和对象的元素修改，不算对常量值的修改，不会进行报错
        const PLAY = ['SYZ', 'PPD', 'NANDAO', 'UZI'];
        PLAY.push('ZHIXUN');
    </script>

四，const的变量解构赋值

1.数组的结构

<script>        
//1. 数组的结构
        const TW = ['赵天王', '钱天王', '孙天王', '李天王'];
        let [zhao, qian, sun, li] = TW;
        console.log(zhao);
        console.log(qian);
        console.log(sun);
        console.log(li);
</script>

2.对象解构赋值

<script>       
const xiaopin = {
            name: '赵本山',
            age: '100',
            skill: function () {
                console.log('我是白云，我是黑土');
            }
        };
        let { name, age, skill } = xiaopin;
        console.log(name);
        console.log(age);
        console.log(skill);
        skill();
</script>

五，ES6新增字符串声明方式

1.反引号

2.新特性

3.变量拼接

使用${}来拼接

<script> 
 // 3.变量拼接 使用${}来拼接
        let hero = `山鱼`;
        let like = `${hero}爱吃猫`;
        console.log(like);
</script>

六，对象的简化写法

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

<body>
    <script>
        // ES6允许只放变量进到对象里
        let name = '山鱼';
        let like = function () {
            console.log('我们一起学前端不放弃！');
        }
        const start = {
            name,
            like,
            skill() {// 可以省略冒号和function
                console.log('我会ES6');
            }
        }
        console.log(start);
    </script>
</body>

七，箭头函数

1.箭头函数this是静态的，this始终指向函数声明时所在作用域下的值

    <script>
        // let fn = (a, b) => {
        //     return a + b
        // }
        // 调用函数
        // let result = fn(3, 3);
        // console.log(result);
        // 特性
        // 1.this是静态的，this始终指向函数声明时所在作用域下的值
        function gName1() {
            console.log(this.name);
        }
        let gName2 = () => {
            console.log(this.name);
        }
        window.name = '山鱼';
        const like = {
            name: 'SHANYU'
        }
        // 直接调用
        gName1(); //返回值为’山鱼‘ 
        gName2(); //返回值为’山鱼‘ 
        // 用call调用，call可以改变函数内部值
        gName1.call(like);// 返回值为'SHANYU'
        gName2.call(like)//返回值为’山鱼‘
</script>

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

<script>        
        // 2.不能作为构造函数作为实例化对象
        let Person = (name, age) => {
            this.name = name;
            this.age = age;
        }
        let it = new Person('旺财', 2);
        console.log(me);
</script>

** 3.不能使用arguments**

<script>
         // 3.不能使用arguments变量（arguments可以用来保存实参）
         let fn = () => {
             console.log(arguments);
         }
         fn(1, 2, 3);
</script>

** 4.箭头函数的简写**

<script>
        // 1，当形参有且只有一个的时候可以省略小括号
         let jia = a => {
             return a + a;
         }
         console.log(jia(9));
        // 2，当代码体只有一条语句的时候可以省略大括号
        let pow = n => n * n;
        console.log(pow(3));// 语句的执行结果就是返回值
    </script>

写在最后

我是Aic山鱼，感谢您的支持
原创不易 ✨还希望支持一下
点赞👍：您的赞赏是我前进的动力！
收藏⭐：您的支持我是创作的源泉！
评论✍：您的建议是我改进的良药！
山鱼🦈社区：山鱼社区💌💌

标签：前端 es6 javascript

本文转载自: https://blog.csdn.net/zhaochen1127/article/details/127114232
版权归原作者 Aic山鱼 所有，如有侵权，请联系我们删除。