ES6-Array .from() and .of()

1.from()不是数组原型上的方法

const num = [1,2,3];
num.from();                 //报错：num.from is not a function

<ul>
    <li>go to store</li>
    <li>watch TV</li>
    <li>go shopping</li>
</ul>
<script type="text/javascript"> 
    const todos = document.querySelectorAll('li');              //返回的是NodeList
    const names = todos.map(todo => todo.textContent);          //报错：todos.map is not a function
</script>

//Array.from()可以将一个类数组对象或者可迭代的对象转换成一个真正的数组
<ul>
    <li>go to store</li>
    <li>watch TV</li>
    <li>go shopping</li>
</ul>
<script type="text/javascript">
    const todos = document.querySelectorAll('li');                       //NodeList
    const todoArr = Array.from(todos);
    const names = todoArr.map(todo => todo.textContent);   
    console.log(names);                                   //["go to store", "watch TV", "go shopping"]

</script>

//Array.from()简单写法
//Array.from()方法的第2个参数可以为函数，相当于先把todos转换为数组再执行函数
<script type="text/javascript">
    const todos = document.querySelectorAll('li'); 
    const todoArr = Array.from(todos,todo => todo.textContent);     
    console.log(todoArr);    //["go to store", "watch TV", "go shopping"]

</script>

//Array.from()也可以将字符串转换为数组
<script type="text/javascript">
    const str = 'textContent';
    const arr = Array.from(str);
    console.log(arr);              // ["t", "e", "x", "t", "C", "o", "n", "t", "e", "n", "t"]

</script>

2..of()创建数组

<script type="text/javascript">
    const arr = new Array(1);     //返回一个长度为1的空数组   
    const arr1 = new Array(4,59,5,1);      //[4, 59, 5, 1]

    const arr2 = Array.of(1);          //[1],只有一个参数时也返回一个数组
    const arr3 = Array.of(5,89);            //[5, 89]
</script>