Array方法

1、查找元素

  indexOf()用来查找传进来的参数在目标数组中是否存在。如果目标数组包含该参数,就返回该元素在数组中的索引;如果不包含,就返回-1。

  如果数组中包含多个相同的元素,indexOf()函数总是返回第一个与参数相同的元素的所有。有另外一个功能与之相似的函数:lastIndexOf(),该函数返回相同元素中最后一个元素的索引,如果没找到相同元素,则返回-1。

1.    var names = ["David", "Cynthia", "Raymond", "Clayton", "Jennifer"];
2.
3. var pos = names.indexOf("Raymond");
4. if (pos >= 0) {
5. console.log("Found Raymond at position " + pos);
6. } else {
7. console.log("Raymond not found in array.");
8. }
9.
10. // >>> 输出 Found Raymond at position 2

2、数组的字符串表示

  有两个方法可以将数组转化为字符串:join()和toString()。这两个方法都返回一个包含数组所有元素的字符串,各元素之间用逗号分隔开。

1.    var names = ["David", "Cynthia", "Raymond", "Clayton", "Jennifer"];
2.
3. var namestr = names.join();
4. console.log(namestr); // David,Cynthia,Raymond,Clayton,Jennifer
5.
6. namestr = names.toString();
7. console.log(namestr); // David,Cynthia,Raymond,Clayton,Jennifer

3、由已有数组创建新数组

  concat()和splice()方法允许通过已有数组创建新数组。Concat方法可以合并多个数组创建一个新数组,splice()方法截取一个数组的子集创建一个新数组。

  concat()方法的工作原理:该方法的发起者是一个数组,参数是另一个数组。作为参数的素组,其中的所有元素都被连接到调用concat()方法的数组后面。

1.    var cisDept = ["Mike", "Clayton", "Terrill", "Danny", "Jennifer"];
2. var dmpDept = ["Raymond", "Cynthia", "Bryan"];
3.
4. var itDiv = cis.concat(dmpDept);
5. console.log(itDiv); // ["Mike", "Clayton", "Terrill", "Danny", "Jennifer", "Raymond", "Cynthia", "Bryan"]
6.
7. itDiv = dmpDept.concat(cisDept);
8. console.log(itDiv); // ["Raymond", "Cynthia", "Bryan", "Mike", "Clayton", "Terrill", "Danny", "Jennifer"]

  splice()方法从现有数组里截取一个新数组。该方法的第一个参数是截取的起始索引,第二个参数是截取的长度。

1.    var itDiv = ["Mike", "Clayton", "Terrill", "Raymond", "Cynthia", "Danny", "Jennifer"];
2. var dmpDept = itDiv.splice(3, 3);
3.
4. console.log(dmpDept); // ["Raymond", "Cynthia", "Danny"]
5. console.log(cisDept); // ["Mike", "Clayton", "Terrill", "Jennifer"]

4、为数组添加元素

  有两个方法可以为数组添加元素:push() 和unshift()。push()方法会将一个元素添加到数组末尾。

1.    var nums = [1, 2, 3, 4, 5];
2. console.log(nums); // 1, 2, 3, 4, 5
3.
4. nums.push(6);
5. console.log(nums); // 1, 2, 3, 4, 5, 6

  和在数组的末尾添加元素比起来,在数组的开头添加元素更难。如果不利用数组提供的可变函数,则新的元素添加进来后,需要把后面的每个元素都相应地向后移一个位置。unshift()方法可以将元素添加在数组的开头。

1.    var nums = [2, 3, 4, 5];
2. console.log(nums); // 2, 3, 4, 5
3.
4. nums.unshift(1);
5. console.log(nums); // 1, 2, 3, 4, 5

5、从数组中删除元素

  使用pop()方法可以删除数组末尾的元素。使用shift() 方法可以删除数组的第一个元素。

1.    var nums = [1, 2, 3, 4, 5];
2. console.log(nums); // 1, 2, 3, 4, 5
3.
4. nums.pop();
5. console.log(nums); // 1, 2, 3, 4
6.
7. nums.shift();
8. console.log(nums); // 2, 3, 4

6、从数组中间位置添加和删除元素

  删除数组中的第一个元素和在数组开头添加一个元素存在同样的问题——两种操作都需要将数组中的剩余元素向前或向后移,然而splice()方法可以帮助我们执行其中任何一种操作。使用splice() 方法为数组添加元素,需提供如下参数:

  • · 起始索引(也就是你希望开始添加元素的地方);
  • · 需要删除的元素个数(添加元素时该参数设为0);
  • · 想要添加进数组的元素。
9.    var nums = [1, 2, 3, 7, 8, 9];
10. var newElements= [4, 5, 6];
11.
12. nums.splice(3, 0, newElements);
13. console.log(nums); // 1, 2, 3, 4, 5, 6, 7, 8, 9
14.
15. // 要插入数组的元素不必组织成一个数组,它可以是任意的元素序列
16. var nums1 = [1, 2, 3, 7, 8, 9];
17. nums1.splice(3, 0, 4, 5, 6);
18. console.log(nums); // 1, 2, 3, 4, 5, 6, 7, 8, 9
19.
20. // 使用splice()方法从数组中删除元素
21. var nums2 = [1, 2, 3, 100, 200, 300, 400, 4, 5];
22. nums2.splice(3, 4);
23. console.log(nums2); // 1, 2, 3, 4, 5

7、为数组排序

  reverse() 方法将数组中元素的顺序进行翻转。sort()方法时按照字典顺序对元素进行排序的,因此它嘉定元素都是字符串类型,即使元素时数字类型,也被认为是字符串类型。为了让sort()方法也能排序数字类型的元素,可以在调用方法时传入一个大小比较函数,排序时,sort()方法将会根据该函数比较数组中两个元素的大小,从而决定整个数组的顺序。

1.    // reverse()方法
2. var nums = [1, 2, 3, 4, 5];
3. nums.reverse();
4.
5. console.log(nums); // 5, 4, 3, 2, 1
6.
7. // sort()方法
8. var names = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];
9. names.sort();
10. console.log(names); // Bryan, Clayton, Cynthia, David, Mike, Raymond
11.
12. var nums1 = [3, 1, 2, 100, 4, 200];
13. nums1.sort();
14. console.log(nums1); // 1, 100, 2, 200, 3, 4
15.
16. nums1.sort(function(num1, num2) {
17. return num1 - num2;
18. });
19.
20. console.log(nums1); // 1, 2, 3, 4, 100, 200

8、迭代器方法(不产生任何新数组)

  迭代器方法对数组中的每一个元素应用一个函数,可以返回一个值、一组值或者一个新数组。

1.    function square(num) {
2. console.log(num + '-' + num * num);
3. }
4.
5. var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
6. nums.forEach(square);

  另一个迭代器方法是every(),该方法接收一个返回值为布尔类型的函数,对数组中的每个元素使用该函数。如果对于所有的元素,该函数均返回true,则该方法返回true。

1.    function isEven(num) {
2. return num % 2 == 0;
3. }
4.
5. var nums = [2, 4, 6, 8, 10];
6. var even = nums.every(isEven);
7.
8. if (even) {
9. console.log("all numbers are even.");
10. } else {
11. console.log("not all numbers are even.");
12. }
13.
14. // >>> 输出 all numbers are even.

  some()方法也接受一个返回值为布尔类型的函数,只要有一个元素使得该函数返回true,该方法就返回true。

1.    function isEven(num) {
2. return num % 2 == 0;
3. }
4.
5. var nums = [1, 3, 5, 9];
6. var even = nums.some(isEven);
7.
8. if (even) {
9. console.log("all numbers are even.");
10. } else {
11. console.log("no numbers are even.");
12. }
13.
14. // >>> 输出 no numbers are even.

  reduce()方法接收一个函数,返回一个值。该方法会从一个累加值开始,不断对累加值和数组中的后续元素调用该函数,直到数组中的最后一个元素,最后返回得到的累加值。

1.    function add(runningTotal, currentValue) {
2. return runningTotal + currentValue;
3. }
4.
5. var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
6. var sum = nums.reduce(add);
7. console.log(sum); // 55

9、迭代器方法(生成新数组)

  有两个迭代器方法可以产生新数组:map()和filter()。map()和forEach()有点儿像,对数组中的每个元素使用某个函数。两者的区别是map()返回一个新的数组,该数组的元素是对原有元素应用某个函数得到的结果。

1.    var grades = [77, 65, 81, 92, 83];
2. var newGrades = grades.map(function(grade) {
3. return grade += 5;
4. });
5.
6. console.log(newGrades); // [82, 70, 86, 97, 88]

  filter()和every()类似,传入一个返回值为布尔类型的函数。和every()方法不同的是,当对数组中的所有元素应用该函数,结果均为true时,该方法并不返回true,而是返回一个新数组,该数组包含应用该函数后结果为true的元素。

1.    function isEven(num) {
2. return num % 2 == 0;
3. }
4.
5. function isOdd(num) {
6. return num % 2 != 0;
7. }
8.
9. var nums = [];
10. for (var i = 0; i < 20; i++) {
11. nums[i] = i + 1;
12. }
13.
14. var evens = nums.filter(isEven);
15. console.log("even numbers:");
16. console.log(evens); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
17.
18. var odds = nums.filter(isOdd);
19. console.log("odd numbers:");
20. console.log(odds); // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]

JavaScript —— 数组的更多相关文章

  1. Javascript数组操作

    使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...

  2. Javascript数组操作(转)

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...

  3. JavaScript 数组

    JavaScript 数组 简介:数组是值的有序集合,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. 一:创建数组 ...

  4. 也谈面试必备问题之 JavaScript 数组去重

    Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...

  5. js 判断数组包含某值的方法 和 javascript数组扩展indexOf()方法

    var  questionId = []; var anSwerIdValue = []; ////javascript数组扩展indexOf()方法 Array.prototype.indexOf ...

  6. JavaScript 数组 length 属性获取数组长度或设置数组元素的数目

    JavaScript 数组 length 属性 JavaScript 数组 length 属性可返回或设置或组中元素的数目,语法如下: array_object.length 利用 length 属性 ...

  7. 【读书笔记】-- JavaScript数组

    数组是一段线性分配的内存,它通过整数计算偏移并访问其中的元素.大多数的语言都会要求一个数组的元素是相同类型,但JavaScript数组可以包含任意类型. var misc = ['string', n ...

  8. 什么才是正确的javascript数组检测方式

    前面的话 对于确定某个对象是不是数组,一直是数组的一个经典问题.本文专门将该问题择出来,介绍什么才是正确的javascript数组检测方式 typeof 首先,使用最常用的类型检测工具——typeof ...

  9. javascript数组对象排序

    javascript数组对象排序 JavaScript数组内置排序函数 javascript内置的sort函数是多种排序算法的集合 JavaScript实现多维数组.对象数组排序,其实用的就是原生的s ...

  10. javascript数组的知识点讲解

    javascript数组的知识点讲解 阅读目录 数组的基本方法如下 concat() join() pop() push() reverse() shift() sort() splice() toS ...

随机推荐

  1. January 15th, 2018 Week 03rd Monday

    We got things to do. Places to go. People to see. Futures to make. 我们有很多事情要做,有很多地方要去,有很多人要见,有很多美好的未来 ...

  2. Python3编写网络爬虫07-基本解析库pyquery的使用

    三.pyquery 简介:同样是一个强大的网页解析工具 它提供了和jQuery类似的语法来解析HTML文档,支持CSS选择器,使用非常方便 安装: pip install pyquery 验证: im ...

  3. Base64编码/解码

    /// <summary> /// Base64编码 /// </summary> /// <param name="str">字符串</ ...

  4. [java大数据面试] 2018年4月百度面试经过+三面算法题:给定一个数组,求和为定值的所有组合.

    给定一个数组,求和为定值的所有组合, 这道算法题在leetcode应该算是中等偏下难度, 对三到五年工作经验主要做业务开发的同学来说, 一般较难的也就是这种程度了. 简述经过: 不算hr面,总计四面, ...

  5. el-table表格标题换行

    在做一些管理后台的项目中,表格时最常见的,当有时数据字段多时往往会用滚动条,但从用户体验角度讲,肯定需要多展示信息,那么可能需要一个单元格放多个字段,这时候表头就需要换行. 具体实现如下: // 注意 ...

  6. jQ 移动端返回顶部代码整理

    //返回顶部 $('#btn-scroll').on('touchend',function(){ var T = $(window).scrollTop(); var t = setInterval ...

  7. 线程间的通信_多生产者多消费者问题_JDK1.5新特性_Lock

    对于同步代码块,对于锁的操作是隐式的但是在JDK1.5之前的这种方法效率有点低,判断会很多,后面升级之后有新的解决方案 jdk1.5以后将同步和锁封装成了对象,并将操作锁的隐式方式定义到了该对象中,将 ...

  8. windows下基于IIS配置ssl证书

    我这边用的是阿里云的免费证书,下面展示一下操作步骤. 首先登陆阿里云,搜索ssl证书进入ssl证书控制台.点击购买 然后选择免费版,配置如下: 选择立即购买,购买成功后回到ssl控制台即可查看证书.然 ...

  9. 【html5】如何让Canvas标签自适应设备

    javascript方法: var oC=document.querySelectorAll('canvas')[0];oC.width=document.documentElement.client ...

  10. MetaMask/metamask-inpage-provider

    https://github.com/MetaMask/metamask-inpage-provider Used to initialize the inpage ethereum provider ...