了解 es6 语法简介

作者：小恺

2022 年 6 月 01 日
本文字数：1564 字
阅读完需：约 5 分钟

ECMAScript6（简称：es6）是 JavaScript 语言的新一代标准，加入了很多新的特性和语法

let 声明

let 用法与 var 相同，不过用 let 声明的变量不会被提升，可以把变量的作用域限制在当前代码块中

代码如下：

function changeState(flag) {
            if (flag) {
                let color = "red";
                console.log(color); //此处可以访问变量color，输出red
            } else {
                console.log(color);
                //此处不可以访问变量color，报错： color is not defined
            }
        }复制代码

复制代码

const 声明

每个通过 const 关键词声明的常量必须在声明的同时进行初始化

是 const 与 let 类似，在同一作用域下用 const 声明已经存在的标识符也会导致语法错误，无论该标识符是使用 var 还是 let 声明的

const声明一个只读的常量。一旦声明，常量的值就不能改变

如果使用 const 声明对象，对象本身的绑定不能修改，但对象的属性和属性值是可以修改的

代码如下：

const sizeOfpage = 10; //正确
        const maxItems; //错误
        maxItems = 200;复制代码

复制代码

模板字面量

模板字面的基础语法就是用反引号（`）来代替字符串的单、双引号。

代码如下：

let message = `hello world`;
console.log(message);复制代码

复制代码

在反引号中的所有空白字符（包括但不限于空格、换行、制表符）都属于字符串的一部分

占位符由一个左侧的 ${ }符号组成，中间可以包含变量或 JavaScript 表达式

代码如下：

let name = `hgk`;
        let message = `Hello,${name}`;
        console.log(message);
复制代码

复制代码

rest 参数

在函数得命名参数前添加三个点（…），就表明这是一个 rest 参数，用于获取函数的多余参数。resr 参数是一个数组，包含着自它之后传入的所有参数，通过这个数组名就可以逐一访问里面的参数

要注意的是每个函数只能声明一个 rest 参数，并且它只能是最后一个参数。

展开运算符

展开运算符也是和 rest 参数类似的，也是三个点（…）它可以将一个数组转换为各个独立的参数，也可用于取出对象的所有可遍历属性，而 rest 参数是让你指定多个独立的参数，并通过整合后的数组来访问。

 function sum(a, b, c) {
            s = a + b + c;
            return s;
        }
        const arr = [1, 2, 3];
        sum(...arr);
        console.log(s);复制代码

复制代码

展开运算符也可以合并数组。

代码如下：

 const arr1 = ['a'];
        const arr2 = ['b', 'c'];
        const arr3 = ['d', 'e'];
        console.log([...arr1, ...arr2, ...arr3]);
复制代码

复制代码

对象字面量语法扩展

属性初始值的简写

当一个对象的属性与本地变量同名，可以不用写冒号和值，简单地只写属性名既可

代码如下：

 const person = {
            name,
            age
        };
        console.log(person);
复制代码

复制代码

对象方法的简写语法

在 es6 中定义对象方法是可以省略冒号和 function 关键字

代码如下：

const car = {
            color: "red",
            doors: 4,
            showColor() {
                console.log(this.color);
            }
        }
        car.showColor();
        console.log(car.showColor.name);复制代码

复制代码

通过对象方法的简写语法创建的方法有一个 name 属性，其值为圆括号前面的名称。

在这个例子 car.showColor()方法的 name 属性值为 showColor

作者：xiao_kai

链接：https://juejin.cn/post/7101656931944628254

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

发布于: 刚刚阅读数: 5

小恺

关注

还未添加个人签名 2021.02.22 加入

还未添加个人简介

发布

暂无评论

创作场景

了解 es6 语法简介

let 声明

const 声明

模板字面量

rest 参数

展开运算符

对象字面量语法扩展

属性初始值的简写

对象方法的简写语法

小恺

评论