JS--数组

今天药忘吃喽~ 2022-12-27 15:23 175阅读 0赞

原文网址：[JS--数组\_IT利刃出鞘的博客-CSDN博客][JS--_IT_-CSDN]

# 其他网址 #

[分析Array.apply(null, \{ length: 20 \})\_个人文章 - SegmentFault 思否][Array.apply_null_ _ length_ 20 _ - SegmentFault]  
[Array.apply生成数组小结][Array.apply]

# **创建数组方法** #

>     new Array(3);
>     Array(3);
>     {length: 3};  //这只是个对象
>     
>     Array.apply(null, new Array(3))
>     Array.apply(null, Array(3));
>     Array.apply(null, {length: 3});
>     
>     //ES6写法
>     Array(3).fill(2);
>     Array.from({length: 3});
>     Array(...Array(3));
>     [...Array(3)]
> 
> 测试以上方法的结果
> 
>     <!doctype html>
>     <html lang="en">
>     
>     <head>
>         <meta charset="UTF-8">
>         <title>this is title</title>
>     </head>
>     
>     <body>
>     
>     <script>
>         let arr1 = new Array(3);
>         let arr2 = Array(3);
>         let arr3 = {length: 3};
>     
>         let arr4 = Array.apply(null, new Array(3))
>         let arr5 = Array.apply(null, Array(3));
>         let arr6 = Array.apply(null, {length: 3});
>     
>         //ES6写法
>         let arr7 = Array(3).fill(2);
>         let arr8 = Array.from({length: 3});
>         let arr9 = Array(...Array(3));
>         let arr10 = [...Array(3)]
>     </script>
>     
>     </body>
>     </html>
> 
> 简略结果
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]
> 
> 详细结果
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]

# 写法区别 #

**以下三种方法不能创建元素及索引，只有length属性**

>     new Array(3);
>     Array(3);
>     {length: 3};

**以下方法可以创建元素、索引、length属性**

>     Array.apply(null, new Array(3))
>     Array.apply(null, Array(3));
>     Array.apply(null, {length: 3});
>     
>     //ES6写法
>     Array(3).fill(2);
>     Array.from({length: 3});
>     Array(...Array(3));
>     [...Array(3)]

**对遍历的影响**

> 对forEach、for ... in、for ... of的影响是一样的：对于没有元素的数组，会直接跳过，只会遍历有元素的值（包括undefined）。

> **空元素测试**
> 
>     new Array(3);
>     Array(3);
>     {length: 3};
> 
> 对以上三种分别进行：xxx.forEach(console.log)
> 
>     let arr1 = new Array(3);
>     arr1.forEach(console.log)
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][]
> 
>     let arr2 = Array(3);
>     arr2.forEach(console.log)
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3][]
> 
>     let arr3 = {length: 3};;
>     arr3.forEach(console.log)
> 
> ![20201212134955596.png][]

> **非空元素测试**
> 
>     Array.apply(null, new Array(3))
>     Array.apply(null, Array(3));
>     Array.apply(null, {length: 3});
>     
>     //ES6写法
>     Array(3).fill(2);
>     Array.from({length: 3});
>     Array(...Array(3));
>     [...Array(3)]
> 
> 对以上分别进行：xxx.forEach(console.log)
> 
>     let arr4 = Array.apply(null, new Array(3))
>     let arr5 = Array.apply(null, Array(3));
>     let arr6 = Array.apply(null, {length: 3});
>     
>     //ES6写法
>     let arr7 = Array(3).fill(2);
>     let arr8 = Array.from({length: 3});
>     let arr9 = Array(...Array(3));
>     let arr10 = [...Array(3)]
>     
>     arr4.forEach(console.log);
>     arr5.forEach(console.log);
>     arr6.forEach(console.log);
>     arr7.forEach(console.log);
>     arr8.forEach(console.log);
>     arr9.forEach(console.log);
>     arr10.forEach(console.log);
> 
> 结果
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4][]

# 原理 #

var arrayLike = \{length: 2\}  
↓↓  
Array.apply(null, arrayLike)  
↓↓  
Array(arrayLike\[0\], arrayLike\[1\]) // 把一个空数组中的每一个元素的值逐个传入Array()方法  
↓↓  
Array(undefined, undefined) // 而空数组中的每一个元素的值都为undefined

//最终输出 \[undefined, undefined\]

[JS--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/111058494
[Array.apply_null_ _ length_ 20 _ - SegmentFault]: https://segmentfault.com/a/1190000011435501
[Array.apply]: https://juejin.cn/post/6844903818056957960
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221120/f4cd1f5e78144cb9b6d88873d7ae6cf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20221120/64e327639c084768b042ee0c4b5ccfeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: /images/20221120/013eb651d0184d75945f6c1d3073e4fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3]: /images/20221120/74f2b2c0e7bc4006b5e00e22d50dbcbe.png
[20201212134955596.png]: /images/20221120/ee721b377430463eb6289a01166cbd77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4]: /images/20221120/e630ccdf3de9493ebb224fd520fb097c.png