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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
Javascript var变量删除原理及实现
Aug 26 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
javascript特殊用法示例介绍
2013/11/29 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
PHP守护进程实例
2015/03/06 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
清洁工表扬信
2014/01/08 职场文书
庆元旦广播稿
2014/02/10 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
美丽心灵观后感
2015/06/01 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
600字作文之感受大自然
2019/11/27 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL