ES6/JavaScript使用技巧分享

 更新时间:2017年12月14日 14:29:42   投稿:laozhang  
本篇文章主要给大家讲解了ES6/JavaScript使用技巧,需要的朋友参考一下吧。

在编写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语法中比较常见的几点能够提升速度的方法,希望大家在巧学过程中达到巧用知识的效果。

相关文章

  • JS与jQuery实现子窗口获取父窗口元素值的方法

    JS与jQuery实现子窗口获取父窗口元素值的方法

    这篇文章主要介绍了JS与jQuery实现子窗口获取父窗口元素值的方法,涉及javascript与jQuery操作窗口元素的相关技巧,需要的朋友可以参考下
    2017-04-04
  • JS去掉第一个字符和最后一个字符的实现代码

    JS去掉第一个字符和最后一个字符的实现代码

    本篇文章主要是对JS去掉第一个字符和最后一个字符的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • javascript实现简单小钢琴有声弹奏效果

    javascript实现简单小钢琴有声弹奏效果

    用HTML5+javascript实现的小钢琴,按下钢琴键上的相应字母用或用鼠标点击钢琴键发声,javascript代码包含了对鼠标按下、移动和松开,以及键盘按下的事件监听
    2024-02-02
  • js通过var定义全局变量与在window对象上直接定义属性的区别说明

    js通过var定义全局变量与在window对象上直接定义属性的区别说明

    这篇文章主要介绍了js通过var定义全局变量与在window对象上直接定义属性的区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • JS实现小米轮播图

    JS实现小米轮播图

    这篇文章主要为大家详细介绍了JS实现小米轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 一个页面元素appendchild追加到另一个页面元素的问题

    一个页面元素appendchild追加到另一个页面元素的问题

    一般都是自己创建元素然后append到页面的但是如果是页面本身有的元素append到另一个页面元素呢,很多的新手朋友对此问题比较好奇,本人也是如此啊,好了不多说,切入主题,感兴趣的朋友可以了解下哦
    2013-01-01
  • js中将HTMLCollection/NodeList/伪数组转换成数组的代码

    js中将HTMLCollection/NodeList/伪数组转换成数组的代码

    js中将HTMLCollection/NodeList/伪数组转换成数组的代码,需要的朋友可以参考下。
    2011-07-07
  • 高性能JavaScript DOM编程(1)

    高性能JavaScript DOM编程(1)

    这篇文章主要介绍了高性能JavaScript DOM编程,如何才能提高程序的效率,想要了解的朋友可以参考一下
    2015-08-08
  • JavaScript自定义事件介绍

    JavaScript自定义事件介绍

    很多DOM对象都有原生的事件支持,向div就有click、mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会。随着web技术发展,使用JavaScript自定义对象愈发频繁,让自己创建的对象也有事件机制,通过事件对外通信,能够极大提高开发效率
    2013-08-08
  • javascript实现页面的实时时钟显示示例

    javascript实现页面的实时时钟显示示例

    这篇文章主要介绍了javascript实现页面的实时时钟显示示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08

最新评论