ES6+好用的小技巧，讓你的程式碼更乾淨，短巧，易讀

模板字串

let name = 'siri', age = 18, job = 'front-end engineer'
let oldStr = 'Hi, ' + name + ', I\'m ' + age + ' and work as a ' + job + '.';

let newStr = `Hi, ${ name }, I'm ${ age } and work as a ${ job }.`;

複製程式碼

擴充套件操作符

… 操作符，有兩個主要用處：

1. 複製一個新的陣列或物件
2. 把多個引數賦值給一個陣列變數
3. 把一個陣列變數賦值給多個引數

let a = [1, 2, 3]
let b = [...a] // b是一個新的陣列，內容和a一樣
let c = [...a, 4, 5, 6]

let car = { type: 'vehicle ', wheels: 4};
let newCar = {...car}
console.log(newCar); // { type: 'vehicle ', wheels: 4}

// 合併物件屬性，後邊的屬性會覆蓋前邊的，可用於修改物件的某個屬性值
let car2 = {...car, type: 'vehicle2', wheels: 2} // {type: "vehicle2", wheels: 2}
複製程式碼

function foo(...args) {
    console.log(args); 
} 
foo( 'car', 54, 'tree');  //  console.log 輸出 [ 'car', 54, 'tree' ] 
複製程式碼

預設引數

// 給方法新增預設引數值
function foo( a = 5, b = 10) {
    console.log( a + b);
} 
foo();  // 15
foo( 7, 12 );  // 19
foo( undefined, 8 ); // 13
foo( 8 ); // 18
foo( null ); // 10 as null is coerced to 0
複製程式碼

// 預設引數值也可以是表示式或者函式
function foo( a ) { return a * 4; }

// y = x + 4, z = foo(x)
function bar( x = 2, y = x + 4, z = foo(x)) {
    console.log([ x, y, z ]);
}

bar();  // [ 2, 6, 8 ]
bar( 1, 2, 3 ); //[ 1, 2, 3 ] 
bar( 10, undefined, 3 );  // [ 10, 14, 3 ]
複製程式碼

// 物件引數預設值，如果引數為空，則會丟擲異常
function show({ title = "title", width = 100, height = 200 }) {
  console.log( `${title} ${width} ${height}` );
}
show() // Cannot destructure property `title` of 'undefined' or 'null'.
show({}) // title 100 200

// 解決辦法：
function show({ title = "title", width = 100, height = 200 } = {}) {
  console.log( `${title} ${width} ${height}` );
}

show(); // title 100 200
show({width: 200}) // title 200 200
複製程式碼

解析賦值

// key變數重新命名， first --> firstName
const person = {
  first: 'foo',
  last: 'tom',
};

const { first: firstName } = person;
console.log(firstName); // foo
複製程式碼

// 預設值
const settings = {
    speed: 150
}
const { speed = 750, width = 500 } = settings;
console.log(speed); // 150 
console.log(width); // 500

// 可能不存在的key
const { middle: middleName = 'midname' } = person;
console.log(middleName); // 'midname'
複製程式碼

// 巢狀賦值
const user = {
  id: 339,
  name: 'Fred',
  age: 42,
  education: {
    degree: 'Masters'
  }
};
const {education: {degree}} = user;
console.log(degree); //prints: Masters
複製程式碼

// 如果巢狀的屬性不存在
const user = {
  id: 339,
  name: 'Fred',
  age: 42
};
const {education: {degree}} = user;  // TypeError: Cannot match against 'undefined' or 'null'.

// 解決辦法：
const user = {
  id: 339,
  name: 'Fred',
  age: 42
};
const {education: {degree} = {}} = user;
console.log(degree); //prints: undefined
複製程式碼

利用陣列生成一個數字序列

const numRange = (start, end) => {
  return Array(end - start + 1).fill().map((item, index) => start + index);
};

const numbers = numRange(0, 5); // [0, 1, 2, 3, 4, 5]
const numbers2 = numRange(1, 5); // [1, 2, 3, 4, 5]


複製程式碼

利用Set給陣列去重

const years = [2016, 2017, 2017, 2018, 2018, 2019]

// set建構函式的引數是一個array
const distinctYears = [...new Set(years)] // [2016, 2017, 2018, 2019]
複製程式碼

生成唯一隨機字串，可以指定長度

function generateRandom(length) {
	let radom13chars = function () {
		return Math.random().toString(16).substring(2, 15)
	}
	let loops = Math.ceil(length / 13)
	return new Array(loops).fill(radom13chars).reduce((string, func) => {
		return string + func()
	}, '').substring(0, length)
}

generateRandom(8) // "03836a49"
複製程式碼