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前端交流群