持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情
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