js数组操作

一. 操作

1.增

改变原数组：push() 、unshift()、splice()

不改变原数组：concat() 

- push()       

接收任意数量参数添加到数组末尾，

返回数组的最新长度

let fruits = ["apple", "banana"];
let newLength = fruits.push("orange");

console.log(fruits);  // 输出：["apple", "banana", "orange"]
console.log(newLength);  // 输出：3

- unshift()       

 在数组开头添加任意多个值返回新的数组长度

let fruits = ["apple", "banana"];
let newLength = fruits.unshift("orange");

console.log(fruits);  // 输出：["orange", "apple", "banana"]
console.log(newLength);  // 输出：3

- splice（）       

修改、插入、替换数组元素   

 返回删除的元素数组

三个参数        开始位置 、要删除的元素数量（0）、插入的元素    如果没有指定删除数量会删除开始索引后所有数组元素

let fruits = ["apple", "banana", "cherry", "date"];
let newFruits = fruits.splice(2, 1, "orange", "lemon");

console.log(fruits);  // 输出：["apple", "banana", "orange", "lemon", "date"]
console.log(newFruits);//输出：["cherry"]

- concat() 

用于合并两个或多个数组，返回新数组，不会影响原来的数组

返回新数组

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let newArray = array1.concat(array2);

console.log(newArray); // 输出为 [1, 2, 3, 4, 5, 6]

let array1 = [1, 2];
let array2 = [3, 4];
let array3 = [5, 6];
let newArray = array1.concat(array2, array3);

console.log(newArray); // 输出为 [1, 2, 3, 4, 5, 6]

2.删：

改变原数组：pop（）、shift()、splice()

不改变：slice()

- pop()

删除数组最后一项，

返回删除的元素

let colors = ['red', 'green', 'blue'];
let lastColor = colors.pop();

console.log(lastColor); // 输出为 'blue'
console.log(colors); // 输出为 ['red', 'green']

- shift（）

数组中删除并返回第一个元素，然后将数组中的所有其他元素向前移动一个位置

返回删除元素

let colors = ['red', 'green', 'blue'];
let firstColor = colors.shift();

console.log(firstColor); // 输出为 'red'
console.log(colors); // 输出为 ['green', 'blue']

- splice()

传入起始索引值 、删除数量

返回删除元素数组

let colors = ["red", "green", "blue"];
let removed = colors.splice(0,1); // 删除第一项
console.log(colors); // green,blue
console.log(removed); // red，只有一个元素的数组

- slice（）

提取数组中一部分元素组成新数组 

传入  起始索引 start  、结束索引 end（不包含end） 如果不指定 end 提取到数组末尾

返回一个新数组 从 start 到 end     

3.改

常用 splice() 

传参：开始位置、删除元素数量、要插入元素

返回：删除元素数组 改变原数组

let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 1, "red", "purple"); // 插入两个值，删除一个元素
console.log(colors); // red,red,purple,blue
console.log(removed); // green，只有一个元素的数组

4.查

- indexOf（）

查找元素在数组中的位置 如果没有返回 -1

参数：要搜索的元素（element）、开始搜索的索引位置（默认为0）

const fruits = ['apple', 'banana', 'orange', 'pear'];

console.log(fruits.indexOf('banana')); // 输出: 1
console.log(fruits.indexOf('grape')); // 输出: -1
console.log(fruits.indexOf('orange', 2)); // 输出: -1，从索引 2 开始搜索，未找到

// 通过判断返回值是否为 -1 来判断元素是否存在于数组中
if (fruits.indexOf('apple') !== -1) {
  console.log('苹果存在于数组中');
} else {
  console.log('苹果不存在于数组中');
}

- includes() 

返回要查找元素在数组中的位置，找到返回true 否则返回false

参数：要搜素的元素（element）、开始搜索的索引位（默认为0）

const fruits = ['apple', 'banana', 'orange', 'pear'];

console.log(fruits.includes('banana')); // 输出: true
console.log(fruits.includes('grape')); // 输出: false
console.log(fruits.includes('orange', 2)); // 输出: false，从索引 2 开始搜索，未找到

// 使用 includes() 来判断元素是否存在于数组中
if (fruits.includes('apple')) {
  console.log('苹果存在于数组中');
} else {
  console.log('苹果不存在于数组中');
}

- find（）

查找数组中满足条件的第一个元素，如果找到返回该元素的值，如果没有找到，返回undefined

参数：放入 回调函数（callback）作为选择条件 返回满足为true的值 

callback（）接受三个参数 （element 当前元素的值 index 当前元素索引[可选] array调用find方法的数组）

const numbers = [10, 20, 30, 40, 50];

// 寻找大于 25 的第一个元素
const result = numbers.find((element) => element > 25);

console.log(result); // 输出: 30

// 使用箭头函数和索引查找奇数位置的元素
const oddIndexElement = numbers.find((element, index) => index % 2 !== 0);

console.log(oddIndexElement); // 输出: 20，第一个奇数位置的元素

// 在对象数组中查找符合条件的对象
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const user = users.find((user) => user.id === 2);

console.log(user); // 输出: { id: 2, name: 'Bob' }

二.排序方法

- reverse()

逆序操作

my_list = [1, 2, 3, 4, 5]
my_list.reverse()
print(my_list)  # 输出: [5, 4, 3, 2, 1]

- sort()

排序 默认降序（对数字来说）按Unicode 编码升序 

参数：传入 比较函数进行升降序判断  

let arr = ["33", "44", "2", "12", "100"];

let arr2 = arr.sort();
console.log(arr); // 输出: ["100", "12", "2", "33", "44"]
console.log(arr2); // 输出: ["100", "12", "2", "33", "44"]

let arr = ["33", "44", "2", "12", "100"];

let arr2 = arr.sort((a, b) => Number(a) - Number(b));
console.log(arr); // 输出: ["2", "12", "33", "44", "100"]
console.log(arr2); // 输出: ["2", "12", "33", "44", "100"]

三、转换方法

- join()
将数组的元素拼接为字符串 

参数：连接符

const arr = ['apple', 'banana', 'orange'];
const result = arr.join(); // 使用默认分隔符逗号
console.log(result); // 输出: "apple,banana,orange"

const customResult = arr.join(' - '); // 使用自定义分隔符
console.log(customResult); // 输出: "apple - banana - orange"

四、遍历 -- 不改变原数组

- some()

遍历所有元素 直到找到一个使指定函数返回为 true的元素，此时some（）立即返回true 否则返回

false

参数：element （遍历元素）、index（当前索引），arry(可选，调用some（）方法的数组）

const numbers = [1, 2, 3, 4, 5];

// 检查数组中是否存在偶数
const hasEvenNumber = numbers.some(function(element) {
  return element % 2 === 0;
});

console.log(hasEvenNumber); // 如果数组中存在偶数，输出: true；否则输出: false

- every()

遍历所有元素 都满足条件才返回true

const numbers = [2, 4, 6, 8, 10];

// 检查数组中是否所有元素都为偶数
const allEvenNumbers = numbers.every(function(element) {
  return element % 2 === 0;
});

console.log(allEvenNumbers); // 如果数组中所有元素都为偶数，输出: true；否则输出: false

- forWEach()

操作数组中的每一个元素 没有返回值 

参数：element、index、arr

const numbers = [1, 2, 3, 4, 5];

// 打印数组中的每个元素
numbers.forEach(function(element) {
  console.log(element);
});

- filter（）

过滤出所有符合条件的值，组成数组

参数：callback(element,index,arr)

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // 输出: [2, 4, 6, 8, 10]

- map()

对元素提供一个调用的处理函数，对每一个元素进行处理，将处理结果组合成一个新数组进行输出

参数：callback(element,index,arr){}

let numbers = [1, 2, 3, 4, 5];

let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]