常用的数组方法
一、不改变原来数组的方法
1. map：“map()不会改变原始数组”这句话并不严谨。而应该是“当数组中元素是基本数据类型时，map不会改变原数组；当是引用类型，则可以改变原数组的。
- 当数组中元素为引用类型时，我们使用map进行遍历，对数据进行操作处理后return返回，则会改变原来数组。
let person = [
{
name: '小钢炮',
age: '18',
lenght: 180,
},
{
name: '一棵树',
age: '19',
lenght: 170,
},
];
let person1 = person.map((item) => {
return item.lenght += 5;
});
console.log('person---', JSON.stringify(person));
console.log('person1---', JSON.stringify(person1));
- 当数组中元素为基本数据类型时，我们使用map进行遍历，对数据进行操作处理后return返回，则不会改变原来数组。
let person = [10, 20, 30];
let person1 = person.map((item) => {
return item += 5;
});
console.log('person---', JSON.stringify(person));
console.log('person1---', JSON.stringify(person1));
2. forEach：当数组中元素是基本数据类型时，forEach是不可以改变原数组；当是引用类型，则可以改变原数组的。
1.引用数据类型
let arr = [1, 3, { a: 1 }];
arr.forEach(item => {
if (typeof item === "object") {
item.a = 2;
}
});
console.log("arr:", arr);
// [1, "1", { a: 2 }]
//2.基本数据类型
let arr = [1, 2, 3];
arr.forEach(item => {
item += 2;
});
console.log("arr:", arr);
// [1, 2, 3]
3. find
作用：数组中，如果有满足条件的，则返回第一个满足条件的数据,否则返回undefined。
let student = [
{ nane: 'cowBoy', age: 34 },
{ nane: '一棵树', age: 36},
{ nane: 'XJ', age: 24},
];
// console.log('student----', student);
// find 方法 ： 返回第一个满足条件的数据 如果没有找到 则返回 undefined
let findData = student.find((item) => {
return item.age > 35 ;
})
console.log('findData----', findData); //findData---- { nane: '一棵树', age: 36}
4. findIndex
作用：数组中，如果有满足条件的，则返回第一个满足条件的数据索引位置,否则返回-1。
let student = [
{ nane: 'cowBoy', age: 34 },
{ nane: '一棵树', age: 36},
{ nane: 'XJ', age: 24},
];
let index = student.findIndex((item) => {
return item.age > 35 ;
})
console.log('index----', index); //findData---- 1
let indexaTwo = student.findIndex((item) => {
return item.age > 50 ;
})
console.log('indexaTwo----', indexaTwo); //indexaTwo---- -1
5. every
作用：数组中，每一条数据都符合条件 则返回true,否则返回false。
let student = [
{ nane: 'cowBoy', age: 34 },
{ nane: '一棵树', age: 36},
{ nane: 'XJ', age: 24},
];
let resOne = student.every((item) => {
return item.age > 35 ;
})
console.log('resOne----', resOne); //resOne---- false
let resTwo = student.every((item) => {
return item.age > 30 ;
})
console.log('resTwo----', resTwo); //resTwo---- true
6. some
作用：数组中，只要有一条数据都符合条件 则返回true,否则返回false。
let student = [
{ nane: 'cowBoy', age: 34 },
{ nane: '一棵树', age: 36},
{ nane: 'XJ', age: 24},
];
let resOne = student.some((item) => {
return item.age > 50 ;
})
console.log('resOne----', resOne); //resOne---- false
let resTwo = student.some((item) => {
return item.age > 30 ;
})
console.log('resTwo----', resTwo); //resTwo---- true
二、改变原来数组的方法
1. push()
作用：向数组中添加数据，添加成功后会返回数组的长度。
let arrName = ['cowBoy', 'XJ', 'YI.JL'];
let res = arrName.push('一棵树');
console.log('arrName----', arrName); // ['cowBoy', 'XJ', 'YI.JL', '一棵树']
console.log('res----', res); // 4
2. unshift()
作用：向数组前面插入一条或者多条数据，添加成功后会返回数组的长度。
let arrName = ['cowBoy', 'XJ', 'YI.JL'];
let res = arrName.unshift('一棵树', '崔永熙');
console.log('arrName----', arrName); // ['一棵树', '崔永熙','cowBoy', 'XJ', 'YI.JL']
console.log('res----', res); // 5
3. pop()
作用：删除数组中的数据，删除成功后会返回删除的数据(默认删除最后一条数据）。
let arrName = ['cowBoy', 'XJ', 'YI.JL'];
let res = arrName.pop();
console.log('arrName----', arrName); // ['cowBoy','XJ']
console.log('res----', res); // YI.JL
4. shift()
作用：删除数组中的数据，删除成功后会返回删除的数据(默认删除第一条数据）。
let arrName = ['cowBoy', 'XJ', 'YI.JL'];
let res = arrName.shift();
console.log('arrName----', arrName); // ['XJ', 'YI.JL']
console.log('res----', res); // cowBoy
5. reverse()
作用：将数组中元素的位置进行翻转，并返回数组。
let arrName = ['cowBoy', 'XJ', 'YI.JL'];
arrName.reverse();
console.log('arrName----', arrName); // ['YI.JL','XJ','cowBoy']
6. concat()
作用：将一个或者多个数组拼接到原始数组 array.concat(array1,array2,...) concat中可以放多个数组
// 1.两个数组的拼接
let arrOne = [1, 2, 3];
let arrTwo = [4, 5, 6];
let arrThree = [7, 8, 9];
let arrFour = [10, 11, 12];
let arrNumbers = arrOne.concat(arrTwo,arrThree);
console.log('arrNumbers---', arrNumbers);//arrNumbers--- [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
7. 使用扩展操作符对数组进行拼接
let arrOne = [1, 2, 3];
let arrTwo = [4, 5, 6];
let arrNumbers = [...arrOne,...arrTwo]
console.log('arrNumbers---', arrNumbers);//arrNumbers--- [ 1, 2, 3, 4, 5, 6 ]
