Array-apis(11-20)

169 阅读4分钟

(11) forEach()

forEach()方法对数组的每个数组执行一次回调。

回调的参数分别是:

参数说明
item当前遍历的元素
index当前元素的索引
array被遍历的数组

示例:

const arr = [2,4,6]

// 遍历
arr.forEach((e,i,a)=>{
  console.log(e)
})
// 2 4 6

// 遍历处理当前元素
arr.forEach((e,i,a)=>{
  a[i] = e/2
})
// arr = [1, 2, 3]

注意:

  • 除了抛出异常外,无法终止或跳出forEach()循环。
  • 如果数组元素属于基本类型(String、Boolean、Number等)。通过item = 新值的方式无法修改当前的值,只能通过array[index] = 新值的方式修改当前元素的值。引用类型可以直接使用item = 新值此方式修改当前遍历的元素。

(12) Array.from()

Array.from()方法对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例

语法:

Array.from(arrayLike[, mapFn[, thisArg]])

参数:

参数说明
arrayLike要转换成数组的伪数组对象或可迭代对象
mapFn可选。如果指定了该参数,新数组中的每个元素会执行该回调函数
array执行回调函数 mapFn 时 this 对象。

示例:

// 1 从String生成数组(同 [].split(''))
Array.from('hello') // ['h', 'e', 'l', 'l', 'o']

// 2 从Set生成数组
const set = new Set([2,3,4,3,2])
Array.from(set) // [2, 3, 4]

// 3 从Map生成数组
const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map); // [[1, 2], [2, 4], [4, 8]]

// 4 从类数组对象生成数组(函数的arguments参数,有length属性的对象)
function add(){
  return Array.from(arguments)
}
add(1,2,3) // [1, 2, 3]
const o = {a:1,b:2,c:3,length:3}
Array.from(o) // [undefined, undefined, undefined]

// 5 数组去重合并
function combine(){
  let arr = [].concat.apply([],arguments)
  console.log("未去重的数组:",arr)
  return Array.from(new Set(arr))
}
const arr1 = [1,2,3],arr2 = [2,3,4]
combine(arr1,arr2)
// 未去重的数组: (6) [1, 2, 3, 2, 3, 4]
// [1, 2, 3, 4]

(13) includes()

includes()方法判断一个数组是否包含一个指定的值。返回true 或 false

语法:

arr.includes(valueToFind[, fromIndex])

参数:

参数说明
valueToFind被查找的元素
fromIndex开始的索引

示例:

const arr = [1,2,3,2,4]
arr.includes(2) // true
arr.includes(3,4) // false

(14) indexOf() & lastIndexOf()

1.indexOf() 方法找到某个元素是否在数组中,返回找到的第一个元素的索引,不存在则返回-1.

参数同上面的includes()方法。

用法也同上面的includes()方法。

  1. lastIndexOf()方法与indexOf()作用相同,只不过它返回的是找到的最后一个元素的索引。

(15) Array.isArray()

Array.isArray() 方法用于判断一个值是否是Array类型。

语法:

Array.isArray(obj)

示例:

Array.isArray([1, 2, 3]) // true
Array.isArray({foo: 123}) // false
Array.isArray("foobar") // false

tips: instanceos 和isArray

检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.

当浏览器不支持Array.isArray()方法时,可用以下方法代替:

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

(16) join()

join()方法将一个数组(类数组对象)的所有元素连接成一个字符串并返回这个字符串。

语法:

arr.join([separator])

参数:

参数说明
separator指定用来连接的字符串,默认逗号(,)

示例:

const arr = [1,2,3,4]
arr.join('-') // '1-2-3-4'

(17) keys() & values()

1.keys()方法返回一个包含数组中每个索引键的 Array Iterator对象。

示例:

const arr = ['a', 'b', 'c']
for(const key of iterator){
  console.log(key) // 当前元素的索引
  console.log(arr[key])  // 当前元素
}

2.values()keys()相反,values()取得是值。

(18) map()

map()方法创建一个新数组,其元素是每次调用其回调函数的返回值。

示例:

const arr = [2,4,6]
const newArr = arr.map((e,i,a)=>{
  return e/2
})
 
newArr // [1, 2, 3]

(19) Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7)****创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组(注意: 这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)。

示例:

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

(20) pop() & push() & shift() & unshift()

  1. pop() 方法删除并返回数组的最后一个元素,数组为空返回undefined。

  2. push() 方法向数组最后插入一个或多个元素。返回数组的新长度。

  3. shift() 方法删除数组的第一个元素,并返回该元素的值。数组为空返回undefined。

  4. unshift() 方法将一个或多个元素添加到数组的开头,并返回数组的新长度。

示例:

const arr = [1,2,3]
arr.pop() // 3(3被删除)
arr // [1, 2]

arr.push(8,9) // 4(新数组长度)
arr // [1, 2, 8, 9]

arr.shift() // 1(1被删除)
arr // [2, 8, 9]

arr.unshift(-1,0) // 5 (新数组长度)
arr // [-1, 0, 2, 8, 9]