【JavaScript】＜脚本语言规范EcmaScript＞ES6新特性

 目录

一、ES概述：

 二、let关键字：

三、const关键字：

四、变量的解构赋值：

五、模板字符串：

六、简化对象写法：

七、箭头函数：

八、rest参数：

九、spread扩展运算符：

十、Symbol：

1.Symbol基本使用：

2.Symbol内置值：

 十一、迭代器：

十二、生成器：

---

一、ES概述：

        ES全称EcmaScript，是脚本语言的规范，而平时经常编写的Javascript是EcmaScript的一种实现，所以ES新特性其实指的就是Javascript的新特性。

        ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际。

ECMA-262 - Ecma International (ecma-international.org)https://www.ecma-international.org/publications-and-standards/standards/ecma-262/ ECMA-262（ECMAScript）历史版本：

---

 二、let关键字：

        let 关键字用来声明变量，使用 let 声明的变量有几个特点：let 关键字用来声明变量，使用 let 声明的变量有几个特点：

• 声明必须赋初始值
• 标识符一般为大写
• 不允许重复声明
• 值不允许修改
• 块儿级作用域

应用场景：以后声明变量使用 let 就对了

---

三、const关键字：

const 关键字用来声明常量，const 声明有以下特点：

• 声明必须赋初始值
• 标识符一般为大写
• 不允许重复声明
• 值不允许修改
• 块儿级作用域

注意: 对象属性修改和数组元素变化不会出发 const 错误

应用场景：声明对象类型使用 const，非对象类型声明选择 let

---

四、变量的解构赋值：

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

//数组的解构赋值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];
let [zhang, liu, li, guo] = arr;

//对象的解构赋值
const lin = {
 name: '林志颖',
 tags: ['车手', '歌手', '小旋风', '演员']
};
let {name, tags} = lin;

//复杂解构
let wangfei = {
 name: '王菲',
 age: 18,
 songs: ['红豆', '流年', '暧昧', '传奇'],
 history: [
 {name: '窦唯'},
 {name: '李亚鹏'},
 {name: '谢霆锋'}
 ]
};
let {songs: [one, two, three], history: [first, second, third]} = 
wangfei;

---

五、模板字符串：

模板字符串（template string）是增强版的字符串，用反引号（` `）标识，特点：

• 字符串中可以出现换行符
• 可以使用${xxx}形式输出变量

注意：当遇到字符串与变量拼接的情况使用模板字符串

---

六、简化对象写法：

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁：

let name = 'krian';
let slogon = '热爱编程';
let improve = function () {
 console.log('不断进步！！！');
}
//属性和方法简写
let atguigu = {
 name,
 slogon,
 improve,
 change() {
 console.log('可以改变你')
 }
};

---

七、箭头函数：

ES6允许使用箭头（=>）定义函数，箭头函数注意点：

• 如果形参只有一个，则小括号可以省略
• 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
• 箭头函数this指向声明时所在作用域下this的值
• 箭头函数不能作为构造函数实例化
• 不能使用arguments

ES6允许给函数参数赋值初始值，形参初始值位置一般放在最后！

---

八、rest参数：

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

/**
* 作用与 arguments 类似
*/
function add(...args){
 console.log(args);
}
add(1,2,3,4,5);

/**
* rest 参数必须是最后一个形参
*/
function minus(a,b,...args){
 console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);

---

九、spread扩展运算符：

        扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

/**
* 展开数组
*/ 
let tfboys = ['德玛西亚之力','德玛西亚之翼','德玛西亚皇子'];
function fn(){
 console.log(arguments);
}
fn(...tfboys)
/**
* 展开对象
*/
let skillOne = {
 q: '致命打击',
};
let skillTwo = {
 w: '勇气'
};
let skillThree = {
 e: '审判'
};
let skillFour = {
 r: '德玛西亚正义'
};
let gailun = {...skillOne, ...skillTwo,...skillThree,...skillFour};

---

十、Symbol：

1.Symbol基本使用：

        ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。

Symbol 特点：

• Symbol 的值是唯一的，用来解决命名冲突的问题
• Symbol 值不能与其他数据进行运算  
• Symbol 定义的对象属性不能使用 for…in 循环遍历 ，但是可以使用Reflect.ownKeys来获取对象的所有键名

2.Symbol内置值：

        除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。

---

 十一、迭代器：

        遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

• ES6 创造了一种新的遍历命令 for...of 循环， Iterator 接口主要供 for...of 消费
• 原生具备 iterator 接口的数据 ( 可用 for of 遍历 )
  • Array Arguments Set Map String TypedArray NodeList
• 工作原理：
  • 创建一个指针对象，指向当前数据结构的起始位置
  • 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
  • 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
  • 每调用 next 方法返回一个包含 value 和 done 属性的对象

---

十二、生成器：

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同：

function * gen(){
 yield '一只没有耳朵';
 yield '一只没有尾巴';
 return '真奇怪'; }
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

代码说明：

• * 的位置没有限制
• 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到yield 语句后的值
• yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next 方法，执行一段代码
• next 方法可以传递实参，作为 yield 语句的返回值