《深入理解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;//捕获类型错误：分配给常量变量
 }

《深入理解JavaScript特性》学习总结1-ES6基础知识点总结（上）

ES6特性

ES6基础

对象字面量

属性值简写

可计算属性名

方法定义

箭头函数

词法作用域

使用箭头函数的优点和用例

解构

对象解构

数组解构

函数参数的解构

剩余参数和扩展运算符

剩余参数

扩展运算符

模板字面量

字符串插值

多行模板字面量

标签模板

let和const声明

变量提升

let声明

暂时性死区

const声明

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

《深入理解JavaScript特性》学习总结1-ES6基础知识点总结 （上）

ES6特性

ES6基础

对象字面量

属性值简写

可计算属性名

方法定义

箭头函数

词法作用域

使用箭头函数的优点和用例

解构

对象解构

数组解构

函数参数的解构

剩余参数和扩展运算符

剩余参数

扩展运算符

模板字面量

字符串插值

多行模板字面量

标签模板

let和const声明

变量提升

let声明

暂时性死区

const声明

热门文章

最新文章

相关课程

相关电子书

相关实验场景

《深入理解JavaScript特性》学习总结1-ES6基础知识点总结（上）