JS代码记录3

一些常用代码简写技巧

// 长格式
let x = 1;
let y = 2;

// 简写
let [x, y] = [1, 2];

let source = { a: 1, b: 2, c: 3, d: 4 }
let {a, c} = source  //等同于let a = source.a, c = source.c

//用Array.from() 讲类数组对象转换为数组
let divs = document.querySelectorAll('div')
let arrDivs = Array.from(divs)


//对象属性简写

//长格式
let key = 'name';
let obj = {};
obj[key] = 'zs';

//简写
let key = 'name'
let obj = {[key]: 'zs'}

 

//使用Array.prototype.flatMap()替代map与flat
// 长格式
let arr = [1, 2, 3];
let flattened = arr.map(x => [x, x * 2]).flat();
// [[1,2], [2,4], [3,6]] -> [1, 2, 2, 4, 3, 6]

// 简写（flatMap）
let arr = [1, 2, 3];
let flattened = arr.flatMap(x => [x, x * 2]);

 

//用Object.keys/values/entries代替for-in循环获取对象属性

// 长格式
let obj = {a: 1, b: 2, c: 3};
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

// 简写（Object.values）
let obj = {a: 1, b: 2, c: 3};
for (let value of Object.values(obj)) {
  console.log(value);
}

//使用String.prototype.repeat()创建重复字符串
// 长格式
let str = '';
for (let i = 0; i < 5; i++) {
  str += 'Hello ';
}

// 简写（repeat）
let str = 'Hello '.repeat(5);