js基础(一):常用数组方法

it2022-05-05  161

 (0)Array.isArray()

Array.isArray() 用于确定传递的值是否是一个 数组

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

 (1)map() 

map() 给原数组中的每个元素执行一次 callback 函数。每个元素执行后的返回值组合起来形成一个新数组。

item:当前遍历到的元素index:当前遍历到的索引(可选)array:数组本身(可选) let data = [ { key: 1, value: 'a' }, { key: 2, value: 'b' }, { key: 3, value: 'c' } ] let newArr = data.map((item, index, array) => { return item['value'] }) console.log(newArr);//["a", "b", "c"] //或者简写 let newArr2 = data.map((item, index, array) => item['value']) console.log(newArr2);//["a", "b", "c"] // map不会改变原数组,但可以在callback执行时改变原数组 let newArr3 = data.map((item, index, array) => { item['key'] = item['key'] * 2 return item }) console.log(data)// [ {key: 2, value: "a"}, {key: 4, value: "b"}, {key: 6, value: "c"}] console.log(newArr3)// [ {key: 2, value: "a"}, {key: 4, value: "b"}, {key: 6, value: "c"}]

(2)forEach() 

forEach()对数组的每个元素执行提供的函数,使用方法类似map(),但没有返回值。forEach方法类似于for...of语句,但无法使用break,return等结束循环。

item:当前遍历到的元素index:当前遍历到的索引(可选)array:数组本身(可选) let data = [ { key: 1, value: 'a' }, { key: 2, value: 'b' }, { key: 3, value: 'c' } ] let newArr = data.forEach((item, index, array) => { item['key'] = item['key'] * 2 }) console.log(data)//[{key: 2, value: "a"}, {key: 4, value: "b"}, {key: 6, value: "c"}] console.log(newArr)//undefined for (let item of data) { item['key'] = item['key'] * 3 // break; } console.log(data);//[{key: 6, value: "a"}, {key: 12, value: "b"}, {key: 18, value: "c"}]

(3)find()

find() 方法返回数组中满足提供的第一个元素的值,否则返回 undefined,方法接收三个参数。

item:当前遍历到的元素index:当前遍历到的索引(可选)array:数组本身(可选) let data = [ { key: 1, value: 'a' }, { key: 2, value: 'b' }, { key: 3, value: 'c' } ] console.log(data.find(item => item['key'] == 1))// {key: 1, value: 'a'}

(4)findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1,方法接收三个参数。

item:当前遍历到的元素index:当前遍历到的索引(可选)array:数组本身(可选) let data = [ { key: 1, value: 'a' }, { key: 2, value: 'b' }, { key: 3, value: 'c' } ] console.log(data.findIndex(item => item['key'] == 1))// 0 console.log(data.findIndex(item => item['key'] == 10))// -1

 (5)filter()

 filter() 返回满足条件的新数组,否则返回空数组,方法接收三个参数。

item:当前遍历到的元素index:当前遍历到的索引(可选)array:数组本身(可选) let data = [ { key: 1, value: 'a' }, { key: 2, value: 'b' }, { key: 3, value: 'c' } ] console.log(data.filter(item => item['key'] > 1))// [{ console.log(data.filter(item => item['key'] == 0))// []

(6)some()

 some() 方法用于检测数组中的元素是否满足指定条件,如果找到符合条件的值,则立即返回true,若为空数组返回false,方法接收三个参数。

item:当前遍历到的元素index:当前遍历到的索引(可选)array:数组本身(可选) let data = [ { key: 1, value: 'a' }, { key: 2, value: 'b' }, { key: 3, value: 'c' } ] console.log(data.some(item => item['key'] >= 1))// true console.log(data.some(item => item['key'] < 0))// false

(7)every()

 every() 方法用于检测数组中的元素是否全部符合指定条件,如果有任何不符合条件的值,则立即返回false,若为空数组返回true,方法接收三个参数。

item:当前遍历到的元素index:当前遍历到的索引(可选)array:数组本身(可选) let data = [ { key: 1, value: 'a' }, { key: 2, value: 'b' }, { key: 3, value: 'c' } ] console.log(data.every(item => item['key'] > 0))// true console.log(data.every(item => item['key'] > 2))// false

(8)includes()

 includes() 方法用来判断一个数组是否包含一个指定的值,,如果是返回 true,否则false。方法接收二个参数。

value:要查找的值,区分大小写fromIndex:(可选)从该索引处开始查找。如果fromIndex大于等于数组长度,则不查找,返回-1。若索引为负值,则从倒数位置开始升序查找,即-1从最后一个元素往后查找,-2从倒数第二个往后查找,依次类推。默认值为0. let arr = ['a', 'b', 'c'] console.log(arr.includes('b'))// true console.log(arr.includes('b', 5))// false console.log(arr.includes('s'))// false

 

(9)indexOf()

 indexOf() 返回元素在数组中第一次出现时的索引,如果不存在,则返回-1。方法接收二个参数。

value:要查找的值,区分大小写fromIndex:(可选)从该索引处开始查找。如果fromIndex大于等于数组长度,则不查找,返回-1。若索引为负值,则从倒数位置开始升序查找,即-1从最后一个元素往后查找,-2从倒数第二个往后查找,依次类推。默认值为0. let arr = ['a', 'b', 'c'] console.log(arr.indexOf('b'))// 1 console.log(arr.indexOf('b', 5))// -1

(10)lastIndexOf()

 lastIndexOf() 返回元素在数组中最后一次出现时的索引,如果不存在,则返回-1。方法接收二个参数。

value:要查找的值,区分大小写fromIndex:(可选)从该索引处开始往前查找。如果fromIndex大于等于数组长度,则查找全部。若索引为负值,则从倒数位置开始降序查找,即-1从最后一个元素往前查找,-2从倒数第二个往前查找,依次类推。默认值为数组长度减1 let arr = ['a', 'b', 'c'] console.log(arr.lastIndexOf('c'))// 2 console.log(arr.lastIndexOf('c', 1))// -1

(11)pop()

 pop() 从数组中删除最后一个元素,并返回该元素的值。

let arr = ['a', 'b', 'c'] console.log(arr.pop())// c

(12)push()

 push() 将一个或多个元素添加到数组的末尾,并返回该数组的新长度

let arr = ['a', 'b', 'c'] console.log(arr.push('e', 'f', 'g'))// 6 console.log(arr)// ["a", "b", "c", "e", "f", "g"]

(13)shift()

 shift() 从数组中删除第一个元素,并返回该元素的值。

let arr = ['a', 'b', 'c'] console.log(arr.shift())// a

(14)unshift()

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

let arr = ['a', 'b', 'c'] console.log(arr.unshift('1', '2', '3'))// 6 console.log(arr)// ["1", "2", "3", "a", "b", "c"]

(15)slice()

 slice() 从已有的数组中返回选定的元素,方法不改变原数组。方法可接收两个参数。

start:选取的开始位置,负数则表示从尾部开始的位置,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。end:选取的结束位置,如果没有指定此参数,则选取start到数组结尾的所有元素。负数则表示从尾部开始的位置,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 let arr = ['a', 'b', 'c'] console.log(arr.slice(1, 2))// ["b"]

(16)splice()

 splice() 从数组中添加/删除项目,然后返回被删除的项目。方法可接收三个参数。

start:修改的开始位置,负数则表示从尾部开始的位置,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。deleteCount :要移除的数组元素的个数,如果deleteCount未指定,或者deleteCount大于等于array.length - start,则删除start之后的所有元素。如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。item1, item2:可选,要添加进数组的元素。 let arr = ['a', 'b', 'c'] console.log(arr.splice(1, 1))// ["b"] arr=["a", "c"] console.log(arr.splice(1, 0, 'e'))// [] arr=["a", "e", "c"]

(17)concat()

 concat() 用于合并两个或多个数组,并返回合并后的数组。此方法不改变原数组。

let arr1 = ['a', 'b', 'c'] let arr2 = [1, 2, 3] let arr3 = [4, 5, 6] console.log(arr1.concat(arr2, arr3))// ["a", "b", "c", 1, 2, 3, 4, 5, 6]

(18)copyWithin()

 copyWithin() 在当前数组内部,将指定位置元素覆盖到数组的另一个位置中,并返回当前数组。方法可接收三个参数。

target:复制元素到该位置。负数则表示从尾部开始的位置,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。start:可选,复制元素的起始位置,如果是负数,start 将从末尾开始计算。默认值为从0开始复制end:可选,复制元素的结束位置(但不包括当前元素),如果为负值,表示倒数。默认值为数组长度。 let arr = ['a', 'b', 'c', 'd', 'e'] console.log(arr.copyWithin(-2))// 复制['a', 'b', 'c', 'd', 'e']到 d 位 let arr2 = [1, 2, 3] console.log(arr2.copyWithin(0, 1, 2))// 复制[2]到 1位置 arr2=[2, 2, 3]

(19)fill()

 fill() 方法用固定值填充数组指定范围内的元素,并返回数组,方法可接收三个参数。

value:用来填充数组元素的值。start:可选,开始索引,默认值为0。end:可选,终止索引,默认值为数组长度。 let arr = [1, 2, 3] console.log(arr.fill(4))// [4, 4, 4] let data = [ { key: 1, value: 'a' }, { key: 2, value: 'b' }, { key: 3, value: 'c' } ] console.log(data.fill(1, 1, 2))// [{ key: 1, value: 'a' },1, { key: 3, value: 'c' }]

(20)join()

 join() 将数组所有元素转成字符串,再连接成一个字符串

separator:连接字符串的分隔符,默认为","。如果为空字符串,则元素之间没有任何字符 let arr = [1, 2, 3] console.log(arr.join('~')) // 1~2~3 let arr2 = [{ 'a': 1 }, { 'b': 2 }, { 'c': 3 }] console.log(arr2.join('~')) // [object Object]~[object Object]~[object Object]

(21)reduce()

 reduce()  为数组中的每一个元素依次执行回调函数(升序执行),返回一个具体的结果。

function(total, currentValue, currentIndex, arr):  total:初始值,或者累计器回调的返回值 currentValue:正在处理的元素 currentIndex:正在处理元素的索引 arr:数组本身 initialValue:可选,传递给函数的初始值 // 求数组的和 let arr = [1, 2, 3, 4, 5] let res = arr.reduce((total, current, currentIndex, arr) => { return total + current }) console.log(res)// 15 // 求字符串中每个字符出现的次数 let str = 'aabbccdddd' let obj = str.split('').reduce((res, current) => { res[current] = res[current] ? ++res[current] : 1 return res }, {}) console.log(obj)// {a: 2, b: 2, c: 2, d: 4}

(22)reduceRight()

 reduceRight()  为数组中的每一个元素依次执行回调函数(降序执行),返回一个具体的结果。方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

(23)reverse()

 reverse()  方法将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。

var sourceArray = ['a', 'b', 'c'] var reverseArray = sourceArray.reverse() console.log(sourceArray)// ["c", "b", "a"] console.log(reverseArray)// ["c", "b", "a"]

(24)sort()

 sort()  方法用于对数组的元素进行排序。默认排序顺序是根据字符串Unicode排序。

sortby(a,b):可选,必须是函数。比较函数应该具有两个值,a:第一个用于比较的元素,b:第二个用于比较的元素。 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。若 a 等于 b,则返回 0。若 a 大于 b,则返回一个大于 0 的值 var arr = [1, 4, 3] console.log(arr.sort())// [1, 3, 4] let arr2 = [ {'name': 'a', 'value': 1}, {'name': 'b', 'value': 3}, {'name': 'c', 'value': 4}, {'name': 'c', 'value': 3} ] // a-b则为升序排序 [{name: "a", value: 1},{name: "b", value: 3},{name: "c", value: 3},{name: "c", value: 4}] console.log(arr2.sort((a, b) => { return a['value'] - b['value'] })) // b-a则为降序排序 [{name: "c", value: 4},{name: "c", value: 3},{name: "b", value: 3},{name: "a", value: 1}] console.log(arr2.sort((a, b) => { return b['value'] - a['value'] }))

(23)flat()

 flat()  按照一个指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

depth :可选,要遍历的结构深度,默认值为1 let arr = [1, 2, [3, 4]]; console.log(arr.flat())//[1, 2, 3, 4] var arr2 = [1, 2, [3, 4, [5, 6]]]; console.log(arr2.flat())// [1, 2, 3, 4, [5, 6]] console.log(arr2.flat(2))// [1, 2, 3, 4, 5, 6] var arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]]; console.log(arr3.flat(Infinity))// [1, 2, 3, 4, 5, 6, 7, 8] Infinity表示展开任意深度的嵌套数组

(24)flatMap()

 flatMap()  方法对原数组的每个成员执行一个函数,返回一个新的数组。相当于执行map()方法,然后对返回值flat()。

let arr1 = [1, 2, 3, 4]; console.log(arr1.map(x => [x * 2]))//压缩成新数组 [[2], [4], [6], [8]] console.log(arr1.map(x => [x * 2]).flat())// [2, 4, 6, 8] console.log(arr1.flatMap(x => [x * 2]))// [2, 4, 6, 8]

 

转载于:https://www.cnblogs.com/eyu1993/p/11081039.html


最新回复(0)