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跨页面保存变量做菜单的方法
Jan 17 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 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分页显示制作详细讲解
2006/10/09 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
javascript 正则表达式相关应介绍
2012/11/27 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python创建文件备份的脚本
2018/09/11 Python
了解一下python内建模块collections
2020/09/07 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
高山背包:High Sierra
2017/11/23 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
法学个人求职信范文
2014/01/27 职场文书
境外导游求职信
2014/02/27 职场文书
司机岗位职责说明书
2014/07/29 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
田径运动会通讯稿
2015/07/18 职场文书
2016年校长新年寄语
2015/08/17 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
python中取整数的几种方法
2021/11/07 Python