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