400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】Array数组函数实例方法

【Web前端基础知识】Array数组函数实例方法

valueOf(),toString()

valueOf方法是一个所有对象都拥有的方法,表示对该对象求值。不同对象的valueOf方法不尽一致,数组的valueOf方法返回数组本身。

toString方法也是对象的通用方法,数组的toString方法返回数组的字符串形式。

  1. var arr = [1, 2, 3]; 
  2. arr.toString() // "1,2,3" 

push(),pop()

push方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。

  1. var arr = []; 
  2. arr.push(1);  
  3. arr.push('a'); 
  4. arr.push(true, {})  
  5. console.log(arr); // [1, 'a', true, {}] 

上面代码使用push方法,往数组中添加了四个成员。

pop方法用于删除数组的最后一个元素,并返回该元素。注意,该方法会改变原数组。

  1. var arr = [1, 2, 3]; 
  2. ​ 
  3. console.log(arr.pop()); // 3 
  4. console.log(arr); // ['a', 'b'] 

对空数组使用pop方法,不会报错,而是返回undefined。

shift(),unshift()

shift()方法用于删除数组的第一个元素,并返回该元素。注意,该方法会改变原数组。

  1. var arr = ['a', 'b', 'c']; 
  2. arr.shift(); // 'a' 
  3. arr; // ['b', 'c'] 

上面代码中,使用shift()方法以后,原数组就变了。

unshift()方法用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。

  1. var arr = ['a', 'b', 'c']; 
  2. arr.unshift('x'); // 4 
  3. arr; // ['x', 'a', 'b', 'c'] 

unshift()方法可以接受多个参数,这些参数都会添加到目标数组头部。

  1. var arr = [ 'c', 'd' ]; 
  2. arr.unshift('a', 'b') // 4 
  3. arr // [ 'a', 'b', 'c', 'd' ] 

join()

join()方法以指定参数作为分隔符,将所有数组成员连接为一个字符串返回。如果不提供参数,默认用逗号分隔。

  1. var a = [1, 2, 3, 4]; 
  2. a.join(' ') // '1 2 3 4' 
  3. a.join(' | ') // "1 | 2 | 3 | 4" 
  4. a.join() // "1,2,3,4" 

concat()

concat方法用于多个数组的合并。它将新数组的成员,添加到原数组成员的后部,然后返回一个新数组,原数组不变。

  1. ['hello'].concat(['world']); // ["hello", "world"] 
  2. ['hello'].concat(['world'], ['!']);// ["hello", "world", "!"] 

除了数组作为参数,concat也接受其他类型的值作为参数,添加到目标数组尾部。

  1. [1, 2, 3].concat(4, 5, 6); // [1, 2, 3, 4, 5, 6] 

reverse()

reverse方法用于颠倒排列数组元素,返回改变后的数组。注意,该方法将改变原数组。

  1. var a = ['a', 'b', 'c']; 
  2. a.reverse(); // ["c", "b", "a"] 
  3. a; // ["c", "b", "a"] 

slice()

slice()方法用于提取目标数组的一部分,返回一个新数组,原数组不变。 arr.slice(start, end);

它的第一个参数为起始位置(从0开始,会包括在返回的新数组之中),第二个参数为终止位置(但该位置的元素本身不包括在内)。如果省略第二个参数,则一直返回到原数组的最后一个成员。

  1. var a = ['a', 'b', 'c']; 
  2. a.slice(0); // ["a", "b", "c"] 
  3. a.slice(1); // ["b", "c"] 
  4. a.slice(1, 2); // ["b"] 
  5. a.slice(2, 6); // ["c"] 
  6. a.slice(); // ["a", "b", "c"] 

如果slice()方法的参数是负数,则表示倒数计算的位置。

splice()

splice()方法用于删除原数组的一部分成员,并可以在删除的位置添加新的数组成员,返回值是被删除的元素。注意,该方法会改变原数组。arr.splice(start, count, addElement1, addElement2, ...);

splice的第一个参数是删除的起始位置(从0开始),第二个参数是被删除的元素个数。如果后面还有更多的参数,则表示这些就是要被插入数组的新元素。

  1. var a = ['a', 'b', 'c', 'd', 'e', 'f']; 
  2. a.splice(4, 2); // ["e", "f"] 
  3. a; // ["a", "b", "c", "d"] 

上面代码从原数组4号位置,删除了两个数组成员。

  1. var a = ['a', 'b', 'c', 'd', 'e', 'f']; 
  2. a.splice(4, 2, 1, 2); // ["e", "f"] 
  3. a; // ["a", "b", "c", "d", 1, 2] 

上面代码除了删除成员,还插入了两个新成员。

起始位置如果是负数,就表示从倒数位置开始删除。

  1. var a = ['a', 'b', 'c', 'd', 'e', 'f']; 
  2. a.splice(-4, 2); // ["c", "d"] 

上面代码表示,从倒数第四个位置c开始删除两个成员。

如果只是单纯地插入元素,splice方法的第二个参数可以设为0。

  1. var a = [1, 1, 1]; 
  2. a.splice(1, 0, 2); // [] 
  3. a; // [1, 2, 1, 1] 

如果只提供第一个参数,等同于将原数组在指定位置拆分成两个数组。

  1. var a = [1, 2, 3, 4]; 
  2. a.splice(2); // [3, 4] 
  3. a; // [1, 2] 

sort()

sort方法对数组成员进行排序,默认是按照字典顺序排序。排序后,原数组将被改变。

  1. ['d', 'c', 'b', 'a'].sort() 
  2. // ['a', 'b', 'c', 'd'] 
  3.  
  4. [4, 3, 2, 1].sort() 
  5. // [1, 2, 3, 4] 
  6.  
  7. [11, 101].sort() 
  8. // [101, 11] 
  9.  
  10. [10111, 1101, 111].sort() 
  11. // [10111, 1101, 111] 

上面代码的最后两个例子,需要特殊注意。sort()方法不是按照大小排序,而是按照字典顺序。也就是说,数值会被先转成字符串,再按照字典顺序进行比较,所以101排在11的前面。

如果想让sort方法按照自定义方式排序,可以传入一个函数作为参数。

  1. [10111, 1101, 111].sort(function (a, b) { 
  2.   return a - b; 
  3. }) 
  4. // [111, 1101, 10111] 

上面代码中,sort的参数函数本身接受两个参数,表示进行比较的两个数组成员。如果该函数的返回值大于0,表示第一个成员排在第二个成员后面;其他情况下,都是第一个元素排在第二个元素前面。

  1.   { name: "张三", age: 30 }, 
  2.   { name: "李四", age: 24 }, 
  3.   { name: "王五", age: 28  } 
  4. ].sort(function (o1, o2) { 
  5.   return o1.age - o2.age; 
  6. }) 
  7. // [ 
  8. //   { name: "李四", age: 24 }, 
  9. //   { name: "王五", age: 28  }, 
  10. //   { name: "张三", age: 30 } 
  11. // ] 

注意,自定义的排序函数应该返回数值,否则不同的浏览器可能有不同的实现,不能保证结果都一致。

以上是对数组创建方式和常用方法的描述,希望可以让你对数组有清晰的了解。

课程好礼申请领取
您的姓名
您的电话
意向课程
 

中公优就业

官方QQ

扫描上方二维码或点击一键加群,免费领取价值599元网课,加群暗号:599。 一键加群

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
 
课程资料、活动优惠 领取通道
 
 
网站地图 500w彩票网开户 500w彩票网平台 500万彩票网即时比分
申博娱乐现金开户 菲律宾申博娱乐网官网 澳门申博官网 申博娱乐三公现金
y8cc永利娱乐 w华人博彩论坛 W彩票网澳洲3分彩 欧洲优惠代理最占成
500w彩票注册 cc彩票平台官网 快乐彩票网游戏 五星彩票网平台
彩29彩票app下载 500w彩票网注册 58彩票网官方网 彩29彩票网注册
767XTD.COM 598XTD.COM XSB163.COM S618X.COM 11sbsun.com
304ib.com 917SUN.COM 978cw.com 978jbs.com 787cw.com
XSB2222.COM 886XTD.COM 977XTD.COM 132psb.com 55TGP.COM
688XTD.COM 1555DZ.COM S6185.COM 518jbs.com 777sbsg.com