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 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
jQuery链使用指南
Jan 20 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
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代码
2010/08/08 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
一些常用的Javascript函数
2006/12/22 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
js实现登录验证码
2016/12/22 Javascript
JS验证字符串功能
2017/02/22 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
Webpack之tree-starking 解析
2018/09/11 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
Python中除法使用的注意事项
2014/08/21 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
pycharm新建一个python工程步骤
2019/07/16 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
老教师工作总结的自我评价
2013/09/27 职场文书
软件工程师岗位职责
2013/11/16 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
群众路线党课主持词
2014/04/01 职场文书
杜甫草堂导游词
2015/02/03 职场文书