JavaScript实用代码提示

在上一篇文章《关于Chrome DevTools你可能不知道的小技巧》中，我得到了很多开发朋友的反馈，真的不知道这些小技巧。今天我们就来说说EcmaScript5/6中的一些小技巧，欢迎大家在评论区讨论更多小技巧。

JSON.stringify

我们经常使用JSON对象。例如，当我们想要实现对象的深度复制时，我们可以使用JSON.stringify和JSON.parse来复制一个相同的对象，而不需要与原始对象有任何引用关系。使用localStorage的时候也会用到，因为localStorage只能以字符串格式存储内容，所以在存储之前，我们先把数值转换成JSON字符串，然后拿出来使用的时候再转换成对象或者数组。

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

先看语法：

JSON。Stringify (value [，replacer [，space]]参数：

Value:要序列化的变量的值。它可以是函数或数组。如果是函数，值的每个属性都必须由这个函数处理，这个函数的返回值是最后一个序列化的值。如果是数组，数组的元素需要是字符串，这些元素将作为值的键进行匹配。序列化的最终结果只包含数组中每个元素都是键的值。空格：指定输出数值的代码缩进，可以是数字，也可以是字符串，用于美化格式。如果它是一个数字(最大值为10)，它表示每行代码中缩进多少个空格。如果是字符串，字符串(最多前十个字符)将显示在每一行代码之前。这时候，你应该知道了。我们可以使用JSON。stringfy来过滤序列化，相当于定制JSON的解析逻辑。斯特林菲。

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

//使用“function”作为替代函数replacer (key，value) {if(值类型==' string '){ return undefined；}返回值；} var foo={ foundation : ' Mozilla '，model: 'box '，week: 45，transport: 'car '，month : 7 }；var jsonString=JSON . stringify(foo，replacer)；//{'week' :45，' month' 33607}使用数组来筛选和序列化对象：

//使用“array”作为替代const user={ name: ' zollero '，nick3360' z '，skill 3360[' JavaScript '，' CSS '，' html 5 ']}；JSON.stringify(user，['name '，' skills']，2)；//' {//' name ' : ' zolero '，//'skills' : [//'JavaScript '，//'CSS '，//' html 5 '///]//} '还有一个有趣的东西，就是对象的toJSON属性。

如果一个对象有toJSON属性，当它被序列化时，该对象将不会被序列化，但是它的toJSON方法的返回值将被序列化。

请参见以下示例：

var obj={ foo: 'foo '，to son : function(){ return ' bar '；}};JSON . stringify(obj)；//“bar”JSON . stringify({ x : obj })；//'{'x':'bar'} '使用Set实现阵列重复数据消除

在ES6中，引入了一种新的数据结构类型：Set。集合和数组的结构非常相似，集合和数组可以相互转换。

数组复制可以算是比较常见的前端面试问题。方法很多，这里就不赘述了。让我们看一下带有Set和的简单阵列重复数据消除.(扩展运算符)。

const removereplication items=arr=[.新集合(arr)]；removereplication items([42，' foo '，42，' foo '，true，true])；//=[42，' foo '，true]使用块级范围来避免命名冲突

在开发过程中，我们经常会遇到命名冲突的问题，即需要根据不同的场景定义不同的值，并分配给同一个变量。这里有一个在ES6中使用块级作用域来解决这个问题的方法。

例如，在使用switchcase时，我们可以这样做：

switch(record . type){ case ' add ' : { const Li=document . create element(' Li ')；Li . text content=record . name；Li . id=record . id；fragment . appendchild(Li)；打破；} case ' modified ' : { const Li=document . getelementbyid(record . id)；Li . text content=record . name；打破；}}功能参数值验证

我们知道，在ES6中，函数增加了参数默认值的特性，可以为参数设置一些默认值，这样可以使代码更加简洁，易于维护。

事实上，我们可以通过这个特性来检查函数参数的值。

首先，函数的参数可以是任何类型的值或函数，例如下面的一个：

函数fix(a=getA()) { console.log('a '，a)}函数getA() { console.log('get a ')返回2 } fix(1)；//a 1 fix()；//get a//a 2，可以看到在调用fix的时候如果传递了参数a，函数get a就不会被执行，只有当参数a没有传递的时候，函数getA才会被执行。

此时，我们可以使用此功能为参数a添加强制检查。代码如下：

函数修复(a=require ()) {console.log ('a '，a)}函数require(){抛出新错误('缺少参数a ')}修复(1)；//a 1 fix()；//Uncated Error :缺少参数a。使用解构赋值过滤对象属性

前面，我们介绍了使用JSON.stringify过滤对象属性的方法。在这里，我们介绍了另一种利用ES6中解构赋值和扩展运算符的特性来过滤属性的方法。

例如，以下示例：

//我们希望过滤掉内部和外部属性const {inner，outer，restprops}={inner: '这是内部'，outer: '这是外部'，v1:' 1 '，v2:' 2 '，v4:console . log(restProps)；//{v1:' 1 '，v2:' 2 '，v4:' 3'}通过解构赋值获取嵌套对象的属性

解构赋值非常强大，可以帮助我们从一堆深度嵌套的对象属性中轻松得到想要的那个。例如，以下代码：

//通过解构赋值得到嵌套对象constcar={model :' BMW 2018 '，engine 3360 {v6: true，turbo : true，vin : 12345}}的值；//这里我们用ES6中的简单写法，用{vin}代替{ vin : vin } const modalandvin=({ model，engine : { vin } })={ console . log(` model 3360 $ { model }，vin 3360 $ { vin } `)；}modalAndVIN(汽车)；//'车型：宝马2018，vin : 12345 '合并对象

ES6中增加的扩展操作符可以用来解构数组和对象，可以扩展对象中的所有属性。

通过这个特性，我们可以进行一些对象合并操作，如下所示：

//使用扩展运算符合并对象，以下属性将覆盖front constobj 1={a: 1，b: 2，c: 3}中相同属性的值；const obj2={ c: 5，d : 9 }；const合并={ 0.obj1，obj 2 }；console.log(已合并)；//{a: 1，b: 2，c: 5，d: 9}const obj3={ a: 1，b : 2 }；const obj4={ c: 3，d: { e: 4，obj3 } }console . log(obj 4)；//{c: 3，d: {a: 1，b: 2，e: 4}}使用==而不是==

在JavaScript中，===和==是非常不同的。===对两边的变量进行转义，然后比较转义后的值，而===是严格的比较，要求两边的变量不仅要有相同的值，而且要有相同的类型。

JavaScript经常被嘲笑为一种神奇的语言，因为它的转义特性，而使用==可能会引入一些隐藏的bug。远离虫子，或者使用===:

[10]==10//true[10]==10//false ' 10 '==10//true ' 10 '==10//false[]==0//true[]===0//false ' '====。

NaN===NaN//false six 6提供了一种新的方法：Object.is()，具有===的一些特点，更好更准确，在一些特殊场景下可以更好的实现：

object . is(0 ' ')；//FastObject . is(null，未定义)；//FastObject . is([1]，true)；//FastObject . is(NAn，NAn)；//true下图是==、===和Object.is之间的比较：