常见数组方法(js)

数组迭代方法

参考文档: MDN

01.map()

map方法作用： 根据某种规则映射数组，得到映射之后的新数组。
应用场景：

1. 数组中所有元素 * 10；
2. 将数组中的js对象 隐射成 html字符串。

语法特点：

1. 回调执行次数 = 数组长度
2. 回调函数内部return，如果没有return, 返回undefined
3. 方法自身的返回值是映射后的新数组

// 所有数乘以0.8
let arr = [80, 66, 20, 50, 100]
let res = arr.map(item => item * 0.8)
console.log(res) // [64, 52.8, 16, 40, 80]

02.filter()

filter方法作用: 根据条件,筛选数组。

应用场景：
1.筛选数组中的偶数
2.商品价格筛选

语法特点：
1.回调执行次数 = 数组长度
2.回调函数内部return，
return true : 满足筛选条件，放入新数组中；
return false : 不满足筛选条件，不放入新数组中
3.方法自身的返回值是筛选后的新数组

//筛选数组中的偶数
let arr = [20,55,60,75,80,33]
let res = arr.filter( item=>item % 2 == 0 )
console.log(res) // [20, 60, 80]

03.forEach()

forEach方法作用: 相当于 for循环另一种写法
应用场景 : 遍历数组

语法特点:
1.回调执行次数 = 数组长度
2.没有回调函数内部return
3.没有方法自身的返回值

//筛选数组中的偶数
let arr = [20,55,60,75,80,33]
arr.forEach( (item,index)=>{
	console.log(item,index) // 控制台打印每个元素和对应下标
} )

04.some()

some方法作用: 判断数组中是否有满足条件的元素 ( 有任意一个满足即可)
应用场景 :
1.判断数组中有没有奇数
2.非空判断 : 判断表单数组中，有没有元素value为空

语法特点:
1.回调执行次数 != 数组长度
2.回调函数内部return
return true: 循环结束。找到满足条件的元素, some自身返回true
return false: 循环继续。没有找到满足条件的，如果所有的元素都是返回false，最终some默认返回false
3.方法自身的返回值
true: 有满足条件的元素
false: 没有满足条件的元素

//判断数组中有没有奇数  
let arr = [10,21,30,40,50]
let res = arr.some( item=>item % 2 == 1 )
console.log( res ) // true

05.every()

every 方法作用: 判断数组中是否所有元素都满足条件
应用场景 :
1.判断数组中是否所有元素都是 偶数
2.开关思想 : 购物车是否全选
语法特点:
1.回调执行次数 != 数组长度
2.回调函数内部return
return true: 循环继续。满足条件,如果所有元素都满足,最终every默认返回值true
return false : 循环结束。不满足条件，此时every返回值false
3.方法自身的返回值
true: 所有满足都满足条件
false: 有元素不满足条件

//判断数组中是否所有元素都是 偶数 
let arr = [10,20,30,40,50]
let res = arr.every( item=>item % 2 == 0 )
console.log( res ) // true

findIndex()

findIndex方法作用: 找元素下标
应用场景 :
1.如果数组中是值类型，找元素下标： arr.indexOf( 元素 )
2.如果数组中是引用类型，找元素下标： arr.findIndex( )

语法特点:
1.回调执行次数 != 数组长度
2.回调函数内部return
return true: 循环结束。 找到元素，返回当前元素下标
return false : 循环继续。没找到。 如果全部都是false，最终返回固定值-1
3.方法自身的返回值
-1 : 没有
下标 : 有

//判断李四的下标
let arr = [ 
            { name:'张三',age:20}, 
            { name:'李四',age:30}, 
            { name:'王五',age:40}, 
        ]
let index = arr.findIndex( item=>item.name == '李四' )
console.log( index )   

07.reduce()

数组reduce方法 : 为每一个元素执行一次回调,返回最后一次回调的结果
应用场景: 求数组累加和。

let arr = [20,50,60,70]
/* 
第一个参数:回调函数   (sum,item,index)=>{}
sum : 上一次回调return 返回值
item: 当前元素
 index: 当前下标
第二个参数 : sum初始值。  一般给0, 如果不给,遇到空数组reduce就会报错
reduce自身返回值： 最后一次sum的结果 */
let res = arr.reduce( (sum,item,index)=>{
            console.log( sum,item,index)
            return sum + item
} , 0 )
console.log(res) // 200

数组其他方法

01.concat()

用于合并两个或多个数组，会返回一个新数组。

	const arr1 = [1, 2, 3]
    const arr2 = [4, 5, 6]
    const newArr = arr1.concat(arr2)
    console.log(newArr) // [1, 2 ,3, 4, 5, 6]

02.entry()

every() 方法检查数组中的所有元素是否都通过了测试，会返回布尔值。
语法特点:
1.如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
2. 如果所有元素都满足条件，则返回 true。

	  const arr = [5, 10, 15, 20, 25];
      const result = arr.every((ele) => ele > 10);
      console.log(result)// false

03.reverse()

数组reverse方法 : 倒序数组
语法特点:
1.返回值：倒序后的原数组
2.会改变原数组

let arr = [1,2,3,4,5];
let res = arr.reverse();
console.log(arr);  // [5, 4, 3, 2, 1]
console.log(res);  // [5, 4, 3, 2, 1]

04.indexOf()

数组indexOf方法: 查找指定元素的位置,查找数组中是值类型。
语法特点:
1.参数：array.indexOf(item,start) item:查找的元素 start:字符串中开始检索的位置
2.返回值：返回第一次查到的索引，未找到返回-1
3.不改变原数组

let arr = [1,2,3,4,5]
let res = arr.indexOf(3);
console.log(arr);  // [1,2,3,4,5]
console.log(res);  // 2
let arr1 = ['a','b','c','d','c'];
var res1 = arr1.indexOf('c',3);
console.log(res1) // 4

05.sort()

数组sort()方法: 对数组的元素进行排序
语法特点;
1.参数：可选(函数) 规定排序规则 默认排序顺序为按字母升序
2.返回值：排好序的原数组
3.会改变原数组

let arr = [1,3,2,8,7];
let res = arr.sort(function(a,b){
// a-b 从小到大
// b-a 从大到小
return a-b;
})
console.log(res);  // [1,2,3,7,8]

06.push()与unshift()

push()方法作用: 向数组的末尾添加一项或多项元素
unshift()方法作用: 向数组的开头添加一项或多项元素
语法特点:
1.返回值都是新数组的长度
2.都会改变原数组

let arr = ['a','b','c'];
let res = arr.push('d','e'); 
console.log(arr);  // ["a", "b", "c", "d", "e"]
console.log(res );  // ["a", "b", "c", "d", "e"]
let res1 = arr.unshift('z','x'); 
console.log(arr);  // ["z","x","a", "b", "c", "d", "e"]
console.log(res1 );  // ["z","x","a", "b", "c", "d", "e"]

07.pop()与shift()

pop()方法作用: 删除数组最后一项
shift()方法作用: 删除数组第一项
语法特点:
1.返回值都是被删除的项
2.都会改变原数组

let arr = ['1','2','3'];
let res = arr.pop();
console.log(arr);  // ['1','2']
console.log(res);  // 3
let res1 = arr.shift();
console.log(arr);  // ['2']
console.log(res);  // 1

08.splice()

splice()方法作用: 增删改
语法特点:
1.返回值都是被删除的项
2.都会改变原数组

/* 增
ary.splice(n,0,x，......,y);
从数组的索引n开始，删除0项,在索引n的前边增加新的项，第三个参数开始都是用来填补删除的项目位置的 */
let arr = [1,2,3,4,5];
let res = arr.splice(1,0);
console.log(arr);  // [1, 6, 7, 2, 3, 4, 5]
console.log(res);  // [] 返回一个空数组
/* 删
ary.splice(n,m);
从数组的索引n开始，删除m项 */
let arr = [1,2,3,4,5];
let res = arr.splice(1,2);
console.log(arr);  // [1，4，5]
console.log(res);  // [2，3] 
/* 改
ary.splice(n,0,x，......,y);
ary.splice(n,m,x);
从数组的索引n开始，删除m项，把x添加到索引n前面 */
let arr = [1,2,3,4,5];
let res = arr.splice(1,2,6,7);
console.log(arr);  // [1, 6, 7, 4, 5]
console.log(res);  // [2，3] 

09.slice()与join()

slice()方法作用: 截取数组 array.slice(start, end)
join()方法作用: 拼接数组
语法特点:
1.slice返回一个新数组
slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项
join返回拼接好的字符串
2.都不会改变原数组

let arr = [1,2,3,4,5];
let res = arr.slice(1,3);
console.log(arr);  // [1,2,3,4,5]
console.log(res);  // [2,3]
let arr1 = [1,2,3,4,5];
let res1 = arr.join('-');
console.log(arr1);  // [1, 2, 3, 4, 5]
console.log(res1);  // 1-2-3-4-5