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 纯数字不重复排列的另类方法
Jul 17 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 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给图片加文字水印
2015/07/31 PHP
PHP发送短信代码分享
2015/08/11 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
python生成日历实例解析
2014/08/21 Python
Python functools模块学习总结
2015/05/09 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
业务员岗位职责
2013/11/16 职场文书
品牌转让协议书
2014/08/20 职场文书
庐山导游词
2015/02/03 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
婚宴主持词
2015/06/30 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android