ES6相关信息- 校招VIP

文章声明：转载来源：https://zhuanlan.zhihu.com/p/74229052

ES6

为什么学习ES6

- 提供了更加方便的新语法**弥补** JS 语言本身的**缺陷**，新增了便捷的语法
- 给内置对象增加了更多的方法
- ES6 让 JS 可以开发复杂的大型项目，成为企业级开发语言
- 新的前端项目中大量使用 ES6 的新语法

ES6 是什么

- [ECMAScript](ECMAScript_百度百科) 6，简称ES6 。它是一种语言标准，6表示版本号。它是Ecma国际(European Computer Manufacturers Association)于`2015年6月`正式发布的 JavaScript 语言的下一代标准，正式名为ECMAScript 2015（简写ES2015）。它的目标是`使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 `。相比较ES5(2011年发布的)，它改进是非常大的，所以在一些场景下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等，但统称es6。
- ECMA的第39号技术专家委员会（Technical Committee 39，简称TC39）负责制订ECMAScript标准组织每年都会发布ECMAScript的版本
- ES2015：称为es6。
- ES2018: https://www.ecma-international.org/ecma-262/8.0/index.html
- ES2019：很可能也会在今年6月份发布

ES6与javascript的关系

ECMAScript是一种语言标准，javascript实现了这个标准。javascipt由三部分组成
1. ECMAScript
2. DOM
3. BOM

ES6电子书

1. 各种环境中对es6的支持程度：
2. es6电子书：

let和const

es5中提供了定义变量的关键字`var`，但是这个关键字的功能有限，它定义的变量也有很多奇怪的特性，并不能完全满足现在越来越复杂的环境，所以在es6中新增了两个关键字：let，const。

let变量

使用场景:
用来定义变量 , 基本格式与var关键字一样 , 在可以使用var的地方改成let

let与var的区别

1, 不能重复定义
2, 具有块级作用域 , 出了 { } 变量就不能访问
3, 没有变量提升 ( var 定义的变量是有变量提升的) , 必须先定义在使用
4, 不会附加到 window 对象的属性

代码演示:

// 1. let 定义变量，变量不可以再次定义，但可以改变其值
let name = 'zhangsan';
name = 'lisi';
console.log(name); // lisi
let name = 'wangwu'; // 再次定义，报错：Identifier 'name' has already been declared
-------------------------------------------
// 2. 具有块级作用域，块就是大括号
{
    let age = 18;
    console.log(age); // 18
}
console.log(age); // 报错，此作用域中没有age的定义


for (let i = 0; i < 10; i++) {
    // i 只能在此范围内使用，因为有块级作用域
}
console.log(i);  // 报错，此作用域中没有age的定义
-----------------------------------------------------------
// 3. 没有变量提升，必须先定义再使用
console.log(gender); // 报错，此时还没有定义gender
let gender = '男'; 


console.log(1); // 不报错，输出undefined
var a = 1; 
-----------------------------------------------
// 4. let声明的变量不会压到window对象中，是独立的
let hobby = '吃饭';
var a = 1
console.log(window.hobby); // undefined
console.log(window.a); // undefined
------------------------------------------------

如果使用了var声明了变量 , 也不能再次用let声明了, 反之也是不行的, 原因是这个变量已经被声明过了

最佳实践：实际开发要么全部使用var，要么全部使用let。由团队开发规范来定

const常量

使用场景 :
多个程序员共同开发项项目时，会遇到一种场景：有一些数据大家都需要用到，但是都不能修改，即数据是只读的。
举个例子：在开发公司的网站时，公司的基本信息：地址，公司名，电话等等信息可以在多个地方都需要使用，但不允许去修改。这个时候，就可以把这些数据保存在常量中。

const常量
语法格式及命名规范
// 格式：
const 常量名 = 常量值;
const COMPANY_NAME = "XXX公司"
- 区别于变量名，常量名一般采用全大写的方式
- 多个单词之间使用_划线分隔。

常见误区 :

const obj = {a:1};
obj.a = 2;
console.log(obj); // 问题：obj对象的属性值a是否修改了。

`const`实际上保证的，并不是变量的值不得改动，而是`变量指向的那个内存地址所保存的数据不得改动`。

1. 对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
2. 对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，`const`只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，`将一个对象声明为常量必须非常小心,它的属性是可以修改的`。

const常量与let相似的特点

1, 具有块及作用域
2, 没有变量提升 , 必须先定义在使用
3, 常量也是独立的, 定以后不会压入到 window 对象中, 不是 window 对象的属性

解构赋值
使用场景:
快速从数组或者对象中取出数据。
定义 :
ES 6 允许按照一定**模式**，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
- 解构：意思是把有结构的数据分解开成为一个一个的值；
- 赋值：把解构之后的值保存到变量

-------------------------------------
let arr = [1,2,3,4];
// 需求，快速地从数组中取出值来赋值给变量
let a = arr[0];
...
let d = arr[1];
console.log(a,b,c,d)

数组的解构赋值

- 语法格式及解构规则
- 常规使用:变量个数等于数组长值
- 非常规使用
- 变量个数大于数组长度
- 变量个数小于数组长度
- 高级使用
- 用空跳过不需要的值
- 剩余值
- 复杂嵌套场景

语法格式及解构规则:

// 格式：
let [变量1，变量2，... 变量n ] = [数组元素1，数组元素2.....,数组元素n]
// 规则：按赋值符号两边的数组，下标从小到大，一一对应。
1，变量个数等于数组长值
2，变量个数大于数组长度
3，变量个数小于数组长度
4，用空跳过不需要的值
5，剩余值
6. 复杂嵌套场景
场景1，变量个数等于数组长值

// 场景1，变量和值一一对应
let arr = [5, 9, 10];
let [a, b, c] = arr;
console.log(a, b, c); // 输出 5 9 10
// 等价于：
let a = arr[0];
let b = arr[1];
let c = arr[2];
//“=”左右两边的格式要统一。
			
// 场景2，变量多，值少
let arr = [5, 9, 10];
let [a, b, c, d] = arr;
console.log(a, b, c, d); // 输出 5 9 10 undefined
// 结论：没有匹配上的值是undefined


// 场景3，变量少，值多
let arr = [5, 9, 10, 8, 3, 2];
let [a, b] = arr;
console.log(a, b); // 5, 9
// 结论：多余的忽略
			
// 场景4，按需取值
let arr = [5, 9, 10, 8, 3, 2];
let [, , a, , b] = arr; // 不需要用变量接收的值，用空位占位
console.log(a, b); // 10, 3 
			
// 场景5，剩余值
let arr = [5, 9, 10, 8, 3, 2];
let [a, b, ...c] = arr; // ...c 接收剩余的其他值，得到的c是一个数组
console.log(a, b, c); 
// 结果：
// a = 5, 
// b = 9, 
// c = [10, 8, 3, 2]
//---------------------------注意：
//1. ...  的收集
//2. `Rest element must be last element`。必须在最后；


// 场景6，复杂的场景，只要符合模式，即可解构
let arr = ['zhangsan', 18, ['175cm', '65kg']];
let [, , [a, b]] = arr;
console.log(a, b); // 175cm 65kg