es5、es6数组方法indexOf():该方法从数组的开头开始向后查找,查到返回下标,查不到返回-1
indexOf(searchElement, fromIndex)
fromIndex 可选
开始查找的位置。
如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。
如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,
-2表示从倒数第二个元素开始查找 ,
以此类推。
注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。
如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.
如
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1
// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4
console.log(beasts.indexOf('giraffe'));
// expected output: -1
lastIndexOf(): 该方法从数组的末尾开始向前查找,查到返回下标,查不到返回-1
如indexof一样,有fromindex值,从此位置开始逆向查找。
默认为数组的长度减 1(arr.length - 1),即整个数组都被查找。
如果该值大于或等于数组的长度,则整个数组会被查找。
如果为负值,将其视为从数组末尾向前的偏移。
即使该值为负,数组仍然会被从后向前查找。
如果该值为负时,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。
forEach()方法不会返回执行结果,而是undefined。也就是说,forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。
1.forEach():对数组的每个元素执行一次给定的函数。不会改变原数组
第一个参数是一个函数,他接收三个参数,数组当前项的值、当前项在数组中的索引、数组对象本身。
第二个参数是执行第一个函数参数的作用域对象,也就是上面说的函数中this所指向的值,如果为空则指向window。
这几种方法都不会改变原数组。
forEach适合于你并不打算改变数据的时候,而只是想用数据做一些事情 – 比如存入数据库或则打印出来。
map()适用于你要改变数据值的时候。不仅仅在于它更快,而且返回一个新的数组。
这样的优点在于你可以使用filter(), reduce()等组合使用forEach方法可以写四个参数
arr.forEach(function(item,index,arr) {
console.log(item,index,arr,this)
},this.arr)
使用this.arr有三种情况
若是在vue中使用箭头函数的foreach则this指向vuecomponents
若使用箭头函数,foreach中的this则指向window
若使用函数则foreach中的this指向下方的this.arr
这四个值分别是数组当前项的值,数组当前项的索引,数组对象本身
forEach还有this.arr 可选,当执行回调函数 callback 时,用作 this 的值。
可以将for循环转换为forEach
const items = ['item1', 'item2', 'item3'];
const copy = [];
// before
for (let i=0; i<items.length; i++) {
copy.push(items[i]);
}
// after
items.forEach(function(item){
copy.push(item);
});
2.map():该方法对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
正常情况下,需要配合return,返回一个新数组,若是没有return相当于forEach
var obj = {
a:'qq'
}
var arr = [11,22,33,44,55]
var result = arr.map(function(item,index,arr){
console.log(item,index,arr,this)
return item+1
},obj)
console.log(result)
result为[12,23,34,45,56]
3.filter():该方法对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。
利用这个方法可对数组元素进行过滤筛选
var obj = {
a:'qq'
}
var arr = [11,22,33,44,55]
var result = arr.filter(function(item,index,arr){
console.log(item,index,arr,this)
if(item>22)
return true;
},obj)
console.log(result)
result为[33,44,55]
与上面一样this指向后面的obj
4.some(): 该方法对数组中的每一项运行给定函数,如果该函数对任何一项返回 true,则返回true,且终止循环.
some() 被调用时不会改变数组。
var obj = {
a:'qq'
}
var arr = [11,22,33,44,55]
var result = arr.some(function(item,index,arr){
console.log(item,index,arr,this)
return item>22
},obj)
console.log(result)
当item为33时返回true,循环终止,result为true
5.every():与some相反,该方法对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回true.
只要有一项返回false,则终止循环.
var obj = {
a:'qq'
}
var arr = [11,22,33,44,55]
var result = arr.every(function(item,index,arr){
console.log(item,index,arr,this)
return item>11
},obj)
console.log(result)
result为false
归并方法:这两个方法都会迭代数组中的所有项,然后生成一个最终返回值。
他们都接收两个参数,第一个参数是每一项调用的函数,函数接受是个参数分别是初始值,当前值,索引值,和当前数组,
函数需要返回一个值,这个值会在下一次迭代中作为初始值。
第二个参数是迭代初始值,参数可选,如果缺省,初始值为数组第一项,从数组第一个项开始叠加,缺省参数要比正常传值少一次运算
1.reduce():该方法从数组的第一项开始,逐个遍历到最后一项.
var arr = [11,22,33,44,55]
var result = arr.reduce(function(pre,cur,index,arr){
console.log(pre,cur,index,arr)
return pre+cur
})
console.log(result)
11 22 1 (5) [11, 22, 33, 44, 55]
33 33 2 (5) [11, 22, 33, 44, 55]
66 44 3 (5) [11, 22, 33, 44, 55]
110 55 4 (5) [11, 22, 33, 44, 55]
165
pre是上一次调用回调时返回的累计值,cur为数组中正在处理的元素
也就是从第一项11开始遍历arr数组11 + 22 + 33 + 44 + 55最后得出result为165
var arr = [11,22,33,44,55]
var result = arr.reduce(function(pre,cur,index,arr){
console.log(pre,cur,index,arr)
return pre+cur
},1)
console.log(result)
在末尾可选参数1,会使遍历结果+1
arr.reduce()拓展(高级用法)
(1)计算数组中每个元素出现的次数
let names = ['peter', 'tom', 'mary', 'bob', 'tom','peter'];
let nameNum = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(nameNum); //{ peter: 2, tom: 2, mary: 1, bob: 1 }
(2)数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
(3)将多维数组转化为一维
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
2.reduceRight():从右到左遍历,归并.
var arr = [11,22,33,44,55]
var result = arr.reduceRight(function(pre,cur,index,arr){
console.log(pre,cur,index,arr)
return pre+cur
})
console.log(result)
把累加顺序颠倒从最后一项开始加到第一项
concat()
concat() 方法用于连接两个或多个数组。
concat() 方法不会更改现有数组,而是返回一个新数组,其中包含已连接数组的值。
var sedan = ["S60", "S90"];
var SUV = ["XC40", "XC60", "XC90"];
var Volvo = sedan.concat(SUV);
Volvo = [S60,S90,XC40,XC60,XC90]
arr.push()
从数组尾部添加元素,返回值为添加完后的数组的长度
如果是使用同一个数组则需要清空后再往其中添加数据
arr.pop()
从数组尾部删除元素,只能是一个,返回值是删除的元素
arr.shift()
从数组头部删除元素,只能是一个,返回值是删除的元素
arr.splice(i,n)
删除从i(索引值)开始之后的那个元素。返回值是删除的元素
i
指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于array.length-n);如果负数的绝对值大于数组的长度,则表示开始位置为第0位。
n 可选
整数,表示要移除的数组元素的个数。
如果 n大于 i之后的元素的总数,则从 i后面的元素都将被删除(含第 i位)。
如果 n被省略了,或者它的值大于等于array.length - i(也就是说,如果它大于或者等于i之后的所有元素的数量),那么i之后数组的所有元素都会被删除。
如果 n是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。
item1, item2, ... 可选
要添加进数组的元素,从i位置开始。如果不指定,则 splice() 将只删除数组元素。
let arr = [1,2,3,4,5]
console.log(arr.splice(2,2)) //[3,4]
console.log(arr) // [1,2,5]
str.split()
将字符串转化为数组
let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]
arr.sort()
将数组进行排序,返回值是排好的数组,默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的
compareFunction 可选
用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
firstEl
第一个用于比较的元素。
secondEl
第二个用于比较的元素。
如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。
备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);
如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers);
numbers结果为[1, 2, 3, 4, 5]
arr.reverse()
将数组反转,返回值是反转后的数组
let arr = [1,2,3,4,5]
console.log(arr.reverse()) // [5,4,3,2,1]
console.log(arr) // [5,4,3,2,1]
arr.slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝,包括 begin,不包括end
原始数组不会被改变。
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);
// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']
Array.from()
将伪数组变成数组,就是只要有length的就可以转成数组。 ---es6
Array.from(arrayLike[, mapFn[, thisArg]])
arrayLike
想要转换成数组的伪数组对象或可迭代对象。
mapFn 可选
如果指定了该参数,新数组中的每个元素会执行该回调函数。
thisArg 可选
可选参数,执行回调函数 mapFn 时 this 对象。
Array.from() 方法有一个可选参数 mapFn,让你可以在最后生成的数组上再执行一次 map 方法后再返回。
也就是说 Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg), 除非创建的不是可用的中间数组。
这对一些数组的子类,如 typed arrays 来说很重要, 因为中间数组的值在调用 map() 时需要是适当的类型。
let str = '12345'
console.log(Array.from(str)) // ["1", "2", "3", "4", "5"]
let obj = {0:'a',1:'b',length:2}
console.log(Array.from(obj)) // ["a", "b"]
Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
Array.of() 和 Array 构造函数之间的区别在于处理整数参数:
Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)。
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
arr.copyWithin()
copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。
参数:
target --必选 索引从该位置开始替换数组项
start --可选 索引从该位置开始读取数组项,默认为0.如果为负值,则从右往左读。
end --可选 索引到该位置停止读取的数组项,默认是Array.length,如果是负值,表示倒数
var arr = [11, 22, 33, 44, 55];
console.log(arr.copyWithin(1,3))
结果为[11, 44, 55, 44, 55]
arr.find
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
var arr = [11, 22, 33, 44, 55, 45,46,47,48,49];
var find = arr.find((element,index) => element > 10 && index >3)
console.log(find)
结果为55
arr.findIndex(callback)
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
arr.fill(target, start, end)
使用给定的值,填充一个数组,ps:填充完后会改变原数组
参数:
target -- 待填充的元素
start -- 开始填充的位置-索引
end -- 终止填充的位置-索引 end值不应小于start
var arr = [11, 22, 33, 44, 55, 45,46,47,48,49];
let arr2 = arr.fill(5,2,4)
console.log(arr2)
结果为 [11, 22, 5, 5, 55, 45, 46, 47, 48, 49]
arr.includes()
includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。
与indexOf()的区别:
indexOf()返回的是数值,而includes()返回的是布尔值
indexOf() 不能判断NaN,返回为-1 ,includes()则可以判断
参数
valueToFind
需要查找的元素值。
Note: 使用 includes()比较字符串和字符时是区分大小写的。
fromIndex 可选
从fromIndex 索引处开始查找 valueToFind。
如果为负值,则按升序从 array.length + fromIndex 的索引开始搜 (即使从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)。默认为 0。
arr.keys()
keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。
let arr = [1,2,3,4]
let arr2 = arr.keys()
for (let key of arr2) {
console.log(key); // 0,1,2,3
}
arr.values()
values() 方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值
let arr = [1,2,3,4]
let arr1 = arr.values()
for (let val of arr1) {
console.log(val); // 1,2,3,4
}
arr.entries()
entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。
var arr1 = ["a", "b", "c"];
var iterator = arr1.entries();
console.log(iterator);
iterator结果为Array Iterator {}需要加上next()方法
console.log(iterator.next());
结果则为
{value: Array(2), done: false}
done: false
value: (2) [0, 'a']
[[Prototype]]: Object
// iterator.next()返回一个对象,对于有元素的数组,
// 是next{ value: Array(2), done: false };
// next.done 用于指示迭代器是否完成:在每次迭代时进行更新而且都是false,
// 直到迭代器结束done才是true。
// next.value是一个["key","value"]的数组,是返回的迭代器中的元素值。
var arr = ["a", "b", "c"];
var iter = arr.entries();
var a = [];
// for(var i=0; i< arr.length; i++){ // 实际使用的是这个
for(var i=0; i< arr.length+1; i++){ // 注意,是length+1,比数组的长度大
var tem = iter.next(); // 每次迭代时更新next
console.log(tem.done); // 这里可以看到更新后的done都是false
if(tem.done !== true){ // 遍历迭代器结束done才是true
console.log(tem.value);
a[i]=tem.value;
}
}
console.log(a); // 遍历完毕,输出next.value的数组