推荐30个JavaScript技巧写法（二）

16 使用Array.from()从类数组对象创建数组

let nodeList = document.querySelectorAll('div');
let nodeArray = Array.from(nodeList)

17 可迭代对象的for…of循环

for(let value of ['a', 'b' , 'c']) {
    console.log(value)
}

18 使用Promise.all()实现并发Promise

let promises = [fetch(url1), fetch(url2)];
Promise.all(promises).then(response => console.log('All done'));

19 函数参数的剩余参数

function sum(...nums) {
    return nums.reduce((acc, current) => acc + current, 0);
}

20 用于性能优化的记忆

const memoize = (fn) => {
  const cache = {};
  return(...args) => {
    let n= args[0]; // assuming single argument for simplicity
    if(n in cache){
      console.log('Fetching from cache');
      return cache[n];
    } else {
      console.log('calculating result');
      let result = fn(n);
      cacheIn]= result;
      return result;
    };
  }
}

21 使用^交换值

let a = 1, b = 2;
a ^= b; b ^= a; a ^= b; // a = 2, b = 1

22 使用flat()展平数组

let nestedArray = [1, [2, [3, [4]]]];
let flatArray = nestedArray.flat(Infinity);

23 用一元加法转化为数字

let str = "123";
let num = +str; // 123 as a number

24 HTML片段的模板字符串

let items = ['apple', 'orange', 'banana'];
let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;

25 使用扩展运算符合并对象

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergeObj = { ...obj1, ...obj2 };
console.log(mergeObj); //  { a: 1, b: 3, c: 4 }

26 默认短路

let options = userOptions || defaultOptions;

27 使用括号表示法动态访问对象属性

let property = "name";
let value = person[property]; // Equivalent to person.name

28 使用Array.includes进行存在检查

if(maArray.includes("value")) {
    // Do somthing
}

29 Function.prototype.bind()的强大功能

const greet = function(greeting, punctuation) {
    return `${greeting}, ${this.name}${punctuation}`;
}
const greetJson = greet.bind({name: 'John'}, 'Hello');
console.log(greetJson('!')); 
// "Hello, John!"

30 防止对象被修改

let obj = {name: 'Immutable'};
Object.freeze(obj);
obj.name = 'Mutable';
// Fails silently in non-strict mod