js中数组方法

1.操作数组常用方法

（1）push()在原数组的末尾添加一个或多个
（2）pop()在原数组的末尾删除 不用添加参数

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count);  // 5
console.log(arr);   // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item);   // Sean
console.log(arr);   // ["Lily", "lucy", "Tom", "Jack"]

（3）shift()在原数组的0项删除 不用添加参数
（4）unshift()在原数组的0项添加一个或多个

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count);   // 5
console.log(arr);   //["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item);   // Jack
console.log(arr);   // ["Sean", "Lily", "lucy", "Tom"]

（5）splice()会改变原数组。返回一个由删除的元素组成的新数组

• 参数一：删除元素的下标的开始，
• 参数二：可选，默认值参数1下标之后的所有元素删除。一个整数，表示数组中要从 开始删除的元素数量
• 参数三：可选，从开始要加入到数组中的元素。如果不指定任何元素， 将只从数组中删除元素)

(6)slice() 方法返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝
参数：start和end，（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。

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());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

(7)indexOf（）和lastindexOf（）

indexOf()返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。

lastindexOf()返回数组中最后一出现给定元素的下标，不存在则返回-1

在比较第一个参数与数组中的每一项时，会使用全等操作符。
参数1：需要查找的元素
参数2：可选，开始搜索的索引，默认为0则表示整个数组被搜索

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5));   //2
console.log(arr.lastIndexOf(5));   //5
console.log(arr.indexOf(5,2));   //2
console.log(arr.lastIndexOf(5,4));   //2
console.log(arr.indexOf("5"));   //-1

(8)include()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true ，否则返回 false
参数1：需要查找的值。
参数2：可选，开始搜索的索引，默认为0则表示整个数组被搜索 

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// Expected output: true

(9)join（） 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。 默认分隔符为逗号

var arr = [1,2,3];
console.log(arr.join());   // 1,2,3
console.log(arr.join("-"));   // 1-2-3
console.log(arr);   // [1, 2, 3]（原数组不变）

（10）reverse（） 方法就地反转数组中的元素，并返回同一数组的引用。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。

要在不改变原始数组的情况下反转数组中的元素，使用 toReversed（）。

var arr = [13, 24, 51, 3];
console.log(arr.reverse());   //[3, 51, 24, 13]
console.log(arr);   //[3, 51, 24, 13](原数组改变)

（11）concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy);   //[1, 3, 5, 7, 9, 11, 13]
console.log(arr);   // [1, 3, 5, 7](原数组未被修改)

（12）sort() 方法就地对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序。 

var points=[40,100,1,5,25,10];

points.sort((a,b)=>{
    returna-b
});
points输出结果：
1,5,10,25,40,100

 2.创建数组的几种方式

（1）使用数组字面量（Array Literal）：使用方括号 [] 来定义一个新数组，并在其中添加元素。

const array = [1,2,3]
console.log(array) 1,2,3

（2）使用 Array 构造函数：通过构造函数 Array() 创建一个新数组，并可选地传递初始元素。

单个参数时，参数是数组的长度，但数组的值是undefined 
const a  =new Array(5)
 console.log(a)  // (5) [空属性 × 5] a的length为5
 console.log(a[0]) //undefined 

多个参数时
const a =new Array(5,6)
console.log(a) //[5,6] 

（3）使用 Array.of() 方法：通过 Array.of() 方法创建一个新数组，并接受可变数量的参数作为初始元素。

Array.of(7); // [7]
Array(7); // 由 7 个空槽组成的数组

Array.of(1, 2, 3); // [1, 2, 3]
Array(1, 2, 3); // [1, 2, 3]

（4）使用 Array.from() 方法：通过 Array.from() 方法根据现有的可迭代对象（如字符串、Set、Map等）创建一个新数组。

• 可迭代（iterable） 是实现了 Symbol.iterator 方法的对象 ，可以应用 for..of 的对象被称为 可迭代的。

• 类数组（array-like） 是有索引和 length 属性的对象，所以它们看起来很像数组。

console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], (x) => x + x));
// Expected output: Array [2, 4, 6]

3.数组的遍历 

（1）for循环（）

 const array = [1,2,3,4,5]
 for(let i = 0;i<array.length;i++){
   console.log(array[i]) // 1 2 3 4 5
 } 

 （2）forEach（）方法对数组的每个元素执行一次给定的函数。并会丢弃它的返回值。该函数被调用时将传入以下参数：

参数分别为：遍历的数组内容；对应的数组索引，数组本身

 forEach 循环无法中途跳出，break 命令或return 命令都不能奏效 

 const result= array.forEach((values,index,arr)=>{
   console.log(values,index,arr)
 } )

（3）filter（）将所有元素进行判断，将满足条件为true的元素作为一个新的数组返回, 原数组不变。注意：filter() 不会对空数组进行检测。

参数分别为：遍历的数组内容；对应的数组索引，数组本身

const filters = array.filter((item,index,arr)=> item % 2 == 0) 
console.log(filters) //[2,4]

(4)find()方法是一个迭代方法。它按索引升序顺序为数组中的每个元素调用提供的 函数，直到 返回一个真值。然后 返回该元素并停止迭代数组。如果 从未返回真值，则 返回 undefined。该函数被调用时将传入以下参数：

参数分别为：遍历的数组内容；对应的数组索引，数组本身

const array1 = [5, 12, 8, 130, 44];
const found = array1.find((element) => element > 10);

console.log(found);
// Expected output: 12

(5)some（） 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true;否则返回 false。它不会修改数组。

参数分别为：遍历的数组内容；对应的数组索引，数组本身

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

// Checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// Expected output: true

(6)every()为数组中的每个元素执行的函数。每个元素通过函数的测试为时返回true，否则返回一个假值。该函数被调用时将传入以下参数： 

参数分别为：遍历的数组内容；对应的数组索引，数组本身

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// Expected output: true

 （7）map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。它不会改变原数组

参数分别为：遍历的数组内容；对应的数组索引，数组本身

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

（8）findIndex（）它按索引升序顺序为数组中的每个元素调用提供的 函数，直到 返回一个真值。然后 返回该元素的下标并停止迭代数组。如果没有找到，则返回-1。该函数被调用时将传入以下参数：

参数分别为：遍历的数组内容；对应的数组索引，数组本身

const array1 = [5, 12, 8, 130, 44];
const found = array1.findIndex((element) => element > 10);

console.log(found);
// Expected output: 1

 （9）reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

参数	含义
function（total，item，index，arr）	必须值：为数组的每一项所执行的函数 函数的形参 参数 含义 total 必须值:累加值，如不写initialValue ，则以数组的0项开始 item 必须值:数组的每一项值 index 可选,:每一项的下标 arr 可选：调用了 reduce() 的数组本身。
initialValue	可选。作为初始值传递给函数的值。

  无初始值initialValue 

 var arr = [1, 2, 3, 4];
 var sum = arr.reduce(function (total, item, index, arr) {
   console.log(total, item, index);
   return total + item
 })
 console.log(sum); //10

有初始值

 var arr = [1, 2, 3, 4];
 var sum = arr.reduce(function (total, item, index, arr) {
   console.log(total, item, index);
   return total + item
 },2)
 console.log(sum); //12

4.数组转化方法 

将一个类数组的数组转换为真正的数组，所谓真正的数组是可以使用数组的方法，也就时它的prototype上有数组的方法，如push、pop、unshift、shift等等

类数组解释：

• 类数组是一个对象
• 属性名称即键值使用数字
• 带有length属性

类数组特点：

• 可以转化为真正的数组
• 没有数组方法，即不可调用数组的原型方法，如push、concat等等
• 可以像数组那样循

（1）Array.from()

对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

将对象转换为数组
const object1 = {
  0: 'somestring',
  1: 42,
  2: 1313,
  length: 3
};
console.log(Array.from(object1))
//['somestring',42,1313]

// 将字符串转化为真正数组
  let str = "abcr";
  console.log("str", Array.from(str)); // ['a', 'b', 'c', 'r']

（2） 扩展运算符

扩展运算符是ES6新增的语法，它的原理就是将参数中的可遍历属性浅拷贝到当前对象中，它可以作用于对象和数组，因为总体而言这两者都是对象。我们可以利用它的这个特性，将对象中遍历出来的属性放到我们的数组中去，从而得到一个真正的数组。

// 将字符串转化为真正数组
let str = "hello";
console.log("str", [...str]); // ['h', 'e', 'l', 'l','o']

(3)原型上的slice方法

slice方法是数组的一个原型方法，它可以在不改变原数组的情况下返回数组中的某些元素并形成新的数组。

// 将字符串转化为真正数组
let str = "hello";
const result = Array.prototype.slice.call（str）
console.log("str", result); // ['h', 'e', 'l', 'l','o']

转换方法	注意事项
Array.from	es6提供的方法，只能实现先拷贝，比较推荐使用。
扩展运算符	不能使用在非迭代对象上，操作起来比较简单。
原型的slice（call）方法	主要理解this指向问题，可以衍生出很多转化方法。

 5总结哪些可以改变原数组，哪些不能改变原数组

1.改变原数组

push、pop、unshift、shift、splice、reverse、sort

2.不会改变原数组

slice、join、concat