1、检测数组

自从ECMAScript3作出规定后,就出现了确定某个对象是不是数组的经典问题。对于一个网页,或者一个全局作用域而言,使用instanceof操作符就能得到满意结果。

if (value instanceof Array) {   //value是一个变量名
//对数组执行某些操作
}

如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的Array构造函数。如果从一个框架向另一个框架传入一个数组,那么传入的数组与第二个框架中原生创建的数组分别具有各自不同的构造函数。为了解决这个问题,ECMAScript5新增了Array.isArray()方法:这个方法的目的是最终确定某个值是不是数组,而不管它是来自哪个全局执行环境中创建的。

if (Array.isArray(value)) {
//对数组执行某些操作
}

2、转换方法

  • toString():返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。---------返回值是String类型
  • toLocaleString():返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。但是toLocaleString 只是用来显示结果给用户;最好不要在脚本中用来做基本计算,因为返回的结果是随机器不同而不同的。 ---------返回值是String类型
  • valueOf() :返回的还是数组。---------返回值是Array类型
  • join():使用不同的分隔符,返回包含所有数组项的字符串。---------返回值是String类型
    var colors = ["red", "green", "blue"];
    alert(colors.toString()); //red,green,blue。默认是以逗号隔开
    alert(colors.join(",")); //red,green,blue
    alert(colors.join("||")); //red||green||blue

3、栈方法(LIFO)---push、pop

  push()方法接受任意数量的参数,把它们逐个添加到数组末尾,并返回修改后的数组长度

  pop()方法从数组末尾移除最后一项,减少数组的length值,然后返回移除的项

var colors = new Array();                      //create an array
var count = colors.push("red", "green"); //push two items
alert(count); // count = colors.push("black"); //push another item on
alert(count); //
console.log(colors.push("black")) var item = colors.pop(); //get the last item
alert(item); //"black"
alert(colors.length); //

4、队列方法(FIFO)---push和shift、unshift和pop

  shift()方法:移除数组中的第一个项并返回该项,同时将数组长度减1.

push和shift方法结合使用,可以像队列一样使用数组。

var colors = new Array();                      //create an array
var count = colors.push("red", "green"); //push two items
alert(count); // count = colors.push("black"); //push another item on
alert(count); // var item = colors.shift(); //get the first item
alert(item); //"red"
alert(colors.length); //

  unshift()方法:在数组前端添加任意个项并返回新数组的长度。

unshift和pop结合使用,可以从相反的方向来模拟队列:在数组的前端添加项,从数组末端移除项。

var colors = new Array();                      //create an array
var count = colors.unshift("red", "green"); //push two items,此时colors=["red","green"]
alert(count); // count = colors.unshift("black"); //push another item on,此时colors=["black","red","green"]
alert(count); // var item = colors.pop(); //get the first item
alert(item); //"green"
alert(colors.length); //2

5、重排序方法---reverse、sort

数组中已经存在两个可以直接用来重排序的方法:reverse()sort()方法。

reverse()方法会反转数组项的顺序。-----会改变原数组

var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); //5,4,3,2,1

默认情况下,sort()方法按升序排列数组项。为了实现排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序。 如下:    -----会改变原数组

var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); //0,1,10,15,5

上述例子中,数值5比10 小,但在进行字符串比较时,“10”位于“5”前面,所以这种不是理想的方案。

所以,sort()方法可以接收一个比较函数作为参数。比较函数接受两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个之后则返回一个正数。实际操作可以根据需要自行定义。如下是升序的一个例子:只需将compare函数作为参数传递给sort()方法即可。

function compare(value1, value2)    {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
var values=[0,1,5,10,15];
values.sort(compare);
console.log(values) //0,1,5,10,15

降序排序:

function compare(value1, value2)    {
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return -1;
} else {
return 0;
}
}
var values=[0,1,5,10,15];
values.sort(compare);
console.log(values) //15,10,5,1,0

另外,对于数值类型或者其valueOf()方法会返回数值类型的对象类型,可以使用一个更简单的比较函数。

function compare(value1, value2) {
return value2 - value1;
}

6、操作方法

  1. concat()方法:用于连接两个或多个数组。具体就是:这个方法会先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。----------不会改变现有的数组

    var colors = ["red", "green", "blue"];
    var colors2 = colors.concat("yellow", ["black", "brown"]);
    alert(colors); //red,green,blue原数组未改变
    alert(colors2); //red,green,blue,yellow,black,brown

    如果没有给concat()方法传递参数,则它只是复制当前数组并返回副本;如果传递给concat()方法的是一个或多个数组,则会把数组中的每一项添加到结果数组中去;如果传递给concat()方法的不是数组,那么这些值就会被简单的添加到结果数组中。

  2. slice()方法:从已有的数组中返回选定的元素。接受一个或两个参数,即要返回项的起始和结束位置,只有一个参数时,返回的是指定位置到末尾的所有项;有两个参数时,返回起始位置到结束位置之间的项(包括起始位置的项,不包括结束位置的项)。----------不会改变现有的数组
    var colors = ["red", "green", "blue", "yellow", "purple"];
    var colors2 = colors.slice(1);
    var colors3 = colors.slice(1,4);
    alert(colors); //red,green,blue,yellow,purple
    alert(colors2); //green,blue,yellow,purple
    alert(colors3); //green,blue,yellow

    如果参数中有负数,则用数组长度加上该负数来确定相应的位置。例如:在一个包含5项的数组上调用slice(-2,-1)与调用slice(3,4)得到的结果相同。如果结束位置小于开始位置,返回空数组。

  3. splice()方法:有很多用法,最主要的用途是向数组的中部插入项。这个方法的使用有3种:           -----会改变原数组
    1. 删除:可以删除任意数量的项, 只需指定两个参数:要删除的第一项的位置要删除的项数。例如,splice(0, 2)会删除数组中的前两项。
    2. 插入:可以向指定位置插入任意数量的项,只需提供三个参数:起始位置0(要删除的项数)要插入的项。如果要插入多个项,可以再传入第四、第五,甚至任意多个项。例如splice(2, 0, "red", "green")会从当前数组的位置2开始插入字符串”red”和”green”。
    3. 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需提供三个参数:起始位置要删除的项数要插入的项。如果要插入多个项,可以再传入第四、第五,甚至任意多个项。例如splice(2, 1, "red", "green")会删除当前数组位置2的项,然后再从当前数组的位置2开始插入字符串”red”和”green”。       
      var colors = ["red", "green", "blue"];
      var removed = colors.splice(0,1); //remove the first item
      alert(colors); //green,blue
      alert(removed); //red - one item array removed = colors.splice(1, 0, "yellow", "orange"); //insert two items at position 1
      alert(colors); //green,yellow,orange,blue
      alert(removed); //空数组 removed = colors.splice(1, 1, "red", "purple"); //insert two values, remove one
      alert(colors); //green,red,purple,orange,blue
      alert(removed); //yellow - one item array

    splice()方法始终会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组。

7、位置方法

ECMAScript5为数组实例添加了两个位置方法:

  • indexOf():接受两个参数:要查找的项和(可选的)表示查找起点位置的索引。indexOf()方法从数组的开头向后查找。
  • lastIndexOf():接受两个参数:要查找的项和(可选的)表示查找起点位置的索引。laseIndexOf()方法则从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置,没找到返回-1.在比较第一个参数与数组中的每一项时,会使用全等操作符;也就是说,要查找的项必须严格相等。

var numbers = [1,2,3,4,5,4,3,2,1];

alert(numbers.indexOf(4));        //
alert(numbers.lastIndexOf(4)); // alert(numbers.indexOf(4, 4)); //
alert(numbers.lastIndexOf(4, 4)); //3 var person = { name: "Nicholas" };
var people = [{ name: "Nicholas" }];
var morePeople = [person]; alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person)); //

8、迭代方法

ECMAScript5为数组定义了5个迭代方法。每个方法都接受两个参数要在每一项上运行的函数和(可选的)运行该函数的作用域——影响this的值。传入这些方法中的函数(即方法的第一个参数)会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同,这个函数执行后的返回值可能会也可能不会影响方法的返回值。以下是这5个迭代方法的作用。

  • every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。              ----------返回值是一个boolean值
  • some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。                  ----------返回值是一个boolean值
  • filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。                          ----------返回值是一个新数组,不影响原数组
  • forEach():对数组中的每一项运行给定函数。这个方法没有返回值。                                                 ----------没有返回值
  • map():对数组中的每一项运行给定函数返回每次函数调用的结果组成的数组。                             ----------返回值是一个新数组,不影响原数组

这些方法的参数都必须有一个函数,在这个函数中有三个参数:

  • 第一个(value)表示的是数组的每一项内容
  • 第二个(index)表示的是数组的每一个下标
  • 第三个(array)表示的是数组本身。

every和same的比较:

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
return (item > 2);
});
alert(everyResult); //false,没有全部都返回true,所以最终返回false var someResult = numbers.some(function(item, index, array){
return (item > 2);
});
alert(someResult); //true,有一项返回true,所以最终返回true

filter函数:利用指定的函数确定是否在返回的数组中包含某一项。简称为滤波器,可以用来过滤出符合条件项。

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
return (item > 2);
});
alert(filterResult); //[3,4,5,4,3]返回的是数组

map():返回一个数组。这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。可以用来创建包含的项与另一个数组一一对应的项。

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){
return item * 2;
});
alert(mapResult); //[2,4,6,8,10,8,6,4,2]

forEach():没有返回值,只是对数组中的每一项运行传入的函数。本质上和使用for循环迭代数组一样。

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach(function(item, index, array) {
//执行某些操作
});

8、归并方法

ECMAScript5还新增了两个归并数组的方法:reduce()和reduceRight()。这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。reduce()从前到后,reduceRight()从后到前。 这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。传给reduce()和reduceRight()的函数接收4个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

使用reduce()方法可以执行数组中所有值求和操作。如下:

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
return prev + cur;
});
alert(sum);//

(pre,cru)的值依次为(1,2),(3,3),(6,4),(10,5),(15).

reduceRight()的作用类似,只是方向相反,如下:

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
});
alert(sum);//

(pre,cru)的值依次为(5,4),(9,3),(12,2),(14,1),(15).

使用reduce()还是reduceRight(),主要取决于要从哪头开始遍历数组,除此之外,它们完全相同。

Array数组的方法总结的更多相关文章

  1. js中Array数组基本方法

    总结:push() 添加元素到数组未尾, 返回数组长度 unshift() 添加元素到数组头部, 返回数组长度 pop() 删除数组未尾元素, 返回删除元素 shift() 删除数组头部元素, 返回删 ...

  2. Array(数组)--map方法

    关于Array.prototype.map() MDN 给的定义是: 在作用数组元素的每一项上调用一个方法(callback),返回一个新数组: 使用格式:arr.map(callback[,this ...

  3. JavaScript中Array数组的方法

    查找: indexOf.lastIndexOf 迭代:every.filter.forEach.map.somereduce.reduceRight 用法: /* 1 查找方法: * arr.inde ...

  4. Array数组小方法总结

    如果各位在阅读的时候,有任何问题,都可以留言: // push()方法会向数据末尾添加数据,并返回添加数据后的数组的长度var arr=[1,2,3]console.log(arr.push(4),a ...

  5. Array数组对象方法

    Array 对象方法 方法 描述 concat() 连接两个或更多的数组,并返回结果. copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中. entries() 返回数组的可迭 ...

  6. js清空array数组的方法

    方式1,splice Js代码   ,,,}; ary.length = ; Java中会报错,编译通不过. 而JS中则可以,且将数组清空了,如 Js代码   var ary = [1,2,3,4]; ...

  7. JS中Array数组的三大属性用法

    原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...

  8. for 循环 和 Array 数组对象

    博客地址:https://ainyi.com/12 for 循环 和 Array 数组对象方法 for for-in for-of forEach效率比较 - 四种循环,遍历长度为 1000000 的 ...

  9. JavaScript Array数组方法详解

    Array类型是ECMAScript中最常用的引用类型.ECMAScript中的数据与其它大多数语言中的数组有着相当大的区别.虽然ECMAScript中的数据与其它语言中的数组一样都是数据的有序列表, ...

随机推荐

  1. js判断json对象是否包含key

    if(json.hasOwnProperty("KEY")){ }

  2. JavaScript 实现单例模式的两种方式

    单例模式: 要求一个类只有一个实例化对象存在 这个实例化对象必须提供一个全局对外访问方式 这个实例化对象应当是私有的,不能被外界直接访问或者更改 方式1 get实现 唯一实例化:判断这个对象是否存在, ...

  3. LA 3708 墓地雕塑(模拟)

    题目链接:https://vjudge.net/problem/UVALive-3708 这道题的思路也是比较难想. 首先根据上一题(Uva 11300)可知,要想让移动距离最短,那么至少要使一个雕塑 ...

  4. redis-py相关

    一 redis客户端命令 cmd进入redis客户端管理程序路径xx:\windows redis\redis-2.4.0-win32-win64\64bit 执行:redis-cli.exe -h ...

  5. Spring Boot FreeMarker 使用教程

    FreeMarker 跟 Thymeleaf 一样,是一种模板引擎,他可以无缝兼容 FreeMarker 在 Spring Boot 开发者中仍然有着很高的地位. 本章重点内容 编写一个最简单的 Fr ...

  6. Spring Boot 使用 CXF 调用 WebService 服务

    上一张我们讲到 Spring Boot 开发 WebService 服务,本章研究基于 CXF 调用 WebService.另外本来想写一篇 xfire 作为 client 端来调用 webservi ...

  7. DOCK-SWARM

    服务原理: 创建集群:建立ingress网络,网关xxxxx.xxx.xxx.1 管理节点:docker swarm init --advertise-addr 192.168.4.119 工作节点: ...

  8. 最全面的C/C++编码规范总结

    C语言是面向过程的,而C++是面向对象的 对于不同的编程语言来说,具体的编码规范可以有很大的不同,但是其宗旨都是一致的,就是保证代码在高质量完成需求的同时具备良好的可读性.可维护性.例如我们可以规定某 ...

  9. 【原】Docker学习_Docker上传镜像至docker hub(4)

    构造镜像的两种方式:1.commit  2.Dockerfile Docker提供了一个docker commit命令,可以将容器的存储层保存下来成为镜像.换句话说,就是在原有镜像的基础上,再叠加上容 ...

  10. nyoj 11

    水题... #include <stdio.h> #include <algorithm> #include <iostream> int main() { int ...