操作符

// &&操作符
if (this.isTrue) {
  this.test();
}

this.isTrue && this.test(); // 同上

// ||操作符
let num;
if (this.value) {
  num = this.value;
} else {
  num = 2;
}
let num = this.value ? this.value : 2;

let num = this.value || 2; // 同上

// !操作符
if (value == false) {}
if (value == '') {}
if (value == 0) {}
if (value == null) {}
if (value == undefined) {}

if (!value) {} // 同上

// !!操作符
if (value == true) {}
if (value == false) {}
if (Boolean(value)) {}

if (!!value) {} // 同上
 

拓展運算子

// 物件合併
let obj = { a: 0 };
let obj1 = { a1: 1 };
let obj2 = { a2: 2 };

// 方式一
obj.a1 = obj1.a1;
obj.a2 = obj2.a2;

// 方式二（...拓展運算子）
obj = { ...obj1, ...obj2 };

// 數組合並
let arr = [];
let arr1 = [1, 2];
let arr2 = [3, 4];

// 方式一
arr = arr.concat(arr1);
arr = arr.concat(arr2);

// 方式二（...拓展運算子）
arr = [ ...arr1, ...arr2 ];
 

解構賦值

// 物件
let res = {
  detail: {
    a: 1,
    b: 2,
    c: 3
  }
}

// 方式一
const a = res.detail.a;
const b = res.detail.b;
const c = res.detail.c;

// 方式二（解構賦值）
const { a, b, c } = res.detail;

// 陣列
let arr = [1, 2, 3];

// 方式一
const a = arr[0];
const b = arr[1];
const c = arr[2];

// 方式二（解構賦值）
const [a, b, c] = arr;
 

字串

// 模板字串
let title = '標題';
let text = '文字';

// 方式一
let htmlStr = 
'<div>'
  '<h1>' + title + '</h1>';
  '<p>這是' + text + '</p>';
'</div>';

// 方式二
let htmlStr = 
`
<div>
  <h1>${title}</h1>
  <p>這是${text}</p>
</div>
`

陣列

const arr = [1, 2, 3];

// 是否所有的都滿足
arr.every((value)=> value > 2); // false

// 是否有一個滿足
arr.some((value)=> value > 2); // true

// 獲得滿足條件的新陣列
const new_arr = arr.filter((value)=> value > 1);  // [2, 3];

// 獲得轉化後的新陣列
const new_arr = arr.map((value)=> value * 10); // [10, 20, 30];

// 對陣列中所有數求和
const new_arr = numbers.reduce((x, y) => x + y); // 6；

// 將類陣列轉化為陣列
const doms = document.querySelectorAll('div');
const new_arr = Array.prototype.slice.call(doms);

物件

// 動態屬性名
const dynamic = 'color';
const item = {
    brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); // { brand: "Ford", color: "Blue" }

// 帶條件的物件屬性
const getUser = (emailIncluded) => {
  return {
    name: 'John',
    surname: 'Doe',
    ...(emailIncluded ? { email : '[email protected]' } : null)
  }
}
const user = getUser(true);
console.log(user); // outputs { name: "John", surname: "Doe", email: "[email protected]" }

const userWithoutEmail = getUser(false);
console.log(userWithoutEmail); // outputs { name: "John", surname: "Doe" }

其他

// 精準的型別判斷
const isType = (value) => Object.prototype.toString.call(value).toLowerCase();
isType(null);           // '[object null]'
isType(undefined);      // '[object null]'
isType([]);             // '[object array]'
isType({});             // '[object object]'
isType(1);              // '[object number]'
isType('1');            // '[object string]'
isType(true);           // '[object boolean]'

// 陣列中求唯一值
const nums = [1, 2, 3, 1];
Array.from(new Set(nums)); // [1, 2, 3];
[...new Set(nums)]; // [1, 2, 3];

// 陣列中求最大值
const nums = [1, 2, 3, 1];
Math.max.apply(null, num); // 3;
Math.max(...num); // 3;