【前端进阶——ES6基础①】ES6究竟有什么不同呢！

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

相关阅读:
硬件设计——关于Type-C 口的讲解和设计
 [每周一更]-(第62期)：SRE 是什么？
pandas DataFrame中修改列名和行index
【1++的C++进阶】之异常
 75基于matlab的模拟退火算法优化TSP(SA-TSP)，最优路径动态寻优，输出最优路径值、路径曲线、迭代曲线。
响应式UI组件DevExtreme 10月新版——v22.1.6全新发布
 轻量封装WebGPU渲染系统示例＜20＞- 美化一下元胞自动机之生命游戏(源码)
重生奇迹MU游戏上格斗家挂机小技巧
 CAP定理
 第四十九章开发自定义标签 - 在action之外使用＜csr＞标签
原文地址：https://blog.csdn.net/zhaochen1127/article/details/127114232