将数据改为数组的几种方法

将数据改为数组的几种方法

---

id	方法	使用场景
1	Array.from()	1、类似数组的对象2、可遍历的对象
2	扩展运算符...	1、获取函数的arguments参数对象2、Dom操作获取的NodeList
3	split('')	1、分割字符串成数组
4	Array.of()	1、将一组值转换成数组

1、Array.from()方法(es6中的方法)

• 使用场景: 该方法只可以将类似数组的对象和可遍历的对象转换成数组.
• eg1: 类似数组的对象(包括函数内部的arguments对象和Dom返回的NodeList)

//  这里的对象得有伪索引,数组长度
let arr = {
    
    
  0: 'a',
  1: 'b',
  length: 2
}

a = Array.from(arr)
console.log(a) // [ 'a', 'b' ]

• eg2: 可遍历的对象

//  字符串部署了Iterator接口,可遍历
let arr = Array.from('hello')
console.log(arr)// [ 'h', 'e', 'l', 'l', 'o' ]

2、扩展运算符...

• 使用场景:1)Dom操作返回的NodeList. 2) 函数的arguements对象.
• eg1:Dom操作

//  获取所有的P标签
let a = document.querySelectorAll('p');
//  将p标签转换成数组,并过滤到p中文字长度小于等于100的标签
a = Array.from(a).filter(n => n.textContent.length > 100) // (4) [p, p, p, p]

-eg2:函数的arguments对象

//  
function foo() {
    
    
  return [...arguments]
}
console.log(foo(1, 2, 3, 4, 5, 6)) //[ 1, 2, 3, 4, 5, 6 ]

3、split(’’)方法

• 使用场景:将字符串转换成数组
• eg1:

let arr = Array.from('hello')
console.log(arr) // [ 'h', 'e', 'l', 'l', 'o' ]

4、Array.of() 方法(es6)

• 使用场景:将一组值转换成数组
• 该方法是为了弥补Array()的不足,因为只有当Array()的参数长度超过两个时,才会返回一个数组,否则只是指定数组的长度.
• eg1:

//  只有一个参数时也会返回新的数组,Array()不会.
let arr = Array.of(1)
console.log(arr);

//  返回新的数组
let arr = Array.of(1, 2, 3, 4, 5)
console.log(arr);// [ 1, 2, 3, 4, 5 ]