JavaScript中的代码小技巧

JavaScript中的代码小技巧

ES5/6中的一些代码小技巧：

JSON.stringify

我们平时经常会用到 JSON 对象，比如当我们要实现对象的深拷贝时，我们可以用 JSON 对象的 JSON.stringify和 JSON.parse 来拷贝一个完全一样的对象，而不会对原对象产生任何引用关系。在使用 localStorage 时，也会用到它，因为 localStorage 只能存储字符串格式的内容，所以，我们在存之前，将数值转换成 JSON字符串，取出来用的时候，再转成对象或数组。

对于 JSON.stringify 方法，它可以帮我们把一个对象或数组转换成一个 JSON字符串。我们通常只会用到它的第一个参数，其实它还有另外两个参数，可以让它实现一些非常好用的功能。

首先来看语法：

JSON.stringify(value[, replacer [, space]])

参数：

• value：将要被序列化的变量的值
• replacer：替代器。可以是函数或者是数组，如果是一个函数，则 value每个属性都要经过这个函数的处理，该函数的返回值就是最后被序列化后的值。如果是一个数组，则要求该数组的元素是字符串，且这些元素会被当做value 的键（key）进行匹配，最后序列化的结果，是只包含该数组每个元素为 key 的值。
• space：指定输出数值的代码缩进，美化格式之用，可以是数字或者字符串。如果是数字（最大为10）的话，代表每行代码的缩进是多少个空格。如果是字符串的话，该字符串（最多前十个字符）将作显示在每行代码之前。

replacer使用函数过滤并序列化对象：

// 使用“函数”当替代器
function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}

var foo = {
  foundation: "Mozilla", 
  model: "box", 
  week: 45, 
  transport: "car", 
  month: 7
};
var jsonString = JSON.stringify(foo, replacer);

// {"week":45,"month":7}

replacer使用数组过滤并序列化对象：

// 使用“数组”当替代器
var user = {
  name: 'zollero',
  nick: 'z',
  skills: ['JavaScript', 'CSS', 'HTML5']
};
JSON.stringify(user, ['name', 'skills'], 2);

// "{
//   "name": "zollero",
//   "skills": [
//     "JavaScript",
//     "CSS",
//     "HTML5"
//   ]
// }"

用 Set 来实现数组去重

ES6中新增了Set数据结构，类似于数组，但是set中存储的数据不允许重复，严格判断 ，其构造函数可以接受一个数组作为参数，如：

 let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
 let set = new Set(array);
 console.log(set);
 // => Set {1, 2, 3, 4, 5}

三元操作符

判断正常使用if…else，使用三元操作符会减少很多代码，如下：

//if...else判断
var x = 20;
var big;
if (x > 10) {
    big = true;
} else {
    big = false;
}

//三元操作符
var big = x > 10 ? true : false;

Array.find

如果你以前写过一个查找函数，你可能会使用一个for循环。在ES6中，你可以使用数组的一个新功能find()。

以下代码在myArr数组中查找元素值大于4的元素，找到后立即返回。返回的结果为查找到的元素：

var myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>4);
console.log(v);// 5

没有符合元素，返回undefined:

var myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>40);
console.log(v);// undefined

Object.is()

Object.is() 方法判断两个值是否是相同的值。

语法

Object.is(value1, value2);

返回值

表示两个参数是否相同的布尔值

描述

Object.is() 判断两个值是否相同。如果下列任何一项成立，则两个值相同：

• 两个值都是 undefined

• 两个值都是 null

• 两个值都是 true 或者都是 false

• 两个值是由相同个数的字符按照相同的顺序组成的字符串

• 两个值指向同一个对象

• 两个值都是数字并且

  都是正零 +0
  都是负零 -0
  都是 NaN
  都是除零和 NaN 外的其它同一个数字

这种相等性判断逻辑和传统的 == 运算不同，== 运算符会对它两边的操作数做隐式类型转换（如果它们类型不同），然后才进行相等性比较，（所以才会有类似 “” == false 等于 true 的现象），但 Object.is 不会做这种类型转换。

这与 === 运算符的判定方式也不一样。=== 运算符（和== 运算符）将数字值 -0 和 +0 视为相等，并认为 Number.NaN 不等于 NaN。

Object.is('foo', 'foo');     // true
Object.is(window, window);   // true

Object.is('foo', 'bar');     // false
Object.is([], []);           // false

var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo);         // true
Object.is(foo, bar);         // false

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

// 特例
Object.is(0, -0);            // false
Object.is(0, +0);            // true
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true