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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 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中最容易忘记的一些知识点总结
2013/04/28 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
Python文件及目录操作实例详解
2015/06/04 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
机电工程学生自荐信范文
2013/12/07 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
大学生在校表现评语
2014/12/31 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏