JS中数组的常用方法的总结

JS中数组常用方法总结

1、把数组转化为字符串

toString() 把数组一逗号分开，转为数组值的字符串
join() 将所有数组值合并生成一个字符串，也可以指定分隔符

2、push()和pop()

在末尾增加元素
push() 但是返回值是返回新的组成数组的长度

直接删除末尾的值
pop() 返回一个”最后的值“

push()和pop() 都是利用的栈的结构，后进先出，只是改变原来的数组

3、shift()和unshift()

shift() 删除首个数组值，返回第一个数组值, 序号依次向前移动一位
unshift() 在一个增加数组值，返回长度值, 序号依次向后移动

4、copyWithin()

语法： copyWithin(target，start， end)
target 必须，从该位置开始替换
start 可选，从位置开始读取数据，默认为0
end 可选，到该位置之前停止读取数据，默认是数组的长度

let arr = [1,2,3,4,5,6]
let a = arr.copyWithin(1,4)   //表示从第下标为1的位置开始替换，从下标为4的数组值开始替换,这里省略了第三个参数（默认就是数组末）
console.log(a)   //[1, 5, 6, 4, 5, 6]

5、delete()

let arr = [1,2,3]
delete(arr[0])   //这里删除第一个，但是位置还是保留着
console.log(arr[0])   //undefined

6、splice()

该方法向数组添加或者删除元素，返回被删除的项目，并同时改变原素组
splice(index,howmany,item1,...itemX)
index参数：必须，整数，规定添加或者删除的位置，使用负数，从数组尾部规定位置。
howmany参数：必须，要删除的数量，如果为0，则不删除项目。
tem1,...itemX参数：可选，向数组添加的新项目。

返回值：一个新的数组

//增加元素

let arr = ['a', 'b', 'c']
// 下标为1的位置开始替换，后面的一次向后移动
//第二个参数为0， 就不表示删除元素，只是添加元素
let a = arr.splice(1, 0, 'james')
console.log(arr)    //["a", "james", "b", "c"]
console.log(a)   // []

//增加元素和删除元素

let arr = ['a', 'b', 'c']
// 下标为1的位置开始替换，后面的一次向后移动
//第二个参数为0， 就不表示删除元素，只是添加元素
let a = arr.splice(1, 1, 'james')
console.log(arr)    //["a", "james", "c"]
console.log(a)   // ['b']

//独特的用法

let array = [1,2,3,4,5];
let array2 = array.splice(3);
// 从下标3的位置开始删除
// array [1,2,3]  
// array2  [4,5]

7、concat()

concat() 方法通过合并（连接）现有数组来创建一个新数组
方法不会更改现有数组。它总是返回一个新数组。
方法可以使用任意数量的数组参数

//传递一个参数
let a = [1,2,3]
let b = [4]
let c = a.concat(b)
console.log(c)  //[1,2,3,4]

//传递两个参数
let a = [1,2,3]
let d = [5]
let b = [4]
let c = a.concat(b, d)
console.log(c)  //[1, 2, 3, 4, 5]

8、slice()

slice() 方法用数组的某个片段切出新数组。
特点：返回一个新的数组，不会改变原来的数组
如果第二个参数为负数，那么是直接从数组的后面开始算（-1，表示最后一位元素，依次类推）

let a = [1,2,3]
let b = a.slice(2)
console.log(a)  // [1,2,3]  原来的数组
console.log(b)  //[3]   返回的新数组

let a = [1,2,3,4,5,5,6,7]
let b = a.slice(1,-1);   //从右向左
console.log(b); //[2,3,4,5,6]

9、sort()

sort()不传递参数时，会以默认方式进行排序，就是以字母顺序进行排序，准确的讲就是按照字符编码的顺序进行排序。
let a = [1000,3,76,12,79]
let b = a.sort()
console.log(b)  //[1000, 12, 3, 76, 79]
传递参数，使数组中按照顺序排列，就需要自己写一个函数了
let a = [1000,3,76,12,79]
let b = a.sort(function (a, b) {
    return b - a;
})
console.log(b)  //[3, 12, 76, 79, 1000]
数组乱序
a.sort(function(a,b){
	return Math.random() - 0.5;
}

10、reverse()

反转数组

11、Math.max()和Math.min()

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

//Math.max.apply([1,2,3]) 等价于 Math.max(1,2,3)

12 、map()

参数：项目值（item, 必须）、项目索引（index, 可选）、数组本身（arr, 可选）

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

let a = [1,2,3,4,5]
let b = a.map( x => x * 2)
console.log(a)   //[1, 2, 3, 4, 5]   原数组
console.log(b)   //[2, 4, 6, 8, 10]  新数组

13、forEach()

参数：项目值（item, 必须）、项目索引（index, 可选）、数组本身（arr, 可选）

forEach会遍历数组, 没有返回值, 不会改变原来数组的内容

forEach()也可以循环对象。

let a = [1,2,3,4,5]
a.forEach( x => console.log(x) )

14、filter()

filter 会过滤掉数组中不满足条件的元素, 把满足条件的元素放到一个新数组中, 不改变原数组

参数：项目值（item, 必须）、项目索引（index, 可选）、数组本身（arr, 可选）

结果：返回一个新的数组

let a = [1,2,3,4,5]
let b= a.filter(function (x) {
    return x > 3
})
console.log(b)  //[4,5]

15、reduce()

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduce() 方法在数组中从左到右工作。

reduce() 方法不会改变原始数组。

参数：总数（初始值/先前返回的值）、项目值（item, 必须）、项目索引（index, 可选）、数组本身（arr, 可选）

et array = [1, 2, 3, 4];
let temp = array.reduce((x, y) => {
	return x + y;
});
console.log(temp);　　// 10
console.log(array);　　// [1, 2, 3, 4]

//x 是上一次计算过的值, 第一次循环的时候是数组中的第1个元素
//y 是数组中的每个元素, 第一次循环的时候是数组的第2个元素

16、every()

参数：项目值（item, 必须）、项目索引（index, 可选）、数组本身（arr, 可选）

every遍历数组, 每一项都是true, 则返回true, 只要有一个是false, 就返回false

let array = [1, 2, 3, 4];
let res = array.every((item, index, array) => {
　　return item > 2;
});
console.log(res);   //false

17、some()

参数：项目值（item, 必须）、项目索引（index, 可选）、数组本身（arr, 可选）

some遍历数组, 只要有一个是true, 就返回true

let array = [1, 2, 3, 4];
let res = array.every((item, index, array) => {
　　return item > 2;
});
console.log(res);   //true

以上6种方法注意

以上均不改变原数组。
some、every返回true、false。
map、filter返回一个新数组。
reduce让数组的前后两项进行某种计算，返回最终操作的结果。
forEach 无返回值。

18、indexOf() 和 lastindexOf()

indexOf(n) 检查n第一次出现的下标位置

lastIndexOf(n) 检查最后一次出现的下标位置

 let a = [1,2,3,2,3]
 console.log(a.indexOf(1))   //0
console.log(a.lastIndexOf(3)) //2

19、includes()

用法：includes()方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。（ES6新增的）

20、find()

find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

参数：项目值（item, 必须）、项目索引（index, 可选）、数组本身（arr, 可选）

 let a = [1,2,3,4,5]
 let c = a.find(function (x) {
     return x > 2
 })
 console.log(c) //3

21、findIndex()

findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

let a = [1,2,3,4,5]
let c = a.findIndex(function (x) {
    return x > 6
})
console.log(c)

22、fill()

ES6为Array增加了fill()函数，使用制定的元素填充数组，其实就是用默认内容初始化数组。

参数：

arr.fill(value, start, end)

value：填充的值

start：开始的下标值

end：结束的下标值

//传递三个参数

let a = [1,2,3,4,5]
let b = a.fill(6,1,4)
console.log(b)   //[1, 6, 6, 6, 5]

//传递两个参数，那么最后一个值就是到数组的末尾

let a = [1,2,3,4,5]
let b = a.fill(6,1)
console.log(b)   //[1, 6, 6, 6, 6]

//传递一个参数

let a = [1,2,3,4,5]
let b = a.fill(6)
console.log(b)   //[6, 6, 6, 6, 6]

23、Array.of()和Array()的区别

Array() : 可以有没参数，表示创建一个数组

一个参数，设置数组的长度

多个参数，表示创建数组数组并且初始化

Array.of(): 总是返回参数值组成的数组
let a = Array.of(1,2,3)    
console.log(a)    //[1,2,3]

posted @ 2020-09-03 15:18 coder_xyf 阅读(369) 评论(1) 编辑收藏举报

刷新页面返回顶部

coder_xyf

JS中数组的常用方法的总结

JS中数组常用方法总结

1、把数组转化为字符串

2、push()和pop()

3、shift()和unshift()

4、copyWithin()

5、delete()

6、splice()

7、concat()

8、slice()

9、sort()

10、reverse()

11、Math.max()和Math.min()

12 、map()

13、forEach()

14、filter()

15、reduce()

16、every()

17、some()

以上6种方法注意

18、indexOf() 和 lastindexOf()

19、includes()

20、find()

21、findIndex()

22、fill()

23、Array.of()和Array()的区别

公告