JS数组常用方法---16、Array.from()方法

一、总结

一句话总结：

Array.from()方法的作用是将类数组或可迭代对象转换为数组，比如String、Map、伪数组等，必带的参数是arrayLike（想要转换成数组的伪数组对象或可迭代对象），Array.from()方法的返回值是新的数组实例，不影响原结构

Array.from()
作用：将类数组或可迭代对象转换为数组
参数：必带的arrayLike（想要转换成数组的伪数组对象或可迭代对象）
返回值：新的数组实例
是否影响原结构：不影响

//4、从类数组对象（arguments）生成数组
function f() {
  console.log(arguments);
  console.log(Array.from(arguments)); // [ 1, 2, 3 ]
}
f(1, 2, 3);

1、Array.from()方法的作用对象是什么？

Array.from()方法的作用是将类数组或可迭代对象转换为数组，比如String、Map、伪数组等

//1、从 String 生成数组
let arr1=Array.from('foo');
console.log(arr1);// [ "f", "o", "o" ]

二、Array.from()方法

博客对应课程的视频位置：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Array.from()方法</title>
 6 </head>
 7 <body>
 8 <!--
 9 Array.from()方法的作用是将类数组或可迭代对象转换为数组，比如String、Map、伪数组等，必带的参数是arrayLike（想要转换成数组的伪数组对象或可迭代对象），Array.from()方法的返回值是新的数组实例，不影响原结构
10 
11 Array.from()
12 作用：将类数组或可迭代对象转换为数组
13 参数：必带的arrayLike（想要转换成数组的伪数组对象或可迭代对象）
14 返回值：新的数组实例
15 是否影响原结构：不影响
16 -->
17 <script>
18     //1、从 String 生成数组
19     // let arr1=Array.from('foo');
20     // console.log(arr1);// [ "f", "o", "o" ]
21 
22     //2、从 Set 生成数组
23     // const set = new Set(['foo', 'bar', 'baz', 'foo']);
24     // let arr2=Array.from(set);
25     // console.log(arr2);// [ "foo", "bar", "baz" ]
26 
27     //3、从 Map 生成数组
28     // const map = new Map([[1, 2], [2, 4], [4, 8]]);
29     // console.log(map);// {1 => 2, 2 => 4, 4 => 8}
30     // let arr3=Array.from(map);
31     // console.log(arr3);// [[1, 2], [2, 4], [4, 8]]
32 
33     // const mapper = new Map([['1', 'a'], ['2', 'b']]);
34     // console.log(mapper);// {"1" => "a", "2" => "b"}
35     // let arr4=Array.from(mapper.values());
36     // console.log(arr4);// ['a', 'b'];
37 
38     // let arr5=Array.from(mapper.keys());
39     // console.log(arr5);// ['1', '2'];
40 
41 
42 
43     //4、从类数组对象（arguments）生成数组
44     // function f() {
45     //     console.log(arguments);
46     //     console.log(Array.from(arguments)); // [ 1, 2, 3 ]
47     // }
48     // console.log(Array);
49     // console.log(Array.from);
50     // console.log(Array.prototype);
51     // console.log([]);
52     // f(1, 2, 3);
53 
54 </script>
55 </body>
56 </html>