JavaScript 一些實用技巧

快速建立從0到n的數字

let arr1 = [...(new Array(n)).keys()];
let arr2 = Array.from({length:n},(v, k) => k);

Array.from 用法

Array.from({ length: 3 }, () => 'haha') // ["haha", "haha", "haha"]

隨機返回幾個 emoji

Array.from(
  {length: 7},
  (v, i) => String.fromCodePoint(
    129300 + Math.floor(Math.random() * 20)
  )
); 

// ["🤜", "🤕", "🤡", "🤙", "🤧", "🤠", "🤥"]

數組的深拷貝

使用擴展運算符代替concat() 或者 slice()方法

let arr1 = [10, 20, 30];

// make a copy of arr1
let copy = [...arr1];

console.log(copy);    // → [10, 20, 30]

let arr2 = [40, 50];

// merge arr2 with arr1
let merge = [...arr1, ...arr2];

console.log(merge);    // → [10, 20, 30, 40, 50]

快速找出數組中的最大值、最小值

let arr = [10, 20, 30]

// 至關於 Math.max(10, 20, 30)

console.log(Math.max(...arr));    // → 30
console.log(Math.min(...arr));    // → 10

對象擴展

let obj1 = {
  a: 10,
  b: 20
};

let obj2 = {
  ...obj1,
  c: 30
};

console.log(obj2);    // → {a: 10, b: 20, c: 30}

注意，當obj2定義了與obj1中相同的屬性時，會自動覆蓋：

let obj1 = {
  a: 10,
  b: 20
};

let obj2 = {
  ...obj1,
  a: 30
};

console.log(obj2);    // → {a: 30, b: 20}

Object.assign() 應用

let obj1 = {a: 10};
let obj2 = {b: 20};
let obj3 = {c: 30};

// ES2018
console.log({...obj1, ...obj2, ...obj3});    // → {a: 10, b: 20, c: 30}

// ES2015
console.log(Object.assign({}, obj1, obj2, obj3));    // → {a: 10, b: 20, c: 30}

隨機字符串

Math.random().toString(16).substring(2) // 13位
Math.random().toString(36).substring(2) // 11位

取整

var a = ~~10.23     // 10

var b = 10.23 | 0   // 10

var c = 10.23 >> 0   // 10

每三個數字加逗號

// 正則：

var num = '1234567890'
var format = num.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

console.log(format) // 1,234,567,890


//非正則：

 function formatCash(str) {
       return str.split('').reverse().reduce((prev, next, index) => {
            return ((index % 3) ? next : (next + ',')) + prev
       })
}
console.log(formatCash('1234567890')) // 1,234,567,890

數字字符串轉換成數字(不用Number、parseInt和parseFloat)

var a ='666' 
+a  // 666

隨機打亂一個數組

let arr = [1,2,3,4,5,6,7,7]

arr.slice().sort(() => Math.random() - 0.5)

隨機顏色，隨機十六進制代碼

'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');

用最短的代碼實現一個長度爲m(6)且值都n(8)的數組

Array(6).fill(8)

判斷奇偶數

const isEven = num => num % 2 === 0;
// isEven(3) -> false

斐波納契數組

const fibonacci = n =>
    Array(n).fill(0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);
    
// fibonacci(5) -> [0,1,1,2,3]

大寫每一個單詞的首字母

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
// capitalizeEveryWord('hello world!') -> 'Hello World!'

反轉一個字符串

const reverseString = str => [...str].reverse().join('');
// reverseString('foobar') -> 'raboof'

取整

// 1. 丟棄小數，保留整數

parseInt(5/2);

// 2.向上取整 

Math.ceil(5/2);

// 3,四捨五入.

Math.round(5/2);

// 4,向下取整

Math.floor(5/2);