Js内置对象Array常用方法

你一定在面试中遇到过,别说没有

一,会改变原数组

1. 移除数组末尾最后一项.pop(),返回删除的元素

如果你在一个空数组上调用 pop(),它返回 undefined

1
2
3
4
5
6
7
let word = ['a', 'b', 'c', 'd'];  
let newArr = word.pop();
console.log(word); //['a', 'b', 'c']
console.log(newArr); //d

let nullArr = [];
console.log(nullArr.pop()); //undefined

2. 在数组末尾添加一个或多个元素.push(),返回修改后数组长度

1
2
3
4
let word = ['a', 'b', 'c', 'd'];  
let newArr = word.push('e','f');
console.log(word); //['a', 'b', 'c', 'd', 'e', 'f']
console.log(newArr); //6

3. 移除数组第一项.shift(),返回移除的元素

1
2
3
4
let word = ['a', 'b', 'c', 'd'];  
let newArr = word.shift();
console.log(word); //['b', 'c', 'd']
console.log(newArr); //a

4. 在数组头部添加一个或多个元素.unshift(),返回修改后数组长度

1
2
3
4
let word = ['a', 'b', 'c', 'd'];  
let newArr = word.unshift('11','22');
console.log(word); //['11', '22', 'a', 'b', 'c', 'd']
console.log(newArr); //6

5. 对数组元素排序.sort(),返回排序后的数组

默认排序顺序是根据字符串Unicode码点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let fruit = ['cherries', 'apples', 'bananas'];  
console.log(fruit.sort()); // ['apples', 'bananas', 'cherries']

let scores = [1, 10, 21, 2];
console.log(scores.sort());
// [1, 10, 2, 21]
// 注意10在2之前,
// 因为在 Unicode 指针顺序中"10"在"2"之前

let things = ['word', 'Word', '1 Word', '2 Words'];
console.log(things.sort());
// ['1 Word', '2 Words', 'Word', 'word']
// 在Unicode中, 数字在大写字母之前,
// 大写字母在小写字母之前.

function compare(a, b) {
if(a < b) {
return -1;
}else if(a > b) {
return 1;
}else {
return 0;
}
}
let num = [1, 10, 21, 2];
console.log(num.sort(compare)); //[1, 2, 10, 21]

6. 颠倒数组元素.reverse(),返回颠倒后的数组

1
2
3
4
let word = ["a", "b", "c", "d"];  
let newArr = word.reverse();
console.log(word); //["d", "c", "b", "a"]
console.log(newArr); //["d", "c", "b", "a"]

7. 删除或插入元素.splice(),返回数组删除的项,没有删除的项,返回空数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var word = ['a', 'b', 'c', 'd'];  
//删除,前闭后开
var newArr = word.splice(0,2);
console.log(word); //["c", "d"]
console.log(newArr); //["a", "b"]

//插入,当前数组索引1处插入hello
var newArr = word.splice(1,0,'hello');
console.log(word); //["c", "hello", "d"]
console.log(newArr); //[]

//替换
var newArr = word.splice(1,1,'world');
console.log(word); //["c", "world", "d"]
console.log(newArr); //["hello"]

二,不会改变原数组

1. 合并两个或多个数组.concat(),返回新数组

1
2
3
4
5
let word = ['a', 'b', 'c', 'd'];  
let word2 = ['hello','world'];
let newArr = word.concat(word2);
console.log(word); //["a", "b", "c", "d"]
console.log(newArr); //["a", "b", "c", "d", "hello", "world"]

2. 将数组所有元素连接成一个字符串.join(),返回连接后的字符串

1
2
3
4
let word = ['a', 'b', 'c', 'd'];  
let newArr = word.join('---');
console.log(word); //["a", "b", "c", "d"]
console.log(newArr); //a---b---c---d

3. 截取数组元素到新数组中.slice(),返回新数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let word = ['a', 'b', 'c', 'd'];  
//原数组索引为1开始截取后面所有元素
let newArr = word.slice(1);
console.log(word); //["a", "b", "c", "d"]
console.log(newArr); //["b", "c", "d"]

//截取原数组索引为1到3之间的元素,前闭后开
let newArr2 = word.slice(1,3);
console.log(word); //["a", "b", "c", "d"]
console.log(newArr2); //["b", "c"]

//截取原数组倒数第三个元素与倒数第一个元素之间的元素,前闭后开
let newArr3 = word.slice(-3,-1);
console.log(word); //["a", "b", "c", "d"]
console.log(newArr3); //[["b", "c"]

4. 获取查询元素第一次出现的索引.indexOf(),找不到查询元素,则返回-1

1
2
3
4
5
let word = ['a', 'b', 'b', 'c', 'd'];  
let index = word.indexOf('b'); //1,第一次出现b的索引值
let index2 = word.indexOf('hello'); //-1
console.log(index);
console.log(index2);

5. 获取查询元素最后一次出现的索引.lastIndexOf(),找不到查询元素,则返回-1

1
2
3
4
5
let word = ['a', 'b', 'b', 'c', 'd'];  
let index = word.lastIndexOf('b'); //2,最后一个b的索引值为2
let index2 = word.lastIndexOf('hello'); //-1
console.log(index);
console.log(index2);

6. toString()返回有数组每个元素的字符串形式拼接而成的以逗号分隔的字符串

1
2
3
let word = ['a', 'b', 'b', 'c', 'd'];  
let str = word.toString(); //a,b,b,c,d
console.log(str);

7. toLocaleString()返回一个字符串表示数组中的元素

更多了解查看MDN

三,迭代方法

每个方法接受含有三个参数的函数,三个参数为:数组中的项,元素索引,数组本身

  • every(),数组所有元素都满足要求则返回true,否则返回false
  • some(),只要有满足要求的就返回true
  • filter(),返回过滤后的结果数组
  • map(),返回在函数中处理过的数组
  • forEach(),遍历整个数组
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    var number = [1,2,3,4,5,6,7,8];  
    var res = number.every(function(item, index, array) {
    return (item > 2);
    })
    console.log(res); //false

    var res = number.some(function(item, index, array) {
    return (item > 2);
    })
    console.log(res); //true

    var res = number.filter(function(item, index, array) {
    return (item > 2);
    })
    console.log(res); //[3, 4, 5, 6, 7, 8]

    var res = number.map(function(item, index, array) {
    return (item * 2);
    })
    console.log(res); //[2, 4, 6, 8, 10, 12, 14, 16]

    var res = number.forEach(function(item, index, array) {
    //执行某些操作
    })

四,归并方法

迭代数组所有项,构建最终返回值,每个方法接受两个参数:调用的函数和作为归并基础的初始值。函数接受4个参数:前一个值,当前值,项索引,数组本身。函数返回的值都会作为第一个参数自动传给下一项,第一次迭代从数组第二项开始,当前值为数组第二项

  • reduce(),从数组第一项开始遍历到最后
  • reduceRight(),从数组最后一项开始遍历到第一项
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     /* 
    开始执行回调函数cur为2,prev为1,
    第二次执行回调函数,在之前的基础上加1
    函数返回的值都会作为一个参数传给下一项,
    最后执行函数时就是28+8
    */
    var number = [1,2,3,4,5,6,7,8];
    var res = number.reduce(function(prev, cur, index, array) {
    return prev + cur;
    })
    console.log(res); //1+2+3+4+5+6+7+8=36

    var res = number.reduceRight(function(prev, cur, index, array) {
    return prev + cur;
    })
    console.log(res); //8+7+6+5+4+3+2+1=36