1. 用扩展运算符合并对象和对象数组

合并对象并不是一个罕见的问题，你很有可能已经遇到过这个问题，并且在不远的未来还会再次遇到。不同的是，在过去你手动完成了大部分工作，但从现在开始，你将使用 ES6 的新功能。

// 合并对象
const product = { name: "Milk", packaging: "Plastic", price: "5$" };
const manufacturer = { name: "Company Name", address: "TheCompany Address" };
const productManufacturer = { ...product, ...manufacturer };
console.log(productManufacturer);
{
  /*
    输出 { name: "Company Name", 
    packaging: "Plastic", 
    price: "5$",
    address: "The Company Address" }
*/
}
// 将对象数组合并成一个对象
const cities = [
  { name: "Paris", visited: "no" },
  { name: "Lyon", visited: "no" },
  { name: "Marseille", visited: "yes" },
  { name: "Rome", visited: "yes" },
];
const result = cities.reduce((accumulator, item) => {
  return {
    ...accumulator,
    [item.name]: item.visited,
  };
}, {});
console.log(result);
/* 输出
    {Paris: 'no', Lyon: 'no', Marseille: 'yes', Rome: 'yes'}
    */

2. 根据条件添加对象属性

现在，你不再需要根据条件创建两个不同的对象，以使其具有特定属性。扩展操作符将是一个完美的选择。

const getUser = (emailIncluded) => {
  return {
    name: "John",
    surname: "Doe",
    ...(emailIncluded ? { email: "john@doe.com" } : null),
  };
};
const user = getUser(true);
console.log(user); // 输出 { name: "John", surname: "Doe", email: "john@doe.com" }
const userWithoutEmail = getUser(false);
console.log(userWithoutEmail); // 输出 { name: "John", surname: "Doe"

3.解构原始数据

    const rawUser = {
    name: 'John',
    surname: 'Doe',
    email: 'john@doe.com',
    displayName: 'SuperCoolJohn',
    joined: '2016-05-05',
    image: 'path-to-the-image',
    followers: 45
    ...
    }

通过把上面的对象分成两个，我们可以用更能传递上下文含义的方式来表示这个对象，如下所示：

let user = {},
  userDetails = {};
({ name: user.name, surname: user.surname, ...userDetails } = rawUser);
console.log(user); // 输出 { name: "John", surname: "Doe" }
console.log(userDetails); // 输出 { email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45 }

4. 动态设置对象属性名

在过去，如果我们需要动态设置对象的属性名，我们必须首先声明一个对象，然后再给它分配一个属性。这不可能以单纯声明的方式实现。今时不同往日，现在我们可以通过 ES6 的功能实现这一目标。

const dynamic = "email";
let user = {
  name: "John",
  [dynamic]: "john@doe.com",
};
console.log(user); // 输出 { name: "John", email: "john@doe.com" }

5.检测对象中属性

当你需要检测一些属性是否存在，避免运行未定义的函数或属性时，这个小技巧就显得很有用。如果你打算定些一些跨兼容的浏览器代码，你也可能会用到这个小技巧。例如，你想使用 document.querySelector()来选择一个 id，并且让它能兼容 IE6 浏览器，但是在 IE6 浏览器中这个函数是不存在的，那么使用这个操作符来检测这个函数是否存在就显得非常的有用，如下面的示例：

//if in
if ("querySelector" in document) {
  document.querySelector("#id");
} else {
  document.getElementById("id");
}

在这个示例中，如果 document 不存在 querySelector 函数，那么就会调用 docuemnt.getElementById("id")。

6. 传递对象参数代替过长的参数列表

函数参数过长那么就增加出错的风险，想保证传递的顺序正确就是一件麻烦的事，代码可读性也会变差，尽量保证函数的参数不会太长。如果必须传递多个参数的话，建议使用对象代替。 一般来说，函数参数最好不要超过 3 个

function setUserInfo(id, name, address, sex, mobile, qq) {
  console.log("id= " + id);
  console.log("name= " + name);
  console.log("address= " + address);
  console.log("sex= " + sex);
  console.log("mobile= " + mobile);
  console.log("qq= " + qq);
}
setUserInfo(1314, "sven", "shenzhen", "male", "137********", 377876679);

function setUserInfo(obj) {
  console.log("id= " + obj.id);
  console.log("name= " + obj.name);
  console.log("address= " + obj.address);
  console.log("sex= " + obj.sex);
  console.log("mobile= " + obj.mobile);
  console.log("qq= " + obj.qq);
}
setUserInfo({
  id: 1314,
  name: "sven",
  address: "shenzhen",
  sex: "male",
  mobile: "137********",
  qq: 377876679,
});

7. 合理使用链式调用

优点： 链式调用使用简单，代码量少。 缺点： 链式调用带来的坏处就是在调试不方便，如果我们知道一条链中有错误出现，必须得先把这条链拆开才能加上一些调试 log 或者增加断点，这样才能定位错误出现的地方。 如果该链条的结构相对稳定，后期不易发生修改，可以使用链式。

var User = {
  id: null,
  name: null,
  setId: function(id) {
    this.id = id;
    return this;
  },
  setName: function(name) {
    this.name = name;
    return this;
  },
};
User.setId(1314).setName("sven");

var user = new User();
user.setId(1314);
user.setName("sven");

8.使用 Object.is()作比较

Object.is(0, 0); // true

参考链接

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is