数组常用属性和方法总结

2016-09-07  本文已影响2400人  南航
  1. 数组也是对象，数组有对象的所有方法

1. 数组属性（2个主要属性）

  1. length -> 万年不变的最常用属性

使用length 应该注意的几个问题 （javascript 很容易因为length 的问题导致整个数组的长度修改，其他的多数语言不允许修改数组的长度）

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

      var arr = [1, 2 ,3];
      arr.length = 5;
      arr // [1, 2, 3, undefined, undefined]
    
      arr.length = 1;
      arr // [1];
    
* 通过索引对 arr 的元素赋值会引起 arr 值得改变（正常情况），但是对 arr  的索引超过其长度时也会引起 arr 的长度发生变化

      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];

  1. prototype 返回对象类型原型的引用 (主要作用：对数组进行扩展)

    eg: 向数组中添加 max 方法， 使得数组可以使用 max() 取得 最大值

       function max() {
       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;
   }
   
   Array.prototype.max = max;
   
   [1,2,5,4,6].max() // 6

2.数组方法 （注意数组方法的大小写） + 方法最重要的就是 return 和 参数

数组的增 删 改 查

速记版本

    栈方法： push() , pop()
    队列方法：  shift()   unshiift()
    重排序方法：reverse()   sort()
    分割合并方法： slice() splice() concat()  join()

    数组遍历: map()  foreach()  filter()

** 注意 操作数组以后的返回值： 是否为数组？ 字符元素？，是否覆盖原来的数组 **

map() 根据操作值改变原数组
foreach() 不需要返回值，用来操作元素
filter() 根据返回的布尔值 构成新数组，不影响原数组

  concat 和 slice 都会返回一个新数组，不会更改原来的数组

  var arr = new Array('张三', '李四');
  arr instanceof Array     // true
  Array.isArray(arr)       // true    // 数组的两个对比方法
                                      // 栈方法和队列方法的顺序很重要
 arr.push('王五')         //return：3           数组：[ '张三', '李四', '王五' ]   
 arr. pop()              //return '王五'        数组：[ '张三', '李四' ]   
 arr.shift()              //return: 张三         数组：['李四' ]  
 arr.unshift('赵六')       // return:  2         数组 ：['赵六', '李四']

 arr.reverse()             // return ['李四', '赵六']
 arr.sclice(0, 1);         // return ['李四']     原数组： ['李四', '赵六']
 arr.splice(0, 1, '小小')   // return ['小小']   原数组：['小小', '赵六']

es6 新增的几个很有用的方法

find( Fun ) // 返回 元素
findIndex( Fun ) // 返回元素位置
includes( ele ) // 返回 布尔值

<ps: 最早的分类....>
  查/索引： indexOf,
  增： push, unshift,  concat, join
  删： pop, shift, slice
  改： splice  万能方法
  其他：sort(), reverse()

    数组的截取和合并：splice 和 concat
    数组和字符串的转换:  join (toLocaleString 、toString 、valueOf)
        [1, 2, 3, 4, 5].join('') //12345;
        'language'.split('') //['l', 'a', 'n', 'g', 'u', 'a', 'g', 'e'];
    数组的拷贝:  concat(), slice(0)
    数组元素的排序 sort() , reverse()

`注意数组元素的长度（length）是可变的`
`concat 和 slice 都会返回一个新数组，不会更改原来的数组`

es5 的数组9个实用方法

Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight

  1. indexOf () return 当前元素在数组中的索引 对用 lastIndexof (这个不解释)

    该返回值配合数组的 splice,slice 或者 字符串的 slice,substr,substring 等增删改方法有奇效。

  2. sort 返回排序好的数组

     可按照自定义的逻辑排序

  3. push 将元素添加至数组的末尾, 与 pop 对应

     var arr = []
 arr.pop(); // 空数组继续pop不会报错，而是返回undefined
 arr; // []

  4. shift 将数组队首的元素删除，与 unshift 对应

     var arr = [];
 arr.unshift() //  空数组继续 shift 不会报错，而是返回 undefined
 arr;  // []

  5. concat 方法 concat(arr1, arr2, arr3) return 一个连接好的新数组

    注意点：concat 会返回一个新数组，而不修改原来的数组

  6. slice 方法 slice(start,end) return 一个分割好的新数组

    注意点： slice会返回一个新数组，而不是修改原来的数组

     slice 对应 string 的 subString 方法，截取元素返回一个新的 Array

 var arr = [1, 2, 3, 4]
 arr.slice(1, 3) //[2, 3, 4]

  7. 数组元素反转 reverse() reverse() // 没有参数

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

  8. splice 数组修改的万能方法 splice (index, count, ele1, ele2 ....)

    注意点：

         index 可以为负数，表示从队尾开始修改
     
     count 需要 删除 的数量， 为 0 表示不删除
     
     ele1, ele2...... 可以向数组中添加的元素
     
 var arr = [1, 2, 3, 4];
 arr.splice(1, 0, '1', '3');
 arr // [1, '1', '3', 2, 3, 4]

  9. join 将元素用指定的字符串连接起来 ,join 会将每个元素 转换成为字符串再进行连接

     var arr = [1, 3, 'w', 'r'];
 arr.join('-');
 arr // "1-3-w-r"

3. 数组的遍历方法

  1. 万年不变的 for 循环 注意不要使用 for in 循环 ，有坑自己找

  2. array.forEach(callback (currentValue, index, array)[, thisArg]) 直接修改原数组

    forEach 中的callback 有三个参数

    作用： 为了为每个元素都执行添加执行某个函数

  3. array.map(callback (currentValue, index, array)[, thisArg]) 返回一个新数组

    返回一个经过处理的新数组,不会破坏原来的数组

  1. array.every(callback(currentValue, index, array)[, thisArg]) 返回一个 true / false

    测试数组的所有元素是否都通过了指定函数的测试。 (&& 的概念)

  2. array.some(callback[, thisArg]) 返回一个 true/false

    测试数组中的某些元素是否通过了指定函数的测试 （|| 的概念）

     需要在此注意 方法的对应性  -> 一个很好的理解和记忆的思路
 
 some (||的类比) + every（&& 的类比）

  3. var new_array = arr.filter(callback(currentValue, index, array)[, thisArg]) 返回一个函数处理结果为 true 的元素组成的数组 返回一个新数组

     function isBigEnough (value) {
     return value > 10;
 }   
 
 var filtered = [1, 12, 3, 54, 10].filter(isBigEnough);
 
 filtered // [12, 54]

4. 数组特殊处理的应用

  1. 数组的值比较 是否相等（因为数组为引用类型的数据，所以数组不能直接比较）

     eg: var arr = ['1', '2', '3'];
     var arr2 = ['1', '2', '3'];
     
     arr == arr2 ?   // false

    数组比较值是否相等的集中方法

    • 将数组转换为字符串然后比较其是否相等

        eg: var arr = ['1', '3', '2'];
          
      var arr2 = ['1', '3', '2'];
      
      arr.toString() == arr2.toString() ? // true

      但是当数组中的值大小相同，但因为数组顺序不同时转出来的字符串也不相同

        ['1', '2', '3'].toString() == ['1', '3', '2'].toString ?  //false

      现将数组进行排序，然后作比较。

        var arr = ['1', '2', '3'];
  var arr2 = ['1', '3', '2'];
  
  arr.sort().toString() == arr2.sort().toString() ?   // true

  2. 判断数组中是否有 空值 arr[index] =="" || typeof(arr[index]) == 'undefined'

    typeof(arr[index]) == 'undefined' 主要用于判断数组无意间加长后数组中会增加 undefined 值

  3. 数组复制 主要原理： 寻找数组中可以返回新数组的方法

    1. concat 数组的方法，返回一个新数组,在 concat 后面不连接任何元素即可返回 新数组

      var arr = [1, '23', 2];
      var arr2 = arr.concat();
      arr2 // [1,'23',2];
      arr // [1,'23',2];

    2. slice 数组的方法，返回一个新数组, slice 不采取任何符号切分即可返回一个新数组

      var arr = ['1', '2', '3'];
      var arrCopy = arr.slice();
      arr // ['1', '2', '3'];
      arrCopy // ['1', '2', '3'];

  4. 数组和数组字符之间的转换

    数组转为字符数组
    arr = [1,2,3,4];
    var arrString = "[" + arr + "]"; //"[1,2,3,4]"

    字符数组转为数组
    eval('(' + arrString + ')'); //[1,2,3,4];

上一篇 下一篇

猜你喜欢

热点阅读