一.Javascript数组是无类型的;数组元素可以任意类型,并且同一个数组中的不同元素也可能有不同的类型,javascript数组是动态的,会根据需要增长或者缩减,每一个数组都有一个length属性。它不是只读的,可以通过设置这个属性值,从数组的末尾移除项,或者添加新项

二.创建数组

(1)数组字面量表示方法:

Var colors=[true,1,”green”]; //创建包含3个字符串的数组。

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

Var b=[1,{x:1,y:2},[2,{x:3,y:4}]];//创建包含对象直接量或其他数组直接量

(2)调用构造函数Array(),new 操作符可以省略:

Var a=new Array(); 等同于Var arr=[];//创建一个空数组

Var b=new Array(10);//创建指定长度的数组

Var c=new Array(“red”);//创建一个包含1项,及字符串“red”的数组。

三.数组元素的读写

在读取和设置数组值时,使用方括号,方括号中是一个非负整数值的任意表达式,

Var colors=[“red”,”blue”,”green”];//定义一个字符串数组

alert(colors[0]);//读取第一项的值

colors[2]=”black”;//修改第三项

colors[3]=”brown”;//新增第四项

Alert(colors.length);//4,数组的长度值,等于最后一项的索引加1

四.数组元素的检测

Array.isArray()方法,检测某个值是不是数组,而不管它是在哪个全局执行环境中创建的。If(Array.isArray(value)){//对数组执行某些操作}

五.数组方法:

(1)Array.join();将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串。

<script>
var a=[1,2,3,4];
document.body.innerHTML='<b>'+a.join()+'</b>'+'</br>';//1,2,3,4
document.write('<b>'+typeof(a.join(' '))+'</b>'+'</br>');//string
document.write('<b>'+a.join(' ')+'</b>'+'</br>');//1 2 3 4
document.write('<b>'+a.join('-')+'</b>');//1-2-3-4</script>

(2)Array.reverse(),将数组中的元素颠倒顺序,返回逆序的数组

   var a=[1,2,3,4];document.write('<b>'+a.reverse().join("*")+'</b>');//4*3*2*1

(3)Array.sort(),默认没有参数时将数组元素按照字母表顺序进行排序,要是按照某一规定进行排序,则必须传递一个比较函数

  var b=["22","555","44","1"];document.write('<b>'+b.sort()+'</b>'+'</br>');//1,22,44,555var c=["2","555","44","11"];document.write('<b>'+c.sort(function(a,b){ return a-b})+'</b>'+'</br>');//2,11,44,555

(3)Array.concat(),创建并返回一个新数组。,它的元素包括调用contact()的原始数组的元素和concat()的每个参数。

  var d=["2","5","4","1"];document.write('<b>'+d.concat(6,8)+'</b>'+'</br>');//2,5,4,1,6,8

(4)Array.slice()方法,返回数组的一个片段或者子数组,它的两个参数分别指定了片段的开始与结束,返回的数组包含第一个参数指定的位置和所有到不含第二参数指定的位置之间的所有数组元素,只有一个参数时,返回从这个参数开始到数组结尾的的所有元素。

   var e=["2","5","4","1"];document.write('<b>'+e.slice(1,3)+'</b>'+'</br>');//5,4var f=["2","5","4","1"];document.write('<b>'+f.slice(2)+'</b>'+'</br>'+'<hr>');//4,1

(5)栈方法

Push()方法可以接收任意数量的参数,将他们逐个添加到数组的末尾,并返回修改数组的新长度,而pop()方法,则是相反的,从数组末尾移除最后一项,减少数组的长度,最后返回移除的项。

  var g=["red","yellow","blue"];document.write('<b>'+"修改后数组的新长度为:"+g.push("green","pink")+'</b>'+'</br>');//修改后数组的新长度为:5document.write('<b>'+"删除的数组值为:"+g.pop()+'</b>'+'</br>'+'<hr>');//删除的数组值为:pink

(6)类似队列的方法

Shift(),能够移除数组中的一个项,并返回该项,然后把所有随后的元素下移一个位置来填补数组头部的空缺,同时将数组长度减1;unshift(),在数组的前端添加任意个项并将已存在的元素移动到更高索引的位置来获得足够的空间,最后返回新数组的长度。

   var e=["red","yellow","blue"];
document.write('<b>'+"删除的数组的一个元素是:"+e.shift()+'</b>'+'</br>');//删除的数组的一个元素是:red
document.write('<b>'+"数组前端添加元素后,数组的长度:"+e.unshift("red","black")+'</b>'+'</br>'+'<hr>');//数组前端添加元素后,数组的长度:4

(7)转换方法

所有对象都具有toLocaleString(),toString(),valueOf(),

调用数组的toString() 方法会返回由数组中每个值的字符串形式拼接而成的字符串,该字符串是以逗号分隔的字符串。与join()方法没有参数时,返回的字符串一样效果。

调用数组的valueOf() 方法,返回的还是数组。

调用数组的toLocaleString(),把数组转换为本地字符串

  var f=["red","yellow","blue"];document.write('<b>'+"本身的类型为:"+typeof(f)+'</b>'+'</br>');//本身的类型为:objectdocument.write('<b>'+f.toString()+'</b>'+'</br>');//red,yellow,bluedocument.write('<b>'+"使用toString后的类型变为:"+typeof(f.toString())+'</b>'+'</br>');//使用toString后的类型变为:stringdocument.write('<b>'+f.valueOf()+'</b>'+'</br>');//red,yellow,bluedocument.write('<b>'+"使用valueOf()后的类型变为:"+typeof(f.valueOf())+'</b>'+'</br>'+'<hr>');//使用valueOf()后的类型变为:object

(7)位置方法

ES5为数组添加了两个位置方法:indexOf(),lastIndexOf(),用来搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引或者如果没有找到就返回-1,接收两个参数,第一个参数为要查找的项,第二个参数为可选的,表示查找起点位置的索引,indexOf()方法从数组的开头向后查找,lastIndexOf()则从数组末尾开始向前查找。

 var h=["red","yellow","blue","red"];document.write('<b>'+"red所在数组的位置是:"+h.indexOf("red")+'</b>'+'</br>');//red所在数组的位置是:0document.write('<b>'+"从1的位置开始找blue所在数组的位置是:"+h.indexOf("blue",1)+'</b>'+'</br>');//从1的位置开始找blue所在数组的位置是:2document.write('<b>'+"使用,lastindexOf(),red所在数组的位置是:"+h.lastIndexOf("red")+'</b>'+'</br>'+'<hr>');//使用,lastindexOf(),red所在数组的位置是:3

(8)迭代方法

ES5为数组定义了5个迭代方法,每个方法都接收两个参数,一个参数是要在每一项上运行的函数,第二个参数是可选的,运行函数的作用域对象。而对于第一个参数,这个函数会接收三个参数,数组项的值,该项在数组中的位置,和数组对象本身。

1)forEach()从头到尾遍历数组,为每个元素调用指定的函数,该方法没有返回值,而且必须得所有元素都传递给调用的函数之后才能终止遍历,也就是说没有break语句随时退出这个循环,要是真要提前终止,必须把forEach()方法放在一个try块中。

  var data=[1,2,3,4,5];var sum=0;data.forEach(function(value){sum+=value;});document.write('<b>'+"sum的值为:"+sum+'</b>'+'</br>');//sum的值为:15data.forEach(function(v,i,data){data[i]=v+3;});document.write('<b>'+"data中的值为:"+data+'</b>'+'</br>'+'<hr>');//data中的值为:4,5,6,7,8

2)map(),对数组中的每一项运行给定函数,返回每次函数调用的结果组成数组,map()返回的是新数组,它不修改调用的数组。

 var data2=[1,2,3,4,5];var sum=0;data=data2.map(function(x){return sum+=x});document.write('<b>'+"原来数组:"+data2+'</b>'+'</br>');//原来数组:1,2,3,4,5document.write('<b>'+"sum的值:"+sum+'</b>'+'</br>');//原来数组:15document.write('<b>'+"新数组中的值为:"+data+'</b>'+'</br>'+'<hr>');//新数组中的值为:1,3,6,10,15

3)filter()对数组中的每一项运行给定的函数,该函数是用来逻辑判定的,返回true,或者false,返回的数组元素是函数会返回true的项组成数组的一个子集,压缩空缺并删除undefined和null元素,可以使用filter()

  var data3=[1,2,3,4,5];data33=data3.filter(function(x){return x<3;});document.write('<b>'+"新数组中的值为:"+data33+'</b>'+'</br>');//新数组中的值为:1,2data333=data3.filter(function(x){return x%2==0;});document.write('<b>'+"新数组中的值为:"+data333+'</b>'+'</br>'+'<hr>');//新数组中的值为:2,4

4)every()和some(),是数组的逻辑判定,对数组中的每一项运行给定的函数,对于every(),只有数组中的每一个元素都满足函数,才返回true,而some()就只要求,有满足的的项,就返回true,就类似于数学中的与/或的逻辑表达式求值

 var data4=[1,2,3,4,5];data44=data4.every(function(x){return x<3;});document.write('<b>'+"使用every()的返回值:"+data44+'</b>'+'</br>');//使用every()的返回值:falsedata444=data4.some(function(x){return  x<3});document.write('<b>'+"使用some()的返回值:"+data444+'</b>'+'</br>'+'<hr>');//使用some()的返回值:true

(9)归并方法

也是ES5新增的数组方法,用指定的函数,将数组元素进行合并

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

2)reduceRight(),从数组的最后一项开始,向前遍历的第一项

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

   var data5=[1,2,3,4,5];var sum=data5.reduce(function(x,y){return x+y},0);document.write('<b>'+"sum的值:"+sum+'</b>'+'</br>');//sum的值:15var sum1=data5.reduce(function(x,y,index,data5){return x+y});document.write('<b>'+"sum1的值:"+sum1+'</b>'+'</br>');//sum1的值:15var sum2=data5.reduce(function(x,y,index,data5){return x*y},2);document.write('<b>'+"sum1的值:"+sum2+'</b>'+'</br>');//sum2的值:240

转载于:https://blog.51cto.com/xiyin001/1761195

javascript Array学习与使用相关推荐

  1. javaScript基础学习 - 14 - JavaScript内置对象 -案例代码

    javaScript基础学习 - 14 - JavaScript内置对象 -案例代码 1. Math对象最大值 2. 封装自己的数学对象 3. Math绝对值和三个取整方法 4. Math对象随机数方 ...

  2. JavaScript完全学习手册 pdf电子书

    编辑推荐: 详解JavaScriptmw内置对象和文档对象:覆盖函数.Ajax.DOM.XML.正则表达式.事件以及安全性:涵盖文字特效.图片特效.时间特效.窗体特效及菜单特效:窗内网提供技术支持. ...

  3. JavaScript TypeScript学习总结

    本文章为web课学习JavaScript & TypeScript的学习总结 JavaScript & TypeScript学习总结 JavaScript JS介绍 JS基础 标识符 ...

  4. JavaScript深度学习

    毛囊炎鼻炎 JavaScript深度学习 蔡善清,[美] 斯坦利·比列斯奇,[美] 埃里克·D.,尼尔森,[美] 弗朗索瓦·肖莱 著,程泽 译 ISBN:9787115561145 包装:平装 开本: ...

  5. javascript立体学习指南

    javascript立体学习指南 第一章:首先了解javascript 首先,什么是javascript? JavaStrip出生于1995年,是一种文本脚本语言,成都装修公司是一种动态的.弱类型的. ...

  6. JavaScript基础学习--数据类型

    JavaScript 数据类型 在 JavaScript 中有 5 中不同的数据类型: string number boolean object function 3 种对象类型: Object Da ...

  7. [ Typescript 手册] JavaScript `Array` 在 Typescript 中的接口

    [ Typescript 手册] JavaScript `Array` 在 Typescript 中的接口 本文地址:https://blog.csdn.net/qq_28550263/article ...

  8. 03 JavaScript的学习笔记

    一.js简介     1.js是什么         js是可以嵌入到html中,是基于对象和事件驱动的脚本语言         特点:             (1)交互性              ...

  9. JavaScript Array --map()、filter()、reduce()、forEach()函数的使用

    题目: 1.得到 3000 到 3500 之内工资的人. 2.增加一个年龄的字段,并且计算其年龄. 3.打印出每个人的所在城市 4.计算所有人的工资的总和. 测试数据: function getDat ...

最新文章

  1. 大流量网站的底层系统架构
  2. 用Java模拟multipart形式的Http Post请求
  3. 在oracle中如何复制用户的权限不够,linux 普通用户下 移动或复制一个zip文件权限不够怎么办...
  4. 【转载】用JS控制输入内容
  5. surging 微服务引擎 1.0 正式发布
  6. cors 前后端分离跨域问题_前后端分离之CORS跨域访问踩坑总结
  7. 一杯水怎么测试_怎么测家里自然水的水质情况?
  8. 政务大数据需要避免三个误区
  9. java 八进制 转义字符_string中转义字符
  10. Docsify支持Markdown多种流程图
  11. c盘是不是越大越好_C盘下的pagefile文件是不是越大越好?
  12. List<? extends T>和List<? super T>之间的区别
  13. 深度学习实例——Flappy Bird
  14. ACP slave interface 学习
  15. Android Menu 之 optionsMenu 详解
  16. 罗克韦尔AB PLC RSLogix模拟量IO模块基本介绍
  17. 八种酒吧里最时尚的喝酒法
  18. 会了它+稳定发挥=3000包吃住
  19. 基于XP系统IE极光漏洞渗透
  20. date java 格式化 sss_Java的日期格式化常用方法

热门文章

  1. mysql 联合索引 性能_mysql:联合索引及优化
  2. 电脑pro,大师屏幕,小米归来!小米笔记本Pro 15 OLED首发评测
  3. 用栈实现计算器c语言报告,请问,用c语言做一个计算器 包括+-*/()的运算 用栈 该怎么做...
  4. 2019matlab中的floyd,基于matlab的floyd算法详解
  5. 用了python之后笔记本卡了_应用
  6. 卷的作用_还在盲目的制作蛋糕卷吗?先来搞懂这几种蛋糕卷面糊~
  7. 对象工厂PHP,php – 域对象工厂是什么样的?
  8. mysql有没有类似merge_有关于Mysql的MERGE表类型
  9. vue获取当前月最后一天_只争朝夕,不负韶华——站在2020年第一天,回望2019最后的两个月...
  10. html5 拍照 清晰度,html5强大的功能(一)