JavaScript中的Array类型详解
与其他语言中的数组的区别:
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类型详解的更多相关文章
- JavaScript中数组Array方法详解
ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...
- JavaScript中的Array数组详解
ECMAScript中的数组与其他多数语言中的数组有着相当大的区别,虽然数组都是数据的有序列表,但是与其他语言不同的是,ECMAScript数组的每一项可以保存任何类型的数据.也就是说,可以用数组的第 ...
- JavaScript中的对象类型详解
To be finished 摘要 1.什么是对象? 2.引用类型和原始类型 3.对象数据属性拥有的特性(Attributes) 4.如何创建对象 a.直接定义 var mango={color:&q ...
- javascript中=、==、===区别详解
javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...
- JavaScript中return的用法详解
JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...
- javascript 中合并排序算法 详解
javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的... 合并排序代码如下: <script type="text/javascript& ...
- javascript中的this作用域详解
javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...
- JavaScript中this的用法详解
JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...
- JavaScript入门之数组:Array类型详解
数组应该是每个语言中都用得极度频繁的数据类型,JavaScript也不例外. 个人认为,Js中的Array类型非常强大. 首先没有C/C++等语言需要在数组初始化时指定数组长度(并不可变)的要求. 也 ...
随机推荐
- 审核流(1)SNF.WorkFlow审核流简介--SNF快速开发平台3.1
本项目是的在Spring.Net.Framework 平台之上进行研发.SNF.WorkFlow审核流是一款完全自主知识产权研发的为软件项目. 审核流基本概念:什么是审核流? 审核流:两个或两个以上的 ...
- latex学习(三)
本文记录一点杂事. 1.vim下有个实时pdf预览的插件:https://github.com/xuhdev/vim-latex-live-preview 2.实时预览pdf的pdf查看器是:evin ...
- 盒型图(boxplot)
最近在摆弄数据离散度的时候遇到一种图形,叫做盒图(boxplot).它对于显示数据的离散的分布情况效果不错. 盒图是在1977年由美国的统计学家约翰·图基(John Tukey)发明的.它由五个数 ...
- 解决Redis之MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist o...
解决Redis之MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist o... ...
- Android调用相机拍摄照片并显示到 ImageView控件中
在前面的一篇文章中曾介绍过简单的开启相机照相功能,详见 Android简单调用相机Camera功能,实现打开照相功能 ,这一次就会将前面拍摄的照片显示到ImageView中,形成一个完整的效果 看实例 ...
- 小技巧 - CSS中:hover调试
在调试CSS的时候,我一般使用Chrome的F12开发者工具,或者FireFox的FireBug直接在元素上面修改好Style后,再写入到CSS中.前几天遇到一个问题就是a:hover,鼠标一移开效果 ...
- IDEA的这八条配置你一定要改!
一定要改的八条军规.快捷键使用idea默认的,与其他同事保存一致 自动编译开关 忽略大小写开关 智能导包开关 悬浮提示开关 取消单行显示tabs的操作 项目文件编码 滚轴修改字体大小 设置行号显示 在 ...
- laravel数据库配置
1.说明,查看laravel数据库配置 项目名/config/database.php 'default' => env('DB_CONNECTION', 'mysql') 2.数据开发 ...
- js操作DOM在父元素中的结尾添加子节点注意
impressionHtml=`<img src=${value} alt=""/>`; document.getElementById("wrapper&q ...
- [UFLDL] Dimensionality Reduction
博客内容取材于:http://www.cnblogs.com/tornadomeet/archive/2012/06/24/2560261.html Deep learning:三十五(用NN实现数据 ...