ES6常用语法

本文主要介绍ES6的一下常用语法。

1let和const

let与const都是只在声明所在的块级作用域内有效。
let声明的变量可以改变,值和类型都可以改变,没有限制。而const声明的是常亮,值和类型都不能改变。
对于引用类型的变量,const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变。如果想让定义的对象或数组的内部数据也不能够修改和改变,可以使用object.freeze(names)进行冻结,这样为对象添加新属性就不起作用。

Example:

1
2
3
4
5
6
7
8
9
10
11
12
{
let a = 1;
const b=2;
var c = 3;
}

a // ReferenceError: a is not defined.
b // ReferenceError: a is not defined.
c // 3

const d=4;
d=5 //TypeError: Assignment to constant variable.

2解构赋值

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

Example:

1
2
3
4
5
6
7
//ES5
let a = 1;
let b = 2;
let c = 3;

//ES6
let [a, b, c] = [1, 2, 3];

数组嵌套解构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let [a, [[b], c]] = [1, [[2], 3]];
a // 1
b // 2
c // 3

let [ , , third] = ["a", "b", "c"];
third // "c"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

数组解构设置默认值:

1
2
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a']; // x='a', y='b'

对象解构赋值:

1
2
3
4
5
6
7
let { a, b } = { a: 'aaa', b: 'bbb' };
a // "aaa"
b // "bbb"
let { c } = { a: 'aaa', b: 'bbb' };
c // undefined
let { d: e } = { e: 'eee', f: 'fff' };
e // "eee"

对象解构设置默认值:

1
2
let {x, y = 'x'} = { x: 'x', y:'y' };
let [x, y = 'y'] = { x: 'x' }; // x='x', y='y'

3数组的新增方法

扩展运算符:

1
2
console.log(...[1, 2, 3])
// 1 2 3

find和findIndex:

1
2
3
4
5
6
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2

includes(value,index):
该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。

1
2
3
4
5
[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true

filter方法:
filter用来过滤数组中不满足条件的元素, 把满足条件的元素放到新的数组里, 并且不会改变原数组

1
2
3
4
5
6
let array = [1, 2, 3, 4, 5];
let temp = array.filter((item, index, arr) => {
return item > 3;
});
console.log(temp); //[4, 5]
console.log(array); //[1, 2, 3, 4, 5]

every方法:
every会遍历数组, 判读是否满足给定的条街, 如果每一项都是true, 就会返回true, 只要有一个是false, 就会返回false

1
2
3
4
5
let array = [1, 2, 3, 4, 5];
let bo = array.every((item, index, arr) => {
return item > 2;
});
console.log(bo);

some方法:
every会遍历数组, 判读是否满足给定的条街, 只要有一项true, 就会返回true, 否则返回false

1
2
3
4
5
let array = [1, 2, 3, 4, 5];
array.some((item, index, arr) => {
console.log(item);
return item > 3;
});

reduce方法:
接收一个函数作为累加器, 数组中每个值(从左到右)开始缩减, 最终为一个值,也就是计算总合

1
2
3
4
5
let array = [1, 2, 3, 4, 5];
let total = array.reduce((prev, next) => {
return prev + next;
});
console.log(total); // 15

4对象的新增方法

Object.assign:
Object.assign用于对象的合并,方法的第一个参数是目标对象,后面的参数都是源对象。

1
2
3
4
5
6
7
const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.keys和Object.values:
Object.keys方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。

1
2
3
4
5
var obj = { a: 'aaa', b: 'bbb' };
Object.keys(obj)
// ["a", "b"]
Object.values(obj)
// ["aaa", "bbb"]

Object.entries和Object.fromEntries:
Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
Object.fromEntries方法是Object.entries的逆操作,用于将一个键值对数组转为对象。

1
2
3
4
5
6
7
8
var obj = { a: 'aaa', b: 'bbb' };
Object.entries(obj)
// [["a", "b"],["aaa", "bbb"]]
Object.fromEntries([
['a', 'b'],
["aaa", "bbb"]
])
// { foo: "bar", baz: 42 }

4Promise 对象

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。

Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态

基本用法:

1
2
3
4
5
6
7
const promise = new Promise(function(resolve, reject) {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});

Promise.prototype.then():
then方法参数是resolved状态的回调函数。

1
2
3
axios.get("/xxx").then(function(result) {
return result;
})

Promise.prototype.catch():
catch方法的参数是reject状态的回调函数。

1
2
3
axios.get("/xxx").catch(function(err) {
return err;
})

Promise.prototype.finally():
finally方法的参数是reject状态的回调函数。

1
2
3
axios.get("/xxx").finally(() => {
return "完成";
})

Promise.all():
Promise.all方法接受一个数组作为参数,p1、p2、p3必须为Promise实例

1
Promise.all([p1, p2, p3]);

Promise.race():
Promise.race方法同样是将多个Promise实例,包装成一个新的Promise 实例

1
const p = Promise.race([p1, p2, p3]);

Promise.resolve():
Promise.resolve(result)会返回一个新的Promise实例,该实例的状态为fulfilled。

1
const p = Promise.resolve('成功了');

Promise.reject():
Promise.reject(err)会返回一个新的Promise实例,该实例的状态为rejected。

1
const p = Promise.reject('出错了');

扫一扫,请老师喝水