前端H5面试题Js: 数组的常用方法有哪些？

一、增（下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响）

1. push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度(该方法修改原有数组)

    <script>/* push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。 */function demoPush() {var arr = [2, 4, 6, 8, 10];var newArr = arr.push(12);console.log(newArr); //6  该数组的新长度console.log(arr); //[2, 4, 6, 8, 10, 12]newArr = arr.push(14, 16, 18, 20);console.log(newArr); //10  该数组的新长度console.log(arr); //[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]}demoPush()</script>

2. unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)

    <script>// unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度// (该方法修改原有数组)function demoUnshift() {var arr = [9, 11, 13];console.log(arr.unshift(7)); //4console.log(arr); //[7, 9, 11, 13]console.log(arr.unshift(1, 3, 5)); //7console.log(arr); //[1, 3, 5, 7, 9, 11, 13]}demoUnshift()</script>

3. splice() 方法通过删除或替换现有元素或者添加新的元素来修改数组,并以数组形式返回被修改的内容，此方法会改变原数组

    <script>// splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,// 并以数组形式返回被修改的内容。此方法会改变原数组function demoSplice() {var arr = ['星期一', '星期三', '星期四', '星期六'];arr.splice(1, 0, '星期二');console.log(arr); //['星期一', '星期二', '星期三', '星期四', '星期六']}demoSplice()</script>

4. concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

    <script>// concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组function demoConcat() {var arr1 = ['a', 'b', 'c'];var arr2 = ['d', 'e', 'f'];var arr3 = arr1.concat(arr2);console.log(arr3); //['a', 'b', 'c', 'd', 'e', 'f']console.log(arr1); //['a', 'b', 'c']console.log(arr2); //['d', 'e', 'f']var arr = [1, 2, 3];var newarr = arr.concat(4, 5, [6, 7, 8, 9], [10, 11], 12);console.log(newarr); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}demoConcat()</script>

二、删（下面三种都会影响原数组，最后一项不影响原数组）

1. pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度

    <script>/* pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。 */function demoPop() {var arr = ["香蕉", "苹果", "橘子", "西瓜", "葡萄"];console.log(arr.pop()); //葡萄console.log(arr.length); //4console.log(arr); //['香蕉', '苹果', '橘子', '西瓜']}demoPop()</script>

2. shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度

    <script>// shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度function demoShift() {var arr = ['a', 'b', 'c', 'd', 'e'];var deleteHead = arr.shift();console.log(deleteHead); //aconsole.log(arr); //['b', 'c', 'd', 'e']}demoShift()</script>

3. splice() 方法通过删除或替换现有元素或者添加新的元素来修改数组,并以数组形式返回被修改的内容，此方法会改变原数组

    <script>// splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,// 并以数组形式返回被修改的内容。此方法会改变原数组function demoSplice() {var arr = ['星期一', '星期三', '星期四', '星期六'];// 由被删除的元素组成的一个数组。// 如果只删除了一个元素，则返回只包含一个元素的数组。// 如果没有删除元素，则返回空数组。var ret = arr.splice(4, 1, '星期五');console.log(ret); //星期六console.log(arr); //['星期一', '星期二', '星期三', '星期四', '星期五']}demoSplice()</script>

三、改（即修改原来数组的内容，常用`splice`）

1. splice() 方法通过删除或替换现有元素或者添加新的元素来修改数组,并以数组形式返回被修改的内容，此方法会改变原数组

    <script>// splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,// 并以数组形式返回被修改的内容。此方法会改变原数组function demoSplice() {var arr = ['星期一', '星期三', '星期四', '星期五'];ret = arr.splice(1, 0, '星期二'); //增加一个元素console.log(arr); //['星期一', '星期二', '星期三', '星期四', '星期五']ret = arr.splice(4, 1, '星期六','星期日');  //插入两个值，删除一个元素console.log(arr); //['星期一', '星期二', '星期三', '星期四', '星期六', '星期日']}demoSplice()</script>

四、查

10. indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

    <script>// indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1function demoIndexOf(){var arr = ['red','pink','blue','green','yellow','red'];// 寻找red首次出现的下标console.log(arr.indexOf('red')); //0// 从序号2向后寻找red首次出现的下标console.log(arr.indexOf('red',2)); //5console.log(arr.indexOf('while')); //-1}demoIndexOf()</script>

五、排序（数组有两个方法可以用来对元素重新排序）

1. reverse原地反转数组

    <script>// reverse原地反转数组，改变原数组function demoReverse() {var arr = [1, 2, 3];var reverseArr = arr.reverse();console.log(reverseArr); //[3, 2, 1]console.log(arr); //[3, 2, 1]}demoReverse()</script>

2. sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的码点（在字符集中的序号）

    <script>// sort() 方法用原地算法对数组的元素进行排序，并返回数组。// 默认排序顺序是在将元素转换为字符串，然后比较它们的码点（在字符集中的序号）function demoSort() {var arr = ['zhang', 'luo', 'cai', 'hua', 'find'];arr.sort();console.log(arr); //['cai', 'find', 'hua', 'luo', 'zhang']}demoSort()/* 自定义排序规则 */function demoSort2() {var arr = [22, 5, 15, 23, 48, 89, 47];arr.sort(function (a, b) {return a - b})console.log(arr); //[5, 15, 22, 23, 47, 48, 89]}demoSort2()</script>

六、转换

1. join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符

    <script>/* join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。 */function demoJoin() {var arr = ['Fire', 'Air', 'Water'];console.log(arr.join()); //Fire,Air,Waterconsole.log(arr.join('')); //FireAirWaterconsole.log(arr.join('-')); //Fire-Air-Water}demoJoin()</script>

七、数组的批处理（都不改变原数组）

1.forEach() 方法对数组的每个元素执行一次给定的函数（或特定的操作）。

        function demoForEach() {var arr = ['a', 'b', 'c'];arr.forEach(// element:数组中正在处理的当前元素// index:数组中正在处理的当前元素的索引  // arr：function方法正在操作的数组function (element, index, arr) {console.log('给数组每个元素进行操作', element, index, arr);//输出//给数组每个元素进行操作 a 0 Array(3)//给数组每个元素进行操作 b 1 Array(3)//给数组每个元素进行操作 c 2 Array(3)})}demoForEach();

2.map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值

        function demoMap() {var arr = [3, 6, 9, 12, 15];var arr2 = arr.map(// element:数组中正在处理的当前元素// index:数组中正在处理的当前元素的索引// arr：function方法正在操作的数组function (element, index, arr) {return element * 3;});console.log(arr);//[3, 6, 9, 12, 15]console.log(arr2);//[9, 18, 27, 36, 45]}demoMap();

3.filter() 方法创建一个新数组, 当中包含通过测试（用函数定义测试规则）的所有元素

       function demoFilter() {var arr = [1, 2, 4, 8, 10];//ret 接收结果var ret = arr.filter(// element:数组中正在处理的当前元素// index:数组中正在处理的当前元素的索引// arr：function方法正在操作的数组function (element, index, arr) {return element >= 4;});console.log(ret);//[4, 8, 10]}demoFilter();

4.every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试，它返回一个布尔值

       function demoEvery() {//先定义测试函数// element:数组中正在处理的当前元素// index:数组中正在处理的当前元素的索引// arr：function方法正在操作的数组var test = function (element, index, arr) {return element >= 3;}var arr = [3, 6, 9, 12, 15];//测试是否arr中的每一个元素都能通过test的测试var ret = arr.every(test);console.log(ret);//true}demoEvery();

5.some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试，它返回的是一个Boolean类型的值

       function demoSome() {var arr = [2, 4, 6, 9, 10];// element:数组中正在处理的当前元素var odd = function (element) {return (element % 2 === 1);}var ret = arr.some(odd);console.log(ret);//true}demoSome();

6.reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值

       function demoReduce() {var arr = [3, 6, 9, 12, 15];//acc 累计器//element 当前值var reducer = function (acc, element) {return acc + element;}var ret = arr.reduce(reducer);//3 + 6 + 9 + 12 + 15console.log(ret);//45//以10当前值累计//10 + 3 + 6 + 9 + 12 + 15console.log(arr.reduce(reducer, 10));//55}demoReduce();