Javascript数组方法,带简单示例

194 阅读10分钟

splice

对数组进行增删改操作(会修改原有数组)

// splice(index, length, ...more)  
// @index 索引值(正负数0,负数为倒数),
// @length 删除个数,
// @...more 添加的参数,
// 返回被删除的项格式为数组

var ary=[1, 2, 3, 4, 5]
ary.splice(1,2)
// [2, 3]

console.log(ary) 
// [1, 4, 5]

var ary=[1, 2, 3, 4, 5]
ary.splice(1, 3, 5, 6, 7)
// [2, 3, 4]

console.log(ary)
// [1, 5, 6, 7, 5]

slice

从数组中返回所选项(不改变原有数组)

// slice(index, length)
// @index 起始索引值(正数),
// @length 结束索引值(正数,默认ary.length-1),不传级返回整个数组,不传结束索引值,返回从索引值开始到数组结束

var ary=[1, 2, 3, 4, 5]
ary.slice(1, 2)
// [2, 3]

console.log(ary)
// [1, 2, 3, 4, 5]

var ary=[1, 2, 3, 4, 5]
ary.slice(1, 2)
// [2, 3]

console.log(ary)
// [1, 2, 3, 4, 5]

var ary=[1, 2, 3, 4, 5]
ary.slice(1)
// [2, 3, 4, 5]

console.log(ary)
// [1, 2, 3, 4, 5]

push

向数组尾部添加项(改变原有数组)

// push(...more)
// 添加项,可为0或多个,返回数组的length

var ary=[1, 2, 3, 4, 5]
ary.push(6, 7)
// 7

console.log(ary)
// [1, 2, 3, 4, 5, 6, 7]

var ary=[1, 2, 3, 4, 5]
ary.push()
// 5

console.log(ary)
// [1, 2, 3, 4, 5]

shift

删除数组索引为0元素(改变原有数组)

// shift()
// 无参
,返回被删除的元素

var ary=[1, 2, 3, 4, 5]
ary.shift()
// 1

console.log(ary)
// [2, 3, 4, 5]

unshift
向数组头部添加元素(改变原有数组)
// unshift(...more)
// 添加项,可为0或多个,返回数组的length

var ary=[1, 2, 3, 4, 5]
ary.unshift(-1, 0)
// 7

console.log(ary)
// [-1, 0, 1, 2, 3, 4, 5]

var ary=[1, 2, 3, 4, 5]
ary.unshift()
// 5

console.log(ary)
// [1, 2, 3, 4, 5]

pop

删除数组最后一项(改变原有数组)

// pop(...more)
// 无参
,返回被删除的元素

var ary=[1, 2, 3, 4, 5]
ary.pop()
// 5

console.log(ary)
// [1, 2, 3, 4]

concat

合并数组

// concat(...more)
// 合并的数组项,可为0或多个,返回合并后的数组,不传返回原有数组

var ary1=[1, 2, 3, 4, 5]
var ary2=[6, 7, 8, 9, 10]
ary1.concat(ary2)
//) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

console.log(ary1
//) [1, 2, 3, 4, 5]

console.log(ary2
//) [6, 7, 8, 9, 10]

var ary=[1, 2, 3, 4, 5]
ary.concat()
//) [1, 2, 3, 4, 5]

console.log(ary)
// [1, 2, 3, 4, 5]

copyWithin

从数组的指定位置拷贝元素到数组的另一个指定位置中(改变原有数组)

// copyWithin(index, start, end)
// @index 目标位置的索引,
// @start 起始位置(可选,不传默认从0以后复制数组,填充到index),
// @emd 复制个数(可选,从start开始的个数,可为负数,负数为倒数)不改变原有长度

var ary=[1, 2, 3, 4, 5]
ary.copyWithin(1)
// [1, 1, 2, 3, 4]

console.log(ary)
// [1, 1, 2, 3, 4]

var ary=[1, 2, 3, 4, 5]
ary.copyWithin(1, 0, 3)
// [1, 1, 2, 3, 5]

console.log(ary)
// [1, 1, 2, 3, 5]

from

从数组中创建出来一个新的数组实例(可实现浅拷贝)

// from(ary, map(item))
// @ary 被拷贝的数组
// @map 便利数组的每一项

var ary=[1, 2, 3, 4, 5]
var ary2=Array.from(ary)
// [1, 2, 3, 4, 5]

ary[0]=10
console.log(ary)
// [10, 2, 3, 4, 5]

console.log(ary2
//) [1, 2, 3, 4, 5]

isArray

用来判断某个变量是不是一个数组

// isArray(ary)
// @ary 校验的变量

Array.isArray([1, 2, 3]);  
// true

Array.isArray({foo: 123}); 
// false

Array.isArray("foobar");   
// false

Array.isArray(undefined);  
// false

of

创建一个具有可变数量的新数组实例

Array.of(...more)
// @more 新数组的内容,将按顺序成为返回数组中的元素

Array.of(7)
// [7] 等价于 var ary = [7]

Array.of(1, 2, 3, 4, 5)
// [1, 2, 3, 4, 5]

Array(7)
// [empty × 7] == [empty, empty, empty, empty, empty, empty, empty]

Array(1, 2, 3, 4, 5)
// [1, 2, 3, 4, 5]

reverse

方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

ary.reverse()
// 无参


var ary=[1, 2, 3, 4, 5]
ary.reveres()
// [5, 4, 3, 2, 1]

sort

方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

ary.sort()
// 无参

var ary=[5, 4, 3, 2, 1]
ary.sort()
// [1, 2, 3, 4, 5]

fill

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

ary.reverse(value, start, end)
// @value 填充的值
// @start 起始索引(默认0)
// @start 结束索引(默认ary.length-1)

var ary=[1, 2, 3, 4, 5]
ary.fill(0, 2, 4)
// [1, 2, 0, 0, 5]

var ary=[1, 2, 3, 4, 5]
ary.fill(0)
// [0, 0, 0, 0, 0]

join

方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

ary.join(separator)
// @separator 可选,字符串间隔,不填默认为,

var ary=[1, 2, 3, 4, 5]
ary.join()
// "1,2,3,4,5"

var ary=[1, 2, 3, 4, 5]
ary.join('-')
// "1-2-3-4-5"

var ary=[{ name:1} , [2, 21], 3, 4, 5]
ary.join('-')
// "[object Object]-2,21-3-4-5"
// 补充
// ary[0].toString()
// "[object Object]"
// object无法正常解析,将数组的每一项进行了toString()
// ary[1].toString()
// "2,21"

toSource

返回一个字符串,代表该数组的源代码。该特性是非标准的,请尽量不要在生产环境中使用它!

ary.toSource()
// 无参

var ary = new Array(1, 2, 3);
ary.toSource();  
// VM1061:2 Uncaught TypeError: ary.toSource is not a function
// [1, 2, 3]

toString

返回一个字符串,表示指定的数组及其元素。

ary.toString()
// 无参

var ary = [1, 2, 3, 4, 5]
ary.toString();  
// "1,2,3,4,5"

toLocaleString

返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。

ary.toLocaleString(locales, options)
// @locales 语言版本
// @options 参数配置

var ary = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
ary.toLocaleString('en', { timeZone: 'UTC' }); 
// "1,a,12/21/1997, 2:12:00 PM"

var ary = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
ary.toLocaleString('cn', { timeZone: 'UTC' }); 
// "1,a,1997/12/21 下午2:12:00"
更多实例参考

indexOf

方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

ary.indexOf(value, formIndex)
// @value 查找的元素
// @formIndex 开始查找的位置索引

var ary = [1, 2, 3, 4, 5];
ary.indexOf(4); 
// 3

lastIndexOf

返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。

ary.lastIndexOf(value, formIndex)
// @value 查找的元素
// @formIndex 开始查找的位置索引

var ary = [1, 2, 3, 4, 5];
ary.indexOf(4); 
// 3

includes

方法用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回false。

ary.includes(value)
// @value 查找的元var ary = [1, 2, 3, 4, 5];
ary.includes(4); 
// true

forEach

对数组的每个元素执行一次给定的函数。

ary.forEach(function(current, index, ary){}, thisAry)
// @current 当前遍历项
// @index 当前项的索引值
// @ary 被遍历的数组
// @thisAry 回调函数的this指向

var ary = [1, 2, 3, 4, 5];
ary.forEach(function(current, index, ary){
  console.log(this, current, index, ary)
},ary); 
//     this           cuttent index ary
// (5) [1, 2, 3, 4, 5] 1 0 (5) [1, 2, 3, 4, 5]
// (5) [1, 2, 3, 4, 5] 2 1 (5) [1, 2, 3, 4, 5]
// (5) [1, 2, 3, 4, 5] 3 2 (5) [1, 2, 3, 4, 5]
// (5) [1, 2, 3, 4, 5] 4 3 (5) [1, 2, 3, 4, 5]
// (5) [1, 2, 3, 4, 5] 5 4 (5) [1, 2, 3, 4, 5]

every

方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。 注意:若收到一个空数组,此方法在一切情况下都会返回 true。

ary.every(function(current, index, ary){}, thisAry)
// @current 当前遍历项
// @index 当前项的索引值
// @ary 被遍历的数组
// @thisAry 回调函数的this指向

var ary = [1, 2, 3, 4, 5];
ary.every(function(current, index, ary){
   return current > 0
},ary); 
// true

some

测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回一个布尔值。 注意:如果用一个空数组进行测试,在任何情况下它返回的都是false。

ary.some(function(current, index, ary){}, thisAry)
// @current 当前遍历项
// @index 当前项的索引值
// @ary 被遍历的数组
// @thisAry 回调函数的this指向

var ary = [1, 2, 3, 4, 5];
ary.some(function(current, index, ary){
   return current > 4
},ary); 
// true

filter

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

ary.filter(function(current, index, ary){}, thisAry)
// @current 当前遍历项
// @index 当前项的索引值
// @ary 被遍历的数组
// @thisAry 回调函数的this指向

var ary = [1, 2, 3, 4, 5];
ary.filter(function(current, index, ary){
   return current > 4
},ary); 
// [5]

find

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

ary.find(function(current, index, ary){}, thisAry)
// @current 当前遍历项
// @index 当前项的索引值
// @ary 被遍历的数组
// @thisAry 回调函数的this指向

var ary = [1, 2, 3, 4, 5];
ary.find(function(current, index, ary){
   return current > 1
},ary); 
// 2

findIndex

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

ary.findIndex(function(current, index, ary){}, thisAry)
// @current 当前遍历项
// @index 当前项的索引值
// @ary 被遍历的数组
// @thisAry 回调函数的this指向

var ary = [1, 2, 3, 4, 5];
ary.findIndex(function(current, index, ary){
   return current > 1
},ary); 
// 1

map

创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

ary.map(function(current, index, ary){}, thisAry)
// @current 当前遍历项
// @index 当前项的索引值
// @ary 被遍历的数组
// @thisAry 回调函数的this指向

var ary = [1, 2, 3, 4, 5];
ary.map(function(current, index, ary){
   return current >= 2 ? current : '小于2'
},ary); 
// ["小于2", 2, 3, 4, 5]

reduce

对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

ary.reduce(function(accumulator, current, index, ary){}, initialValue)
// @accumulator 上次累加的值
// @current 当前遍历项
// @index 当前项的索引值
// @ary 被遍历的数组
// @initialValue 累加的初始值

var ary = [1, 2, 3, 4, 5];
ary.reduce(function(accumulator, current, index, ary){
   return current += accumulator
},0); 
// 15

reduceRight

接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。

ary.reduceRight(function(accumulator, current, index, ary){}, initialValue)
// @accumulator 上次累加的值
// @current 当前遍历项
// @index 当前项的索引值
// @ary 被遍历的数组
// @initialValue 累加的初始值

var ary = [1, 2, 3, 4, 5];
ary.reduceRight(function(accumulator, current, index, ary){
   return accumulator.concat(current)
},[]); 
// [5, 4, 3, 2, 1]

keys

返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值

ary.keys()
// 无参

// 可通过next()获取下一项的内容,每调用一次,迭代器中就少一个
var ary = ['a', 'b', 'c', 'd', 'e'];
var iterator = ary.keys(); 
iterator[0]
// undefined

iterator.next()
// {value: 0, done: false}

iterator.next()
// {value: 1, done: false}

for (const key of iterator) {
  console.log(key);
}
// 2
// 3
// 4

values

返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值

ary.values()
// 无参

// 可通过next()获取下一项的内容,每调用一次,迭代器中就少一个
var ary = ['a', 'b', 'c', 'd', 'e'];
var iterator = ary.values(); 
iterator[0]
// undefined

iterator.next()
// {value: 'a', done: false}

iterator.next()
// {value: 'b', done: false}

for (const key of iterator) {
  console.log(key);
}
// 'c'
// 'd'
// 'e'

entries

返回一个新的 Array Iterator 对象,该对象包含数组每个索引的键/值对。

ary.entries()
// 无参

// 可通过next()获取下一项的内容,每调用一次,迭代器中就少一个
var ary = ['a', 'b', 'c', 'd', 'e'];
var iterator = ary.entries(); 
iterator[0]
// undefined

iterator.next()
// {value: [0, 'a'], done: false}

iterator.next()
// {value: [1, 'b'], done: false}

for (const key of iterator) {
  console.log(key);
}
// [2, 'c']
// [3, 'd']
// [4, 'e']

有兴趣的可以加群 885356143 react前端交流群