js 数组的基础方法

//数组方法 修改原数组的

//1、pop() 无参数。删除数组末尾元素，返回值是删除元素

var arr = [1, 2, 3];

arr.pop();

console.log(arr); //[1,2]

console.log(arr.pop()); //2

//2、push() 在数组末尾添加元素，返回值是新数组长度

var arr = [1, 2, 3];

arr.push(4, 5, 6);

console.log(arr); //[1,2,3,4,5,6]

console.log(arr.push(4, 5, 6)); //9

//3、shift() 无参数。在删除数组开头元素，返回值是删除元素

var arr = [1, 2, 3];

arr.shift();

console.log(arr); //[2,3]

console.log(arr.shift()); //2

// 4、unShift() 在数组首部添加元素，返回值是新数组长度

var arr = [1, 2, 3];

arr.unshift(4, 5, 6);

console.log(arr); //[ 4, 5, 6, 1, 2, 3 ]

console.log(arr.unshift(6, 6, 6)); //9

//5、splice(start,deleteCount,item1,item2,...,itemN)  删除、添加、替换、插入数组元素。

//start :指定索引开始位置(包含当前索引)。deleteCount(可选)：删除元素个数。 item1, item2, ..., itemN（可选）：要添加到数组中的新元素。从 start 位置开始插入这些元素。

//如果只给了第一个参数未指定其他参数，则数组从start位置之后的部分都将被删除。splice(start)等同于splice(start, array.length - start)。

var arr = [1, 2, 3, 4, 5];

// arr.splice(1,2,'x','y');

console.log(arr.splice(1, 2, "x", "y")); //[2,3]

console.log(arr); //[ 1, 'x', 'y', 4, 5 ]

//6、reverse() 反转数组，返回值是反转顺序后的数组，改变原数组

var arr = [1, 2, 3, 4, 5];

var newArr = arr.reverse();

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

console.log(newArr); //[ 5, 4, 3, 2, 1 ]

//7、sort([compareFunction])// 对数组的元素进行排序(默认情况下按字符编码的顺序进行排序)，返回值是排序后的数组。

//compareFunction（可选）：一个用来指定排序顺序的函数。如果不提供 compareFunction，元素会被转换为字符串，然后按字典顺序（字符编码）进行排序。字符串是可以的，但是对于数值变成了字符编码比较是不正确的。

var arr = [2, 3, 5, 1, 4];

console.log(arr.sort((a, b) => a - b)); //按从小到大的顺序 [ 1, 2, 3, 4, 5 ]

console.log(arr.sort((a, b) => b - a)); // 按从大到小的顺序排序 [ 5, 4, 3, 2, 1 ]

//可以根据对象的属性排序

var people = [

  { name: "张三", age: 18 },

  { name: "李四", age: 25 },

  { name: "王五", age: 20 },

];

console.log(people.sort((a, b) => a.age - b.age)); //年龄从小到大排列

//不会修改原数组的方法

//1、slice(start,end) 参数是左闭右开的。截取数组的一部分元素(是浅拷贝)，返回值是截取元素组成的数组。

//start(可选):定义了开始截取的位置。如果省略此参数，则从数组的开头开始截取。如果该值为负数，则从数组的末尾开始计数。

//end(可选):定义了结束截取的位置（但不包括这个位置的元素）。如果省略此参数，则一直截取到数组的末尾。如果该值为负数，则从数组的末尾开始计数。

var arr = [1, 2, 3, 4, 5, 6];

var newArr = arr.slice(2, 4);

console.log(arr); //[ 1, 2, 3, 4, 5, 6 ]

console.log(newArr); //[ 3, 4 ]

//2、concat(arr1,arr2,arr3,arrN) 用于将一个或多个数组合并成一个新数组。

//可以接收任意量的参数：这些参数可以是数组或其他值。如果是数组，concat() 会将这些数组中的元素添加到新数组中；如果是非数组值，这些值会被直接添加到新数组中。

//如果你尝试将 null 或 undefined 作为参数传递给 concat(), 它们会被当作空数组处理。如果 concat() 没有参数，它将返回一个与原数组相同的副本

var arr1 = [1, 2, 3];

var arr2 = [4, 5, 6];

var arr3 = [7, 8, 9];

var singleValue = 10;

var newArr = arr1.concat(arr2, arr3, singleValue);

console.log(newArr); //[1, 2, 3, 4,  5, 6, 7, 8, 9, 10]

//3、reduce(callbackFn, initialValue) 将数组中的所有元素减少（聚合）为一个单一的输出值。这个方法接收一个回调函数（reducer），这个函数会在数组的每个元素上执行，累积结果并返回最终的单一值。

//callbackFn: 必需。一个回调函数，它至少需要两个参数：

//accumulator: 累加器，累积每次迭代的结果。

//currentValue: 当前正在处理的元素。 可以有另外两个可选参数：

//currentIndex: 当前元素的索引。

//array: 调用 reduce() 的数组本身。

//initialValue: 可选。累加器的初始值。如果不提供，数组的第一个元素会被用作初始值，从数组的第二个元素开始迭代。

var arr = [1, 2, 3, 4, 5];

var sum = arr.reduce(

  (accumulator, currentValue) => accumulator + currentValue,

  0

);

console.log(sum); //15

//4、join(separator) 将数组的所有元素转换成字符串，并通过指定的分隔符连接在一起。返回值是一个字符串，该字符串是通过将数组的所有元素连接在一起并使用指定的分隔符（如果提供了的话）分隔各个元素而得到的。

//如果数组元素本身是数组或其他可迭代对象，它们会被转换为其自身的字符串表示形式。

//eparator: 可选。一个字符串，用于指定元素之间的分隔符。默认情况下，如果未提供分隔符，元素将通过逗号, 分隔。

var fruits = ["Apple", "Banana", "Cherry"];

var fruitString = fruits.join();

console.log(fruitString); //"Apple,Banana,Cherry"

var customSeparatedString = fruits.join(" | ");

console.log(customSeparatedString); //"Apple | Banana | Cherry"

//5、filter(function(value, index, arr), thisValue) 数组中的每一项都执行回调函数，返回值是包含符合条件元素的新数组。

//function：函数，规定了过滤条件。必需。该函数接受三个参数：当前元素的值、当前元素的索引和包含该元素的数组。

//thisValue：可选项。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略thisValue，则默认是全局对象（浏览器环境下是 window 对象）。

var numbers = [1, 2, 3, 4, 5, 6, 7, 8];

var result = numbers.filter(function (num) {

  return num >= 5;

});

console.log(result); // 输出：[5, 6, 7, 8]

var arr = [

  { id: "1", name: "中国" },

  { id: "2", name: "美国" },

  { id: "3", name: "英国" },

  { id: "4", name: "澳大利亚" },

];

var newArr = arr.filter((item) => {

  return item.id === "1";

});

console.log(newArr);

//6、Map() 方法返回一个新数组，该数组的长度与原数组相同，其中的元素是原数组中每个元素经过 callback 函数处理后的结果。

var arr = [1, 2, 3, 4, 5];

var newArr = arr.map((item) => {

  return item * 2;

});

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

console.log(newArr); //[ 2, 4, 6, 8, 10 ]

//7、forEach() 遍历数组, 无返回值。不改变原数组

var arr = [1, 2, 3, 4, 5];

arr.forEach((item) => {

  console.log(item * 3); // 1/2/3/4/5

});

console.log(arr);

//8、find(callback(),thisArg) 找出符合某个条件的第一个元素,返回值是该元素，否则返回undefined。

var arr = [1, 2, 3, 4, 5];

var new1 = arr.find((item, index) => {

  return item > 2;

});

console.log(new1); //3

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

//9、findIndex(callback(),this,Arg) 找出符合某个条件的第一个元素的索引，返回值是该索引，否则返回-1。

var arr = [1, 3, 5, 7, 9];

var result = arr.findIndex((item) => item > 7);

console.log(result, "9999"); // 输出: 4

//简写形式：箭头函数如果只有一个表达式，并且不使用大括号 {}，该表达式的结果会被自动返回。

//完整形式：如果函数体使用了大括号 {}，就需要显式地使用 return 来返回值。

//10、some()  检测数组中是否有某些项符合条件，只要有一项符合了，返回值是true，退出循环。全都不符合返回false。

var arr = [1, 2, 3, 4, 5];

var result = arr.some((item) => item > 6);

console.log(result); //false

console.log(

  "some",

  [].some(function () {})

); //false

//some:只要有一个成功就返回成功(只看true)因为没有true所以就是false

//11、every() 检测数组中的每一项是否符合条件，只要有一项不符合返回值是false,退出循环。全部符合返回true。

//当return false时退出循环(需要写return true;)

var arr = [1, 2, 3, 4, 5];

var result = arr.every((item) => item < 10);

console.log(result); //true

console.log(

  "every",

  [].every(function () {})

); //true

// true false 当some的数组为空时返回false 当every的数组为空时返回true

// 理解: 防止混淆,请务必这样记

// every只要有一个失败就返回失败 (只看false)因为没有false 所以就是true

//12、indexof(searchElement,fromIndex) 当找到指定元素时，indexof方法会返回该元素所在数组中首次出现的索引，如果没有找到则返回-1。

//Element是要查找的元素，fromIndex是可选参数，表示从哪个索引开始查找。

var arr = [1, 2, 3, 4, 5, 6, 7];

var result = arr.indexOf(2);

console.log(result); //1