js数组几种常见的操作方法攻略

基础篇

1.shift

// 删除原数组的第一项，并返回删除元素的值，如果数组为空则返回undefined

var a = [1, 2, 3, 4, 5]
var b = a.shift()// a:[2,3,4,5] b:1

2.unshift

// 将参数添加到原数组开头，并返回数组的长度

var a = [1, 2, 3, 4, 5]
var b = a.unshift(-2, -1)// a;[-2,-1,1,2,3,4,5] b:7
//注：此方法在ie6.0下
// 测试的返回值始终为undefined，在firefox下测试的返回值为7，所以此方法不可靠
// 一般需要用返回值时可用splice代替

3.pop

// 删除原数组的最后一项，并返回删除元素的值；如果数组为空则返回undefined

var a = [1, 2, 3, 4, 5]
var b = a.pop()// a:[1,2,3,4] b:5

4.push

// 将参数添加到原数组末尾，并返回数组的长度

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

5.concat

// 返回一个新数组，是将参数添加到原数组中构成的

var a = [1, 2, 3, 4, 5]
var b = a.concat(6, 7)// a:[1,2,3,4,5] b:[1,2,3,4,5,6,7]

6.splice

// splice(index,howmany, tem1,…itemX) // 从index开始删除howmany项 （该方法会改变原数组）
// 并从该位置起插入val1,val2,…
index参数：必须，整数，规定添加或者删除的位置，使用负数，从数组尾部规定位置。
howmany参数：必须，要删除的数量，如果为0，则不删除项目。
tem1,…itemX参数：可选，向数组添加的新项目。

var a = [1, 2, 3, 4, 5]
var b = a.splice(2, 2, 7, 8, 9) // a:[1,2,7,8,9,5]   b: [3,4]

7.reverse

// 将数组反序

var a = [1, 2, 3, 4, 5]
var b = a.reverse()// a:[5,4,3,2,1] b:[5,4,3,2,1]

8.sort(orderfunction)

// 按指定的参数对数组进行排序

var a = [1, 2, 3, 4, 5]
var b = a.sort()// a:[1,2,3,4,5] b:[1,2,3,4,5]

9.slice(start,end)

// 返回从原数组指定开始的下标到结束下标之间的项组成的新数组
// 不改变原数组

var a = [1, 2, 3, 4, 5]
var b = a.slice(2, 5) // a:[1,2,3,4,5]  b:[3,4,5]
var str = "hello xuxiubin"
var c = str.slice(6) // c = "xuxiubin"
var d = str.slice(-8) // d = 'xuxiubin'  // 从序列号为-8的位置到最后,就是倒着切割

10.join(separator)

// 将数组的元素组起一个字符串，以separator为分隔符，省略
// 的话则用默认的逗号为分隔符

var a = [1, 2, 3, 4, 5]
var b = a.join('|')// a:[1,2,3,4,5] b:"1|2|3|4|5"

11.indexOf

// 数组元素索引并返回元素索引，不存在返回-1,索引从0开始,是从前往后查找

var a = ['a', 'b', 'c', 'd', 'e']
a.indexOf('a')// 0
a.indexOf(a)// -1
a.indexOf('f')// -1
a.indexOf('e')// 4

12.lastIndexOf

// 接受两个参数：查找的值、查找起始位置
// 不存在，返回 -1 ；存在，返回位置。是从后往前查找

var a= [2, 5, 9, 2]
a.lastIndexOf(2) // 3
a.lastIndexOf(7) // -1
a.lastIndexOf(2, 3) // 3
a.lastIndexOf(2, 2) // 0
a.lastIndexOf(2, -2) // 0
a.lastIndexOf(2, -1) // 3

13. Array.isArray()

// 判断对象是否是数组，返回布尔值。不改变原数组。

var a = 1
var test = [1, 2, 3, 4]
console.log(Array.isArray(a)) // false
console.log(Array.isArray(test)) // true

14. Array.toString()

// 将数组转化为字符串，返回字符串，不改变原数组

var test = [1, 2, 3, 4]
test1 = test.toString()
console.log(test) // [1, 2, 3, 4]
console.log(test1) // 1,2,3,4

进阶篇

1.forEach

是最为常用的情景，它至于遍历，可以在获取当前数据项的前提下，对数据进行修改。它没有返回值。理解起来也是最容易的。

let xxb = ["北京", "南京", "广州", "重庆", "西安", "拉萨"];
xxb.forEach(item=> {
   console.log(item,'forEach');
})

2.map

map的本意就是映射，也就是将一个值从一种形式映射到另一种形式，比如将key映射到value。它的每一次遍历都会有一个返回值。这些返回值组合成最终的结果数组。事实就是如此

let xxb = ["北京", "南京", "广州", "重庆", "西安", "拉萨"];
let xxb_map = xxb.map((item,index,list)=> {
	console.log(item,'mapitem'); //
	console.log(index,'mapindex'); //
	console.log(list,'maplist'); //
	return item+'市'
})
console.log(xxb_map,"58")

forEach和map对比

相同点
1）都是循环遍历数组中的每一项；
2）forEach()和map()匿名函数的参数相同，参数分别是item（当前每一项）、index（索引值）、arr（原数组）；
3）this都是指向调用方法的数组；
4) 只能遍历数组；

不相同点
1）map()创建了新数组，不改变原数组；forEach()可以改变原数组。
2）遇到空缺的时候map()虽然会跳过，但保留空缺；forEach()遍历时跳过空缺，不保留空缺。
3）map()按照原始数组元素顺序依次处理元素；forEach()遍历数组的每个元素，将元素传给回调函数。

3.filter

它致力于从已有的数组中筛选出符合一定条件的数据项，最后的返回值是所有符合条件的数据项构成的数组。它不会修改原来的数组。记住，它的立足点就是筛选。也仅仅是筛选。还有一点需要注意：每一次遍历都会有一个返回值，它的类型是布尔类型。返回值只有是true，当前遍历项才会被筛选中。不要试图在filter中去修改原始数组。
理解: 就是在一堆数据里面去筛选你需要的数据 或者 剔除你不需要的数据

function City (province, school, level) {
	this.province = province;
	this.school = school;
	this.level = level;
}
let beijing = new City('北京都', ['北京大学', '清华大学'], 1);
let xian = new City('西安都', ['西安交通大学', '西北工业大学'], 2);
let hubei = new City('湖北省', ['武汉大学', '华中科技大学'], 2);
let hunan = new City('湖南省', ['湖南大学', '中南大学'], 3);
let sichuan = new City('四川省', ['四川大学', '电子科技大学'], 3);
let cities = [beijing, xian, hubei, hunan, sichuan];
let tops = cities.filter(function(item, index, list) {
	return item.level != 1; // 筛选出 level 不为 1 的数组
});
console.log(tops, '77');

4.find()

返回通过测试的数组的第一个元素的值,
理解:假如你去一个一群人的地方去找人 你说我找xxb 他要是在那里就找到 不在那里就是undefined

在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。

语法
array.find(function(value, index, arr),thisValue)
value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值
返回值：返回符合测试条件的第一个数组元素的值，如果没有符合条件的则返回undefined。

var arr = [1,2,3,4,5,6,7];
var ar = arr.find(function(elem){
	return elem>5;
});
console.log(ar);//6
console.log(arr);//[1,2,3,4,5,6,7]

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

5.every

它地用武之地在哪里呢？不期望它能对原始数组进行修改。它地定位是考察数组地整体特性。也就是考察数组中所有元素的共性。比如所有元素是否都是奇数，或者所有元素是否都是偶数。它关注的是数组整体元素的共性。只要有一个不满足，循环就会结束，接下来的数据就不会继续判断。
理解: 这个就像 上课了 老师说 昨天布置的作业 只要有一个人没有写完 今天就不讲课 然后挨个检查 当检查到有一个没有写完的时候 就不检查了 返回 不讲课了(false)

// var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var numbers = [2, 4,, 6, 8, 9,10];
let bool = numbers.every(function(item, index, list) {
	console.log(item,'90');
	return item % 2 == 0;
});
console.log(bool,'93');

6.some

它地用武之地在哪里呢？它的定位是考察数组的个性。比如考察数组中是否存在一个等于0的数。它关注的是数组的个性。只要有一个满足，循环就会结束，接下来的数据就不会继续判断。
理解: 相当于在一个数组里面找你想要的那个数 找到了 就返回true 找不到就返回false

var numbers = [2, 4, 6, 8, 9,10];
let bool = numbers.some(function(item, index, list) {
console.log(item,97);
	return item == 4;
});
console.log(bool,"100");

7.reduce

它这个方法是接收一个函数作为累加器,将数组中的值(从左向右)开始合并,最总为一个值 然后返回出来,callback
他可以传四个参数:
1,previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue)
2,currentValue:数组中当前被处理的元素
3,index:不啰嗦,自己顾名思义去吧
4,array:返回调用reduce的数组

// 获取购物车中商品列表的价格总和
let goodList = [{id: 1, price: 10, qty: 5}, {id: 2, price: 15, qty: 2}, {id: 3, price: 20, qty: 1}]
let totalPrice = goodList.reduce((prev, cur, index, arr) => {
    // prev就是每次合并返回的值 第一次返回时还没有做合并就是返回的默认值0
    // 下面分别是10*5=50; ---- 15*2=30+50=80;---- 20*1=20+80=100
    console.log(prev, '----', cur, '----', index, '----', arr)
    return prev + cur.price * cur.qty
// 这个0就是prev 的默认值
}, 0)
console.log(totalPrice, 'totalPrice')

var arrString = 'abcdaabc'
// 获取字符中中每个字母出现的次数
let count = arrString.split('').reduce(function(res, cur) {
    console.log(res, cur, 'res, cur')
    res[cur] ? res[cur]++ : res[cur] = 1
    return res
}, {})
console.log(count, 'count') // {a: 3, b: 2, c: 2, d: 1}

彩蛋: 这里附上前几天某某人比较喜欢的切割字符串的方法

substring() 和 substr()

相同点： 如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。

substr(startIndex)
substring(startIndex)
var str = '123456789'
console.log(str.substr(2)) // "3456789"
console.log(str.substring(2)) // "3456789"

不同点： 第二个参数

substr(startIndex, lenth) // 第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；
substring(startIndex, endIndex) // 第二个参数是截取字符串最终的下标 （截取2个位置之间的字符串,‘含头不含尾'）。
console.log('123456789'.substr(2, 5)) // "34567"
console.log('123456789'.substring(2, 5)) // "345"

以上只是小编在项目中遇到,还有一些是看到别人的用到的方法,也不是太全,有些地方可能不是太对,请指教,望谅解,es6里面还有多种操作数组的方法有待你们自己去发掘啊,虽然这些不是很全,但是这些如果全部掌握了,结合自己的理解,任意组合搭配,是可以解决项目中99%的问题的,祝你在前端的道路上越陷越深