《深入理解JavaScript特性》学习总结1-ES6基础知识点总结
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;//捕获类型错误：分配给常量变量 }
