js中数组大全的方法总结

1、join() 将数组转换为字符串，默认是逗号。不改变原数组，返回转换后的字符串 。

  var arr = ["Banana", "Orange","Apple", "Pear"];
  var fruits  = arr.join(" * "); 
  console.log(fruits);  //  Banana * Orange * Apple * Pear
  console.log(arr)  // 原数组不变["Banana", "Orange","Apple", "Pear"]
    

2、pop() 方法 从数组中删除最后一个元素，返回值是删除的元素：尾部删除，返回被删除的元素，改变原数组

    var arr = ["Banana", "Orange","Apple", "Pear"];
    var fruits  = arr.pop(); 
    console.log(fruits);  //  返回值为 Pear
    

3、push() 方法 向数组结 尾处添加一个新的元素：末尾添加，返回长度，改变原数组

    var arr = ["Banana", "Orange","Apple", "Pear"];
    var fruits  = arr.push("Grape");
    console.log(fruits);  // 返回值是新数组长度 5
    

4、shift()方法 删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。这和pop()正好相反。删除首部元素，返回被删元素，改变原数组

    var arr = ["Banana", "Orange","Apple", "Pear"];
    var fruits  = arr.shift();
    console.log(fruits);  // 返回删除的元素值 Banana
    

5、unshift()方法 向数组头部添加元素 ， 返回新数组的长度。这和push()正好相反。首部添加，返回长度，改变原数组

    var arr = ["Banana", "Orange","Apple", "Pear"];
    var fruits  = arr.unshift('Grape');
    console.log(fruits);  // 返回新数组长度 5
    

6、splice()方法功能比较强大，可以实现对数组元素的删除、添加、替换。对数组进行删除修改，返回被删除的元素组成的数组，改变原数组

该方法接受三个参数：

 index：第一个参数定义了应添加新元素的位置（下标）。
 length： 第二个参数定义应删除多少个元素。
 N: 其余参数定义要添加的新元素。

向数组添加元素 ( 从下标2开始删除0项元素，并从下标2处插入元素 'Lemon','C' )
    var arr = ["Banana", "Orange","Apple", "Pear"];
    var fruits  = arr.splice(2,0,'Lemon','Grape');
    console.log(fruits);  // 返回删除元素组成的数组 []
    console.log(arr)  // ["Banana", "Orange", "Lemon", "Grape", "Apple", "Pear"]
    

删除数组的元素 ( 从下标2开始删除2项元素，并从下标2处插入元素 'Lemon','Grape' )
    var arr = ["Banana", "Orange","Apple", "Pear"];
    var fruits  = arr.splice(2,2,'Lemon','Grape');
    console.log(fruits);  // 返回删除元素组成的数组 ["Apple", "Pear"]
    console.log(arr)  // ["Banana", "Orange", "Lemon", "Grape"]

替换数组的元素 (从下标2开始删除1项元素，并从下标2处插入元素 'Lemon'，其实和删除数组是同样的)
    var arr = ["Banana", "Orange","Apple", "Pear"];
    var fruits  = arr.splice(2,1,'Lemon');
    console.log(fruits);  // 返回删除元素组成的数组 ["Apple"]
    console.log(arr)  // ["Banana", "Orange", "Lemon", "Pear"]

 例子2：

 copyNew(time,index){
   console.log(time)
   let newList = {
     id:time.id,
     name1:time.name1,
     name2:time.name2,
   }
   //第一个参数为需要操作数据的下标，第二个参数为操作添加/删除(0为添加，1为不操作，2为删除，3为删除多条数据)，第三个参数可选
   this.listTable.splice(index,0,newList) 
   console.log(this.listTable)
 }

7、slice() 方法用数组的某个片段切出新数组。该方法不改变原数组：返回新数组，不改变原数组

该方法接收两个参数：

   startIndex：第一个参数是开始截取位置
   endIndex第二个参数是结束位置，但不包含
   例如 arr.slice(2,4)表示从下标2开始到下标4结束，但是不包含下标为4的那一项元素，
   所以截取的是下标为2和3的两项

    var arr = ["Banana", "Orange","Apple", "Pear"];
    var fruits  = arr.slice(2,3);
    console.log(fruits);  // 返回截取出来的元素组成的新数组["Apple"]
    console.log(arr)  // 原数组未改变 ["Banana", "Orange", "Apple", "Pear"]
    

-- 如果第二个参数省略不写的话，则会截取数组剩余的部分

    var arr = ["Banana", "Orange","Apple", "Pear"];
    var fruits  = arr.slice(1);
    console.log(fruits);  // ["Orange","Apple", "Pear"]
    console.log(arr)  // ["Banana", "Orange", "Apple", "Pear"]

   -- 参数也可以是负数，这时就是从原数组的后面往前截取
   例如：arr.slice(1,-2) 从数组下标为1开始截取到倒数第二项（不包含）
 

    var arr = ["Banana", "Orange","Apple", "Pear"];
    var fruits  = arr.slice(1,-2);
    console.log(fruits);  // ["Orange"]
    console.log(arr)  // ["Banana", "Orange", "Apple", "Pear"]
    

8、concat() 方法用来合并数组， 通过向原数组添加参数来创建一个新数组，不改变原数组

合并两个或多个数组，返回新数组，不会改变原数组

    var myGirls = ["Cecilie", "Lone"];
    var myBoys = ["Emil", "Tobias", "Linus"];
    var myChildren = myGirls.concat(myBoys);
    console.log(myChildren);  // ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]
    

9、sort() 方法以字符编码顺序对数组进行排序， 默认升序。改变原数组，返回排序后的数组

    var myGirls = ['a', 'e', 'd', 'c', 'b'];
    console.log(myGirls.sort());  // ["a", "b", "c", "d", "e"]

   -- 如果是数字的话，就会出现排序不正确。因为sort()是按照字符编码的顺序进行排序。
   这时需要通过一个比值函数来修正此问题，也就是sort（）传入一个函数。

    var myGirls = [21, 48, 6, 13, 38];
    console.log(myGirls.sort());  // 排序错误[13, 21, 38, 48, 6]
    
    var myGirls = [21, 48, 6, 13, 38];
    // myGirls.sort(function(a,b){return a-b})  a-b是升序
    // myGirls.sort(function(a,b){return b-a})  b-a是降序
    console.log(myGirls.sort(function(a,b){return a-b}));  // 排序正确[6, 13, 21, 38, 48]
    console.log(myGirls.sort(function(a,b){return b-a}));  // 排序正确[48, 38, 21, 13, 6]

--    也可以以随机顺序进行排序，这时sort()的比值函数要写成

function(a, b){return 0.5 - Math.random()}

    var points = [40, 100, 1, 5, 25, 10];
    points.sort(function(a, b){return 0.5 - Math.random()}); 
    console.log(points);  //每一次的结果都不相同 [10, 100, 5, 40, 25, 1]

--    JavaScript 数组经常会包含对象：

var cars = [{type:"Volvo", year:2016},{type:"Saab", year:2001},{type:"BMW", year:2010}]，

        即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。
   解决方法是通过比较函数来对比属性值：

var cars = [{type:"Volvo", year:2016},
    {type:"Saab", year:2001},
     {type:"BMW", year:2010}]
cars.sort(function(a, b){return a.year - b.year});
console.log(cars)  // [{type:"Saab", year:2001},{type:"BMW", year:2010},
{type:"Volvo", year:2016},]

10、reverse() 方法, 反转数组中的元素。该方法会改变原数组。返回的是颠倒后的数组，会改变原数组

    var myBoys = ["Emil", "Tobias", "Linus"];
    console.log(myBoys.reverse());  // ["Linus", "Tobias", "Emil"]
    console.log(myBoys);  // 原数组改变了 ["Linus", "Tobias", "Emil"]

-- 当然你也可以结合sort()对数组进行降序排序

    var fruits = ["Banana", "Orange", "Apple", "Pear"];
    fruits.sort();        // 先对 fruits 中的元素进行升序排序
    fruits.reverse();     // 反转元素顺序
    console.log(fruits);  // 得到降序 ["Orange", "Pear", "Banana", "Apple"]

11、forEach() 对数组进行遍历循环，该方法没有返回值，不改变原数组，参数是一个function。

    var numbers = [45, 4, 9, 16, 25];
    numbers.forEach(function(item, index, arr){
        console.log(item)
    })
    // 打印结果 45， 4， 9， 16， 25
    // 箭头函数写法
    numbers.forEach((item, index, arr) => {
        console.log(item);
    })

12、map() 方法指“映射”，对数组中的每一项参数执行给定函数，返回每次函数调用的结果组成的数组。原数组不变

    var numbers1 = [45, 4, 9, 16, 25];
    var numbers2 = numbers1.map(function myFunction(value, index, array) {
                    return value * 2;
                    });
    console.log(numbers1);  // 原数组未改变 [45, 4, 9, 16, 25]
    console.log(numbers2);  // 返回值为函数执行后结果组成的数组[90, 8, 18, 32, 50]

13、filter() 方法，‘过滤’数组符合条件的元素，返回值为符合条件元素组成的新数组。原数组不变

let a = [1,2,3,4,11]
// 第一个参数为一个方法，有三个参数，current:当前值 index:当前值下标 array:这个数组对象
let b = a.filter(function(current,index,array){
    return current < 10
})
 
console.log(b) // [1,2,3,4]
console.log(a) // [1,2,3,4,11]
 
//数组对象根据某个对象中的值删除该对象
const arr = [
	{ name: '王佳斌', age: '20' },
	{ name: '孙玉红', age: '15' }
]
arr = arr.filter(item => item.age !== '15')
// arr = [{ name: '王佳斌', age: '20' }]

14、reduce()和 reduceRight()
这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。
这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。
传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
下面代码用reduce()实现数组求和，数组一开始加了一个初始值10。
 

    var values = [1,2,3,4,5];
    var sum = values.reduceRight(function(prev, cur, index, array){
    return prev + cur;
    },10);
    console.log(sum); //25

15、every() 方法检查数组每一项的值是否通过条件。返回true或false。只有每一项都通过，才会返回true。

let a = [1,2,3,4,5]
 
let b = a.every(function(current,index,array){
       return current < 6
})
 
let c = a.every(function(current,index,array){
       return current < 3
})
console.log(b)  // true 
console.log(c)  // false 

16、some() 方法检查数组某一项的值是否通过条件。返回true或false。只要有一项通过，就会返回true。

let a = [1,2,3,4,5]
 
let b = a.some(function(current,index,array){
       return current > 4
})
 
let c = a.some(function(current,index,array){
       return current > 5
})
console.log(b)  // true 
console.log(c)  // false 

17、indexOf() 方法在数组中搜索元素值并返回其位置。接受两个参数，第一个参数是要查找的元素，第二个参数是从哪里开始查找.如果未找到项目，Array.indexOf() 返回 -1。如果项目多次出现，则返回第一次出现的位置。

lastIndexOf() 方法和indexOf()的区别是，lastindexOf()是从数组尾部往前查找。其他都相同

不会改变原数组，返回找到的index,否则返回-1

    var fruits = ["Apple", "Orange", "Apple", "Pear"];
    var a = fruits.indexOf("Apple");
    var b = fruits.indexOf("Apple",2);
    var c = fruits.indexOf("BBB")
    console.log(fruits);  // ["Apple", "Orange", "Apple", "Pear"]
    console.log(a);   // 多次出现返回第一次出现的位置 0
    console.log(b);   // 2
    console.log(c);   // 找不到就返回 -1

18、find() 方法一般在需要使用找到的元素时

和filter()方法的区别在于：filter返回值是所有满足条件的元素组成的数组

找到数组中第一次满足条件的元素，并返回，若找不到则返回undefined。不改变原数组。

let a = [1,2,3,4]
// b在下面需要使用，则一般用find
let b = a.find(function(ele,index,array){
    return ele == 1
})
 
let c = 3
let d = b + c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4
 
// 若只需判断元素是否存在
// 若果是简单数组(非对象数组)，则一般使用Array.includes(value)方法
// 如果为对象数组，则可以使用Array.some()方法
 
let a = [1,2,3]
console.log(a.includes(1))  // true
 
let a = [{"name": "xiaoming" },{"name": "xiaohong"}]
 
console.log(a.some(function(ele){
    return ele.name == 'xiaoming'
})) // true

19、findIndex() 方法findIndex()的作用同indexOf()，返回第一个满足条件的下标，并停止寻找。

区别是findIndex() 的参数为一个回调函数,且一般用于对象数组

let a = [1,2,3,4]
 
let b = a.findIndex(function(ele,index,array){
    return ele === 2
})
 
let c = a.indexOf(2)  
 
console.log(a)  // [1,2,3,4]
console.log(b)  // 1
console.log(c)  // 1

20、includes() 方法,返回一个布尔值。 参数是一个value,一般用于简单数组。

对于复杂数组，则可以使用some()方法替代includes()方法

let a = [1,2,3]
console.log(a.includes(1))  // true