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 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
Angular表单验证实例详解
Oct 20 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
Vue实现简单计算器
Jan 20 Vue.js
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开发需要注意的安全问题
2010/09/01 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
js去除重复字符串两种实现方法
2013/01/09 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
原生js实现日期联动
2015/01/12 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
python如何将图片转换素描画
2020/09/08 Python
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
教堂婚礼主持词
2014/03/14 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
户外活动总结
2015/02/04 职场文书
退休教师追悼词
2015/06/23 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android