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 相关文章推荐
JavaScript 学习笔记(六)
Dec 31 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 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
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
js图片上传的封装代码
2017/08/01 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
python网络编程之文件下载实例分析
2015/05/20 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
python斐波那契数列的计算方法
2018/09/27 Python
python自动化办公操作PPT的实现
2021/02/05 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
美国著名手表网站:Timepiece
2017/11/15 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
What is EJB
2016/07/22 面试题
会计专业自我鉴定范文
2013/10/06 职场文书
物流管理毕业生自荐信
2013/10/24 职场文书
学校班班通实施方案
2014/06/11 职场文书
奥林匹克的口号
2014/06/13 职场文书
城管个人总结
2015/02/28 职场文书
个人德育工作总结
2015/03/05 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python