Array数组简单写法汇总

发表于

其实数组真的有很多妙用的方法来写很多，而且如果巧妙的使用起来，可以用简单的一句代码来实现一些比较复杂的功能。

就像一个简单的功能，不同的人写的代码，有的只要一行，但是有的人可能需要十行。

因此我们都尽量做到用最少的代码实现同样的功能。

这篇文章用来汇总，列举的都是我遇到觉得比较好的数组写法以及数组的一些相关知识。

以后只要有发现新的写法，会不断更新这篇文章。

Array.apply(null, {length: 10})和Array(10)有什么区别?

1
2
3
4
5
6
var arr1 = Array.apply(null, {length: 10});
var arr2 = Array(10);
0 in arr1  //true
0 in arr2  //false
arr1.map(function(item, index){console.log(index)}) //0, 1, 2, 3...
arr2.map(function(item, index){console.log(index)}) //直接不打印，因为只是一个空数组。根本不循环

解释
首先Array(1,2,3,4)，你知道的吧,生成一个数组[1,2,3,4]
然后是apply的问题,要求第二个参数是一个数组
那么Array.apply(null,[1,2,3,4])生成的和上述的一样的[1,2,3,4]数组
但apply有个奇怪的地方,当第二个参数是一个带有length属性的对象时,会当成一个数组使用
所以Array.apply(null,{length:4})生成[undefined,undefined,undefined,undefined]
相当于Array.apply(null,[undefined,undefined,undefined,undefined])

所以如果要快速生成一个1-100的递增数组。以下是方法

1
2
3
var result = Array.apply(null,{length:100}).map(function(item,index){
    return index+1;
})

或者

1
2
3
var result = Array.apply(null,Array(100)).map(function(item,index){
    return index+1;
})

随机生成10个1-100的不重复随机数

1
2
3
4
5
var arr = new Array(100)
.fill(0)
.map((v,i) => i+1)
.sort(()=>0.5-Math.random())
.filter((v,i) => i<10)

快速查找数组符合条件的项

一般来说在vue里面的select数组的数据结构一般是这样的。

1
2
3
4
5
6
7
8
9
10
[{
    name:'吃饭',
    val:'1'
},{
    name:'睡觉',
    val:'2'
},{
    name:'打豆豆',
    val:'3'
}]

而v-for的写法如果是在这样

1
2
3
<select v-model="activity">
    <option :value="item.val" v-for="item in list">{{item.name}}</option>
</select>

那么我们拿到的就只是val,那么要如何简便的写法就能拿到val对应的name值呢？

比如我拿到的activity为2，我想知道对应的中文是什么。那么可以这么写。

1
list.find(item => item.val == 2)['name']