ES6/JavaScript使用技巧分享
作者:laozhang 发布时间:2024-04-30 10:10:04
在编写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语法中比较常见的几点能够提升速度的方法,希望大家在巧学过程中达到巧用知识的效果。


猜你喜欢
- 引言做接口测试中,对于一般性的单业务接口测试很多工具可供选择,但是对于一些相关业务相关性的关联接口测试就比较麻烦,使用工具比如jmeter、
- 一、预备知识1.1、JS数据类型基本数据类型:Boolean、String、Number、null、undefined引用数据类型:Obje
- 今天我们将介绍处理大量数据时非常方便的工具。我不会只告诉您可能在手册中找到的一般信息,而是分享一些我发现的小技巧,例如tqdm与 multi
- 方案:◆1、SELECT TOP PAGESIZE NEWSTITLEFORM NEWSINFO WHERE NEWSID NOT IN(S
- 如何用JAVASCRIPT格式化数字成货币那种表示法?,比如说 34585962.00显示 为 34,585,962.00<scrip
- 最简单的数组合并我们只要使用array_merge即可array_merge()将两个或多个数组的单元合并起来,一个数组中的值附加在前一个数
- pip用pipdeptree查看包依赖1、安装pipdeptreepip install pipdeptree2、使用pipdeptree查
- 最近使用工作需要,使用了Navicat8.2版本,发现备份数据都是默认存储在C盘,这个就比较郁闷了。重做系统忘记转移了。那不就死定了?找了一
- 显然,效果很实用。对于这个效果,我们并不解释如何去使用效果库,而是讲解如何创建类似的效果,并保持他的可用性,分离式(unobtrusive)
- 下载git客户端 FileàDefault Settingà Version Controlà GitPath to Git ex
- 网上有许关于固定表格的标题行的文章,但是既要固定标题行又要固定标题列的却几乎没有。现我写下如下代码以供大家参考:<html> &
- 在操作DataFrame时,肯定会经常用到loc,iloc,at等函数,各个函数看起来差不多,但是还是有很多区别的,我们一起来看下吧。首先,
- 前言大家应该都有所体会,对于字符串型的IP存入数据库中,实在是个即浪费空间又浪费性能的家伙,所以可爱的人们想出来将IP转换为整型存储。MyS
- 背景介绍Pandas的DataFrame和Series在Matplotlib基础上封装了一个简易的绘图函数,使得数据处理过程中方便可视化查看
- 一 、背景一般在数据仓库环境中,我们可以很方便的使用row_number函数根据某个维度来对数据进行分组,实现每个组内数据编号排序的效果。如
- 内容摘要: 当用户填写页面<FORM>内容时所提供的全部值,或在浏览器地址栏输入在URL后的值,通过Form和QueryStrin
- 如果管理网络设备很多,不可能靠人力每天去登录设备去查看是否在线。所以,可以利用python脚本通过每天扫描网络中的在线设备。可以部署在服务器
- python使用ctypes模块调用windows api GetVersionEx获取当前系统版本,没有使用python32#!c:/py
- 最近一个项目中遇到ASP对FoxPro库表(*.DBF)的操作问题。现实中确有许多应用软件使
- 一:原理: 先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click; 双击(dblclick):