JavaScript实用代码小技巧


Posted in Javascript onAugust 23, 2018

在上次的 “Chrome DevTools 你可能不知道的小技巧” 文中,得到很多开发朋友的反馈确实不知道这些小技巧。今天,我们来聊一聊在 EcmaScript5/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)的话,代表每行代码的缩进是多少个空格。如果是字符串的话,该字符串(最多前十个字符)将作显示在每行代码之前。

这时候,你应该知道了。我们可以用JSON.stringify 来做序列化时的过滤,相当于我们可以自定义JSON.stringify 的解析逻辑。

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

// 使用“函数”当替代器
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}

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

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

还有一个有意思的东西,是对象的toJSON 属性。

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

见下面的例子:

var obj = {
 foo: 'foo',
 toJSON: function () {
 return 'bar';
 }
};
JSON.stringify(obj);  // '"bar"'
JSON.stringify({x: obj}); // '{"x":"bar"}'

用 Set 来实现数组去重

在ES6 中,引入了一个新的数据结构类型:Set。而Set 与Array 的结构是很类似的,且Set 和Array 可以相互进行转换。

数组去重,也算是一个比较常见的前端面试题了,方法有很多种,这里不多赘述。下面我们看看用Set 和...(拓展运算符)可以很简单的进行数组去重。

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]

用块级作用域避免命名冲突

在开发的过程中,通常会遇到命名冲突的问题,就是需要根据场景不同来定义不同的值来赋值给同一个变量。下面介绍一个使用ES6 中的块级作用域 来解决这个问题的方法。

比如,在使用switchcase 时,我们可以这样做:

switch (record.type) {
 case 'added': {
 const li = document.createElement('li');
 li.textContent = record.name;
 li.id = record.id;
 fragment.appendChild(li);
 break;
 }
 case 'modified': {
 const li = document.getElementById(record.id);
 li.textContent = record.name;
 break;
 }
}

函数参数值校验

我们知道,在ES6 中,为函数增加了参数默认值的特性,可以为参数设定一些默认值,可以让代码更简洁,可维护。

其实,我们可以通过这个特性来做函数参数值的校验。

首先,函数的参数可以是任意类型的值,也可以是函数,比如下面这个:

function fix(a = getA()) {
 console.log('a', a)
}
function getA() {
 console.log('get a')
 return 2
}
fix(1);
// a 1
fix();
// get a
// a 2

可以看出,如果在调用fix 时传了参数a ,则不会执行函数getA,只有当不传递参数a 时,才会执行函数getA。

这时候,我们可以利用这一特性,为参数a 添加一个必传的校验,代码如下:

function fix(a = require()) {
 console.log('a', a)
}
function require() {
 throw new Error('缺少了参数 a')
}
fix(1);
// a 1
fix();
// Uncaught Error: 缺少了参数 a

用解构赋值过滤对象属性

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

比如,下面这段示例:

// 我们想过滤掉对象 types 中的 inner 和 outer 属性
const { inner, outer, ...restProps } = {
 inner: 'This is inner',
 outer: 'This is outer',
 v1: '1',
 v2: '2',
 v4: '3'
};
console.log(restProps);
// {v1: "1", v2: "2", v4: "3"}

用解构赋值获取嵌套对象的属性

解构赋值 的特性很强大,它可以帮我们从一堆嵌套很深的对象属性中,很方便地拿到我们想要的那一个。比如下面这段代码:

// 通过解构赋值获取嵌套对象的值
const car = {
 model: 'bmw 2018',
 engine: {
  v6: true,
  turbo: true,
  vin: 12345
 }
};
// 这里使用 ES6 中的简单写法,使用 { vin } 替代 { vin: vin }
const modalAndVIN = ({ model, engine: { vin }}) => {
 console.log(`model: ${model}, vin: ${vin}`);
}
modalAndVIN(car);
// "model: bmw 2018, vin: 12345"

合并对象

ES6 中新增的拓展运算符,可以用来解构数组,也可以用来解构对象,它可以将对象中的所有属性展开。

通过这个特性,我们可以做一些对象合并的操作,如下:

// 使用拓展运算符合并对象,在后面的属性会重写前面相同属性的值
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { c: 5, d: 9 };
const merged = { ...obj1, ...obj2 };
console.log(merged);
// {a: 1, b: 2, c: 5, d: 9}
const obj3 = { a: 1, b: 2 };
const obj4 = { c: 3, d: { e: 4, ...obj3 } };
console.log(obj4);
// {c: 3, d: {a: 1, b: 2, e: 4} }

使用 === 代替 ==

在JavaScript 中,=== 和== 是有很大的不同的,== 会将两边的变量进行转义,然后将转义后的值进行比较,而=== 是严格比较,要求两边的变量不仅值要相同,它们自身的类型也要相同。

JavaScript 经常被调侃成一个神奇的语言,就是因为它的转义的特性,而用== 可能会引入一些深埋的bug。远离 bug,还是要用===:

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

当然,在用=== 时,也会出问题,比如:

NaN === NaN // false

ES6 中提供了一个新的方法:Object.is(),它具有=== 的一些特点,而且更好、更准确,在一些特殊场景下变现的更好:

Object.is(0 , ' ');   //false
Object.is(null, undefined); //false
Object.is([1], true);  //false
Object.is(NaN, NaN);  //true

下图,是关于==、=== 和Object.is 的对比:

JavaScript实用代码小技巧

Javascript 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
JS画线(实例代码)
Nov 20 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 #Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 #Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 #Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 #Javascript
vuejs选中当前样式active的实例
Aug 22 #Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 #Javascript
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
推荐文章系统(一)
2006/10/09 PHP
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
中医临床专业自我鉴定范文
2014/01/15 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
三方协议书
2015/01/27 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
二年级作文之动物作文
2019/11/13 职场文书