数组方法使用

JavaScript 和 HTML DOM 参考手册

JavaScript 和 HTML DOM 参考手册 | 菜鸟教程 (runoob.com)

1.isArray()判断对象是否为数组

Array.isArray(obj)

2.map().通过指定函数处理数组的每个元素，并返回处理后的数组。

array.map(function(currentValue,index,arr), thisValue)

for (let item of arrys) {
this.DocNoList.push({ value: item })
}
let arr=arrys.map((item)=>{
return { value: item }
}[])

3. reduce() 方法

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

用法

var numbers = [15.5, 2.3, 1.1, 4.7];
 
function getSum(total, num) {
    return total + Math.round(num);
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}

去重

var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

4.Firter筛选

语法

array.filter(function(currentValue,index,arr), thisValue)

用法

data() {
    return { 
   	 	arry:[1,2,4,5,6]
    }
},
methods: { 
    Fiter (){
        let res= this.arry.filter((currentValue,index,arr)=>{
            console.log(currentValue+'  ',index+'  ',arr); 
            return  currentValue==2
        })
        console.log('resurt:',res[0]);
    },  
}, 


------------------------
输出结果
1   0   (5) [1, 2, 4, 5, 6, __ob__: Observer]
2   1   (5) [1, 2, 4, 5, 6, __ob__: Observer]
4   2   (5) [1, 2, 4, 5, 6, __ob__: Observer]
5   3   (5) [1, 2, 4, 5, 6, __ob__: Observer]
6   4   (5) [1, 2, 4, 5, 6, __ob__: Observer]
resurt: 2

高阶用法:

• 1.数组去重

arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];

let r = arr.filter(function (element, index, self) {
	return self.indexOf(element) === index;
});
	
console.log(r.toString());


--------------
输出结果
apple,strawberry,banana,pear,orange

2.indexOf() 检索的字符串

语法

stringObject.indexOf(searchvalue,fromindex)
searchvalue--规定需检索的字符串值。
fromindex--规定在字符串中开始检索的位置

用法

var str="121Hello"
document.write(str.indexOf("1") + "<br />")
document.write(str.indexOf("1",0) + "<br />")
document.write(str.indexOf("1",1) + "<br />")
document.write(str.indexOf("3"))


--------------------------
输出结果
0
0
2
-1

3.find() 和findIndex() 返回数组中第一个通过测试的元素

find–返回元素的值

findIndex返回元素的索引

用法

array.find(function(currentValue, index, arr), thisValue)
array.findIndex(function(currentValue, index, arr), thisValue)

用法

var ages =[3, 10, 18, 20];
let res=ages.find((age,index,arr)=>{
console.log(age,index,arr);
return age>=18
})
console.log(res)


----------------
输出结果
3 0 (4) [3, 10, 18, 20]
10 1 (4) [3, 10, 18, 20]
18 2 (4) [3, 10, 18, 20]
18

-------------------------
扩展:方法返回数组中通过测试的第一个元素的索引

var ages =[3, 10, 18, 20];
let res=ages.findIndex((age,index,arr)=>{
console.log(age,index,arr);
return age>=18
})
console.log(res)

----------------
输出结果
3 0 (4) [3, 10, 18, 20]
10 1 (4) [3, 10, 18, 20]
18 2 (4) [3, 10, 18, 20]
2

4.forEach() 数组循环遍历

语法

array.forEach(function(currentValue, index, arr), thisValue)

用法

var ages =[3, 10, 18, 20];
 ages.forEach(function(age,index,arr){
  console.log(age,index,arr);  
  index==0?console.log(this):false
} ,ages) 


-------------
输出结果
3 0 (4) [3, 10, 18, 20]-- console.log(age,index,arr);
(4) [3, 10, 18, 20]---console.log(this)
10 1 (4) [3, 10, 18, 20]--console.log(age,index,arr);
18 2 (4) [3, 10, 18, 20]--console.log(age,index,arr);
20 3 (4) [3, 10, 18, 20]--console.log(age,index,arr);

5.includes() 数组是否包含给定的值，返回布尔值。

小结

find()、findindex()、indexOf()、includes()以及some区别和适用场景

• 差别容易混淆的两个方法findindex()、indexOf()

findindex() 多用于非基本类型(例如对象)的数组索引查找，或查找条件很复杂 返回找到的第一个元素索引

indexOf() 多用于查找基本类型 返回找到的第一个元素索引

includes() 确定数组是否包含指定的元素。

• 用法

find()
array.find(function(currentValue, index, arr), thisValue)
currentValue--当前元素
index		--索引
arr			--数组对象
返回 元素

findindex()
array.findIndex(function(currentValue, index, arr), thisValue)
currentValue--当前元素
index		--索引
arr			--数组对象
返回索引

indexOf()
string.indexOf(searchvalue,fromindex)
searchvalue	--规定需检索的字符串值。
fromindex	--规定在字符串中开始检索的位置
返回索引

includes()	
array.includes(element, start)
element	--要搜索的元素
start	--哪个位置开始搜索。
返回 true false

共同点：都是用来查找回调函数。

不同点：indexOf主要用于查找基本数据类型 ，findIndex()可以用于查找复杂数据类型

去重方法

reduce去重

var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

firter去重

var newArr = arr.firter((element,index,self)=>self.indexOf(element) === index;)