服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - JavaScript的一些小技巧分享

JavaScript的一些小技巧分享

2021-12-27 16:04小蘑菇 js教程

这篇文章主要介绍了JavaScript的一些小技巧分享,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下

数组去重

ES6提供了几种简洁的数组去重的方法,但该方法并不适合处理非基本类型的数组。对于基本类型的数组去重,可以使用... new Set()来过滤掉数组中重复的值,创建一个只有唯一值的新数组。

?
1
2
3
4
5
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray);
 
> Result:(4) [1, 2, 3, 5]

这是ES6中的新特性,在ES6之前,要实现同样的效果,我们需要使用更多的代码。该技巧适用于包含基本类型的数组:undefined、null、boolean、string和number。如果数组中包含了一个object,function或其他数组,那就需要使用另一种方法。

除了上面的方法之外,还可以使用Array.from(new Set())来实现:

?
1
2
3
4
const array = [1, 1, 2, 3, 5, 5, 1]
Array.from(new Set(array))
 
> Result:(4) [1, 2, 3, 5]

另外,还可以使用Array的.filter及indexOf()来实现:

?
1
2
3
4
const array = [1, 1, 2, 3, 5, 5, 1]
array.filter((arr, index) => array.indexOf(arr) === index)
 
> Result:(4) [1, 2, 3, 5]

注意,indexOf()方法将返回数组中第一个出现的数组项。这就是为什么我们可以在每次迭代中将indexOf()方法返回的索引与当索索引进行比较,以确定当前项是否重复。

确保数组的长度

在处理网格结构时,如果原始数据每行的长度不相等,就需要重新创建该数据。为了确保每行的数据长度相等,可以使用Array.fill来处理

?
1
2
3
let array = Array(5).fill('');
console.log(array);
> Result: (5) ["", "", "", "", ""]

数组映射

不使用Array.map来映射数组值的方法。

?
1
2
3
4
5
6
7
8
9
10
11
12
const array = [
 {
 name: '大漠',
 email: 'w3cplus@hotmail.com'
 },
 {
 name: 'Airen',
 email: 'airen@gmail.com'
 }]
 const name = Array.from(array, ({ name }) => name)
 
 > Result: (2) ["大漠", "Airen"]

数组截断

如果你想从数组末尾删除值(删除数组中的最后一项),有比使用splice()更快的替代方法。

例如,你知道原始数组的大小,可以重新定义数组的length属性的值,就可以实现从数组末尾删除值:

?
1
2
3
4
5
6
7
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array.length)
> Result: 10
 
array.length = 4
console.log(array)
> Result: (4) [0, 1, 2, 3]

这是一个特别简洁的解决方案。但是,slice()方法运行更快,性能更好:

?
1
2
3
4
5
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array);
 
> Result: [0, 1, 2, 3]

过滤掉数组中的falsy值

如果你想过滤数组中的falsy值,比如0、undefined、null、false,那么可以通过map和filter方法实现:

?
1
2
3
4
5
6
const array = [0, 1, '0', '1', '大漠', 'w3cplus.com', undefined, true, false, null, 'undefined', 'null', NaN, 'NaN', '1' + 0]
array.map(item => {
 return item
}).filter(Boolean)
 
> Result: (10) [1, "0", "1", "大漠", "w3cplus.com", true, "undefined", "null", "NaN", "10"]

获取数组的最后一项

数组的slice()取值为正值时,从数组的开始处截取数组的项,如果取值为负整数时,可以从数组末属开始获取数组项。

?
1
2
3
4
5
6
7
8
9
10
11
12
let array = [1, 2, 3, 4, 5, 6, 7]
const firstArrayVal = array.slice(0, 1)
> Result: [1]
 
const lastArrayVal = array.slice(-1)
> Result: [7]
 
console.log(array.slice(1))
> Result: (6) [2, 3, 4, 5, 6, 7]
 
console.log(array.slice(array.length))
> Result: []

正如上面示例所示,使用array.slice(-1)获取数组的最后一项,除此之外还可以使用下面的方式来获取数组的最后一项:

?
1
2
console.log(array.slice(array.length - 1))
> Result: [7]

从数组中获取最大值和最小值

可以使用Math.max和Math.min取出数组中的最大小值和最小值:

?
1
2
3
4
5
6
7
8
9
const numbers = [15, 80, -9, 90, -99]
const maxInNumbers = Math.max.apply(Math, numbers)
const minInNumbers = Math.min.apply(Math, numbers)
 
console.log(maxInNumbers)
> Result: 90
 
console.log(minInNumbers)
> Result: -99

另外还可以使用ES6的...运算符来完成:

?
1
2
3
4
5
6
const numbers = [1, 2, 3, 4];
Math.max(...numbers)
> Result: 4
 
Math.min(...numbers)
> Result: 1

以上就是JavaScript的一些小技巧分享的详细内容,更多关于JavaScript 小技巧的资料请关注服务器之家其它相关文章!

原文链接:https://segmentfault.com/a/1190000038716777

延伸 · 阅读

精彩推荐
  • js教程基于javascript实现移动端轮播图效果

    基于javascript实现移动端轮播图效果

    这篇文章主要为大家详细介绍了基于javascript实现移动端轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    A.香辣鸡腿堡8982021-12-15
  • js教程原生js中运算符及流程控制示例详解

    原生js中运算符及流程控制示例详解

    这篇文章主要给大家介绍了关于原生js中运算符及流程控制的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价...

    meichaoWen4952021-12-27
  • js教程利用 JavaScript 实现并发控制的示例代码

    利用 JavaScript 实现并发控制的示例代码

    这篇文章主要介绍了利用 JavaScript 实现并发控制的示例代码,本文通过实例代码给大家介绍的非常想详细,对大家的学习或工作具有一定的参考借鉴价值,需...

    descire3722021-12-23
  • js教程微信小程序学习之自定义滚动弹窗

    微信小程序学习之自定义滚动弹窗

    这篇文章主要给大家介绍了关于微信小程序学习之自定义滚动弹窗的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考...

    юноша9042021-12-15
  • js教程JavaScript实现原型封装轮播图

    JavaScript实现原型封装轮播图

    这篇文章主要为大家详细介绍了JavaScript原型封装轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    zyhyoustrive12062021-12-21
  • js教程微信小程序视频弹幕发送功能的实现

    微信小程序视频弹幕发送功能的实现

    这篇文章主要介绍了微信小程序视频弹幕发送功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的...

    保护我方豆豆4822021-12-21
  • js教程Javascript实现汉字和拼音互转的终极方案

    Javascript实现汉字和拼音互转的终极方案

    网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,有的不支持多音字、不支持声调或者字典文件太大,无法根据实际需要满足需求。这篇文章给...

    我是小茗同学10092021-12-15
  • js教程Strve.js开发一个属于自己的库或框架

    Strve.js开发一个属于自己的库或框架

    Strve.js是一个可以将字符串转换为视图的JS库。这里的字符串指的是模板字符串,所以你仅需要在JavaScript中开发视图。Strve.js不仅易于上手,还便于灵活拆装...

    前端历劫之路5732021-12-23