ES6 新特性
1.let & const
let 和 const
ES6 建议不再使用var定义变量，而使用let定义变量，const定义常量
开发影响
对于开发的影响：均使用 const，实在需要修改变量，再改为 let
2.symbol
symbol
Symbol 是 ES6 中引入的一种新的基本数据类型，用于表示一个独一无二的值， 不能与其他数据类型进行运算。它是 JavaScript 中的第七种数据类型， 与 undefined、null、Number（数值）、String（字符串）、 Boolean（布尔值）、Object（对象）并列。
看下边代码领略 Symbol：
const sy = Symbol();
console.log(sy);
//Symbol()
//Symbol 属于数据基本类型 不是对象 不能 new
const sy2 = new Symbol();
//报错 Symbol is not a constructor3.模板字符串
模板字符串
在 ES6 之前，处理模板字符串 通过""& "+" 来构建模板
在 ES6 后， 用${} 来界定；反引号(``)直接完成；
const a = {
name: "NING",
age: 18,
};
console.log(`姓名:${a.name} 年龄:${a.age}`);
//姓名:NING 年龄:18对象
4.对象成员速写
在某场景情况下，ES6 提供一种简洁的方式书写对象成员
// 过去方式
const user = {
name: name,
age: age,
sayHello: sayHello,
};
// 速写
const user = {
name,
age,
sayHello,
};5.解构
ES6 提供了一种特殊的语法，通过该语法，可以轻松的从数组或对象中取出想要的部分
const user = {
name: "NING",
age: 18,
};
const { name, age } = user;
console.log(name, age);
// NING 186.展开运算符
const arr = [1, 2, 3];
// 数组展开
console.log(...arr);
//1 2 3
//对象展开
const obj1 = {
a: 1,
b: 2,
};
const obj2 = {
a: 3,
d: 4,
};
const resp = { ...obj1, ...obj2 };
console.log(resp);
//{ a: 3, b: 2, d: 4 }7.属性描述符
在对象每个成员中，js 可以使用属性描述它们
const user = {
name: "NING",
age: 18,
};
// 以上对象，在js内部被描述为
{
// 属性name
name:{
value: "NING"
configurable: true//该属性的描述是否可以被重新定义
enumerable: true//改属性是否允许被遍历，会影响for-in 循环
writable: true//改属性是否允许被修改
}
//属性age
age:{
value: 18
configurable: true//该属性的描述是否可以被重新定义
enumerable: true//改属性是否允许被遍历，会影响for-in 循环
writable: true//改属性是否允许被修改
}
}ES5 提供了一系列的 API 针对属性描述符进行操作
Object.getOwnPropertyDescriptor(obj,propertyName)
该方法用于获取一个属性的描述符
const user = {
name: "NING",
age: 18,
};
Object.getOwnPropertyDescriptor(user, "name");
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
name:{
value: "NING"
configurable: true //该属性的描述是否可以被重新定义
enumerable: true //改属性是否允许被遍历，会影响for-in 循环
writable: true //改属性是否允许被修改
}8.冻结
使用 Object.freeze(obj)可以冻结一个对象，冻结的对象所有属性不可修改
const obj = {
a: 1,
b: {
c: 2,
},
};
Object.freeze(obj);
obj.a = 5; //不报错 无效代码
obj.b = 6; // 不报错 无效代码
obj.b.c = 8; //b对象没有被冻结 有效
console.log(obj);
//{ a: 1, b: { c: 8 } }使用 Object.isFreeze 来判断一个对象是否被冻结
9.相同性判定
Object.is 方法，可判断两个值是否相同，他和===的功能基本一致，区别在：
- NaN 和 NaN 相等
- +0 和-0 不相等
console.log(Object.is(1, 2)); //false
console.log(Object.is("1", 1)); //false
console.log(Object.is(NaN, NaN)); //true
console.log(Object.is(+0, -0)); //false
// =========================
console.log(NaN === NaN); //false
console.log(+0 === -0); //true10.Set
ES6 新增了 Set 结构，用于保存唯一值的序列
11.Map
Map 对象保存键值对的映射，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。
12.箭头函数
所有使用箭头函数表达式的位置，均可以替换为箭头函数
const sum = function(a,b){
return a + b;
}
// 箭头函数写法
const sum = () => a + b;箭头函数特点
- 不能使用 new 调用
- 没有原型 既没有 prototype 属性
- 没有 arugments
- 没有 this
箭头函数的以上特点，足以说明：箭头函数特别适用于临时需要函数的位置
13.剩余参数
ES6 不在建议使用 arguments 来获取参数列表，它推荐使用剩余参数来收集未知数量的参数
// ...args为剩余参数
function method(a, b, ...args) {
console.log(a, b, args);
}
method(1, 2, 3, 4, 5, 6, 7, 8); //1 2 [ 3, 4, 5, 6, 7, 8 ]
method(1, 2); // 1 2 []14.参数默认值
ES6 提供了参数默认值，当参数没有传递或者传递 undefined 的时候，会使用默认值
function method(a, b = 1) {
console.log(a, b);
}
method(1, 2); //1 2
method(1); //1 1
method(1, undefined); //1 115.类语法
ES6 推出了一种全新的语法来书写构造函数
//旧的写法
function User(firetName, lastName) {
this.firetName = firetName;
this.lastName = lastName;
this.fullName = `${firetName} ${lastName}`;
}
User.isUser = function (u) {
return !!u && !!u.fullName;
};
User.prototype.sayHello = function () {
console.log(`Hello, my name is ${this.fullName}`);
};
//新的等效写法
class User {
constructor(firstName, lastName) {
this.firstName = firstName; // 修正拼写错误
this.lastName = lastName;
this.fullName = `${firstName} ${lastName}`; // 修正拼写错误
}
static isUser(u) {
return !!u && !!u.fullName;
}
sayHello() {
console.log(`Hello, my name is ${this.fullName}`);
}
}16.函数 API
17. Promise 异步操作
处理异步操作，可执行并发请求。
const promise = new Promise((resolve, reject) => {
// 异步操作
if (success) {
resolve('Success');
} else {
reject('Failure');
}
});
// 并发请求案例
const request = arr.map( async(id: number | string)=>{
return await getFetchData(id)
})
// 响应结果
const res = await Promise.all(request)当执行数组有若干个id 响应结果就有若干个
18. 模块
使用 import 和 export 语法实现模块化
// module.js
export const name = 'NingOEX'
// index.js
import {name} from './module.js'19. 迭代器与生成器
使用 function* 定义生成器，生成器可以按需生成值
function* generator() {
yield 1;
yield 2;
}
const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }20 . Map 和 Set
新引入的数据结构，提供更灵活的数据存储方式，使数据唯一性
const map = new Map();
map.set('key', 'value');
const set = new Set([1, 2, 3, 3]);
console.log(set) // [1,2,3]数据唯一性，仅且独份