// 数组操作
// 创建数组
let fruits = new Array()
fruits[0] = 'Apple'
let fruits2 = ['Apple', 'Banana']
let fruits3 = new Array('Apple', 'Banana')
//concat() 连接两个或多个数组,此方法不会更改原有数组,会返回一个连接后的新数组
//参数 数组或值
let fruit1 = ['Apple']
let fruit2 = ['orange']
let fruite3 = ['pear']
let fruites4 = fruit1.concat(fruit2,fruite3)
fruites4.concat(1,2,...[3,4,[5,6],[7]])
//["Apple", "orange", "pear",1,2,3,4,5,6,7]
//copyWithin() 方法将浅拷贝数组的一部分,到数组中另一个位置,并返回它,
//不会改变原数组的长度
//接收三个参数,第一个参数复制到什么位置(index下标),如果是负数将从尾部开始计算,
//如果大于array.length将不会发生拷贝
// 第二个参数为开始复制的位置不传从0开始计算,第三个参数为结束复制的位置不包含结束位置。
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) // 得到[4, 2, 3, 4, 5]
// entries()方法返回一个新的 '数组迭代对象' ,该对象包含数组中每个索引的键/键值
let fruites5 = ['Apple','orange','pear']
let fruites6 = []
let iter = fruites5.entries()
for (let i = 0; i<fruites5.length; i++) {
let item = iter.next()
if(item.done !== true){
fruites6[i] = item.value
}
}
// every() 方法检测一个数组内的所有的元素是否能通过某个指定函数的测试。
//循环遍历当前数组,判断每个成员。返回true或false
// 接收一个回调函数 ,回调函数接收三个参数第一个参数用于测试的当前值,
//第二个参数index当前值得索引(可不传),第三个参数array被测试的数组
let fruites7 = ['Apple','orange','pear']
fruites7.every((value)=> value !== null) // true
fruites7.every((value)=> value === null) // false
// fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。
//不包括结束的索引。
//接收三个参数,第一个参数用来填充的值,第二个参数开始填充的位置的索引默认为0,可不传,
//第三个参数结束填充的位置 默认末尾到数组最后,可不传
// 返回被修改后的数组,这个数组长度不会改变
let fruites8 = ['Apple','orange','pear']
fruites8.fill('mango',1,3) // 得到 ['Apple','orange','mango']
// filter() 检测数组中所有通过指定函数测试的所有元素,
//将返回一个新的数组,不会改变原数组的值,需要接收,
// 接收一个回调函数函数必须return,回调函数接收四个参数,
//第一个参数:数组中的元素,index:元素的索引,array当前数组本身,
//thisArg,执行回调函数时可以改变this的指向
let num = [1,3,14,5,20]
let result = num.filter((item)=> item>10 )
// 得到 result: [14,20]
// find()方法返回数组中满足测试函数条件的第一个元素的值,如果没有就返回undefined
// 接收一个回调函数,回调函数可以接收siege参数,
//1:当前遍历到元素,2,当前元素索引,array数组本身
// 接收一个回调函数 回调函数接收四个参数
//第一个参数:当前遍历到的元素(必须,其他的可选),
//元素的索引,array当前数组,thisArg执行回调时可以改变用作this的对象
let fruites9 = ['Apple','orange','pear']
fruites9.find((item)=> item==='pear' ) // pear
// findIndex() 方法返回满足条件的第一个元素的索引。若没有找到对应元素则返回-1
// 接收一个回调函数
// flat() 方法会按照一个可指定的深度递归遍历数组,
//并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
// 参数为指定提取嵌套数组的结构深度,默认值为 1,
//使用array.flat(Infinity),可展开任意深度的嵌套数组
let arr = [1,2,3,[4,5,[6]]]
arr.flat() //[1,2,3,4,5,[6]]
arr.flat(2) //[1,2,3,4,5,6]
arr.flat(Infinity) //[1,2,3,4,5,6]
// flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。
//它与 map 连着深度值为1的 flat 几乎相同,
//但 flatMap 通常在合并成一种方法的效率稍微高一些。
// 接收一个回调函数,回调函数可传入三个参数 1.当前正在处理的数组元素。
//2.元素的所有制,3,当前数组
let arr2 =[0,1,2,[3,4]]
arr2.flatMap((item) => item * 3) // 0,3,6,NaN ,flatMap只能遍历数组深度为1的数组,
//这种请求可以先使用array.flat(Infinity),展开数组,再进行遍历
// forEach()方法对数组的每一个个元素执行一次给定的函数。forEach() 会修改原数组,
//forEach是不会返回有意义的值的
// 接收一个回调函数,回调函数接收三个参数,1.当前正在处理的数组元素,
// 2.当前元素索引,3,当前数组
let arr3 =[1,2,3]
arr3.forEach((value, index) => {
arr3[index] = value * 2
})
//arr3 ==> 得到2,4,6
// array.map() 对数组中的每个元素执行一个指定函数,
// 方法返回一个新的数组,不会修改原数组
// 接收一个回调函数,回调函数接收三个参数1.当前正在处理的数组函数,
//2.当前数组的index,3.当前原数组
let arr4 = [2,3,4]
// 返回一个新的数组所以需要接收
let arr5 = arr4.map(item => item * 2)
//得到 arr5 => [4,6,8]
//Array.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例
// 参数;1.想要转换为数组的维数组或可迭代对象,2(可选).mapFn,
//如果指定了该函数新数组中的每个元素会执行该回调函数
// 想要将对象转换维数组,必须满足,
// 1.该对象必须有length属性,如果没有length会返回一个空数组
// 2.该对象的属性名必须为数值型或字符串型的数字
// 3.该类对象的属性名可加引号,也可不加引号
let arrayLike = {
'0': 'tom',
'1': '65',
'2': '男',
'3': ['jane','john','Mary'],
length: 4
}
let arr6 = Array.from(arrayLike) //得到["tom", "65", "男", Array(3)]
//Array.includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,
// 如果包含则返回 true,否则返回false。
let arr7 = [1,2,3,4,1,2,3,4]
arr7.includes(2) // true
//也可用于数组去重
let arr8 = []
arr7.map((item)=>{
if(!arr8.includes(item)){
arr8.push(item)
}
})
// arr8 [1,2,3,4]
// indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
// 参数:1.需要查找的参数,2.开始查找的位置(可选)
let arr9 = ['a','b','c']
arr9.indexOf('a') // true
arr9.indexOf('d') // -1
// lastIndexOf() 方法返回指定元素在数组中的最后一次出现的索引,如果不存在则返回 -1。
//从数组的后面向前查找
// Array.isArray() 用于确定传递的值是否是一个数组,返回true或false
Array.isArray({a:1}) // false
Array.isArray(arr9) // true
// join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。
//如果数组只有一个元素,那么将返回该项目而不使用分隔符。
let fruites10 = ['Apple','orange','pear']
fruites10.join('*') // 'Apple*orange*pear'
fruites10.join('') //'Appleorangepear' 数组转字符串
// keys() 方法返回一个包含数组中每个元素的索引Array Iterator的迭代对象
let fruites11 = ['Apple','orange','pear']
let keysIterator = fruites11.keys()
for(let key of keysIterator){
console.log(key) // 0,1,2
}
// Array.of() 取代了 Array() 成为数组的推荐函数形式构造器,
//因为 Array.of() 并没有这个特殊的单一数值型参数值的问题。
// Array构造函数 的怪异行为
// 只传一个值:如果给 Array构造函数 传入1个整型的值,且大于等于0,
// 那么数组的 length 属性会被设为该值。
// 只传一个值:如果传入一个非数值类型的值,那么这个值会成为目标数据的唯一项。
// 传入多个值:此时无论这些值是不是数值型,都会变成数组的元素。
// 只传一个值:不允许只传一个负数或者不能隐式转换成整型的浮点数(如:1.2)
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(3) // [3]
Array.of('1') // ['1']
// 如果有一个回调函数需要传入的参数封装为数组,
// 而且不能保证传入的值一定不是0或正整数,Array.of()可以完美解决这个问题。
function newArray(value) {
return Array.of(value)
}
// pop()方法从数组中删除最后一个元素,并返回删除元素的值。此方法更改数组的长度。
let fruites12 = ['Apple','orange','pear']
console.log(fruites12.pop()) // 'pear'
console.log(fruites12) ['Apple','orange']
// push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
let fruites13 = ['Apple','orange','pear']
console.log(fruites13.push('peach')) //4
console.log(fruites13) //['Apple','orange','pear','peach' ]
// reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),
// 将其结果汇总为单个返回值。
// reduce函数接受两个参数,第一个是我们的reducer回调函数,第二个是初始值。
// 然后reducer回调函数本身接受几个参数,第一个参数是accumulator
// 上一次调用回调返回的值,或者是提供的初始值(累加器),
// 第二个是数组中的item,第三个参数是该项的索引,最后一个参数是原始数组的引用。
var res = [
0, 1, 2, 3, 4
].reduce((
accumulator, currentValue, currentIndex, array
) => {
return accumulator + currentValue;
})
// res 10
const users = [
{
firstName: 'Bob',
lastName: 'Doe',
age: 37,
}, {
firstName: 'Rita',
lastName: 'Smith',
age: 21,
}, {
firstName: 'Rick',
lastName: 'Fish',
age: 28,
}, {
firstName: 'Betty',
lastName: 'Bird',
age: 44,
}, {
firstName: 'Joe',
lastName: 'Grover',
age: 22,
}, {
firstName: 'Jill',
lastName: 'Pill',
age: 19,
}, {
firstName: 'Sam',
lastName: 'Smith',
age: 22,
}
// 模拟一个简单的列表数据
]
const isInTwenties = user => user.age >= 20 && user.age < 30;
const makeFullName = user => `${user.firstName} ${user.lastName}`;
const isAtLeastTenChars = fullName => fullName.length >= 10;
const twentySomethingsLongFullNames = users.reduce(
// 第一个参数是我们的reducer函数
(accumulator, user) => {
const fullName = makeFullName(user);
if (isInTwenties(user) && isAtLeastTenChars(fullName)) {
accumulator.push(fullName);
}
//总是返回累加器(用于下一次迭代) 以减少迭代次数
return accumulator
},
// 第二个参数(可选)是初始值
[]
)
// reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,
// 数组的最后一个元素变成第一个。该方法会改变原数组。
let fruites13 = ['Apple','orange','pear']
fruites13.reverse() //fruites13 = ['pear','orange','Apple']
// shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
let fruites14 = ['Apple','orange','pear']
fruites14.shift() // fruites14 = ['orange','pear']
// slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝
//(包括 begin,不包括end)。原始数组不会被改变。
// 只传入begin 且大于等于0,会提取到数组末尾,如果该参数为负数,
// 则表示从原数组中的倒数第几个元素开始提取
let fruits15 = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
fruits.slice(1, 3) //[ 'Orange', 'Lemon']
// some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。
// 它返回的是一个Boolean类型的值。
function beyondTen(item, index, array) {
return item > 10;
}
[2, 5, 8].some(beyondTen); // false
[12, 5, 8].some(beyondTen); // true
// sort() 方法用原地算法对数组的元素进行排序,并返回数组。会改变原数组
// 参数firstEl第一个用于比较的元素。secondEl第二个用于比较的元素。
// 当没有参数传入的时候,其排序顺序默认为,将待排序数据转换为字符串,
// 并按照Unicode序列排序;
// 当然,比较函数可以自定义,自定义排序函数需要返回值,其返回值为-1,0,1,
// 分别表示a<b, a=b, a>b
['1','22','31',12,5,4,55].sort((a,b)=>{ return b-a}) // 降序
['1','22','31',12,5,4,55].sort((a,b)=>{ return a-b}) // 升序
// splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,
// 并以数组形式返回被修改的内容。此方法会改变原数组。
// 参数: start:第一个参数,指定开始修改的起始位置,如果是负数表示从倒数第几个开始修改
// 第二个参数:表示要移除数组的个数,不填将删除start后面的所有元素,
// 如果是0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。
// 第三个元素(可以指定多个):要添加进数组的元素,从start 位置开始。
// 如果不指定,则 splice() 将只删除数组元素。
// 返回值由被删除的元素组成的一个数组,如果没有删除元素,则返回空数组。
[1,2,3,4,5].splice(1) //[2,3,4,5]
[1,2,3,4,5].splice(1,3) //[2,3,4]
let arr = [1,2,3,4,5] //这里要修改原数组
arrS.splice(1,3,'2') //arrs = [1, "2", 4, 5]
// toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的
// toLocaleString 方法转成字符串,\
// 这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。
const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });
console.log(localeString); //"1,a,12/21/1997, 2:12:00 PM"
// toString() 返回一个字符串,表示指定的数组及其元素。
[1,2,3,4,5].toString().split(',').join('') //'12345'
// unshift() 方法将'一个或多个元素'添加到数组的开头(该方法修改原有数组),
// 并返回该数组的新长度。
[1,2,3,4,5].unshift(0) // 6
let arrUn = [1,2,3,4,5]
arrUn.unshift(0)
// arrUn = [0,1,2,3,4,5]
// values() 方法返回一个新的 Array Iterator 对象,该对象包含数组每个元素的值
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
console.log(value); // 输出a;b ;c
}
JavaScript数组方法整理
于 2021-08-31 16:23:50 首次发布