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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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正则的Unknown Modifier错误解决方法
2010/03/02 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php微信公众平台开发类实例
2015/04/01 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
Prototype Template对象 学习
2009/07/19 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
JS判断数组那点事
2017/10/10 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
学生感冒英文请假条
2014/02/04 职场文书
《散步》教学反思
2014/03/02 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
教代会开幕词
2015/01/28 职场文书
导游词开场白
2015/01/31 职场文书
检讨书格式
2015/05/07 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
调研报告的主要写法
2019/04/18 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技