ES6精讲07-数组的拓展方法

183 阅读1分钟

🍊数组的方法:

🌵1.from:将伪数组转换成真正的数组

// 1.from() 将伪数组转换成真正的数组
function add() {
    // console.log(arguments);
    // es5转换
    // let arr = [].slice.call(arguments);
    // console.log(arr);
    // es6写法
    let arr = Array.from(arguments);
    console.log(arr);
}
add(1, 2, 3);


//实际中的使用场景
 let lis = document.querySelectorAll('li')
 console.log(lis);//Arguments对象

 console.log(Array.from(lis)); //返回数组
        
// 扩展运算符 将伪数组转换成真正的数组
 console.log([...lis]);    //返回数组

// from() 还可以接受第二个参数,用来对每个元素进行处理

let liContents = Array.from(lis, ele => ele.textContent);
console.log(liContents); //打印出没给li元素内部的text值

🌵2.of:将任意的数据类型,转换成数组

console.log(Array.of(3, 11, 20, [1, 2, 3], {
      id: 1
  }));  //[3,11,20,[1,2,3]]

🌵3.find():找出第一个符合条件的数组成员

// find()找出第一个符合条件的数组成员
let num = [1, 2, -10, -20, 9, 2].find(n => n < 0)
// console.log(num);

🌵4.findIndex():找出第一个符合条件的数组成员的索引

let numIndex = [1, 2, -10, -20, 9, 2].findIndex(n => n < 0)
console.log(numIndex); //2

🌵5.entries() keys() values() 返回一个遍历器(Interator)--可以使用for...of循环进行遍历

  • keys() 对键名遍历
  • values() 对值遍历
  • entries() 对键值对遍历
//返回的是一个迭代器      
console.log(['a','b'].keys()); //Array Iterator {}
console.log(['a','b'].values()); //Array Iterator {}   
console.log(['a','b'].entries()); //Array Iterator {} 

for (let index of ['a', 'b'].keys()) {
    console.log(index);  //0,1
}

for (let ele of ['a', 'b'].values()) {
   console.log(ele);   // a,b
}

for(let [index,ele] of ['a','b'].entries()){
    console.log(index,ele); // 0 “a” 1 “b”
}
        
//迭代器的nex方法
let letter = ['a','b','c'];
//数组的entries会返回一个遍历器
let it = letter.entries();  
console.log(it.next().value);   //返回第1次遍历的值0 a
console.log(it.next().value);   //返回第2次遍历的值1 b
console.log(it.next().value);   //返回第3次遍历的值2 c
console.log(it.next().value);   //返回undefined

🌵6.includes() 返回一个布尔值,表示某个数组是否包含给定的值

//es6
console.log([1,2,3].includes(2)); //true
console.log([1,2,3].includes(4)); //false

	//es5
	console.log([1,2,3].indexOf(2)); //true