JavaScript数组核心方法实现原理浅析

1. arr.join() （转换）

把数组转换成字符，(原数组不变)，返回值： 返回被转成字符的数据（非数组）

 var arr = [1,2,3,4];
    console.log(arr);//1,2,3,4
    var res = arr.join("-");//添加"-"
    console.log(res);//1-2-3-4
    console.log(arr);//[1,2,3,4]

2. arr.shift()和arr.unshift()（数组首操作）

shift():删除数组的第一个元素（ 改变原数组），返回值：被删除的元素

unshift():在数组的头部增加元素（ 改变原数组），返回值：新数组的长度

//shift()
 var arr = [1,2,3];
    var res = arr.shift();
    console.log(res);   //1(被删除的元素)
    console.log(arr);   //[2,3]
    
//unshift()
 var arr = [1,2,3];
    var res = arr.unshift(4,5);
    console.log(res);       //5(新数组的长度)
    console.log(arr);       //[4,5,1,2,3]

3. arr.pop() 和arr.push()（数组末操作）

pop()：删除数组的最后一个元素（改变原数组），返回值：删除的元素

push():在数组的尾部增加元素（改变原数组），返回值：新数组的长度

//pop()
 var arr = [1,2,3];
    var res = arr.pop();
    console.log(res);       //3(返回删除的元素)
    console.log(arr);       //[1,2]
    
//push()
  var arr = [1,2,3];
    var res = arr.push(4,5);
    console.log(res);   //5 (新数组的长度)
    console.log(arr);   //[1,2,3,4,5]

4.arr.sort() (排序)

按照字符的排序规则从小到大排序（改变原数组），返回值：排序后的数组

 var arr = [2024,646,53,123];
    var res = arr.sort();
    console.log(res);       //[123, 2024, 53, 646]  

5. arr.reverse()（反转）

反转数组（改变原数组），返回值：反转后的数组

var arr = [1,2,3,4];
    var res = arr.reverse();
    console.log(res);   //[4,3,2,1] 

6.arr.cancat()（拼接两个和多个数组）

arr1.cancat(arr2)

数组1与数组2合并（原数组未改变）
返回值：合并后的数组

 var arr1 = [1,2,3];
 var arr2 = [4,5,6];
    var res = arr1.concat(arr2);
    console.log(res);   //[1,2,3,4,5,6]
    console.log(arr1);  //[1, 2, 3]
    console.log(arr2);  //[4, 5, 6]

7.arr.slice()（截取数组）

arr.slice()

没有任何参数的slice执行一个简单的浅拷贝。

var arr = [1,3,5,7,9,11];
   var res = arr.slice();
   console.log(res); 　　　　　 //[1,3,5,7,9,11]
   console.log(arr);          //[1,3,5,7,9,11]

arr.slice(索引1,索引2)

功能：如果索引2未被规定，那么 slice() 方法会选取从 索引1到数组结尾的所有元素（原数组未改变）
返回值：被截取后所形成的新数组

var arr = [1,2,3,4,5,6,7];
   var res = arr.slice(2);
   console.log(res);   //[3,4,5,6,7]
   console.log(arr);    //[1,2,3,4,5,6,7]

arr.slice(索引1，索引2)

功能：从索引1截取到索引2的前一位，（原数组未改变）
返回值：被截取后所形成的新数组

  var arr = [1,2,3,4,5,6,7];
   var res = arr.slice(1,4); //截取索引为1-4的元素（不包括索引4）
   console.log(res);   //[2,3,4]
   console.log(arr);  //[1,2,3,4,5,6,7]

8.arr.splice()

arr.splice(index)当参数为一个时，

功能：从索引index删除到结束；（改变原数组）
返回值：被删除的元素所形成的数组

var arr = [1,3,5,7,9,11];
    var res = arr.splice(2);     
    console.log(res); 　　　　　 //[5,7,9,11]
    console.log(arr);          //[1,3]

arr.splice(index,count) 当参数为两个时，第一个参数：索引 第二个参数：个数，

功能：从索引index开始，删除个数count（改变原数组）
返回值：被删除的元素后形成的数组

var arr = [1,3,5,7,9,11];
    var res = arr.splice(2,3);   //从索引2开始，删除3个元素
    console.log(res); 　　　　　 //[5,7,9]
    console.log(arr);          //[1,3,11]

arr.splice(index,count,item1,....,itemX)当参数为三个或者三个以上时，第一个参数：索引 第二个参数：个数；第三个参数开始向后都是数据

功能：从索引index开始，删除个数count（改变原数组）,在删除的位置上添加item1,....,itemX
返回值：被删除的元素形成的数组
当个数count为0时，就是在指定位置插入数据的功能。（改变原数组）返回值：空数组

var arr = [1,3,5,7,9,11];
   var res = arr.splice(2,1,4,6);   //在索引2位置开始删除1个元素，并添加元素"4" "6"　　　　　　　　　
   console.log(res);    //[5]
   console.log(arr);   //[1,3,4,6,7,9,11]

以下是ES5数组新增的方法

（浏览器支持情况：chrome8+、ff3.6+、IE9+）

indexOf()和 lastIndexOf()

　indexOf 是查某个指定的字符串在字符串首次出现的位置（索引值） （也就是从前往后查）

lastIndexOf 是从右向左查某个指定的字符串在字符串中最后一次出现的位置（也就是从后往前查）

var a = "abcdefg";
   console.log(a.indexOf("c"));     //2
   console.log(a.lastIndexOf("c")); //2

发现返回的索引值相同，因为：lastIndexOf()方法虽然是从后往前搜索，但返回的位置是从前开始数数和计算的，所以结果和indexOf()方法返回的相同；

var a = "abcccdefg";
   console.log(a.indexOf("c"));     //2
   console.log(a.lastIndexOf("c")); //4

这里我们发现同样的查“c”,但是lastIndexOf()方法返回的索引值为4，因为“c”最后一次出现的位置是索引4的位置

forEach()（遍历）

支持3个参数：其中第一个参数代表数组内容，第二个参数是索引，第三个是数组本身.

var arr =[1, 2, 3, 4]
    arr.forEach(function (item, index, arr) {
       console.log(item);   //1 2 3 4
   });

map()（映射）

将一个数组映射成为一个新的数组，回调函数的参数同forEach。

var arr = [1, 2, 3, 4];
   var arrayOfSquares = arr.map(function (item) {
       return item * item;
   });
   console.log(arrayOfSquares); // [1, 4, 9, 16]

filter()（过滤）

filter为“过滤”、“筛选”之意。指数组filter后，返回过滤后的新数组。用法跟map极为相似

下例使用 filter 创建了一个新数组，该数组的元素由原数组中值大于 10 的元素组成

function isBigEnough(element) {
       return element >= 10;
   }
   var arr = [12, 5, 8, 130, 44].filter(isBigEnough);
   console.log(arr);//[ 12, 130, 44 ]

some()（某些项符合条件，只要有true，则不再返回执行。）返回boolean值

return返回的值只要有一项为true,最终的返回值就为true,不会继续遍历后边的元素；
若没有一项满足返回值为true的，就返回false；
原数组不受影响；

var arr = [30,23,11,8,0,11];
   var brr = arr.some(function(item){
       return item>10;
   });
   console.log(brr); //true

every()（需要每一项都符合要求）返回boolean值

对数组的每一项执行给定的函数，假如该函数每一项都返回true，最后结果才为true；
只要有一项返回值为false，最后结果就是false。且后边的元素都不会再继续执行函数；
原数组不受影响；

var arr = [30,23,11,8,0,11];
var brr = arr.every(function(item){
    return item>10;
})
alert(brr); //false