ES6/JavaScript使用技巧分享


Posted in Javascript onDecember 14, 2017

在编写JavaScript代码的时候存在的一些方法和技巧,虽然有时候条条大路都通向罗马,但是也许总会有那么一条最短的路径可走。本文将一些都知道却不怎么用的小技巧分享给大家

一些小技巧

1.new Set()

数组的去重,在'潜意识'里面感觉就应该去循环然后对比去重,其实在ES6中新增提供了新的数据结构Set,用他可以轻松去重数组,比如:

let arr = [1,1, 2, 2, 3, 3];
let set = new Set(arr); //
let newArr = Array.from(set); // Array.from方法可以将 Set 结构转为数组。 
console.log(newArr); // [1, 2, 3]

2.Object.assign()

也是ES6中提供的对象的扩展方法,其可以用于对象的合并拷贝,像之前对象合并也是很繁琐,但是现在很easy麽,比如:

let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // {a: 1, b: 2}

3.map()

map方法用于遍历数组,有返回值,可以对数组的每一项进行操作并生成一个新的数组,有些时候可以代替for和forEach循环,简化代码,比如:

let arr3 = [1, 2, 3, 4, 5];
let newArr3 = arr3.map((e, i) => e * 10); // 给数组每一项乘以10
console.log(newArr3); // [10, 20, 30, 40, 50]

4.filter()

filter方法同样用于遍历数组,顾名思义,就是过滤数组,在每一项元素后面触发一个回调函数,通过判断,保留或移除当前项,最后返回一个新的数组,比如:

let arr4 = [1, 2, 3, 4, 5];
let newArr4 = arr4.filter((e, i) => e % 2 === 0); // 取模,过滤余数不为0的数
console.log(newArr4); // [2,4]

5.some()

some方法用于遍历数组,在每一项元素后面触发一个回调函数,只要一个满足条件就返回true,否则返回false,类似于 || 比较,比如:

let arr5 = [{result: true}, {result: false}];
let newArr5 = arr5.some((e, i) => e.result); // 只要一个为true,即为true
console.log(newArr5); // true

6.every() //与5相反的

every方法用于遍历数组,在每一项元素后面触发一个回调函数,只要一个不满足条件就返回false,否则返回true,类似于 &&比较,比如:

let arr6 = [{result: true}, {result: false}];
let newArr6 = arr6.every((e, i) => e.result); // 只要一个为false,即为false
console.log(newArr6); // false

7.三元运算符

该运算符应该大家都比较熟悉,在默写情况下可以简化if else的写法,比如:

let e = true,
f = '';
if (e) {
f = 'aaa';
} else {
f = 'bbb';
}
// 等同于
f = e ? 'aaa' : 'bbb';

8.~~运算符

~符号用在JavaScript中有按位取反的作用,~~即是取反两次,而位运算的操作值要求是整数,其结果也是整数,所以经过位运算的都会自动变成整数,可以巧妙的去掉小数部分,类似于parseInt,比如:

let a = 1.23;
let b = -1.23;
console.log(~~a); // 1
console.log(~~b); // -1

结语

本文只列出了JavaScript语法中比较常见的几点能够提升速度的方法,希望大家在巧学过程中达到巧用知识的效果。

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
javascript中Function类型详解
Apr 28 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 #Javascript
浅析JS抽象工厂模式
Dec 14 #Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 #Javascript
利用Javascript开发一个二维周视图日历
Dec 14 #Javascript
浅谈es6 javascript的map数据结构
Dec 14 #Javascript
利用Javascript实现一套自定义事件机制
Dec 14 #Javascript
vue登录注册及token验证实现代码
Dec 14 #Javascript
You might like
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
python机器学习库常用汇总
2017/11/15 Python
Python中property函数用法实例分析
2018/06/04 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
高中同学聚会邀请函
2014/01/11 职场文书
思想品德自我评价
2014/02/04 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
生态养殖创业计划书
2014/05/06 职场文书
村道德模范事迹材料
2014/08/28 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
老干部工作汇报材料
2014/10/28 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
html5实现点击弹出图片功能
2021/07/16 HTML / CSS