分类
ES6

JavaScript 中你应该知道的 旧习惯 与 新习惯(二)

创建对象时使用可计算属性名

旧习惯

  • 之前,如果属性名是个变量或者需要动态计算,则只能通过 对象.[变量名] 的方式去访问,且只能运行时才能确定
var name = 'answer';   
var obj = { };
obj[name]=42;
console.log(obj[name]) // 42

新习惯

var name = 'answer';   
var obj = { 
[name]:42
};
console.log(obj[name]) // 42

同名变量初始化对象时,使用简写语法

旧习惯:哪怕变量是局部变量,也要写完整key与value

function getParams(){
	let name;
	// 其他操作
	return {name:name}
}

新习惯:使用简写

function getParams(){
	let name;
	// 其他操作
	return {name}
}

使用 *Object.assign()*代替自定义的扩展方法或者显式复制所有属性

旧习惯 使用遍历key然后复制给新的对象

function mergeObjects() {
    var resObj = {};
    for(var i=0; i < arguments.length; i += 1) {
         var obj = arguments[i],
             keys = Object.keys(obj);
         for(var j=0; j < keys.length; j += 1) {
             resObj[keys[j]] = obj[keys[j]];
         }
    }
    return resObj;
}

新习惯 使用Object.assign代替

const target = { a: 1, b: 2 };

const returnedTarget = Object.assign({}, source);

console.log(returnedTarget); // {a:1,b:2}

使用属性扩展语法

旧习惯 基于已有对象创建新对象时,使用 Object.assign

const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };

const returnedTarget = Object.assign({},target, source);

console.log(returnedTarget); // {a:1,b:3,c:4}

新习惯 使用属性扩展语法

const a = { a: 1, b: 2 };
const b = { b: 3, c: 4 };

const returnedTarget = {...a,...b}; // {a: 1, b: 3, c: 4}

使用 Symbol 避免属性名冲突

旧习惯 使用可读性很差的又很长的字符串来用作属性名来避免冲突

const shapeType = {
  triangle: 'Triangle'
};

function getArea(shape, options) {
  let area = 0;
  switch (shape) {
    case shapeType.triangle:
      area = .5 * options.width * options.height;
      break;
  }
  return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 });

新习惯

const shapeType = {
  triangle: Symbol()
};

function getArea(shape, options) {
  let area = 0;
  switch (shape) {
    case shapeType.triangle:
      area = .5 * options.width * options.height;
      break;
  }
  return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 });

使用 Object.getPrototypeOf/setPrototypeOf 来代替 Proto

旧习惯 使用非标准的 Proto 来获取或者设置原型

新习惯 使用标准方法 Object.getPrototypeOf/setPrototypeOf 来获取或者设置原型

具体查看 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

使用对象方法的简写语法来定义对象中的方法

旧习惯 key 与 value 的形式

const obj = {
    fun : function(){
        // ...
    }
}

新习惯

const obj = {
    fun(){
        // ...
    }
}

遍历的姿势-可迭代对象

旧习惯 使用for循环或者 forEach 方法 来循环

// for
for(let i = 0; i < array.length; ++i){
    console.log(array[i]);
}
// forEach
array.forEach(entry => console.log(entry));

新习惯 当不需要下标的时候,考虑for-of

let arr = [1, 2, 3, 4]
for(let item of arr) {
  console.log(item) // 1, 2, 3, 4 
}

需要下标可以考虑
let arr = [1, 2, 3, 4]
for(let [index, value] of arr.entries()) {
  arr[index] = value * 10
}
console.log(arr) // [ 10, 20, 30, 40 ]

遍历的姿势-DOM

旧习惯 为了遍历DOM集合,将DOM集合转为数组或者使用Array.prototype.forEach.call 方法

Array.prototype.slice.call(document.querySelectorAll("div")).forEach(
    (div)=>//....
)
    
Array.prototype.forEach.call(document.querySelectorAll("div"),div=>{
    // ...
})

新习惯 确保DOM集合是可迭代的,然后使用for-of

for(const div of document.querySelectorAll("div"){
    // ...
}

在使用 Function.prototype.apply() 的大部分场景就可以使用可迭代对象的展开语法

旧习惯

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);
// expected output: 7

const min = Math.min.apply(null, numbers);

console.log(min);
// expected output: 2

新习惯 使用可迭代对象的展开语法

const numbers = [5, 6, 2, 3, 7];

const max = Math.max([...numbers]);

console.log(max);
// expected output: 7

const min = Math.min([...numbers]);

console.log(min);
// expected output: 2

该用解构用解构

旧习惯 使用对象中的少量属性就把整个对象保存

const bird = getBird();
console.log(bird.age);
console.log(bird.name);

新习惯 使用解构赋值,不需要整个对象的时候

let {age,name} = getBird();
console.log(age);
console.log(name);

对可选项使用解构赋值

旧习惯 使用代码处理默认值

function check(options){
    let options = Object.assign({},options,{
        a:1,
        b:2,
    })
    if(options.c === undefined){
        options.c = options.a + options.b
    }
    console.log(options.c)
    // ...
}

新习惯 将默认值提出来,通过解构来直接处理

function check(
{	
    a=1,
    b=2,
    c=a+b
} = {}){
    console.log(c)
    // ...
}

check({a:2}) // 4