ES6特性
书将ES6的主要变化归纳为:
- 语法糖
- 新机制
- 更好的语义
- 更多的内置对象和方法
- 对原有限制的非破坏性解决方案
ES6基础
对象字面量
对象字面量是指使用{}简写语法进行对象说明,ES6对语法进行的改进:属性值简写、可计算属性名和方法定义。
const study = {
morning: "language",
noon: "algorithm",
nignt: "brush questions",
};
属性值简写
在对象的属性名和引用名相同时可以简写:
//原写法
const language = [];
function algorithm() {}
const study = {
language: language,
algorithm: algorithm,
};
//属性值简写
const language = [];
function algorithm() {}
const study = {
language,algorithm,
};
特性:
- 减少所维护代码复杂性
- 提高代码可读性以及生产效率
可计算属性名
当事先不知道属性名时,依赖变量或表达式的值:
const studyLanguage = "morning";
const study = {
[studyLanguage]: "language",
noon: "algorithm",
nignt: "brush questions",
};
注意!计算属性名和属性值简写不能同用!
const language = "language";
const study = {
[language],//语法错误
algorithm:()=>{},
};
方法定义
在使用对象字面量添加属性为对象声明方法时:
//原写法
const study = {
language: function () {},
algorithm: function () {},
};
//方法定义写法
const study = {
language () {},
algorithm () {},
};
- 省略冒号和function关键字
- 相对于传统声明更加整洁
箭头函数
在JavaScript中,通常使用如下函数声明:
// 包含函数名、参数列表和函数体
function name(parameters){
// 函数体
}
或者创建匿名函数,省略函数名,将其赋给变量、对象或直接调用:
// 包含函数名、参数列表和函数体
const name= function (parameters){
// 函数体
}
ES6开始,可使用箭头函数作为匿名函数的一种:
const name= (parameters)=>{
// 函数体
}
虽然可使用箭头函数作为匿名函数的一种,但是本质是完全不同的:
- 箭头函数不能显式命名,尽管现代运行环境会将箭头函数所赋予的变量名作为函数名
- 箭头函数能用作构造函数,没有prototype属性,意味不能使用new关键字
- 箭头函数绑定在词法作用域中,不会改变this的指向
词法作用域
箭头函数不会创建新的作用域,所以函数体内,this、argument以及super均属于父级作用域。同样在箭头函数作用域中call、apply、bind等方法也无法改变this的指向,这一限制确保了上下文不被修改
使用箭头函数的优点和用例
- 箭头函数适用于简短用例
- 箭头函数不能显示命名
- 需要定义词法作用域不被改变的函数时使用
- 函数式编程使用,如map、filter、reduce等方法时
解构
对象解构
在想要声明一个变量并要引用另一个对象内同名值时使用:
//原写法
let language = study.language;
//对象解构
let { language } = study;
//多个
let language = study.language;
let algorithm = study.algorithm;
//对象解构
let { language,algorithm } = study;
使用解构赋值,语法会更加清晰。如果变量和对象内值不同名值,可以使用别名的解构语法:
let { language:JS } = study;
console.log(JS)//'language'
注意:当解构的属性不存在时会得到undefined,如果解构属性中嵌套属性的父对象是undefined、null,会抛出异常。
数组解构
数组解构语法于对象解构语法类似:
const study = ["language", "algorithm"];
const [language, algorithm] = study;
console.log(language);//'language'
解构赋值时可以不需要的值,也可以设定默认值:
//使用逗号间隔,就可以跳过不需要的值
const study = ["language", "brush questions", "algorithm"];
const [language, , algorithm] = study;
console.log(algorithm); //'algorithm'
//设定默认值
const study = ["language", "brush questions", "algorithm"];
const [language, , algorithm="math"] = study;
console.log(algorithm); //'math'
在ES5中,当需要两个值的变量转换时,通常需要第三个临时变量。使用解构可以避免声明临时变量:
//原写法
let language = study.language;
let algorithm = study.algorithm;
let aux = language;
language = algorithm;
algorithm = aux;
//ES6
let language = study.language;
let algorithm = study.algorithm;
[language, algorithm] = [algorithm, language];
函数参数的默认值
ES6的函数参数也能默认值。所以箭头也可以设置默认值:
const study = (language = 1) => {
language * 60;
};
// 可以为任何一个参数赋值
function study(a = 1, b = 2, c = 3) {
return a + b + c;
}
study(undefined, undefined, 4); //1+2+4=7
在向函数传递多个options对象参数时,如果函数的使用者传入了一个options对象,则所有的默认值会失效:
const study = {
noon: "algorithm",
nignt: "brush questions",
};
function study(options = study) {
console.log(options.noon);
console.log(options.nignt);
}
study();
// 'algorithm'
// 'brush questions'
// 传入options
study({
nignt: "language",
});
// undefined
// 'language'
可以结合解构解决该问题
函数参数的解构
与提供一个默认值相比,更好的方法是解构整个options,并在解构模式中为每个属性指定默认值:
function study({ noon = "algorithm", nignt = "brush questions" }) {
console.log(noon);
console.log(nignt);
}
study({
nignt: "language",
});
// 'algorithm'
// 'language'
但是使用该方法后,函数不传入options,会导致默认值丢失,carFactory会报错。可以为options添加一个空对象作为默认值避免该问题:
function study({ noon = "algorithm", nignt = "brush questions" }={}) {
console.log(noon);
console.log(nignt);
}
study();
// 'algorithm'
// 'brush questions'
剩余参数和扩展运算符
剩余参数
在ES6前,处理任意数组需要借助argument。ES6引入了剩余参数来更好的解决该问题。
在函数的最后一个参数前加...可以将该参数变为一个特殊的“剩余参数”。
// 原方法-arguments不是一个数组,但是具有length属性。使用Array#slice.call的方法讲arguments转换为真正的数组
function join() {
let list = Array.prototype.slice.call(arguments);
return list.join(",");
}
join("first", "second", "third");
//"first, second, third"
// 剩余参数
function join(...list) {
return list.join(",");
}
join("first", "second", "third");
//"first, second, third"
注意:如果箭头函数中包含剩余参数,就算只有一个参数,也有包含于圆括号内,否则SyntaxError。
扩展运算符
扩展运算符可以将遍历对象转换为数组,能够在数组或函数调用中轻松展开表达式:
function cast() {
return [...arguments]
}
cast("a", "b", "c");
//["a", "b", "c"]
扩展运算符可以将一个字符串分割成数组,数组的元素是字符串的每个字符:
[..."show me"]
// ["s", "h", "o", "w", " ", "m", "e"]
还可以在扩展运算符的左右添加其他的内容:
function cast() {
return ["left", ...arguments, "right"];
}
cast("left", "a", "b", "c", "right");
//["left","a", "b", "c", "right"]
拼接多个数组无压力:
const all = [1, ...[2, 3, 4, 5, 6], 7, ...[8, 9]];
console.log(all);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
模板字面量
模板字面量是对常规JavaScript的巨大改进。使用反引号“`”
const text = `algorithm`;
使用模板字面量,就无需对各种特殊符号转义:
const text = `1+1=2`;
console.log(text);
// 1+1=2
字符串插值
模板字面量允许在模板的任意位置加入JavaScript的表达式:
const num=2
const text = `1+1=${num}`;
console.log(text);
// 1+1=2
const text = `1+1=${1+1}`;
console.log(text);
// 1+1=2
多行模板字面量
模板字符串默认支持多行字符串。在使用模板字符串前想要表示多行字符串,则需借助转义符、字符串连接数组,甚至可能是注释:
// 原方法
const escaped =
"The first line\n\
A second line\n\
Then a third line";
const concatenated =
"The first line\n" `
"A second line\n" `
"Then a third line";
const joined = ["The first line", "A second line", "Then a third line"];
// ES6模板字符串
const multiline =
`The first line
A second line
Then a third line`;
多行模板字符串同样也存在缩进问题:
function getParagraph(){
return `
Dear Rod
this is a template literal string...
Nico
`
}
getParagraph()
//"
// Dear Rod
//
// this asfsdfasfasdfsdfs
// asfasdfasdf
//
// Nico
//"
我们期待的结果可能是没有缩进的,但是仍然会保留缩进。如果使用通用函数来移除字符串每一行的缩进,怎么做不太理想。对于这些更高级的用例,需要使用另一种名叫标签模板的字面量。
标签模板
在JavaScript中\具有特殊含义,表示转义。例如:\n表示换行。String.raw标签模板可以使得转义字符不在转义:
const text = String.raw`"\n" is taken literally.
It'll be escaped instead of interpreted`;
console.log(text);
// "\n" is taken literally.
// It'll be escaped instead of interpreted
模板字面量String.raw用于解析模板,在接受一个数组参数或者其他参数时,数组包含模板的每一个静态部分,其他参数对应每个表达式的计算结果。
let和const声明
变量提升
变量提升:是不管变量声明在代码的哪个位置,都会提升到所在作用域的顶部。
function study() {
console.log(a)
var a = 1;
}
study()//undefined
虽然a在console下面声明,但是会变量提升并赋值understand。
var的作用域:基于词法作用域,可以是函数作用域或者全局作用域。
function study(item) {
if (item == 1) {
var a = true;
}
return a
}
study(1); //true
虽然a是在if代码分支语句声明的,但是依然可以在代码分支外访问到,主要是因为var是函数作用域。
使用var声明的变量,可以使用deep变量声明所在块的外部访问到该变量,并不会报错。如果能在以下几种情况下抛出异常:
- 访问内部变量会破坏代码的封装性
- 内部变量和外部变量没用任何联系
- 同级的兄弟块中可能想要使用相同的变量
- 某个父块中已经可能存在的相同变量,但仍然需要在内部使用该变量
let声明,就是var声明的替代方案。
let声明
let遵循块级作用域规则,而不是默认的词法作用域的规则。相较于var而言,var只能通过嵌套函数来创建更深的作用域,而let只需要一个花括号即可。
let algorithm = {};
{
let language = {};
{
let questions = {};
}
// 在此尝试访问questions会报异常
}
// 在此尝试访问language会报异常
// 在此尝试访问questions会报异常
let有个非常有用的方法,在for中使用let,作用域会封闭在循环体内能获取到想要的值:
for (var i = 0; i < 5; i++) {
setTimeout(() => console.log(i));
}
// 5
// 5
// 5
// 5
// 5
for (let i = 0; i < 5; i++) {
setTimeout(() => console.log(i));
}
// 0
// 1
// 2
// 3
// 4
这是var的典型案例,因为i的值会被绑定到函数作用域,但是因为for不是函数,就渗透出去。在每个循环添加时间回调时,i的值一直增加到5。在等输出时就输出最终值。
相反,let声明绑定块级作用域,每次循环都会有新的绑定。每次添加时间回调时,每个回调都会保存一个新的变量i的值。
暂时性死区
变量在作用域开始前就会创建,但是会产生暂时性死区,在变量未执行前无法访问。
console.log(study);//ReferenceError: study is not defined
let study = "algorithm";
暂时性死区的主要目的:
- 更轻松的捕捉错误
- 以防用户在声明变量前,就使用变量
- 避免由于变量提升导致的不良编码习惯
const声明
于let相似,const也遵循块级作用域,也存在暂时性死区。实际上暂时性死区就是为const实现的,之后为统一也应用于let。const之所以需要暂时性死区,是因为如果没暂时性死区,就可以在const声明执行前给提升的const变量赋值,执行语句会报错。
// const 遵循块级作用域规则
const study = algorithm;
{
const study = language;
console.log(study); //language
}
console.log(study); //algorithm
const于let的不同:
1.const必须在声明时就初始化
const algorithm = "nignt";
const language;//语法错误,缺少初始化
2.用const声明的变量(是简单数据类型时)值不可改变
const algorithm = "nignt";
const language = 1;
if (algorithm === "nignt") {
language = 2;//捕获类型错误:分配给常量变量
}