- 偶然在網(wǎng)上看到很多的ES6的小知識(shí)虑稼。于是總結(jié)總結(jié)留著備用裹刮，順便跟大家分享一下盏混。
展開(kāi)操作符
用于對(duì)象或數(shù)組之前的展開(kāi)操作符（…）蔚鸥，將一個(gè)結(jié)構(gòu)展開(kāi)為列表惜论。
let firstHalf = [ 'one', 'two'];
let secondHalf = ['three', 'four', ...firstHalf];
如果我們不使用展開(kāi)操作符的話，就需要循環(huán)遍歷結(jié)合數(shù)組的push操作才可以進(jìn)行數(shù)組的組合止喷」堇啵或者使用concat方法
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
//George,John,Thomas,James,Adrew,Martin
let firstHalf = [ 'one', 'two'];
let secondHalf = ['three', 'four'];
for(var i=0, i <firstHalf.length; i++ ) {
secondHalf.push(firstHalf[i]);
}
展開(kāi)操作符也可以用于合并對(duì)象的屬性：
const hero = {
name: 'Xena - Warrior Princess',
realName: 'Lucy Lawless'
}
const heroWithSword = {
...hero,
weapon: 'sword'
}
不用展開(kāi)操作符的話，需要遍歷對(duì)象的屬性：
let keys = Object.keys(hero);
let obj = {};
for(var i=0; i< keys.length; i++) {
obj[keys[i]] = keys[props[i]];
}
剩余參數(shù)
剩余參數(shù)將剩余的參數(shù)收入數(shù)列弹谁。JavaScript 的特性乾巧。通常會(huì)有一個(gè) arguments 變量收集參數(shù)。
function add(first, second, ...remaining) {
return first + second;
}
上面的一段代碼僅僅將 first 和 second 加起來(lái)预愤，也就是說(shuō)沟于，調(diào)用 add(1, 2) 和 add(1, 2, 3, 4) 會(huì)得到相同的結(jié)果。
下面我們修正一下：
function add(first, second, ...remaining) {
return first + second + remaining.reduce((acc, curr) => acc + curr, 0);
}
如前所述植康，…remaining 收集了剩余的參數(shù)旷太，為我們提供了這些參數(shù)的命名，清楚地表明我們打算處理剩余的參數(shù)销睁。我記得至遲 ES5 已經(jīng)有 arguments 了供璧，不過(guò)少有人知。
字符串插值
class Product {
constructor(name, description, price) {
this.name = name;
this.description = description;
this.price = price;
}
getDescription() {
return " Full description \n" +
" name: " + this.name +
" description: " + this.description
}
}
getDescription() 方法中那個(gè)可讀性不佳的多行長(zhǎng)語(yǔ)句冻记。
getDescription() {
return `Full description \n:
name: ${this.name}
description ${this.description}
`;
}
通過(guò)使用``模板字符串睡毒，在模板字符串內(nèi)使用${}來(lái)將變量放進(jìn)來(lái)。
所有模板字符串的空格和換行冗栗，都是被保留的.
console.log(`輸出值為 N,
換行`)
// "輸出值為 N
換行"
// 模板字符串之中還能調(diào)用函數(shù)演顾。
function fn() {
return "Hello World";
}
console.log(`輸出值為：${fn()}`) // "輸出值為：Hello World"
簡(jiǎn)寫屬性
在 ES5 中
function createCoord(x, y) {
return {
x: x,
y: y
}
}
ES6 以后
function createCoord(x, y) {
return {
x,
y
}
}
方法屬性
方法屬性是在對(duì)象中定義指向方法的屬性。
ES5 代碼
const math = {
add: function(a,b) { return a + b; },
sub: function(a,b) { return a - b; },
multiply: function(a,b) { return a * b; }
}
ES6 以后只需這么寫：
const math = {
add(a,b) { return a + b; },
sub(a,b) { return a - b; },
multiply(a,b) { return a * b; }
}
解構(gòu)賦值
function handle(req, res) {
const name = req.body.name;
const description = req.body.description;
const url = req.url;
log('url endpoint', url);
// 大量代碼邏輯
dbService.createPerson(name, description)
}
不管從什么角度來(lái)看隅居，上面的代碼都不完美钠至，但它確實(shí)體現(xiàn)了一種應(yīng)用場(chǎng)景。
function handle(req, res) {
const { body: { name, description }, url } = req;
log('url endpoint', url);
// 大量代碼邏輯
dbService.createPerson(name, description)
上面的代碼將三行壓縮成了一行军浆。同樣解構(gòu)賦值并不僅僅局限于對(duì)象棕洋。它同樣適用于數(shù)組。
const array = [1,2,3,4,5,6];
const a = array[0];
const c = array[2];
//使用更加優(yōu)雅的方式書(shū)寫出來(lái)
const array = [1,2,3,4,5,6];
const [a, ,c, ...remaining] = arr;
// remaining = [4,5,6]
// 小例子
let { a, b } = { a: "aaa", b: "bbb" };
a // "aaa"
b // "bbb"
//字符串也可以解構(gòu)賦值乒融。這是因?yàn)榇藭r(shí)掰盘，字符串被轉(zhuǎn)換成了一個(gè)類似數(shù)組的對(duì)象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
//交換變量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
//從函數(shù)返回多個(gè)值
// 返回一個(gè)數(shù)組
function example() {
let [a, b, c] = [1, 2, 3]
return [a, b, c]
}
let [a, b, c] = example();
// 返回一個(gè)對(duì)象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
我們可以使用上面的模式匹配分解數(shù)組的值赞季。我們使用 , , 跳過(guò)某些值愧捕。上面提到過(guò)的剩余參數(shù)這里也能用，在這里我們通過(guò)剩余參數(shù)捕獲了剩余的數(shù)組成員申钩。
解構(gòu)賦值還可以用于函數(shù)和參數(shù)次绘。函數(shù)有不止 2-3 個(gè)參數(shù)時(shí)，使用一個(gè)對(duì)象收集所有參數(shù)是 JavaScript 的事實(shí)標(biāo)準(zhǔn)。
//例如：
function doSomething(config) {
if(config.a) { ... }
if(config.b) { ... }
if(config.c) { ... }
}
//更好的寫法：
function doSomething({ a, b, c }) {
if(a) { ... }
if(b) { ... }
if(c) { ... }
}
//函數(shù)參數(shù)的默認(rèn)值
function funA (a = 1, b = 2){
return a + b;
}
funA(3) // 5 因?yàn)?a 是 3, b 是 2
funA(3邮偎，3) // 6 因?yàn)?a 是 3, b 是 3
//在 utils.js 中：
export const function A (){
console.log('A')
}
export const function B (){
console.log('B')
}
export const function C (){
console.log('C')
}
//在組件中引用
在 組件中引用時(shí)：
import { A, B, C } from "./utils.js"
//調(diào)用
A() // 輸出 A
部分轉(zhuǎn)載Vue中文社區(qū)公眾號(hào)
