数组常用属性和方法总结

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,458评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,454评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,171评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,062评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,440评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,661评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,906评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,609评论 0 200
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,379评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,600评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,085评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,409评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,072评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,088评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,860评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,704评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,608评论 2 270

推荐阅读更多精彩内容