技术控

    今日:56| 主题:49157
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 温故js系列(16)-数组&数组方法使用详解

[复制链接]
细软跑 发表于 2016-10-1 22:14:56
124 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Array对象

  之前一直在温故js系列,希望能够知新,不过最近应业务要求,在做移动WEB,需求大,任务多。所以,只有像现在闲着的时候才能继续温故js了。祖国母亲的生日,祝祖国繁荣昌盛O(∩_∩)O~ 不知道有多少程序猿宅在家里,多少程序猿堵在路上...  
  在 JavaScript 中 Array 是一个用来构造数组的全局对象,它是一个高阶的类似有序列表的对象,是JavaScript内置对象里非常重要的一个。
  创建数组:
  数组字面量

  1. var arr = [];
  2. var arr = [1, 2, 3];
  3. var arr = [[1],2,[2,[123]]];
复制代码
数组构造函数

  1. var arr = new Array();  //[]
  2. var arr = new Array(1,2,3); //[1, 2, 3]
  3. var arr = new Array(3);  //[undefined,undefined,undefined] 参数3为数组length
  4. var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]
复制代码
建议使用数组字面量方式,性能好,代码少,简洁,毕竟代码少。
  Array属性

      length属性  

    length属性返回数组的长度,是一个可变属性,表示一个数组中的元素个数。
    数组的索引由0开始,所以一个数组的最前和最后的值为限分别是:      arr[0]和      arr[arr.length-1]   
   
  1. var arr = [1,2,3];
  2. arr.length // 3
  3. arr.length = 2; //改变数组length,从后往前截取
  4. arr // [1,2],此时arr.length为2。所以平时我们可以用length来操作数组(删除,添加)
  5. arr.length = 4;
  6. arr // // [1,2,undefined,undefined],此时arr.length为2,后面填充undefined
复制代码
    prototype属性  

      prototype属性返回对象类型原型的引用,所有的数组实例都继承了这个属性,所有的数组方法都定义在 Array.prototype 身上。一般来说,我们经常用prototype属性来扩展数组方法:  
  1. //给数组添加个方法,返回数组中的最大值
  2. Array.prototype.max = function() {
  3.     return Math.max.apply(null,this);
  4. }
  5. [1,2,3,4].max(); //4
  6. //给数组添加个方法,给数组去重
  7. Array.prototype.unique = function() {
  8.     return this.filter((item, index, arr) => arr.indexOf(item) === index);
  9. }
  10. [11,2,1,1,2,3,1,2,4,5,23,2].unique(); //[11, 2, 1, 3, 4, 5, 23]
复制代码
数组去重:数组去重演化  
      constructor属性  

      constructor属性返回创建对象的函数,即构造函数。如下:  
  1. var arr = [1,2,3];
  2. arr.constructor  //function Array() { [native code] }
  3. arr.constructor === Array  //true  即 new Array
  4. var a = new Array();
  5. a.constructor === Array  //true
复制代码
对于数组来说,这个属性还是罕见使用的。
  数组判断

  Array.isArray()

      Array.isArray()方法用来判断某个值是否为Array。如果是,则返回 true,否则返回 false  
  1. Array.isArray([]);  //true
  2. Array.isArray([1,2,3]);  //true
  3. Array.isArray(new Array());  //true
  4. Array.isArray();  //false
  5. Array.isArray({});  //false
  6. Array.isArray(123);  //false
  7. Array.isArray('xzavier');  //false
复制代码
利用属性自己写方法

      Array.isArray()在ES5之前不支持,就自己写。不过现在都到ES6了,可以不管了。  
  1. Array.prototype.isArray = Array.prototype.isArray || function() {
  2.     return Object.prototype.toString.call(this) === "[object Array]";
  3. }
  4. [1,2,3].isArray(); //true
复制代码
数组遍历

  经典的    for  

  1. for (var index = 0; index < arr.length; index++) {
  2.     console.log(arr[index]);
  3. }
复制代码
这种写法很经典,就是语句多,但是性能好。
  ES5的    forEach  

  1. arr.forEach(function (value) {
  2.     console.log(value);
  3. });
复制代码
这种写法简洁,但这种方法也有一个小缺陷:你不能使用break语句中断循环,也不能使用return语句返回到外层函数。
  不建议的    for-in  

  1. for (var i in arr) {
  2.     console.log(arr[i]);
  3. }
复制代码
     for-in是为普通对象设计的,你可以遍历得到字符串类型的键,因此不适用于数组遍历。但是它能遍历数组,作用于数组的    for-in循环体除了遍历数组元素外,还会遍历自定义属性。举个例子,如果你的数组中有一个可枚举属性arr.name,循环将额外执行一次,遍历到名为“name”的索引。就连数组原型链上的属性都能被访问到。所以,不建议使用。  
  ES6的    for-of  

  1. var arr = new Array();  //[]
  2. var arr = new Array(1,2,3); //[1, 2, 3]
  3. var arr = new Array(3);  //[undefined,undefined,undefined] 参数3为数组length
  4. var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]0
复制代码
这是最简洁、最直接的遍历数组元素的语法。这个方法避开了for-in循环的所有缺陷。与forEach()不同的是,它可以正确响应break、continue和return语句。
  1. var arr = new Array();  //[]
  2. var arr = new Array(1,2,3); //[1, 2, 3]
  3. var arr = new Array(3);  //[undefined,undefined,undefined] 参数3为数组length
  4. var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]1
复制代码
数组方法细说

      splice插入、删除、换数  

  splice() 方法可以插入、删除或替换数组的元素,注意:    同时改变了原数组。  
    1.删除-删除元素,传两个参数,要删除第一项的位置和第二个要删除的项数
    2.插入-向数组指定位置插入任意项元素。三个参数,第一个参数(位置),第二个参数(0),第三个参数(插入的项)
    3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数。第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项)
   
  1. var arr = new Array();  //[]
  2. var arr = new Array(1,2,3); //[1, 2, 3]
  3. var arr = new Array(3);  //[undefined,undefined,undefined] 参数3为数组length
  4. var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]2
复制代码
    sort排序  

  sort() 方法对数组的元素做原地的排序,并返回这个数组。
  1. var arr = new Array();  //[]
  2. var arr = new Array(1,2,3); //[1, 2, 3]
  3. var arr = new Array(3);  //[undefined,undefined,undefined] 参数3为数组length
  4. var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]3
复制代码
这是因为    sort排序可能是不稳定的,默认按照字符串的Unicode码位点排序。  
  但是,    sort()方法接受一个参数,这个参数是一个函数,可选,用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。  
  1. var arr = new Array();  //[]
  2. var arr = new Array(1,2,3); //[1, 2, 3]
  3. var arr = new Array(3);  //[undefined,undefined,undefined] 参数3为数组length
  4. var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]4
复制代码
这个函数就是我们自己控制了,我们想要什么样的排序就改变这个参数函数的逻辑即可。
      slice截取、转化arguments伪数组  

      slice()方法可从已有的数组中返回选定的元素数组。不会修改原数组,只会会浅复制数组的一部分到一个新的数组,并返回这个新数组。  
  语法:    arrayObject.slice(start,end)参数可为正负。  
  1. var arr = new Array();  //[]
  2. var arr = new Array(1,2,3); //[1, 2, 3]
  3. var arr = new Array(3);  //[undefined,undefined,undefined] 参数3为数组length
  4. var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]5
复制代码
     slice方法经常用来截取一个数组,不过它更常用在将伪数组转化为真数组。平时我们的函数传的参数    arguments是一个伪数组,很多数组的方法不能使用,我们就需要将伪数组转化为真数组。  
  1. var arr = new Array();  //[]
  2. var arr = new Array(1,2,3); //[1, 2, 3]
  3. var arr = new Array(3);  //[undefined,undefined,undefined] 参数3为数组length
  4. var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]6
复制代码
    filter过滤  

      filter()方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。简单来说就是对数组进行过滤,返回一个过滤过的数组。  
  语法:    array.filter(function(currentValue,index,arr), thisValue)  
  1. var arr = new Array();  //[]
  2. var arr = new Array(1,2,3); //[1, 2, 3]
  3. var arr = new Array(3);  //[undefined,undefined,undefined] 参数3为数组length
  4. var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]7
复制代码
     filter()不会对空数组进行检测,不会改变原始数组。  
      concat连接数组  

  1. var arr = new Array();  //[]
  2. var arr = new Array(1,2,3); //[1, 2, 3]
  3. var arr = new Array(3);  //[undefined,undefined,undefined] 参数3为数组length
  4. var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]8
复制代码
我们平时都是这么使用的,如果需要连接两个数组的元素时,中间插元素,可以
  1. var arr = new Array();  //[]
  2. var arr = new Array(1,2,3); //[1, 2, 3]
  3. var arr = new Array(3);  //[undefined,undefined,undefined] 参数3为数组length
  4. var arr = new Array([1],2,[2,[123]]); //[[1],2,[2,[123]]]9
复制代码
不加参数相当于拷贝,返回数组的拷贝数组,是一个新的数组,并不是指向原来数组。
  1. var arr = [1,2,3];
  2. arr.length // 3
  3. arr.length = 2; //改变数组length,从后往前截取
  4. arr // [1,2],此时arr.length为2。所以平时我们可以用length来操作数组(删除,添加)
  5. arr.length = 4;
  6. arr // // [1,2,undefined,undefined],此时arr.length为2,后面填充undefined0
复制代码
插入删除

  前面讲了个    splice可以在数组的任何位置插入删除元素,这儿讲的是只能在首尾插入删除的方法,用起来也很方便。  
  在数组尾插入删除:
  1. var arr = [1,2,3];
  2. arr.length // 3
  3. arr.length = 2; //改变数组length,从后往前截取
  4. arr // [1,2],此时arr.length为2。所以平时我们可以用length来操作数组(删除,添加)
  5. arr.length = 4;
  6. arr // // [1,2,undefined,undefined],此时arr.length为2,后面填充undefined1
复制代码
在数组头插入删除:
  1. var arr = [1,2,3];
  2. arr.length // 3
  3. arr.length = 2; //改变数组length,从后往前截取
  4. arr // [1,2],此时arr.length为2。所以平时我们可以用length来操作数组(删除,添加)
  5. arr.length = 4;
  6. arr // // [1,2,undefined,undefined],此时arr.length为2,后面填充undefined2
复制代码
其他方法

  1. var arr = [1,2,3];
  2. arr.length // 3
  3. arr.length = 2; //改变数组length,从后往前截取
  4. arr // [1,2],此时arr.length为2。所以平时我们可以用length来操作数组(删除,添加)
  5. arr.length = 4;
  6. arr // // [1,2,undefined,undefined],此时arr.length为2,后面填充undefined3
复制代码
小试:(欢迎补充和斧正问题,更多方法延伸阅读:    ES6数组的扩展)  
  1. var arr = [1,2,3];
  2. arr.length // 3
  3. arr.length = 2; //改变数组length,从后往前截取
  4. arr // [1,2],此时arr.length为2。所以平时我们可以用length来操作数组(删除,添加)
  5. arr.length = 4;
  6. arr // // [1,2,undefined,undefined],此时arr.length为2,后面填充undefined4
复制代码
趣味探索

  1. var arr = [1,2,3];
  2. arr.length // 3
  3. arr.length = 2; //改变数组length,从后往前截取
  4. arr // [1,2],此时arr.length为2。所以平时我们可以用length来操作数组(删除,添加)
  5. arr.length = 4;
  6. arr // // [1,2,undefined,undefined],此时arr.length为2,后面填充undefined5
复制代码
   参考:      知乎问答   
    英文链接:      ECMA-262第90页 的描述,facebook登录后可查看全部。   
        延伸阅读:Why does ++[[]][+[]]+[+[]] return the string “10”?
友荐云推荐




上一篇:PPTV之大数据集群容器化研究
下一篇:Swift 模式匹配学习笔记1
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

147076491 发表于 2016-10-10 16:27:53
楼主,你说,你几个意思?
回复 支持 反对

使用道具 举报

奕瞳 发表于 2016-11-7 00:10:13
不要和我比懒,我懒得和你比.
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表