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 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
JS处理一些简单计算题
Feb 24 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
小程序click-scroll组件设计
Jun 18 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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
jquery 上下滚动广告
2009/06/17 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
python实现按任意键继续执行程序
2016/12/30 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
Python3实现转换Image图片格式
2018/06/21 Python
python Web开发你要理解的WSGI & uwsgi详解
2018/08/01 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Python configparser模块应用过程解析
2020/08/14 Python
Python 多进程、多线程效率对比
2020/11/19 Python
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
村党建工作汇报材料
2014/11/02 职场文书
就业意向协议书
2015/01/29 职场文书
给病人的慰问信
2015/03/23 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS