理解javascript中的Array类型

引子:

  从事前端开发有段时间了,个人观点:想在前端开发这条路上走的更远,不仅要学好HTML&HTML5、CSS&CSS3,最重要的就是要学好javascript了。所以打好javascript基础是非常有必要,今天就平时所用的javascript中的数组Array类型做个整理。本人前端初学者,如果以下内容对您有帮助的话本人也非常欣慰,如果写的不好,请提出您的见解,共享下您在学习js中的宝贵经验,谢谢!

  Array类型是js中非常常用的数据类型了,这里就不脑补了,至于什么是数组类型,请绕道w3school进行查阅。

一、创建Array

  js中创建数组有两种方式,一种是通过Array构造函数进行创建,另一种是通过数组字面量进行创建,下面就两种方式创建数组提供对应Demo:

  1、通过Array构造函数进行创建: 

// 创建一个空数组
var arr = new Array();

// 指定数组长度
var arr2 = new Array(10);

// 创建并指定数组项
var arr3 = new Array("a", "b", "c");

  2、通过数组字面量进行创建:

// 创建一个空数组
var arr = [];

// 创建包含数组项的数组
var colors = ["red", "blue", "yellow"];

二、检测数组

  ES3中规定,如果页面中只有一个全局执行环境,可以通过instanceof操作符判断。如果页面中包含多个框架,就会出现问题。为了解决这个问题,ES5中引入了Array.isArray()方法,这个方法可以确定某个值到底是不是数组。但是支持Array.isArray()方法的浏览器有IE9+、Firefox 4+、Safari 5+、Opera 10.5+和Chrome。对于老版本的浏览器中,可以通过功能检测来实现isArray()方法。具体实现代码如下:

if( Array.isArray !== "function"){
    Array.isArray = function(candidate){
        return Object.prototype.toString.call(candidate) === "[object Array]";
    };
}

三、栈方法

  栈的概念:栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构。

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

  2、pop():pop()方法不接收参数,从数组的末尾移除最后一项,减少数组的length值,然后返回移除的项。Demo如下:

var colors = ["red", "blue"];
colors.push("brown");    // 添加另一项
colors[3] = "black";    // 添加一项
console.log(colors);    // red,blue,brown,black
console.log(colors.length);    // 4    

var item = colors.pop();    // 移除colors的最后一项
console.log(item);    // “black”
console.log(colors);    // red,blue,brown

四、队列方法

  队列的概念:队列是一种FIFO(First-In-First-Out,先进先出)的数据结构。

  1、shift():shift()方法不接收参数,从数组的前端移除第一个项并返回该项,同时将数组的长度减1。

  2、unshift():unshift()方法与shift()用途相反,它能在数组的前端添加任意个项并返回新数组的长度。Demo如下:

var colors = [];
var count = colors.unshift("red", "green");
console.log(count);    // 2
console.log(colors);    // red,green

count = colors.unshift("black");
console.log(count);    // 3
console.log(colors);    // black,red,green

var item = console.pop();
console.log(item);    // "green"
console.log(colors.length);    // 2

五、重排序方法

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

  1、reverse() 方法会将反转数组项的顺序,如下所示:

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

  2、sort() 方法按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。为了实现排序,sort() 方法会调用每个数组项的 toString() 转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值,sort() 方法比较的也是字符串,如下所示:

var arr = [0, 1, 5, 10, 15];
arr.sort();
console.log(arr);    // 0,1,10,15,5

  上面的例子中,可以看出,虽然数值5小于数值10,但是在进行字符串比较时,”10“则位于”5“的前面,于是数组的顺序就被修改了。显然,这种排序方式存在问题。因此,sort()方法引入了可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。

  比较函数接收两个参数,如果第一个参数应该位于第二个参数之前就返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个参数之后则返回一个正数。以下就是一个简单的比较函数:

function compare(num1, num2){
    if(num1 < num2){
        return -1;
    } else if(num1 > num2){
        return 1;
    } else {
        return 0;
    }
}

  这个比较函数可以适用于大多数数据类型,只要将其作为参数传递给 sort() 方法即可,如下面这个例子所示。  

var val = [0, 15, 10, 1, 5];
val.sort(compare);
console.log(val);    // 0, 1, 5, 10, 15

  在将比较函数传递到 sort() 方法之后,数值仍然保持了正确的升序。当然,也可以通过比较函数产生降序排序的结果,只要交换比较函数返回的值即可。  

function compare(num1, num2){
    if(num1 < num2){
        return 1;
    } else if(num1 > num2){
        return -1;
    } else {
        return 0;
    }
}

var val = [0, 1, 5, 10, 15];
val.sort(compare);
console.log(val);    // 15, 10, 5, 1, 0

  对于数值类型或者其valueOf() 方法会返回数值类型的对象类型,可以使用一个更简单的比较函数。这个函数只要用第二个值减第一个值即可。

function compare(num1, num2){
    return num2 - num1;
}

六、操作方法

  1、concat():基于当前数组中的所有项创建一个新的数组。

  利用这个方法连接数组项一般会经过三个过程,第一步创建当前数组的一个副本,第二步将接收到的参数添加到这个副本的末尾,第三步返回新构建的数组。

  在没有给concat() 方法传递参数的情况下,它只是复制当前数组并返回副本。如果传递给concat() 方法的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的不是数组,这些值就会被简单地添加到结果数组的末尾。下面来看一个例子:

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);

console.log(colors);    // red, green, blue
console.log(colors2);    // red, green, blue, yellow, black, brown

  2、slice():基于当前数组的一个或多个项创建一个新数组。

  slice() 方法可以接收一个或两个参数,即要返回项的起始位置和结束位置。

  a) 当只有一个参数的情况下,slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。

  b) 如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。

  注意:slice() 方法不会影响原始数组。下面看一下slice() 的例子:

var colors = ["red", "green", "blue", "yellow", "purple"];

var colors2 = colors.slice(1);
var colors3 = colors.slice(1, 4);

console.log(colors);      // red, green, blue, yellow, purple
console.log(colors2);    // green, blue, yellow, purple
console.log(colors3);    // green, blue, yellow

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

  

  3、splice():该方法可以用来对数组项进行删除、插入或替换。但是主要用途还是用于向数组的中部插入项。下面分别介绍这三种用途:

  a)【 删除】可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。例如,splice(0, 2) 会删除数组中的前两项。

  b)【插入】可以向指定位置插入任意数量的项,只需提供3个参数:起始位置、0(要删除的项数)和要插入的项数。如果要插入多个项,可以再传入第四、第五,以至任意多个项。例如,splice(2, 0, "red", "green")会从当前数组的位置2开始插入字符串"red"和"green"。

  c)【替换】可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,splice(2, 1, "red", "green")会删除当前数组位置2的项,然后再从位置2开始插入字符串"red"和"green"。

  splice() 方法始终都会返回一个数组,该数组中包含从原始数组中删除的项(如果没有删除任何项,则返回一个空数组)。下面的代码展示了上述3种使用splice() 方法的方式:

var colors = ["red", "green", "blue"];
var removed = colors.splice(0, 1);    // 删除第一项
console.log(colors);    // green, blue
console.log(removed);    // red

removed = colors.splice(1, 0, "yellow", "orange");    // 从位置1开始插入两项
console.log(colors);    // green, yellow, orange, blue
console.log(removed);    // 返回的是一个空数组

removed = colors.splice(1, 1, "red", "purple");    // 从位置1删除一项,然后在位置1处新增2项
console.log(colors);    // green, red, purple, orange, blue
console.log(removed);    // yellow

  4、join():接收一个参数,将数组中的每一项以传入的参数作为连接字符连接转换成一个字符串并返回,如下所示:

var colors = ["red", "green", "blue"];
var str = colors.join(‘-‘);
console.log(str);    // "red-green-blue"

 七、位置方法

  ES5为数组实例添加了两个位置方法:indexOf() 和 lastIndexOf() 。这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中,indexOf() 方法从数组的开头(位置0)开始向后查找,lastIndexOf() 方法则从数组的末端开始向前查找。

  这两个方法都返回要查找的项在数组中的位置,或者在没有找到的情况下返回-1。在比较第一个参数与数组中的每一项时,会使用全等操作符;也就是说,要求查找的项必须严格相等(就像使用===一样)。以下是几个例子:

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

console.log(numbers.indexOf(4));    // 3
console.log(numbers.lastIndexOf(4)); // 5

console.log(numbers.indexOf(4, 4));    // 5
console.log(numbers.lastIndexOf(4, 4));    // 3

var person = {name: "Michael"};
var people = [{name: "Michael"}];

var morePeople = [person];

console.log(people.indexOf(person));    // -1
console.log(morePeople.indexOf(person));    // 0

八、迭代方法

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

  a) every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

  b) filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

  c) forEach():对数组中的每一项运行给定函数,这个方法没有返回值。

  d) map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

  e) some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

  以上方法都不会修改数组中的包含的值。

  Demo for every() and some():

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

var everyResult = numbers.every(function(item, index, array){
    return (item > 2);
});

console.log(everyResult);    // false

var someResult = numbers.some(function(item, index, array){
    return (item > 2);
});

console.log(someResult);    // true

  Demo for filter():

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

var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});

console.log(filterResult);    // [3, 4, 5, 4, 3]

  Demo for map():

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

var mapResult = numbers.map(function(item, index, array){
    return item * 2;
});

console.log(mapResult);    // [2, 4, 6, 8, 10, 8, 6, 4, 2]

  Demo for forEach():

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

numbers.forEach(function(item, index, array){
    // 执行某些操作
});

九、归并方法

  先来说说什么事归并方法,所谓归并就是迭代一个数组中的所有项,从而进行每一项的累加或其它的操作。

   ES5中新增了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;
});

console.log(sum);    // 15

十、常用示例

  1、反转打印一段字符串(巧用Array的reverse方法):

window.onload = function {

    if(typeof String.prototype.reverse !== ‘function‘){
        String.prototype.reverse = function(){
        return Array.prototype.reverse.apply(this.split(‘‘)).join(‘‘);
    };
    }

    var str = "hello world !";
    var str2 = str.reverse(str);
    console.log(str2);    // "! dlrow olleh"
};
时间: 2024-10-27 09:16:17

理解javascript中的Array类型的相关文章

深入理解JavaScript中创建对象模式的演变(原型)

创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Object构造函数和对象字面量方法 工厂模式 自定义构造函数模式 原型模式 组合使用自定义构造函数模式和原型模式 动态原型模式.寄生构造函数模式.稳妥构造函数模式 第一部分:Object构造函数和对象字面量方法 我之前在博文<javascript中对象字面量的理解>中讲到过这两种方法,如何大家不熟悉,可以点进去看一看回顾一下.它们的优点是用来创建单个的对象非常方

javascript中的Array对象的slice()、call()、apply()详解

来51cto已经很多年,就是没怎么写文字,今天来一篇介绍JS的,文章篇幅不是很大,大部分内容是我参考了别人的博客后经过自己理解,自己整理的.方便自己以后回顾知识.文中涉及到javascript中的Array对象的slice().call().apply(); slice()方法,在我之前做的项目中,有两种数据类型下用到过.第一种是string类型的,还有一种是Array对象: string对象的slice(): 定义和用法 slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部

理解javascript中的回调函数(callback)【转】

在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实际上是一种对象,它可以"存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值". 因为function是内置对象,我们可以将它作为参数传递给另一个函数,延迟到函数中执行,甚至执行后将它返回.这是在JavaScript中使用回调函数的精髓.本篇文

理解JavaScript中函数的使用

函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解. JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(…){…} var func2=function(…){…}; var func3=function func4(…){…}; var func5=new Function(

全面理解Javascript中Promise

全面理解Javascript中Promise 最近在学习Promise的时候,在网上收集了一些资料,发现很多的知识点不够系统,所以小编特意为大家整理了一些自认为 比较好的文章,供大家更好地学习js中非常有趣的Promise Promise概念 2015 年 6 月,ECMAScript 6 的正式版 终于发布了. ECMAScript 是 JavaScript 语言的国际标准,javascript 是 ECMAScript 的实现.ES6 的目标,是使得 JavaScript 语言可以用来编写大

(转)JavaScript中判断对象类型的种种方法

我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 type

JavaScript中的值类型和引用类型

先抛出一个题目,阿里的笔试面试题(很基础,但确实是阿里的笔试题) var a = {"x": 1}; var b = a; a.x = 2; a = {"x": 3}; console.log(b.x); 大家觉得最后在控制台输出的结果是多少? 如果你答案是2,那你就没必要接下去看了.如果不是.那你就接着看下去来解决你的疑惑吧! JavaScript中的值类型和引用类型 在javascript里面有两种变量类型,一种是值类型,一种是引用类型. 值类型:数值.布尔型.

深入理解javascript中实现面向对象编程方法

介绍Javascript中面向对象编程思想之前,需要对以下几个概念有了解: 1. 浅拷贝和深拷贝:程序在运行过程中使用的变量有在栈上的变量和在堆上的变量,在对象或者变量的赋值操作过程中,大多数情况先是复制栈上的信息,这样就会出现以下情况,如果变量是对象,那么这一操作,复制的只是真正对象所在 的堆内存空间的起始地址,这就是所谓的浅拷贝,如果是深拷贝,则是在内存堆空间中重新分配一个内存,并把分配的内存的起始地址复制过去. 2. 引用类型数据和值类型数据:谈到引用类型数据和值类型数据,自然而然的联想到

JavaScript中两种类型的全局对象/函数(转)

转自:http://www.cnblogs.com/snandy/archive/2011/03/19/1988626.html 这里所说的JavaScript指浏览器环境中的包括宿主环境在内的.第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScript内置对象,即ECMAScript实现提供的不依赖于宿主环境的对象 这些对象在程序执行之前就已经(实例化)存在了.ECMAScript称为The Global Objec