js 数组Array的常用方法 es3 es5 es6

js 数组Array的常用方法 es3 es5 es6

1.伪数组

1.1对象和伪数组的差别：

1.对象的原型链上只有Object.prototype，而数组的原型链上有Array.prototype和Object.prototype —所以伪数组无法使用数组的方法；
2.对象没有length属性，数组有并且自动更新；
3.对象根据键值对取值，而数组根据序号(索引)取值。

1.2定义伪数组:

1.拥有length属性,其他属性为非负整数字符串(因为对象使用[]来取值,会将数值隐式转换为字符串)—伪数组是对象，键比较特殊；
2.不具有数组具有的方法，即原型链上没有Array.prototype。

内容如下:

<script>
    var fakeArray = {
        "0":"first",
        "1":"second",
        "2":"third",
    	length:3,
    }
</script>

2.数组方法

2.1 ES3数组方法:

增删系列方法：push()、unshift()、pop()、shift()、concat()、slice()、splice()；

排序系列方法：reverse()、sort()；

数组与字符串相互转换系列方法:toString()、join()、split()；

这一块比较熟悉，主要从参数，返回值和式例来归纳：

增删系列方法

push()

push(元素1，元素2，…，元素n)

语法：arr.push(element1, …, elementN)

功能：将一个或多个元素添加到数组的尾部。
返回值：添加元素后，新数组的长度。—改变原数组

<script>
        var arr = [1]
        arr.push(2,3,4)
        console.log(arr) //[1, 2, 3, 4]
</script>

unshift()

unshift(元素1，元素2，…，元素n)

语法：arr.unshift(element1, …, elementN)

功能：将一个或多个元素添加到数组的开头。
返回值：添加元素后，新数组的长度。—改变原数组

<script>
        var arr = [1]
        arr.unshift(2,3,4)
        console.log(arr) //[2, 3, 4, 1]
</script>

pop()

语法：arr.pop()

功能：从数组中删除最后一个元素。
返回值：删除元素后，被删除的元素。—改变原数组

<script>
        var arr = [1,2,3,4]
        arr.pop() //4
        console.log(arr) //[1, 2, 3]
</script>

shift()

语法：arr.shift()

功能：从数组中删除第一个元素。
返回值：删除元素后，被删除的元素。—改变原数组

<script>
        var arr = [1,2,3,4]
        arr.shift() //1
        console.log(arr) //[2, 3, 4]
</script>

concat()

concat(数组1，数组2，…，数组n)

语法：var newArray = oldArray.concat(array1[, array2[, …[, arrayN]]])

功能：用于合并两个或多个数组。
返回值：合并后的新数组—不会改变原数组

<script>
        var a = [0,1,2],
            b = [3,4,5],
            c = [6,7,8];
        a.concat() //[0, 1, 2]
        a.concat(b,c) //[0, 1, 2, 3, 4, 5, 6, 7, 8]
</script>

slice()

slice(开始索引[必填],终止处索引[选填])

语法：arr.slice([begin[, end]])

功能：返回一个新的数组对象，这一数组是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。
返回值：一个含有被提取元素的新数组—不会改变原数组。

注：如果 end 被省略，则 slice 会一直提取到原数组末尾。如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

<script>
        var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
        var citrus = fruits.slice(1, 3);
        console.log(fruits)//['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
        console.log(citrus)//['Orange','Lemon'];
</script>

splice()

splice(开始索引[必填],删除长度[必填],删除处添加的元素[选填])

语法：array.splice(start[, deleteCount[, item1[, item2[, …]]]])

功能：通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。
返回值：由被删除的元素组成的一个数组—会改变原数组。

<script>
        var arr = [1,2,3,4];
        arr.splice(1,2) // [2, 3]
        console.log(arr) //[1, 4]
</script>

排序系列方法：

reverse()

语法：arr.reverse()

功能：将数组中元素的位置颠倒。
返回值：原数组元素颠倒后的新数组—会改变原数组。

<script>
        var arr = [1,3,5,2,4,6]
        arr.reverse() // [6, 4, 2, 5, 3, 1]
        console.log(arr) // [6, 4, 2, 5, 3, 1]
</script>

sort()

sort(函数[非必填])

语法：arr.sort([compareFunction])

功能：将数组中元素的位置颠倒。
返回值：原数组元素颠倒后的新数组—会改变原数组。

<script>
        var arr = [1,45,23,12,11,4,6];
        // 升序
        arr.sort(function(a,b){
        return a - b
        })  //[1, 4, 6, 11, 12, 23, 45]
        // 降序
        arr.sort(function(a,b){
        return b - a
        })
        //[45, 23, 12, 11, 6, 4, 1]
</script>

数组与字符串相互转换系列方法：

数组变字符串

toString()

语法：arr.toString()

功能：把数组元素依次用“,”拼接成字符串。
返回值：拼接后的字符串—不会改变原数组。

<script>
        var arr = [1,45,23,12,11,4,6]
        arr.toString() //"1,45,23,12,11,4,6"
        console.log(arr) //[1, 45, 23, 12, 11, 4, 6]
</script>

join()

join(字符[非必填])

语法：arr.toString()

功能：将一个数组的所有元素连接成一个字符串。
返回值：拼接后的字符串—不会改变原数组。

<script>
        var arr = [1,45,23,12,11,4,6]
        arr.join() //"1,45,23,12,11,4,6"
        arr.join('|') //"1|45|23|12|11|4|6"
        console.log(arr) //[1, 45, 23, 12, 11, 4, 6]
</script>

字符串变数组

split()

split(字符[非必填])

语法：str.split([separator[, limit]])

功能：使用指定的分隔符字符串将一个String对象分割成子字符串数组。
返回值：返回原字符串以分隔符出现位置分隔而成的一个Array。

<script>
        var str = "1,45,23,12,11,4,6",
            str.split(',') //["1", "45", "23", "12", "11", "4", "6"]
            console.log(str) //"1,45,23,12,11,4,6"
</script>

2.2 ES5数组方法:

迭代方法：forEach()、map()、filter()、some()、every()；

位置方法：indexOf() 和 lastIndexOf()；

归并方法：reduce()、reduceRight()。

迭代方法：

这些方法都接收两个参数，第一个参数是一个函数，他接收三个参数，数组当前项的值（value）、当前项在数组中的索引（index）、数组对象本身（array）。第二个参数是执行第一个函数参数的作用域对象，也就是上面说的函数中this所指向的值,如果为空则指向window。这几种方法都不会改变原数组。

forEach()

forEach()：对数组中的每一项运行给定函数，没有返还值。

语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

特点:
1.回调函数中有三个参数(item, index, array);
2.没有返回值,不会改变原数组;
3.只能遍历数组不能遍历伪数组;
4.内部的this指向window.
5.thisArg 可选参数。当执行回调函数callback时，用作this的值(即改变this的指向)。

forEach 循环不能被 return 终止，其作用和 for循环中的continue 相似只是跳出当前循环，继续执行下一次循环。在 forEach 中也不能使用 break，continue来跳出循环，同样会有报错。

<script>
        var arr = ['pink', 'deeppink', 'lightpink', 'hotpink']

        arr.forEach(function (item, index, arr) {
            if (index == 1) {
                return;
            }
            console.log(item);
        })
</script>

map()

map()：对数组中的每一项运行给定函数，返回一个由原数组每个元素执行回调函数的结果组成的新数组。

语法：var new_array = arr.map(callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])

特点:
1.回调函数中有三个参数(item, index, array);
2.有返回值,返回一个由原数组每个元素执行回调函数的结果组成的新数组,不会改变原数组;
3.只能遍历数组不能遍历伪数组;
4.内部的this指向window.
5.thisArg 可选参数。当执行回调函数callback时，用作this的值(即改变this的指向)。

<script>
        var arr = [11,22,33,44,55];
        var newArr = arr.map(function(item,index,arr){
                    console.log(item,index,arr);
                    return item+1;
            });
            console.log(newArr);
</script>

filter()

filter()：对数组中的每一项运行给定函数，返回执行该回调函数为true的项组成的新数组。利用这个方法可对数组元素进行过滤筛选。

语法：var newArray = arr.filter(callback(currentValue[, index[, array]])[, thisArg])

特点:
1.回调函数中有三个参数(item, index, array);
2.有返回值,返回一个由原数组每个元素执行回调函数结果为true的项组成的新数组,不会改变原数组;
3.只能遍历数组不能遍历伪数组;
4.内部的this指向window.
5.thisArg 可选参数。当执行回调函数callback时，用作this的值(即改变this的指向)。

<script>
        var arr = [11,22,33,44,55];
        var newArr = arr.filter(function(item,index,arr){
        console.log(item,index,arr);
        if(item > 22) return true;
        });
        console.log(newArr);
</script>

every()和some()

every()：测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
some()：测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。**

语法：arr.every(callback(element[, index[, array]])[, thisArg])
语法：arr.some(callback(element[, index[, array]])[, thisArg])

特点:
1.回调函数中有三个参数(item, index, array);
2.有返回值,返回值是布尔值,不会改变原数组;
3.只能遍历数组不能遍历伪数组;
4.内部的this指向window.
5.thisArg 可选参数。当执行回调函数callback时，用作this的值(即改变this的指向)。

<script>
        var arr = [1, 2, 3, 4, 5]；
        arr.every(function(item){return item < 10}) // true
        arr.every(function(item){return item % 2 === 0}) // false
        arr.some(function(item){return item % 2 === 0}) // true
        arr.some(isNaN) // false: a不包含非数值元素
</script>

注：
some()在有一个数组元素满足回调函数条件时就会停止遍历数组元素，返回布尔值true，否则一直循环;
every()则相反，它会判定每一个数组元素是否满足回调函数条件，如果全部满足则返回布尔值true，否则返回false。

位置方法：

indexOf()和lastIndexOf()

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

lastIndexOf()：该方法从数组的末尾开始向前查找,查到返回下标,查不到返回-1。

语法：arr.indexOf(searchElement[, fromIndex])
语法：arr.lastIndexOf(searchElement[, fromIndex])

特点:
1.方法中有两个参数(Element, fromIndex);—要查找元素和开始查找的位置。
2.有返回值,返回首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1。不会改变原数组;

拓展：如果该索引值fromIndex大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.

<script>
        var array = [2, 5, 9];
        array.indexOf(2);     // 0
        array.indexOf(7);     // -1
        array.indexOf(9, 2);  // 2
        array.indexOf(2, -1); // -1
        array.indexOf(2, -3); // 0
        var array = [2, 5, 9, 2];
        var index = array.lastIndexOf(2);   // 3
        index = array.lastIndexOf(7);      // -1
        index = array.lastIndexOf(2, 3);   // 3
        index = array.lastIndexOf(2, 2);   // 0
        index = array.lastIndexOf(2, -2);  // 0
        index = array.lastIndexOf(2, -1);  // 3
</script>

归并方法

reduce()和reduceRight()

reduce()和reduceRight()可自行拓展。

2.3 ES6数组方法:

form()

语法：Array.from(arrayLike[, mapFn[, thisArg]])

功能：将伪数组或可遍历对象转换为真正的数组;
返回值：一个新的数组实例。

<script>
        let arrayLike = {
            '0': 'a',
            '1': 'b',
            '2': 'c',
            length: 3
        }; 
        //转成数组
        let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
</script>

find()

语法：arr.find(callback[, thisArg])

功能：数组中第一个满足所提供测试函数的元素的值;
返回值：符合测试函数的数组元素,没有则返回 undefined。

<script>
        let ary = [{
            id: 1,
            name: '张三'
        }, { 
            id: 2,
            name: '李四'
        }]; 
        let target = ary.find((item, index) => item.id == 2);//找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个
</script>

findIndex()

语法：arr.findIndex(callback[, thisArg])

功能：用于找出第一个测试函数的数组成员的位置;
返回值：数组中通过提供测试函数的第一个元素的索引,如果没有找到返回-1。

<script>
        let ary = [1, 5, 10, 15];
        let index = ary.findIndex((value, index) => value > 9); 
        console.log(index); // 2
</script>

includes()

语法：arr.includes(valueToFind[, fromIndex])

功能：判断某个数组是否包含给定的值。
返回值：返回一个布尔值。

<script>
        [1, 2, 3].includes(2) // true
        [1, 2, 3].includes(4) // false
</script>