JavaScript数组初始化的那些事儿

点击上方 Java学习之道，选择 设为星标

每天18:30点，干货准时奉上！

Part1不用for循环实现

1fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

const array = Array(10).fill();
    
// [undefined, undefined, undefined, undefined, undefined]

语法

arr.fill(value[, start[, end]])

• value

• 用来填充数组元素的值。

• start 可选

• 起始索引，默认值为0。

• end 可选

• 终止索引，默认值为 this.length。

实例

[1, 2, 3].fill(4);               // [4, 4, 4]
   [1, 2, 3].fill(4, 1);            // [1, 4, 4]
   [1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
   [1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
   [1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
   [1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
   [1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
   [1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
   Array(3).fill(4);                // [4, 4, 4]
   [].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

   // Objects by reference.
   var arr = Array(3).fill({}) // [{}, {}, {}];
   // 需要注意如果fill的参数为引用类型，会导致都执行都一个引用类型
   // 如 arr[0] === arr[1] 为true
   arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

2Array.from()

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

Array.from({length: 5})
    // [undefined, undefined, undefined, undefined, undefined]
    
    Array.from(Array(5))
    // [undefined, undefined, undefined, undefined, undefined]

语法

Array.from(arrayLike[, mapFn[, thisArg]])

• arrayLike

• 想要转换成数组的伪数组对象或可迭代对象。

• mapFn 可选

• 如果指定了该参数，新数组中的每个元素会执行该回调函数。

• thisArg 可选

• 可选参数，执行回调函数 mapFn 时 this 对象。

Array.from() 可以通过以下方式来创建数组对象：

• 伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）

• 可迭代对象（可以获取对象中的元素,如 Map和 Set 等

实例

从 String 生成数组

Array.from('foo');
// [ "f", "o", "o" ]

从 Set 生成数组

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

从 Map 生成数组

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

在 Array.from 中使用箭头函数

Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]

Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

3Array.keys()

keys()方法返回一个包含数组中每个索引键的Array Iterator对象。

const array = [...Array(5).keys()];
 // [0, 1, 2, 3, 4]

 const array = Array.from(Array(5).keys());
 // [0, 1, 2, 3, 4]

语法

arr.keys()

实例

索引迭代器会包含那些没有对应元素的索引

var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys);  // [0, 1, 2]

4toString() + split()

toString() 返回一个字符串，表示指定的数组及其元素。

const array = Array(5).toString().split(',');
// ['', '', '', '', '']

语法

arr.toString()

-- END --

-  | 更多精彩文章 -

---

• 其实，图片防盗链的实现如此简单

• 2021 编程语言排行榜 - Java稳住

• 在Java程序中创建和转换PDF文件

• vue 和 微信小程序的区别
  

▽加我微信,交个朋友

长按/扫码添加↑↑↑