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 相关文章推荐
popdiv
Jul 14 Javascript
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
php进程间通讯实例分析
2016/07/11 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
判断ie的两种简单方法
2013/08/12 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
python绘制直线的方法
2018/06/30 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
浅谈flask源码之请求过程
2018/07/26 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
入党思想汇报
2014/01/05 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
优秀校长事迹材料
2014/12/24 职场文书
2015年清明节活动总结
2015/02/09 职场文书