个人笔记 js 数组方法

292 阅读5分钟

js数组方法可分为三类:修改、访问、迭代。 修改:改变原有数组 访问:不改变原有数组,从原有数组中获取数据 迭代:对数组的每一项进行处理,返回数据

修改

一、增加

1、push()

含义:在数组末尾添加元素

参数:待添加元素,数量不限

var a =[1,2,3,4,5,6]
a.push(7,8)
console.log(a); //[1,2,3,4,5,6,7,8]

2、unshift()

含义:在数组开头添加一个或多个元素

参数:待添加元素 ,数量不限

let a = [1,2,3,4,5,6]
a.unshift(7,8)
console.log(a) // [7,8,1,2,3,4,5,6]

二、删除

3、shift()

含义:删除数组第一个元素,并返回这个元素

var a =[1,2,3,4,5,6]
console.log(a,a.shift()); // [2,3,4,5,6],1

4、pop()

含义:删除数组最后一个元素,并返回这个元素

var a =[1,2,3,4,5,6]
console.log(a,a.pop()); // [1,2,3,4,5],6

三、排序

5、reverse()

含义:数组倒序重排

var a =[1,2,3,4,5,6]
console.log(areverse()); // [6,5,4,3,2,1]

6、sort()

含义:对原数组进行排序 默认是 UTF-16序列

参数:该参数为某种顺序进行排列的函数 下面例子是数组从小到大排列

let a = [5,2,4,1,6,3]
a.sort(function(a,b){
 	return a - b
})
console.log(a) // [1,2,3,4,5,6]

四、替换

7、splice()

含义:对任意位置任意数量元素进行替换

参数1: 指定开始位置

参数2:需替换的元素个数

参数3~参数n:用来替换的元素

let a = [1,2,3,4,5,6]
a.splice(2,2,7,8,9,10)
console.log(a) // [1, 2, 7, 8, 9, 10, 5, 6]

8、fill()

含义:使用某项值,替换数组选定序列中的值

参数1:需要替换的值

参数2:选定序列起始位置

参数3:选定序列结束位置

var a =[1,2,3,4,5,6]
a.fill(0,2,4); 
console.log(a); // [1,2,0,0,5,6]

9、copyWithin()

含义:在数组内部,将一段元素序列拷贝到另一段元素序列上,覆盖原有值,不改变原有长度

参数1:第一个代表标记位置,即复制序列的插入位置

参数2:复制起始位置

参数3:复制结束位置

var a =[1,2,3,4,5,6]
a.copyWithin(0,2,4); 
console.log(a); // [3,4,3,4,5,6]

访问

一、返回数组

1、concat()

含义:将多个数组进行拼接

参数:待连接数组,数量不限

var a =[1,2,3,4,5,6]
var b = [7,8]
var c = [9]
console.log(a.concat(b,c)); //[1,2,3,4,5,6,7,8,9]

2、slice()

含义:抽取当前数组中的一段元素组合成一个新数组

参数1:开始截取位置

参数2:结束截取位置

var a = [1,2,3,4,5,6]
console.log(a.slice(2,5)) // [3,4,5]

二、返回字符串

3、join()

含义:将数组中所有元素拼接成一个字符串

参数:连接符

var a = [1,2,3,4,5,6]
console.log(a.join('-')) // "1-2-3-4-5-6"

4、toString()

含义:将数组中所有元素按照toString()方法转化后连接成一个字符串,连接符为','

var a = [1,2,3,4,5,6]
console.log(a.tostring()) // "1,2,3,4,5,6"

5、toLocaleString()

含义:将数组中所有元素按照它本身的toLocaleString()方法转化后,连接成一个字符串,连接符为 ','

var a = [1,'string',null,undefined,new Date('2019-10-10 10:00:00')];
console.log(a.toLocaleString()); // "1,string,,,2019/10/10 上午10:00:00"

三、返回数字(索引)

6、indexOf()

含义:返回数组中的第一次出现某个值的位置

参数:需检索的某项值

var a = [1,2,2,3,4,2]
console.log(a.indexOf(2)); // 1

7、lastIndexOf()

含义:返回数组中的最后一次出现某个值的位置

参数:需检索的某项值

var a = [1,2,2,3,4,2]
console.log(a.lastIndexOf(2)); // 5

四、返回布尔值

8、includes()

var a = [1,2,2,3,4,2]
console.log(a.includes(2)); // true

迭代

大分类以回调函数功能划分

一、访问读取

1、forEach()

含义:为数组中每一项元素执行一次回调

参数1:回调函数

回调函数参数1:当前元素值
回调函数参数2:当前元素索引
回调函数参数3:当前数组

参数2:回调时用作this指向本身,使用箭头函数时可忽略

let a =  ['232','2323','45r','dd'];
 a.forEach((item,index,f)=>{console.log(item,index,f)})
 // 232,0,["232", "2323", "45r", "dd"]
 // 2323,1,["232", "2323", "45r", "dd"]
 // 45r,2,["232", "2323", "45r", "dd"]
 // dd,3,["232", "2323", "45r", "dd"]

二、规则匹配

2、every()

含义:对数组中每一项元素执行测试函数,如果均通过返回true,反正返回false

参数:测试函数

let a = [1,2,3,4,5]
const f = i => i < 6
console.log(a.every(f)) // true

3、some()

含义:对数组中每一项元素执行测试函数,如果有一个通过返回true,反正返回false

参数:测试函数

let a = [1,2,3,4,5,]
const f = i => i < 2
console.log(a.some(f)) // true

4、filter()

含义:对数组中每一项元素执行测试函数,如果该元素满足测试条件,则将该元素推入新数组,最后返回新数组

参数:测试函数

let a = [1,2,3,4,5,6]
const f = i => i < 4
console.log(a.filter(f)) // [1,2,3,4]

5、find()

含义:查找数组中第一个符合回调函数条件的元素并返回该元素,否则返回undefined

let a = [1,2,3,4,5,6]
const f = i=> i < 4
console.log(a.find(f)) // 1

6、findIndex()

含义:查找数组中第一个符合回调函数条件的元素并返回该元素索引值,否则返回 -1

let a = [1,2,3,4,5,6]
const f = i=> i < 4
console.log(a.findIndex(f)) // 0

三、执行计算

7、map()

含义:对数组中每一项元素执行回调函数,将回调返回值推入新数组,最后返回新数组

参数:回调函数

let a = [1,2,3,4,5,6]
const f = i => ++i
console.log(a.map(f)) // [2,3,4,5,6,7]

8、 reduce()

含义:对数组中每一个元素执行一次回调函数,并将回调函数的返回值作为参数继续执行,最终返回一个值 参数1:回调函数

回调函数参数1:累加器
回调函数参数2:当前元素值
回调函数参数3:当前索引
回调函数参数4:当前数组

参数2:为回调函数提供初始值,若未提供则默认数组第一个元素

let a = [1,2,3,4,5,6]
const f = (i,j,k,l) => {
    return k%2===0? i+j:i*j
}
console.log(a.reduce(f,10)) // 630( (((10 +1) *2 + 3) * 4 + 5)*6)

9、reduceRight()

含义:从左到右对数组中每一个元素执行一次回调函数,并将回调函数的返回值作为参数继续执行,最终返回一个值 参数1:回调函数

回调函数参数1:累加器
回调函数参数2:当前元素值
回调函数参数3:当前索引
回调函数参数4:当前数组

参数2:为回调函数提供初始值,若未提供则默认数组第一个元素

let a = [1,2,3,4,5,6]
const f = (i,j,k,l) => {
    return k%2 === 0 ? i+j:i*j
}
console.log(a.reduce(f,10)) //  527 ( ((10 * 6 +5) * 4 + 3) * 2 + 1 )