ES6
1、变量声明 var、let、const
var 声明没有块级作用域
let,const具有块级作用域，不具有变量提升
const 定义常量，不能被重新赋值
2、解构赋值
// 数组
let [a, b, c, d] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(d); //undefined
// 对象（保持键名一致）
let { e, f } = { e: 1, f: 2 };
console.log(e);// 1
console.log(f);// 2
3、字符串的扩展
3.1 遍历字符串
let s = "hello world!";
for (let item of s) {
console.log(item);// h,e,l,l,o, ,w,o,r,l,!
}
3.2 新增常见方法
JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数，表示开始搜索的位置。
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
3.3 模板字符串
const name = 'sheng';
const age = 18;
console.log(`My name is ${name} and is ${age} years old.`);
4 正则的扩展(做为了解知识)
RegExp 构造函数
字符串的正则方法
u 修饰符
y 修饰符
sticky 属性
flags 属性
s 修饰符：dotAll 模式
后行断言
Unicode 属性类
具名组匹配
String.prototype.matchAll
5、数值的扩展
// 如果参数类型不是数值，Number.isFinite一律返回false。
Number.isFinite(15); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false
// 如果参数类型不是数值，Number.isNaN一律返回false。
Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN('15') // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN('true' / 0) // true
Number.isNaN('true' / 'true') // true
Number.isInteger(); //用来判断一个数值是否为整数。
Math.trunc // 方法用于去除一个数的小数部分，返回整数部分。
Number.isSafeInteger();//则是用来判断一个整数是否落在这个范围之内。
6、函数的扩展
6.1、默认值
function foo(x = 5) {};
6.2 rest参数
function add(...values) {
console.log(values);// [ 2, 5, 3 ]
}
add(2, 5, 3);
6.3 箭头函数 this 将不会受到影响,可以直接用this调用父级的this
var f = v => v;
6.4 双冒号
foo::bar;
// 等同于
bar.bind(foo);
7、数组的扩展
7.1 扩展运算符
console.log(...[1, 2, 3]); // 1 2 3
// 扩展运算符还可以将字符串转为真正的数组。
[...'hello']// [ "h", "e", "l", "l", "o" ]
7.2 Array.from()
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
7.3 Array.of()
Array.of(3, 11, 8) // [3,11,8];
7.4 一些实例方法
find()
findIndex()
fill()
entries()
keys()
values()
includes()
8、对象的扩展
8.1 属性简写
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo};
function f(x, y) {
return {x, y};
}
// 等同于
function f(x, y) {
return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}
8.2 实例方法
Object.is(); // 比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。不同之处只有两个：一是+0不等于-0，二是NaN等于自身。
Object.assign(); //方法用于对象的合并
Object.getOwnPropertyDescriptor; // 方法可以获取该属性的描述对象。
for...in; //循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。
Object.keys; // 返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。
Object.getOwnPropertyNames(obj); // 返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。
Object.getOwnPropertySymbols(obj); //返回一个数组，包含对象自身的所有 Symbol 属性的键名。
Reflect.ownKeys(obj); // 返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。
Object.keys(); // 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。
Object.values(); // 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。
Object.entries(); // 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。
super // 关键字 this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。
9、Symbol
ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。
let s = Symbol();
typeof s
// "symbol"
10、Set和Map数据结构
10.1 Set
它类似于数组，但是成员的值都是唯一的，没有重复的值。
const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
console.log(i);
}
// 2 3 5 4
10.1.1 WeakSet
WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。
首先，WeakSet 的成员只能是对象，而不能是其他类型的值。
10.2 Map
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false
10.2.1 WeakMap
只接受对象作为键名（null除外），不接受其他类型的值作为键名。
11 Proxy(操作对象)
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming）， 即对编程语言进行编程。
var proxy = new Proxy({}, {
get: function(target, property) {
return 35;
}
});
proxy.time // 35
proxy.name // 35
proxy.title // 35
11、class
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
12、Promise 对象
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
promise.then(function(value) {
// success
}, function(error) {
// failure
});
13、Generators
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
ES7
1、includes
let array = [1,2,3,4];
if(array.includes(2)) {
console.log(true)
}
2、指数操作符
2**3 == 8
ES8
1、object.entries()
let obj = {a: 1, b: 2, c: 3};
Object.entries(obj).forEach(([key, value]) => {
console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
})
2、async&await
async fetchData(query) =>{
try {
const response = await axios.get(`/q?query=${query}`);
const data = response.data;
return data;
}
catch (error) {
console.log(error)
}
}
fetchData(query).then(data => {
this.props.processfetchedData(data)
})
