JavaScript高级es6-ES6概念&新增语法&内置对象拓展

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

---

ES6语法

目标

• 能够说出使用let关键字声明变量的特点
• 能够使用解构赋值从数组中提取值
• 能够说出箭头函数拥有的特性
• 能够使用剩余参数接收剩余的函数参数
• 能够使用拓展运算符拆分数组
• 能够说出模板字符串拥有的特性

ES6相关概念

什么是ES6

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UmaNFEhC-1640762193173)(images/es-version.png)]

为什么使用 ES6 ?

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

• 变量提升特性增加了程序运行时的不可预测性
• 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

ES6新增语法

let

ES6中新增了用于声明变量的关键字

let声明的变量只在所处于的块级有效

 if (true) {
    
     let a = 10;
 }
console.log(a) // a is not defined

**注意：**使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

不存在变量提升

console.log(a); // a is not defined 
let a = 20;

暂时性死区

利用let声明的变量会绑定在这个块级作用域，不会受外界的影响

 var tmp = 123;
 if (true) {
    
     tmp = 'abc';
     let tmp; 
 } 

经典面试题

 var arr = [];
 for (var i = 0; i < 2; i++) {
   
     arr[i] = function () {
   
         console.log(i); 
     }
 }
 arr[0]();
 arr[1]();

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QORwvpP7-1640762193176)(images/let面试题.png)]

**经典面试题图解：**此题的关键点在于变量i是全局的，函数执行时输出的都是全局作用域下的i值。

 let arr = [];
 for (let i = 0; i < 2; i++) {
   
     arr[i] = function () {
   
         console.log(i); 
     }
 }
 arr[0]();
 arr[1]();

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dC8kzdB9-1640762193176)(images/let面试题2.png)]

**经典面试题图解：**此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值.

小结

• let关键字就是用来声明变量的
• 使用let关键字声明的变量具有块级作用域
• 在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
• 防止循环变量变成全局变量
• 使用let关键字声明的变量没有变量提升
• 使用let关键字声明的变量具有暂时性死区特性

const

声明常量，常量就是值（内存地址）不能变化的量

具有块级作用域

 if (true) {
    
     const a = 10;
 }
console.log(a) // a is not defined

声明常量时必须赋值

const PI; // Missing initializer in const declaration

常量赋值后，值不能修改

const PI = 3.14;
PI = 100; // Assignment to constant variable.

const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.