JavaScript中16种数组方法_简要介绍几中javascript数组方法

JavaScript中数组的方法

常见的数组方法：
join()
push()和pop()
shift() 和 unshift()
reserve()
sort()
fill()
concat()
slice()
splice()
includes()
indexOf()
forEach()
map()
every()
some()
reduce()

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

{
    let arr = [1, 2, 3];
    let a = arr.join("-");
    console.log(a);//输出 "1-2-3"

    //当只有一个元素的时候
    let arr1 = [1];
    let b = arr1.join("-");
    console.log(b);// "1" 输出该元素，但是该元素是字符串
}
1
2
3
4
5
6
7
8
9
10

2.push()，将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
pop()，从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

{
    let arr1 = [1, 2, 3];
    let arr2 = [4, 5];
    arr1.push(arr2)
    console.log(arr1);//输出 [ 1, 2, 3, [ 4, 5 ] ]
    arr2.push(6,7,8)
    console.log(arr2);//输出  [ 4, 5, 6, 7, 8 ]
}

{
    let arr1 = [1, 2, 3];
    arr1.pop();//不需要参数，直接删除数组的最后一个元素，再返回新的数组
    console.log(arr1);//输出 [1,2]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.shift() 和 unshift()
shift：从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
unshift：将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

{
    let arr1 = [1, 2, 3];
    let arr2 = [4, 5];
    arr1.unshift(arr2);
    console.log(arr1);//输出 [ [ 4, 5 ], 1, 2, 3 ]
    arr2.unshift(1, 2, 3);
    console.log(arr2);//输出 [ 1, 2, 3, 4, 5 ]
}

{
    let arr1 = [1, 2, 3];
    arr1.shift();
    console.log(arr1);//输出 [ 2, 3 ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.reserve()，将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

{
    let arr1 = [1, 2, 3];
    arr1.reverse()
    console.log(arr1);//输出 [3,2,1]
}
1
2
3
4
5

5.sort，可对数组元素进行排序，例如数组元素的长度（length）或者元素值得大小。

{
    let arr1 = [5, 2, 1, 9, 10];
    arr1.sort(function (a,b) {//参数是一个回调函数，且回调函数得参数是2个。
        return a - b;  //如果是a-b，那么就是升序排列，如果是b-a就是降序排列。
    })
    console.log(arr1);//输出 [ 1, 2, 5, 9, 10 ]

    let arr2 = ["a", "bb", "ccc", "dddd"];
    arr2.sort(function (a, b) {
        return b.length - a.length; //输出 [ 'dddd', 'ccc', 'bb', 'a' ]
    })
    console.log(arr2);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

6.fill()，用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

{
    let arr1 = [1, 2, 3, 4];
    //fill三个参数，第一个参数是要填充的值，第二个参数：起始索引，默认值为0。第三个参数：终止索引，默认值为 this.length。
    arr1.fill("a", 0, 2);
    console.log(arr1);//输出 [ 'a', 'a', 3, 4 ]
}
1
2
3
4
5
6

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

{
    let arr1 = [1, 2, 3, 4];
    let arr2 = ["a", "b"];
    let arr3 = arr1.concat(arr2);//用一个arr3接收产生的新数组。
    console.log(arr3);//输出 [ 1, 2, 3, 4, 'a', 'b' ]

    //参数可以不是数组。
    let arr4 = arr1.concat("aaa", "bbbb");
    console.log(arr4);//输出 [ 1, 2, 3, 4, 'aaa', 'bbbb' ]
    console.log(arr1); //输出 [ 1, 2, 3, 4 ]，并不改变原数组
}
1
2
3
4
5
6
7
8
9
10
11

8.slice()，就是对数组进行截取返回新数组，不改变原数组。

{
    let arr1 = [1, 2, 3, 4];
    //slice，2个参数，都是可选，
    //参数一：默认为0，表示起始索引位置，可以取该索引位置。
    //参数二：默认取到数组末尾，表示终止的索引位置，但是不能取到该索引位置。

    let arr2 = arr1.slice(1, 2);
    console.log(arr2);//输出 [ 2 ]

    let arr3=arr1.slice()
    console.log(arr3);//输出 [ 1, 2, 3, 4 ]

    console.log(arr1);//输出 [ 1, 2, 3, 4 ]，并不改变原数组
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

9.splice()，该方法通过参数选择传递，可实现对数组的删除、插入、替换，同时会改变原数组。
（1）删除

{    
    //删除
    //传递一个参数的时候表示从这个参数的位置开始一直截取到最后
    let arr = [2,4,6,7,8,9]; 
    console.log(arr);//[2,4,6,7,8,9]
    let n = arr.splice(2);//参数为2表示从索引下标为2的位置开始一直截取到数组的最后；
    console.log(n);//[6,7,8,9]//splice（）返回的是截取到的数组
    console.log(arr);//[2,4]//原来的数组结构发生改变，为splice截取之后剩下的数组
}

{

    //删除
    //传递两个参数，第一个参数表示开始的位置，第二个参数表示要截取的个数；如果第二个参数为0，则表示不截取，返回的空数组，原来的数组不变 
    let arr = [2,4,6,7,8,9]; 
    console.log(arr);//[2,4,6,7,8,9] 
    let n = arr.splice(2,3);//表示从下标位置为2开始截取3个数 
    console.log(n);  //[6, 7, 8] 
    console.log(arr);  //[2,4,9]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

（2）插入

{
    //插入  传3个参数，但是是第二个参数为0，
    let arr = [2,4,6,7,8,9]; 
    console.log(arr);//[2,4,6,7,8,9]
    let n = arr.splice(2,0,5);//表示在下标为2的位置，截取0个数组，在下标为2的位置添加一个新项
    console.log(n);//[]
    console.log(arr);//[2, 4, 5, 6, 7, 8, 9]
}
1
2
3
4
5
6
7
8

（3）替换

{
    //替换功能 当第二个参数不为0的时候,参数可以为数组。
    let arr = [2,4,6,7,8,9]; 
    console.log(arr);//[2,4,6,7,8,9]
    let n = arr.splice(2,3,5);//表示从下标为2的位置开始，删除3个项，在下标为2的位置添加一个数字为5的新项
    console.log(n);//[6, 7, 8]
    console.log(arr);//[2, 4, 5, 9]
}
1
2
3
4
5
6
7
8

10.includes()，用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

{
    let arr1 = [1, 2, 3, 4];
    console.log(arr1.includes(1));//输出 true
    console.log(arr1.includes(10));//输出 false
}
1
2
3
4
5

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

{
    let arr1 = [1, 2, 4,3, 4,];
    console.log(arr1.indexOf(4));//输出 2，返回第一次在该数组中找到4元素的索引。
    console.log(arr1.indexOf(0));//输出 -1， 找不到就返回-1
}
1
2
3
4
5

12.forEach()，对数组的每个元素执行一次给定的函数，对每个数组元素进行遍历，返回值是一个undefined。
注意：forEach方法一旦调用，就不能挑出循环，就算用break、return都不能奏效。
forEach的参数是一个回调函数。
回调函数的参数：
参数1：数组中正在处理的当前元素。（必选）
参数2：数组中正在处理的当前元素的索引。（可选）
参数3：正在操作的数组。（可选）

{
    let arr1 = [1, 2, 3, 4,];
    let a = arr1.forEach(function (item, index, arr) {
        console.log(item*10);//输出 10 20 30 40
        console.log(index); //输出每个元素的索引  0，1，2，3
        console.log(arr);//输出 [ 1, 2, 3, 4 ]
    })
    console.log(a)//undefined
}
1
2
3
4
5
6
7
8
9

13.map，创建一个新数组，其结果是该数组中的每个元素调用一次提供的函数后的返回值，返回值是一个新的数组。
map的参数是一个回调函数。
回调函数的参数：
参数1：数组中正在处理的当前元素。（必选）
参数2：数组中正在处理的当前元素的索引。（可选）
参数3：正在操作的数组。（可选）

{
    let arr1 = [1, 2, 3, 4,];
    let a = arr1.map(function (item, index, arr) {
            return item*2
        }
    )
    console.log(a);//输出 [ 2, 4, 6, 8 ]
    console.log(arr1); //输出 [ 1, 2, 3, 4 ]
    //map和forEach的区别：forEach返回值是undefined，map的返回值是：由原数组每个元素执行回调函数的结果组成的新数组。
    //map的速度大于forEach。
}
1
2
3
4
5
6
7
8
9
10
11

14.every()，测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
every的参数是一个回调函数。
回调函数的参数：
参数1：数组中正在测试的当前元素。（必选）
参数2：数组中正在测试的当前元素的索引。（可选）
参数3：正在操作的数组。（可选）

{
    let arr1 = [1, 2, 3, 4,];
    let a = arr1.every(function (x) {
        return x<2  //只有当数组的元素都满足这个条件才会返回true
    })
    let b = arr1.every(function (y) {
        return y>0
    })
    console.log(a);//返回false
    console.log(b);//返回true
}
1
2
3
4
5
6
7
8
9
10
11

15.some()，测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的，和every参数都是一样的，但是校验规则不一样，只有数组中至少有一个满足条件的就返回true，只有所有不满足的时候才返回false。

{
    let arr1 = [1, 2, 3, 4,];
    let a = arr1.some(function (x) {
        return x < 2;
    })
    let b = arr1.every(function (y) {
        return y>5
    })
    console.log(a);//输出 true
    console.log(b);//输出 false
}
1
2
3
4
5
6
7
8
9
10
11

16.reduce()，对数组中的每个元素执行一个由我们提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
参数1：回调函数

	*回调函数（callback）的参数：
	
		1：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值
		2：数组中正在测试的当前元素。（必选）
		3：数组中正在测试的当前元素的索引。（可选）
		4：正在操作的数组。（可选）*
1
2
3
4
5
6

参数2：作为第一次调用 callback 的第一个参数

{
    let arr1 = [1, 2, 3, 4,];
    let sum = arr1.reduce(function (p, item) {
        return p + item;
    },0)
    console.log(sum);//输出 10
}
1
2
3
4
5
6
7