arr.push()方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度
// 数组名.push() 从末尾添加
const arr = ['刘备', '关羽', '张飞']
arr.push('孙尚香')
console.log(arr) // ['刘备', '关羽', '张飞', '孙尚香']
2. arr.unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度
const arr = ['刘备', '关羽', '张飞']
arr.unshift('曹操')
console.log(arr) // ['曹操', '刘备', '关羽', '张飞']
arr.pop()方法从数组中删除最后一个元素,并返回该元素的值
const arr = ['刘备', '关羽', '张飞']
arr.pop()
console.log(arr) // ['刘备', '关羽']
arr.shift()方法从数组中删除第一个元素,并返回该元素的值
const arr = ['刘备', '关羽', '张飞']
arr.shift()
console.log(arr) // ['关羽', '张飞']
arr.splice(起始位置, 删除几个元素)方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
const arr = ['刘备', '关羽', '张飞']
arr.shift(0, 1) // 0下标的元素,只删除一个
console.log(arr) // ['关羽', '张飞']
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]
arr.concat( 数组 ): 连接数组 应用场景: 下拉加载下一页数据 (需要连接数组)
let arr = [10, 20, 30]
arr = arr.concat([40, 50, 60])
console.log(arr) // [10, 20, 30, 40, 50, 60]
arr.join('分隔符'): 把数组每一个元素拼接成字符串
let arr = [10, 20, 30]
arr = arr.concat([40, 50, 60])
console.log(arr) // [10, 20, 30, 40, 50, 60]
let str = arr.join('')
console.log( str ) // 102030405060
arr.reverse(): 翻转数组
let arr = [10, 20, 30]
arr.reverse()
console.log(arr) // [30, 20, 10]
arr.sort( function (a,b) {} ): 数组排序
let arr1 = [20,5,66,88,19,35]
arr1.sort( function(a,b){
// return a-b//从小到大
return b-a//从大到小
} )
console.log(arr1) // [88, 66, 35, 20, 19, 5]
arr.map()按照某种规则映射数组,得到映射之后的新数组,就是对数组每一个元素进行处理,得到一个新数组 应用场景: (1)如:数组中所有的元素 * 0.8 (2)将数组中的js对象 映射成 html字符串
let arr = [80, 66, 20, 50, 100]
//完整语法
// let res = arr.map( (item,index)=>{
// console.log(item,index)
// return item*0.8
// } )
//熟练写法
let res = arr.map(item => item * 0.8)
console.log(res) // [64, 52.800000000000004, 16, 40, 80] 小数点不用管
arr.filter()方法作用: 根据条件,筛选数组,把满足条件的元素筛选进新数组 应用场景 : (1)筛选数组中的偶数 (2)商品价格筛选
//需求:筛选数组中的偶数
let arr = [20,55,60,75,80,33]
//标准写法
// let res = arr.filter( (item,index)=>{
// if( item % 2 == 0){
// return true
// }else{
// return false
// }
// })
// console.log(res)
//简洁写法
let res = arr.filter( item=>item % 2 == 0 )
console.log(res)
arr.forEach()方法作用: 相当于 for循环另一种写法 应用场景 : 遍历数组 方法自身的没有返回值
//需求:筛选数组中的偶数
let arr = [20,55,60,75,80,33]
arr.forEach( (item,index)=>{
console.log(item,index)
} )
arr.some()方法作用: 判断 数组中是否有满足条件的元素 (逻辑或 ||, 有任意一个满足即可) 应用场景 : (1)判断数组中有没有奇数
(2)非空判断 : 判断表单数组中,有没有元素value为空
//判断数组中有没有奇数
let arr = [10,21,30,40,50]
//标准写法
// let res = arr.some( (item,index)=>{
// if( item % 2 == 1 ){
// return true
// }else{
// return false
// }
// } )
//简写语法
let res = arr.some( item=>item % 2 == 1 )
console.log( res )
arr.every()方法作用: 判断 数组中是否 所有元素 都满足条件 (逻辑&&, 全部满足) 应用场景 : (1)判断数组中是否所有元素都是 偶数 (2)开关思想 : 购物车是否全选
//判断数组中是否所有元素都是 偶数
let arr = [10,20,30,40,50]
//标准写法
// let res = arr.every( (item,index)=>{
// if( item % 2 == 0 ){
// return true
// }else{
// return false
// }
// } )
//简写语法
let res = arr.every( item=>item % 2 == 0 )
console.log( res )
arr.findIndex()方法作用: 找元素下标,方法自身的返回值,如果找到了该元素,就是该元素的下标,如果没有找到,返回值为 -1 应用场景 :(1)如果数组中是值类型,找元素下标用:arr.indexOf( 元素 )(2)如果数组中是引用类型,找元素下标:arr.findIndex( )
let arr = [
{ name:'张三',age:20},
{ name:'李四',age:30},
{ name:'王五',age:40},
]
let index = arr.findIndex( item=>item.name == '李四' )
console.log( index )
arr.reduce()遍历 : 为每一个元素执行一次回调,返回最后一次回调的结果 reduce场景 : 求数组累加和
let arr = [20,50,60,70]
//以前:累加和思想
let sum = 0
for(let i = 0;i<arr.length;i++){
sum = sum + arr[i]
}
console.log( sum )
/*
第一个参数:回调函数 (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)
let res1 = function fn() {
return arr.reduce( (sum,item,index)=>{
console.log( sum,item,index)
return sum + item
} , 0 )
}
console.log(res1)
slice()方法返回一个新的数组对象,这一对象是一个由begin和end决定的原数组的浅拷贝(包括begin,不包括end)。原始数组不会被改变。 引用自MDN
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2)); // 从倒数第二个开始
// expected output: Array ["duck", "elephant"]
console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]
console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]
arr.includes()方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false。 引用自MDN
const array1 = [1, 2, 3];
console.log(array1.includes(2));
// expected output: true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// expected output: true
console.log(pets.includes('at'));
// expected output: false
find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 [undefined]。引用自MDN
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12