Fork me on GitHub

javascript中数组属性和方法的总结

发表于 | 分类于 |

1.数组属性

1.length->常用属性
使用的时候应该注意：javascript很容易改变length属性的值，从而改变数组的长度。

  • 对arr的length赋值会导致arr修改

    1
    2
    3
    4
    5
    6
    var arr = [1,2,3];
    arr.length = 4;
    console.log(arr);// [1,2,3,undefined]
    console.log(arr[4]);
    arr.length = 1;
    console.log(arr);//[1]

  • 通过索引对 arr 的元素赋值会引起 arr 值得改变（正常情况），但是对 arr 的索引超过其长度时也会引起 arr 的长度发生变化

    1
    2
    3
    4
    5
    6
    7
    var arr = [1, 2, 3];
    arr[2] = 5;
    arr // [1, 2, 5];

    var arr = [1, 2, 3];
    arr[4] = 9;
    arr // [1, 2, 3, undefined, 4];

    2.prototype返回对象类型原型的引用
    作用：对数组功能进行扩展。

    1
    2
    3
    4
    5
    6
    7
    8
    9
     eg:求数组中元素的最大值
    Array.prototype.max = function () {
        var ele = this[0];
        for (var i = 0; i < this.length-1; i++) {
            ele =this[i] > this[i + 1] ? this[i] : this[i + 1];
        }
        return ele;
    }
    console.log([1, 5, 4].max())//5

2.数组的方法

1
2
3
4
5
6
7
检测数组：instanceof，isArray
转换数组：toString，valueOf，join
栈操作：push，pop
队列操作：shift，unshift
排序：reverse，sort
操作方法：concat，slice,splice
位置方法：indexOf,lastIndexOf

es6中数组的方法：

1
2
3
4
5
6
7
from
of
find,findIndex
map,filter
includes
reduce
some,every

1.instanceof(返回boolean类型的值)

1
2
var arr = [1,2,3];
console.log(arr instanceof Array)// true

2.isArray(返回boolean类型的值)

1
2
var arr = [1,2,3]
console.log(Array.isArray(arr))//true

3.toString
作用：把数组转换成字符串，每一项用,分隔

1
console.log([1,2,3].toString())// 1,2,3

4.valueOf
作用：返回数组对象本身

1
console.log([1,2,3].valueOf())// [1,2,3]

5.join
作用：只有一个参数，可以选择其他字符串分隔数组项

1
console.log([1,2,3].join("-"))// 1-2-3

6.push
作用：从尾部插入元素，返回的是新数组的长度，参数是任意的数量

1
2
3
var arr = [1,3,5,7]
console.log(arr.push(3));//5
console.log(arr);// [1,3,5,7,3]

7.pop
作用：从尾部删除元素，返回的是被删除的元素，无参数。

1
2
3
var arr = [1,3,5,7]
console.log(arr.pop());// 7
console.log(arr);// [1,3,5]

8.shift
作用：从头部删除元素，返回的是被删除的元素，无参数

1
2
3
var arr = [1,3,5,7]
console.log(arr.shift());//1
console.log(arr);//[3,5,7]

9.reverse
作用：翻转数组，无参数。

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

10.sort
作用：对数组按一定的顺序排序。

1
2
3
4
5
6
7
8
9
eg:无参数时，按照unicode编码比较
var arr = [1,3,2,7]
console.log(arr.sort());// [1,2,3,7]
eg:有参数，传入的是一个比较的函数
var arr = [1,3,2,7,4]
console.log(arr.sort(function (a, b) {
    return a - b;
}));// [1,2,3,4,7] 按照从小到大排序
console.log(arr);// [1,2,3,4,7]

11.concat
作用：把传入的参数拼接到当前的数组中去,返回一个新的数组，不改变原先的数组。

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

12.slice
作用：从当前的数组中截取一个新的数组，不影响原来的数组。

1
2
3
4
var arr = [2,4,6,8];
console.log(arr.slice(0));//[2,4,6,8] 若是一个参数，就是从当前的索引一直到数组末尾的所有项
console.log(arr.slice(1, 2));//4  第一个参数是开始的索引，第二个参数是结束的索引，返回的结果不包括结束的索引项的值
console.log(arr);// [2,4,6,8]

13.splice
作用：删除或者替换当前数组的某些项，影响原先的数组。

1
2
3
4
var arr = [1,2,3,4,5];
console.log(arr.splice(0, 2));// [1,2] 第一个参数是开始的索引，第二个参数是删除的个数，返回的是删除元素组成的数组
console.log(arr.splice(1,3,9,10,11))//[2,3,4] 第一个参数是开始的索引，第二个参数是删除的个数，其他的参数是要在删除位置插入的新元素
console.log(arr);// [1,9,10,11,5]

14.from

1
2
3
4
5
6
7
8
9
10
11
12
var arrayLike = {
    '0':'a',
    '1':'b',
    '2':'c',
    'length':2
};
//将伪数组转化为数组
var array = [].slice.call(arrayLike);
console.log(array);//[a,b]
//ES6版本
var array = Array.from(arrayLike);
console.log(array);//[a,b]

15.of
作用：将一组值，转换为数组

1
2
3
4
5
6
7
8
9
console.log(Array.of(3,2,1))//[3,2,1]
注意：这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。
Array()//[]
Array(3)//[,,,]
Array(3,2,1)//[3,2,1]
Array.of方法可以用下面的代码模拟实现：
function ArrayOf(){
 return [].slice.call(arguments);
}

16.find/findIndex
作用：查找：第一个符合的元素，并返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var array = [1, 2, 3, 4, 5];
array.forEach(function (value) {
 if(value <3){
 //问题：没办法让他停下来
 }
 });
for(let i =0; i<array.length;i++){
 if(array[i] < 3){
 console.log(array[i]);
 break;
 }
 }
   //ES6写法
var value = array.find(function (item) {
 return item <3;
 });
   //查找第一个符合元素
var value = array.find(item=>item < 3);// 1 用箭头函数写也是可以的
    //查找第一个符合元素的索引
var value = array.findIndex(item=>item < 3);// 0 用箭头函数写也是可以的
console.log(value);

17.map
作用：把一个数组根据一定的规则之后映射到一个新的数组中去。

1
2
3
4
5
var array = [1, 2, 3, 4, 5];
var newarr = array.map(function (item) {
    return 10 + item;
});
console.log(newarr);//[10,12,13,14,15]

18.filter
作用：对于符合要求的数组的值，添加到一个新的数组中去。

1
2
3
4
5
6
7
8
9
var array = [1,2,3,4,5];
var newarr = array.filter(function (item) {
    return item < 3;
});
var newarr1 = array.filter(function(item){
    return true;
    })
console.log(newarr);//[1,2]
console.log(newarr1);//[1,2,3,4,5]

19.includes
作用：返回的是一个布尔值，表示某个数组是否包含给定的值，与字符串中includes方法类似。

1
2
3
var array = [1,2,3,4,5];
console.log(array.includes(3));//true
console.log(array.includes(6));//false

20.reduce
作用：通过一定的规则，实现积累的过程。

1
2
3
4
5
6
var array = [1, 2, 3, 4, 5];
var finalValue = array.reduce(function (sum, now) {
    //sum:每次的累加和  now是每次要累加的数值
    return sum + now;
}, 0);//这个0是加的初值
console.log(finalValue); //15

  1. some
    作用：遍历数组，在每一项元素后面触发一个回调函数，通过判断，返回一个布尔值。只要有一个满足判断的就返回true
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var todos =[
          {id:1,name:'吃饭',completed:true},
          {id:2,name:'睡觉',completed:true},
          {id:3,name:'学习',completed:true},
          {id:4,name:'学习',completed:false}
          ]
        var result = todos.some(function(item){
          if(!item.completed){
            return true  // 遇到了返回true就会停止遍历
          }  
        })
        console.log(result)//true

22.every
作用：遍历数组，在每一项元素后面触发一个回调函数，通过判断，返回一个布尔值。只要有一项不满足判断，就返回false

1
2
3
4
5
6
7
8
9
10
11
12
13
var todos =[
      {id:1,name:'吃饭',completed:true},
      {id:2,name:'睡觉',completed:true},
      {id:3,name:'学习',completed:true},
      {id:4,name:'学习',completed:true}
      ]
    var result = todos.every(function(item){
      //有一项不满足判断就返回一个false
      if(!item.completed){
        return true
      }
    })
    console.log(result)//false

-------------本文结束感谢您的阅读-------------