数组的高级用法 (1)

191 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

上篇,我们罗列了数组的所有方法,属于基础篇,今天来一起看看数组的高级用法吧。

大家,动起来。

去空值

Array.prototype.filter用于过滤数据,有时候要去掉哪些空值,怎么办呢?

传入一个Boolean就行,我们看到后面的打印, 其也是一个函数, 相当于让值转为布尔值,真值被保留, 非真值被丢弃。当然,使用的时候,你要清晰知道数组元素的类型。

下面的情况可以发生意外:

  1. 纯数字数组,里面包含0
  2. 混合类型数组,有数字,对象,null, undefined, 空字符串等等
  3. 其他情况
var arr = [{name:"tom", age: 18}, { name: "pik"},undefined];

const newArr = arr.filter(Boolean)


// 打印Boolean
console.log(Boolean)
// ƒ Boolean() { [native code] }

还是那句话,特定情况下,特定的作用。

生成随机数组或者序列生成器

生成随机数组,当然你可以采用for循环,代码会相对多一些,数组这里就有妙招了。

一行代码获取限定数据的随机数:

const createRandomValues = Array.from({length:10}, (v,i)=> Math.random());
// [0.25940121194082666, 0.8386585479250679, 0.26516411790325556, 0.6017479968140447, 
//0.5730002277371962, 0.8710995725057937, 0.18703989792580744, 
//0.7930248062519736, 0.4589973173040094, 0.2985306917392727]

我们再抽象一下, 万能的数据制造器,就这么简单。

const createRandomValues = (creator, length = 10) => Array.from({length}, creator)

const values = createRandomValues(Math.random)
 //[0.4296594057567271, 0.175596004994798, 0.9947572646883405, 0.8956806916112903, 
 //0.6601653932078315, 0.0020614027979746208, 0.3662092630842637, 0.39965167430505866, 
 //0.4124746706358795, 0.6975065159343525]

我们基于此,搞一个序列生成器:

const createRandomValues = (creator, length = 10) => Array.from({length}, creator);
const createRange = (start, stop, step) =>
createRandomValues((_, i) => start + (i * step), (stop - start) / step + 1)

createRange (1,100,3) // [1, 4, 7, 10]

当然,Array.from还可以用来复制数组和把类数组转为数组,多一些关爱,就多一些可爱。

清空数组

这就有请我们的大杀器Array.prototye.splice

清空数组, 你是不是喜欢直接赋值给一个新的[]呢,其实有更好的选择, 这样并没有创新新的数据, 她依旧还是那个她。

var arr = [1,2,3];
arr.splice(0);
console.log(arr); // []

当然直接设置length属性为0也是可以的。

var arr = [1,2,3];
arr.length = 0
console.log(arr); // []

数组浅拷贝

方式一Array.prototype.slice

var arr = [{a:1}, {a:2}]
var arr2 = arr.slice(0);

console.log(arr); // [{a:1}, {a:2}]
console.log(arr2); // [{a:1}, {a:2}]

console.log(arr == arr2);

方式二Array.from

var arr = [{a:1}, {a:2}]
var arr2 = Array.from(arr);

console.log(arr); // [{a:1}, {a:2}]
console.log(arr2); // [{a:1}, {a:2}]

console.log(arr == arr2);

当然,拓展运算符也可以。

小结

今天我们学习了去空值,生成随机数据和序列, 清空数组,数组浅拷贝。

今天你收获了吗?