你知道 JS 数组有哪些方法 ？

原数组改变的方法有：push() pop() shift() unshift() reverse() sort() splice()
不改变原数组的方法有：concat()  map()  filter()  join()  every()  some()  indexOf()  slice()  forEach()

join()将数组以规定的符号整合成字符串,默认是逗号

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

pop()从数组中删除最后一个元素,返回值是删除的元素

    var arr = ["Banana", "Orange", "Apple", "Mango"];
    var fruits = arr.pop();
    console.log(fruits);  //  返回值为 Mango
    console.log(arr);  //会改变原数组 ['Banana', 'Orange', 'Apple']

push()向数组结尾处添加一个新的元素,返回值是新数组长度

    var arr = ["Banana", "Orange", "Apple", "Mango"];
    var fruits = arr.push("Kiwi");
    console.log(fruits);  // 返回值是新数组长度 5
    console.log(arr);  //会改变原数组, ['Banana', 'Orange', 'Apple', 'Mango', 'Kiwi']

shift()删除原数组的第一项,返回值是删除的元素;如果数组为空,则返回undefined

    var arr1 = ["Banana", "Orange", "Apple", "Mango"];
    var arr2 = [];
    var fruits1 = arr1.shift();
    var fruits2 = arr2.shift();
    console.log(fruits1);  // 返回删除的元素值 Banana
    console.log(arr1);  //会改变原数组  ['Orange', 'Apple', 'Mango']
    console.log(fruits2);  //返回值 undefined

unshift()向数组头部添加元素,返回值新数组长度

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

splice()可实现对数组的添加,删除,替换;该方法接收三个参数:

第一个参数定义添加元素的位置(下标)或者从什么位置(下标)开始删除元素(包含该位置)

第二个参数定义删除元素的个数

第三个参数定义要添加的元素

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

    //删除数组的元素 ( 从下标2开始删除2项元素 )
    var arr = ["Banana", "Orange", "Apple", "Mango"];
    var fruits = arr.splice(2, 2);
    console.log(fruits);  // 返回删除元素组成的数组 ["Apple", "Mango"]
    console.log(arr)  // ["Banana", "Orange"]

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

slice()从原数组截取一段新数组,该方法接收两个参数:

第一个参数是截取的起始位置,包含该位置

第二个参数是截取的结束位置,但不包含该位置;该参数可以不写,此时默认截取剩余元素;该参数也可以为负数,此时就从开始位置往前截取

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


    //如果第二个参数省略不写的话，则会截取数组剩余的部分
    var arr = ["Banana", "Orange", "Apple", "Mango"];
    var fruits = arr.slice(1);
    console.log(fruits);  // 返回截取出来的元素组成的新数组["Orange","Apple", "Mango"]
    console.log(arr)  // 原数组未改变["Banana", "Orange", "Apple", "Mango"]


    //参数也可以是负数，这时就是从原数组的后面往前截取
    var arr = ["Banana", "Orange", "Apple", "Mango"];
    var fruits = arr.slice(1, -2);
    console.log(fruits);  // 返回截取出来的元素组成的新数组["Orange"]
    console.log(arr)  // 原数组未改变["Banana", "Orange", "Apple", "Mango"]

concat()用于合并两个数组构成新数组;不改变原数组

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

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]


    //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},]

reverse()反转数组中的元素

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

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);
    })

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]

filter()过滤数组符合条件的元素,返回值是符合条件的元素构成的新数组

    var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.filter(function myFunction(value) {
      return value > 18;
    });
    console.log(numbers);  // 原数组不改变 [45, 4, 9, 16, 25]
    console.log(over18);   // 返回值 [45,25]

reduce()和reduceRight()

这两个方法都会迭代数组的所有项,然后构建一个最终返回的值;reduce()是从数组的第一个元素开始逐个向后遍历;reduceRight()是从数组的最后一个元素开始逐个向前遍历

两个方法都接收两个参数:第一个是在每一项上调用的函数,一个是作为归并基础的初始值

传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

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

every()方法检查数组的每一项是否符合条件,返回值true或false;只有每一项都符合条件才会返回true

    var numbers = [45, 4, 9, 16, 25];
    var allOver18 = numbers.every(function myFunction(value, index, array) {
      return value > 18;
    });
    // 箭头函数写法
    // var allOver18 = numbers.every((value, index, array) => {
    // return value > 18;
    // });
    console.log(numbers);  // [45, 4, 9, 16, 25]
    console.log(allOver18);   // false

some()方法检查数组的某一项是否符合条件,返回值true或false;只要有一项符合条件就会返回true

    var numbers = [45, 4, 9, 16, 25];
    var allOver18 = numbers.some(function myFunction(value, index, array) {
    return value > 18;
    });
    // 箭头函数写法
    // var allOver18 = numbers.some((value, index, array) => {
    // return value > 18;
    // });
    console.log(numbers);  // [45, 4, 9, 16, 25]
    console.log(allOver18);   // true

indexOf()查找数组元素,返回值是所查找元素的位置,如果没有查找到元素则返回-1,如果查找元素出现多次,则返回其第一次出现的位置;

接收两个参数:

第一个参数是要查找的元素

第二个参数是查找的起始位置

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

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

find()方法返回第一个通过测试函数的数组元素的值

    var numbers = [4, 9, 16, 25, 29];
    var first = numbers.find(function myFunction(value, index, array) {
    return value > 18;
    });

    console.log(numbers);  // [4, 9, 16, 25, 29]
    console.log(first);   // 25

findIndex()方法返回第一个通过测试函数的数组元素的索引

    var numbers = [4, 9, 16, 25, 29];
    var first = numbers.findIndex(function myFunction(value, index, array) {
    return value > 18;
    });

    console.log(numbers);  // [4, 9, 16, 25, 29]
    console.log(first);   // 3