js基础系列-数组的基本方法

栏目: JavaScript · 发布时间: 4年前

内容简介:如何实现数组的扁平化,一道题引发对javaScript基础思考,今日现总结下数组的基本方法, 搬运不易,多多点赞,感谢!定义数组: const arr = [1, 2, 3, 4, 5, 6]用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置

如何实现数组的扁平化,一道题引发对javaScript基础思考,今日现总结下数组的基本方法, 搬运不易,多多点赞,感谢!

基本方法

定义数组: const arr = [1, 2, 3, 4, 5, 6]

数组检测

instanceof

用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置

console.log(arr instanceof Array)
# 输出: true
复制代码

instanceof文档传送门

Array.isArray()

用于确定传递的值是否是一个 Array

console.log(Array.isArray(arr)); 
# true
Array.isArray(Array.prototype) 
# true Array.prototype也是个数组
复制代码

Polyfill

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

Array.isArray文档传送门

Object.prototype.toString.call()

console.log(Object.prototype.toString.call(arr)); 
# [object Array]
复制代码

toString文档传送门

数组循环

every

arr.every(callback[, thisArg]) 
  • 为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 true,every 就会返回false
  • every遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后添加到数组中的元素不会被 callback 访问到。如果数组中存在的元素被更改,则他们传入 callback 的值是 every 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到
  • every 不会改变原数组
  • 空数组因为没有元素返回true。(空数组中所有元素都符合给定的条件)
示例:
arr.every(function(item, index, array){
  return item < 4
})
# 输出 false
# 此时arr = []
arr.every(function(item, index, array){
  return item > 4
})
# 输出 true
复制代码

Polyfill

if (!Array.prototype.every) {
  Array.prototype.every = function(fun /*, thisArg */) {
    'use strict';
    if (this === void 0 || this === null) {
        throw new TypeError();   
    }
    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== 'function') {
       throw new TypeError();
    }
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t && !fun.call(thisArg, t[i], i, t))
        return false;
    }
    return true;
  };
}
复制代码

some

arr.some(callback(element[, index[, array]])[, thisArg])
  • 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some() 将会立即返回 true。否则,some() 返回 false
  • 遍历的元素的范围在第一次调用 callback. 时就已经确定了。在调用 some() 后被添加到数组中的值不会被 callback 访问到。如果数组中存在且还未被访问到的元素被 callback 改变了,则其传递给 callback 的值是 some() 访问到它那一刻的值
  • some() 被调用时不会改变数组,对于放在空数组上的任何条件,此方法返回false
示例: 
function checkAvailability(arr, val) {
  return arr.some(function(arrVal) {
    return val === arrVal;
  });
}
checkAvailability(arr, 3)
# 输出true
# 此时arr = []
arr.some(function(item, index, array){
    return item > 4
})
# 输出 false
复制代码

Polyfill

if (!Array.prototype.some) {
  Array.prototype.some = function(fun/*, thisArg*/) {
    'use strict';
    if (this == null) {
      throw new TypeError('Array.prototype.some called on null or undefined');
    }
    if (typeof fun !== 'function') {
      throw new TypeError();
    }
    var t = Object(this);
    var len = t.length >>> 0;
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t && fun.call(thisArg, t[i], i, t)) {
        return true;
      }
    }
    return false;
  };
}
复制代码

forEach

arr.forEach(callback[, thisArg]), 返回值:undefined

  • callback 函数会被依次传入三个参数:数组当前项的值、数组当前项的索引、数组对象本身
  • forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)
  • 注意: 不可链式调用,并且没有办法中止或者跳出 forEach() 循环,除了抛出一个异常。如果你需要这样,使用 forEach() 方法是错误的
示例:
const newArr = []
arr.forEach(function(item, index, array){
  newArr.push(item)
})
# 输出newArr [1,2,3,4,5,6]
复制代码

filter

arr.filter(callback(element[, index[, array]])[, thisArg])  
  • 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或等价于true的值的元素创建一个新数组,如果没有任何数组元素通过测试,则返回空数组
  • callback 只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过,不会被包含在新数组中
  • 不会改变原数组,它返回过滤后的新数组
示例:
const newArr = arr.filter(function(item, index){
  return item > 4
})
# 输出 [5,6]
复制代码

map

arr.map(function callback(currentValue[, index[, array]]) { }[, thisArg])
  • 给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
  • callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身
  • map 不修改调用它的原数组本身(当然可以在 callback执行时改变原数组)
  • 一个新数组,每个元素都是回调函数的结果,如果map的数组为空,则返回空数组
示例:
const newArr = arr.map(function(item, index, array){
  let obj = {}
  obj[item] = item
  return obj
})
# 输出[ { '1': 1 },{ '2': 2 },{ '3': 3 },{ '4': 4 },{ '5': 5 },{ '6': 6 } ]
复制代码

数组的增删改查操作

数组的查找

find

arr.find(callback[, thisArg])
  • 对数组中的每一项元素执行一次 callback 函数,直至有一个 callback 返回 true。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回 undefined。注意 callback 函数会为数组中的每个索引调用即从 0 到 length - 1,而不仅仅是那些被赋值的索引,这意味着对于稀疏数组来说,该方法的效率要低于那些只遍历有值的索引的方法。
  • find方法不会改变数组
示例
const newArr = arr.find(function(item, index, array){
  return item === 5
})
# 输出 5
复制代码

findIndex

arr.findIndex(callback[, thisArg])
  • 对数组中的每个数组索引0..length-1(包括)执行一次callback函数,直到找到一个callback函数返回真实值(强制为true)的值。如果找到这样的元素,findIndex会立即返回该元素的索引。如果回调从不返回真值,或者数组的length为0,则findIndex返回-1。 与某些其他数组方法(如Array#some)不同,在稀疏数组中,即使对于数组中不存在的条目的索引也会调用回调函数
  • 回调函数调用时有三个参数:元素的值,元素的索引,以及被遍历的数组
  • findIndex不会修改所调用的数组
示例
const index = arr.findIndex(function(item, index, array){
  return item === 2
})
# 输出 1
复制代码

indexOf

arr.indexOf(searchElement)  arr.indexOf(searchElement[, fromIndex = 0])
  • fromIndex 开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找。默认为0
  • 首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
  • 注意:对于String方法,请参阅 String.prototype.indexOf(),indexOf 使用严格相等(strict equality,即 ===)比较 searchElement 和数组中的元素。
示例
const index = arr.indexOf(2)
# 输1
复制代码

lastIndexOf

arr.indexOf(searchElement)  arr.indexOf(searchElement[, fromIndex = 0])
  • 返回指定元素(也即有效的JavaScript值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始
  • lastIndexOf 使用严格相等(strict equality,即 ===)比较 searchElement 和数组中的元素。
示例
# arr = [1,2,3,4,5,2,2]
const index = arr.lastIndexOf(2)
# 输出6
复制代码

includes

arr.includes(valueToFind[, fromIndex])
  • 返回一个布尔值 Boolean ,如果在数组中找到了(如果传入了 fromIndex ,表示在 fromIndex 指定的索引范围中找到了)则返回 true,否则为false
  • 从fromIndex 索引处开始查找 valueToFind。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜 (即使从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)。
  • fromIndex 大于等于数组的长度,则会返回false,且该数组不会被搜索。如果计算出的索引小于 0,则整个数组都会被搜索。默认为 0,
  • 注意:使用 includes()比较字符串和字符时是区分大小写
示例
const bool = arr.includes(2) # true
const bool = arr.includes(2, 4) # false
const bool = arr.includes(2, -5) # true 从index 1开始查找
const bool = arr.includes(2, -2) # false 从index 4开始查找
const bool = arr.includes(2, -1) # false
const bool = arr.includes(12) # false
[1, 2, NaN].includes(NaN) # true
复制代码

数组的增删改等操作

push

arr.push(element1, ..., elementN)
  • 将一个或多个元素添加到数组的末尾,并返回该数组的新长度
  • push 方法有意具有通用性。该方法和call()或apply()一起使用时,可应用在类似数组的对象上。push方法根据length属性来决定从哪里开始插入给定的值。如果length不能被转成一个数值,则插入的元素索引为 0,包括 length 不存在时。当 length 不存在时,将会创建它。
示例
const length = arr.push(2)
# 输出length =  7
# 原数组变成[ 1, 2, 3, 4, 5, 6, 2 ]
复制代码

pop

arr.pop()

  • 从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度(当数组为空时返回undefined)
  • pop 方法有意具有通用性。该方法和 call() 或 apply() 一起使用时,可应用在类似数组的对象上。pop方法根据 length属性来确定最后一个元素的位置。如果不包含length属性或length属性不能被转成一个数值,会将length置为0,并返回undefined
示例
const lastVal = arr.pop()
# 输出lastVal = 6
# 原数组变成[ 1, 2, 3, 4, 5 ]
复制代码

unshift

arr.unshift(element1, ..., elementN)
  • 方法将一个或多个元素添加到数组的开头,
const length = arr.unshift(11)
# 输出length =  7
# 原数组变成[ 11, 1, 2, 3, 4, 5, 6 ]
复制代码

shift

arr.shift()
  • shift 方法移除索引为0的元素(即第一个元素),并返回被移除的元素,其他元素的索引值随之减 1。如果 length 属性的值为 0 (长度为 0),则返回 undefined。
  • shift 方法并不局限于数组:这个方法能够通过 call 或 apply 方法作用于类似数组的对象上。但是对于没有length属性(从0开始的一系列连续的数字属性的最后一个)的对象,调用该方法可能没有任何意义。
示例
const lastVal = arr.shift()
# 输出lastVal = 1
# 原数组变成 [ 2, 3, 4, 5, 6 ]
复制代码

slice

arr.slice() [0, end]  arr.slice(begin) [begin, end]  arr.slice(begin, end) [begin, end)
  • 返回一个新的含有提取元素的新数组对象,这一对象是一个由begin和end(不包括end)决定的原数组的浅拷贝。原始数组不会被改变
  • beigin 从该索引处开始提取原数组中的元素(从0开始)。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。如果省略 begin,则 slice 从索引 0 开始
  • end 在该索引处结束提取原数组元素(从0开始)。slice会提取原数组中索引从 begin 到 end 的所有元素(包含begin,但不包含end)。slice(1,4)提取原数组中的第二个元素开始直到第四个元素的所有元素 (索引为 1, 2, 3的元素)。如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。如果 end 被省略,则slice 会一直提取到原数组末尾。如果 end 大于数组长度,slice 也会一直提取到原数组末尾 — slice 不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组
  • 复制原则 如果该元素是个对象引用 (不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。 对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。
示例
const newArr = arr.slice()
# 输出 [ 1, 2, 3, 4, 5, 6 ]
const newArr = arr.slice(1)
# 输出 [ 2, 3, 4, 5, 6 ]
const newArr = arr.slice(3, 5)
# 输出 [ 4, 5 ]
const newArr = arr.slice(-2)
# 输出 [ 5, 6 ]
const newArr = arr.slice(-2, 4)
# 输出 [ 5, 6 ]
const index = arr.slice(-2, -7)
# 输出 []
复制代码

splice

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
  • 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组由,如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组
  • start 指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于array.length-n);如果负数的绝对值大于数组的长度,则表示开始位置为第0位
  • deleteCount 如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。 如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除。 如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。
  • item1 ... 要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素
示例
const spliceArr = arr.splice(1, 0, 'bk')
# 输出原数组[ 1, 'bk', 2, 3, 4, 5, 6 ] spliceArr[]
const spliceArr = arr.splice(1, 1, 'bk', 'growth')
# 输出原数组[ 1, 'bk', 'growth',  3, 4, 5, 6 ] spliceArr[2]
const spliceArr = arr.splice(1, 1)
# 输出原数组[ 1, 3, 4, 5, 6 ] spliceArr[2]
const spliceArr = arr.splice(-2, 1)
# 输出原数组[ 1, 3, 4, 6 ] spliceArr[5]
const spliceArr = arr.splice(2)
# 输出原数组[ 1, 2 ] spliceArr [ 3, 4, 5, 6 ]
const spliceArr = arr.splice(2, 100)
# 输出原数组[ 1, 2 ] spliceArr [ 3, 4, 5, 6 ]
const spliceArr = arr.splice(2, -2)
# 输出原数组[ 1, 2, 3, 4, 5, 6 ] spliceArr[]
复制代码

concat

old_array.concat(value1[, value2[, ...[, valueN]]])
  • 用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组
  • 每个参数的顺序依次是该参数的元素(如果参数是数组)或参数本身(如果参数不是数组)。它不会递归到嵌套数组参数中。
  • 浅拷贝原则
    对象引用(而不是实际对象):concat将对象引用复制到新数组中。 原始数组和新数组都引用相同的对象。 也就是说,如果引用的对象被修改,则更改对于新数组和原始数组都是可见的。 这包括也是数组的数组参数的元素。 数据类型如字符串,数字和布尔(不是String,Number 和 Boolean 对象):concat将字符串和数字的值复制到新数组中
  • 注意:数组/值在连接时保持不变。此外,对于新数组的任何操作(仅当元素不是对象引用时)都不会对原始数组产生影响,反之亦然。
示例
连接两个数组
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
arr1.concat(arr2)
# 输出 [1, 2, 3, 4, 5, 6]
连接三个数组
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr2 = [7, 8, 9]
arr1.concat(arr2, arr3)
# 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]
值连接三个数组
const arr1 = [1, 2, 3]
const arr2 = 4
const arr2 = [7, 8, 9]
arr1.concat(arr2, arr3)
# 输出 [1, 2, 3, 4, 7, 8, 9]
复制代码

fill(Es6新增)

arr.fill(value[, start[, end]])   arr.fill(value, start = 0, end = this.length)
  • 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引,返回修改后的数组
  • 如果 start 是个负数, 则开始索引会被自动计算成为 length+start, 其中 length 是 this 对象的 length 属性值。如果 end 是个负数, 则结束索引会被自动计算成为 length+end。
  • 当一个对象被传递给 fill方法的时候, 填充数组的是这个对象的引用
示例
arr.fill(4)
# 输出 [4,4,4,4,4,4]
arr.fill(4, 1)
# 输出 [1,4,4,4,4,4]
arr.fill(4, 1, 1)
# 输出 [1, 2, 3, 4, 5, 6]
arr.fill(4, 7, 7)
# 输出 [1, 2, 3, 4, 5, 6]
arr.fill(4, -4, -3)
# 输出 [1, 2, 4, 4, 5, 6]
arr.fill(4, NaN, NaN)
# 输出 [1, 2, 4, 4, 5, 6]
Array(3).fill(4)
# 输出 [4, 4, 4]
[].fill.call({ length: 3 }, 4)
# 输出{0: 4, 1: 4, 2: 4, length: 3}
var arr = Array(3).fill({})
arr[0].hi = "hi"
# 输出[{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
复制代码

copyWithin(Es6新增)

arr.copyWithin(target[, start[, end]])  arr.copyWithin(target, start = 0, end = this.length)
  • 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小
  • 参数 target、start 和 end 必须为整数。如果 start为负,则其指定的索引位置等同于 length+start,length 为数组的长度。end 也是如此。
  • 会修改当前数组
示例
arr.copyWithin(0, 3)
# 输出 [4, 5, 6, 4, 5, 6]
arr.copyWithin(-2)
# 输出 [1, 2, 3, 4, 1, 2]
arr.copyWithin(0, 3, 4)
# 输出 [4, 2, 3, 4, 5, 6]
arr.copyWithin(-2, -3, -1)
#输出 [1, 2, 3, 4, 4, 5]
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
# 输出 {0: 1, 3: 1, length: 5}
复制代码

flat(Es6新增)

var newArray = arr.flat(depth)
  • 会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
  • 指定要提取嵌套数组的结构深度,默认值为 1
  • flat() 方法会移除数组中的空项
示例
const arr1 = [1, 2, [3, 4]];
arr1.flat(); 
# [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
# [1, 2, 3, 4, [5, 6]]
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
# [1, 2, 3, 4, 5, 6]
# 使用 Infinity 作为深度,展开任意深度的嵌套数组
arr3.flat(Infinity); 
# [1, 2, 3, 4, 5, 6]
const arr4 = [1,2,3,[4,,5]]
arr4.flat()
# [1, 2, 3, 4, 5]
复制代码

reduce

arr.reduce(callback[, initialValue])  arr.reduce(function(Accumulator, CurrentValue, currentIndex, SourceArray), InitialValue)
  • Accumulator (acc) (累计器)
    CurrentValue (cur) (当前值)
    CurrentIndex (idx) (当前索引)
    SourceArray (src) (源数组)
    InitialValue 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
  • 对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值
  • 如果数组为空且没有提供initialValue,会抛出TypeError 。如果数组仅有一个元素(无论位置如何)并且没有提供initialValue, 或者有提供initialValue但是数组为空,那么此唯一值将被返回并且callback不会被执行。
示例
# 求和
const arr = [0,1,2,3,4]
arr.reduce(function(accumulator, currentValue){
    return accumulator + currentValue
})
# 10
复制代码

看下执行过程

js基础系列-数组的基本方法
# 二维数组转为一位数组
const arr = [0,[1,2],[3,4]]
arr.reduce(function(accumulator, currentValue){
    return accumulator.concat(currentValue)
}, [])
# 输出[0, 1, 2, 3, 4]
# 假如现在是多维数组转为一位数组呢
const arr2 = [0,[1,2],[3,4, [5,6,[7,8]]]]
const flatArr = (arr) => {
   return arr.reduce(function(accumulator, currentValue){
        return accumulator.concat(Array.isArray(currentValue)? flatArr(currentValue): currentValue)
    }, []) 
}
flatArr(arr2)
# 输出 [0, 1, 2, 3, 4, 5, 6, 7, 8]
# 计算数组中每个元素出现的次数
const arr3 = [1,1,2,3,4,2, 2, 3]
var counted = arr3.reduce(function (allArr, num) {
  if (num in allArr) {
    allArr[num]++;
  }
  else {
    allArr[num] = 1;
  }
  return allArr;
}, {})
# 输出 {1: 2, 2: 3, 3: 2, 4: 1}
复制代码

数组排序

sort

arr.sort([compareFunction])
  • 用原地算法对数组的元素进行排序,并返回数组。排序算法现在是稳定的。默认 排序 顺序是根据字符串Unicode码点
  • 排序后的数组。请注意,数组已原地排序,并且不进行复制
  • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;如果 compareFunction(a, b) 等于 0, a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本); 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。 compareFunction(a, b)必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
示例
const arr = [1,9,2,1,3,5,12,3]
arr.sort(function(a,b){
    return a - b
})
# 输出 [1, 1, 2, 3, 3, 5, 9, 12]
复制代码

reverse

arr.reverse()
  • 将数组中元素的位置颠倒,并返回该数组。
示例
arr.reverse()
# 输出 [ 6, 5, 4, 3, 2, 1 ]
复制代码

数组ES新增

entries

arr.entries()
  • 返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。Array Iterator是对象,它的原型( proto :Array Iterator)上有一个next方法,可用用于遍历迭代器取得原数组的[key,value]
示例
const newIterator = arr.entries()
newIterator.next()
# 输出
entries输出: Array Iterator {}
    __proto__: Array Iterator
    next: ƒ next()
    Symbol(Symbol.toStringTag): "Array Iterator"
    __proto__: Object
next输出: {value: Array(2), done: false}
    done: false
    value: (2) [0, 1]
    __proto__: Object
    
for (let e of newIterator) {
    console.log(e);
}
#  输出[0, 1]、[1, 2]、[2, 3]、[3, 4]、[4, 5]、[5, 6]
复制代码

keys

arr.keys()
  • 返回一个包含数组中每个索引键的Array Iterator对象
  • 索引迭代器会包含那些没有对应元素的索引
示例
var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys);  // [0, 1, 2]
复制代码

values

arr.values()
  • 返回一个新的 Array Iterator对象,该对象包含数组每个索引的值
let arr = ['w', 'y', 'k', 'o', 'p'];
let eArr = arr.values();
# 您的浏览器必须支持 for..of 循环
# 以及 let —— 将变量作用域限定在 for 循环中
for (let letter of eArr) {
  console.log(letter);
}
# 输出 w y k o p
另一种迭代方式
eArr.next().value 
# w
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

用户体验要素

用户体验要素

Jesse James Garrett / 范晓燕 / 机械工业出版社 / 2011-7-1 / 39.00元

《用户体验要素:以用户为中心的产品设计(原书第2版)》是AJAX之父Jesse James Garrett的经典之作。本书用简洁的语言系统化地诠释了设计、技术和商业融合是最重要的发展趋势。全书共8章,包括关于用户体验以及为什么它如此重要、认识这些要素、战略层、范围层、结构层、框架层、表现层以及要素的应用。 《用户体验要素:以用户为中心的产品设计(原书第2版)》用清晰的说明和生动的图形分析了以......一起来看看 《用户体验要素》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具