JAVASCRIPTWeb前端之路前端开发那些事

ES6语法 | Array

2017-01-18  本文已影响384人  小母鸡叽叽叽

1. Array.from()

将'类数组'转化为真正的数组,

// 转化类数组对象
let arrayLike = {
    '0':1,
    '1':2,
    '2':3,
    length:3
}

let arr1 = Array.from(arrayLike);
console.log(arr1); // [1,2,3]

// 转化NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).foreach(function(p){
  console.log(p)
})

// 转化argument对象
function foo (){
 var args = Array.from(arguments);
}

2. Array.of()

用于将一组值,转换为数组

Array.of(3,11,1) // [3,11,1]

3. copyWithin()

// 在当前数组内部,将指定位置的成员复制的指定位置

/* Array.prototype.copyWithin(target, start = 0, end = this.length)
 * target 目标位置
 * start 开始位置
 * end 结束位置
 * @return 新数组
 */
// 将第3到最后一位成员,即[4,5],复制到第0位,替换掉[1,2],得到新数组[4,5,3,4,5]
[1, 2, 3, 4, 5].copyWithin(0, 3)  // [4,5,3,4,5]

4. find()

找到第一个符合条件的数组成员,如果没有找到,则返回undefined

[1,2,3,4,5].find((n) => n<3) // 1

5. findIndex

find()方法非常类似,返回第一个符合条件的成员的位置,如果没有找到,则返回-1

[1,2,3,4,5].findIndex((val,index,arr) => val > 3)  // 3

遍历数据的方法

1. map(callback[,thisObject])

/*
* callback(value, index , array) 回调函数
* thisObject  this对象
* @param [array] 返回一个新数组
*/
// 将数组的每个元素加1
var arr = [1,2,3,4,5];
var arr1 = arr.map( (value, index, array) => {
    return value + 1
});  
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr1); // [2, 3, 4, 5, 6]

2. filter(callback[,thisObject])

/*
* callback(value, index , array) 回调函数
* thisObject  this对象
* @param [array] 返回一个新数组
*/
var arr = [1,2,3,4,5];
var arr1 = arr.filter( (value, index, array) => value > 3);  
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr1); // [4,5]

3. forEach()

// 遍历数组,无返回值
var arr = [1,2,3,4,5];
var arr1 = arr.forEach( (value, index, array) => {
 return value > 3
});  
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr1); // undefined

4. some(callback[,thisObject])

// 检测数组中是否有一个值大于10
var arr = [1,5,19,10,3];
var result = arr.some((value,index,arr) => {
  return value > 10
})
console.log(result); // true

5. every()

// 测试是否所有的数组都大于10
var arr = [1,5,19,10,3];
var result = arr.every((value,index,arr) => {
    return value > 10
})
console.log(result) // false
上一篇下一篇

猜你喜欢

热点阅读