与其他语言中的数组的区别:

1.JavaScript数组的每一项都可以保存任何类型的数据,一个数组的数组元素可以是不同类型的数据。

2.数组的大小是动态调整的,可以随着数据的添加自动的增长。

1.两种方法构建数组

JavaScript中的数组有两种构建方式:

第一种是使用Array构造函数:

    var colors = new Array(3); //创建一个包含3项的数组,参数3表示创建的数组大小
var names = new Array("Greg","Bobi"); //创建数组

第二种是使用数组字面量表示法,数组字面量由一对包含数组项的方括号表示,多个数组项之间以逗号隔开。

    var colors = ["red","blue","green"]; //创建一个包含3个字符串的数组
var names = []; //创建一个空数组

不管用什么方式创建的数组都有下面要讲的一些方法.

查看数组的长度,检查数组的长度可以使用length属性。通过length属性可以得到数组的长度,因为数组的长度永远比数组的索引坐标大1,所有,还可以通过length往数组最后一位添加元素,甚至减少数组长度


//使用length查看数组长度
var colors = ["red","blue","green"];
var count = colors.length;
alert(count);//3 //使用length舍去数组元素
colors.length = 2; //设置数组长度为2,最后一个元素被舍去
alert(colors); //red,blue
alert(colors.length); //2 //使用length向数组添加元素
colors[colors.length] = "yello"; //项数组中增加元素
alert(colors); //red,blue,yello
alert(colors.length); //3

2.检测数组

检查一个值到底是不是数组,使用Array.isArray()方法

var colors = ["red","blue","green"];
if (Array.isArray(colors)){
alert(true); //true
}

3.转换方法

Array也是一个对象,所以也拥有toLocaleString(),toString()和valueOf()方法。

toString():方法会返回由数组中每个元素字符串形式拼接成的一个由逗号分隔的字符串

valueOf():方法返回的还是数组,但是如果使用alert(colors.valusOf())返回的跟toString()返回的完全一样,因为alert()接收到valueOf()传送来的数组,会再次调用toString()方法

toLocaleString():方法要而经常会返回与上面两个方法返回的值相同

4.栈方法

数组可以模拟栈的方法,具体就是先进后出,提供push()方法接收不定的参数,从数组后面压入数组,提供pop()方法从数组末尾移除最后一项。

需要注意的是:push()方法返回值时修改后数组的长度,pop()返回值是移除的项。


var colors = ["red","blue","green"];
var count = colors.push("yello","black");//压入
alert(count); //5 var item = colors.pop(); //取得最后一项
alert(item); //black

5.列队方法

列队方法区别于栈方法,栈方法是先进后出,列队方法是先进先出。

列队方法提供push()函数向数组末尾添加元素,返回值时修改后数组的长度。提供shift()方法移除数组中的第一个项.

列队方法还提供unshift()方法在数组的前端添加任意个项并返回新数组的长度,以此构成了双向列队。

//创建新数组,长度为3
var colors = ["red","blue","green"]; //使用push()向末尾添加两个元素,长度为5
var count = colors.push("yello","black");//压入
alert(count); //5 //移除数组前端的元素,长度为4
var item = colors.shift();
alert(item); //red //使用unshift()方法在前端添加一个元素,长度为5
var unCount = colors.unshift("white");
alert(unCount); //5

6.重排序方法

数组的重新排序主要有两种方法:

reserve():方法会反转数组的排血顺序。

sort():会按照升序排列数组,由于这个升序是按照字典顺序来的,所以可接收一个参数来指定排列顺序,这个参数是函数,函数接收两个值进行比较,如果第一个参数应该位于第二个之前则返回一个负数。

注意:reserve()和sort()方法的返回值是经过排序之后的数组

7.操作方法

操作方法有几个常用的方法:

contact():方法可以基于当前数组中的所有项创建一个新数组

slice():方法是切片操作,接收两个参数,起始和结束为止,只有一个参数时,表示这个参数开始到结束。

splice():方法是切片方法的升级,主要用途是向数组的中部插入元素,接收三个参数,第一个参数是起始位置,第二个参数是要删除的元素项数,第三个参数可以是任意数量的,如果有的话就插入到前面两个参数的位置

//创建新数组
var colors = ["red","blue","green","red","black"]; //concat()方法
var colors1 = colors.concat();
var colors2 = colors.concat("1","2"); alert(colors1); //red,blue,green,red,black
alert(colors2); //red,blue,green,red,black,1,2 //slice()方法
var colors3 = colors.slice(1,3);
alert(colors3); //blue,green //splice()方法
//使用splice()方法删除
var removed = colors.splice(0,1);//删除第一项
alert(removed);//red 返回的数组中只包含一项 使用splice()方法插入
removed = colors.splice(1,0,"1","2");//从位置1开始插入两项
alert(colors); //red,1,2,blue,green,red,black
alert(removed); //返回一个空数组 //使用splice()方法替换
removed = colors.splice(1,2,"Rocco","Bobi");//插入两项,删除两项项
alert(colors);//red,Rocco,Bobi,red,black
alert(removed);//blue,green 返回的数组包含两项

8.位置方法

位置方法主要有两个,全都接收两个参数,要查找的项和可选的表示查找起点位置的索引。如果查找到就返回要查找的项在数组中的下标,如果没有找到就返回-1

indexOf():从数组的开头开始向后查找

lastIndexOf():从数组的末尾开始向前查找

//创建新数组
var colors = ["red","blue","green","red","black"];
//从前往后查找
alert(colors.indexOf("red"));//0
//从后往前查找
alert(colors.lastIndexOf("red"));//3

9.迭代方法

数组的迭代方式比较多,可以使用for循环的两种不同使用方法,还可以使用属于数组的5个迭代方法

首先看for循环迭代数组

//创建新数组
var colors = ["red","blue","green","red","black"];
//第一种for循环
for (var i=0; i<colors.length; i++){
alert(colors[i]);
}
//第二种for循环
for (var i in colors){
alert(colors[i]);//此处的i也是索引,不是数组的元素
}

数组定义的5个迭代方法

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

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

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

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

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

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

//every()
var everyResult = numbers.every(function (item,index,array) {
return (item > 2);//只有每一个元素都大于2,结果才会返回true
});
alert(everyResult);//false //some()
var someResult = numbers.some(function (item,index,array) {
return (item >2);//只要有一个元素大于2,结果就返回true
});
alert(someResult);//true //filter()
var filterResult = numbers.filter(function (item,index,array) {
return (item > 3);//收集满足大于3的元素,组成一个新数组
});
alert(filterResult);//[4,5,4] //map()
var mapResult = numbers.map(function (item,index,array) {
return item*2;
});
alert(mapResult);//[2,4,6,8,10,8,6,4,2] //forEach()
var forEachResult = numbers.forEach(function (item,index,array) {
// alert(item);
//对数组的每一项执行该函数,没有返回值
})

10.归并方法

数组的归并有两种两个函数,使用方法是一样的,不同之处在于一个是从前向后,一个是从后向前。

reduce():从数组第一个开始,逐个遍历到最后

reduceRight():从数组的最后一个开始,逐个遍历到第一项

以上两个方法都接收4个参数,分别是:前一个值,当前值,项的索引,数组对象。每一次的遍历都会把结果传递到下次操作的前一个值上

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

以上是reduce()的使用方法,reduceRight()使用方法相同,只是从后向前迭代。

JavaScript中的Array类型详解的更多相关文章

  1. JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...

  2. JavaScript中的Array数组详解

    ECMAScript中的数组与其他多数语言中的数组有着相当大的区别,虽然数组都是数据的有序列表,但是与其他语言不同的是,ECMAScript数组的每一项可以保存任何类型的数据.也就是说,可以用数组的第 ...

  3. JavaScript中的对象类型详解

    To be finished 摘要 1.什么是对象? 2.引用类型和原始类型 3.对象数据属性拥有的特性(Attributes) 4.如何创建对象 a.直接定义 var mango={color:&q ...

  4. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  5. JavaScript中return的用法详解

    JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...

  6. javascript 中合并排序算法 详解

    javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的...  合并排序代码如下: <script type="text/javascript& ...

  7. javascript中的this作用域详解

    javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...

  8. JavaScript中this的用法详解

    JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...

  9. JavaScript入门之数组:Array类型详解

    数组应该是每个语言中都用得极度频繁的数据类型,JavaScript也不例外. 个人认为,Js中的Array类型非常强大. 首先没有C/C++等语言需要在数组初始化时指定数组长度(并不可变)的要求. 也 ...

随机推荐

  1. 查看修改添加环境变量的工具——Rapid Environment Editor

    工欲善其事,必先利其器! 特别是公司或者有其他限制的时候,更需要一个比较简单.实用.强大的工具了! 原来的公司都是小公司,给电脑安装系统.软件等都是自己直接上手,现在在一个大点的公司了,电脑运维有单独 ...

  2. Docker 管理应用程序数据

    1.将Docker主机数据挂载到容器 Docker提供三种不同的方式将数据从宿主机挂载到容器中:volumes , bind mounts 和tmpfs volumes:  Docker管理宿主机文件 ...

  3. 为OLED屏添加GUI支持6:进度条控件

    为OLED屏添加GUI支持6:进度条控件 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN10 开发环境:MDK5.13 MCU:S ...

  4. HDOJ 1393 Weird Clock(明确题意就简单了)

    Problem Description A weird clock marked from 0 to 59 has only a minute hand. It won't move until a ...

  5. Unsafe 学习和源码阅读

    在代码中获取 Unsafe 对象的方法: // 在 AtomicInteger 里面是这么用的private static final Unsafe unsafe = Unsafe.getUnsafe ...

  6. js实现选中文字 分享功能

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. spark 解析非结构化数据存储至hive的scala代码

    //提交代码包 // /usr/local/spark/bin$ spark-submit --class "getkv" /data/chun/sparktes.jar impo ...

  8. 30分钟入门Java8之lambda表达式

    前言 Google在今年发布Android N开发者预览版,一并宣布开始支持Java 8.我们终于能在Android开发中使用到Java8的一些语言特性了.目前支持: 默认方法 lambda表达式 多 ...

  9. [Hinton] Neural Networks for Machine Learning - Bayesian

    Link: Neural Networks for Machine Learning - 多伦多大学 Link: Hinton的CSC321课程笔记 Lecture 09 Lecture 10 提高泛 ...

  10. dokcer使用--link 让容器相连

    在使用Docker的时候我们会常常碰到这么一种应用,就是我需要两个或多个容器,其中某些容器需要使用另外一些容器提供的服务.比如这么一种情况:我们需要一个容器来提供MySQL的数据库服务,而另外两个容器 ...