javascript Array学习与使用

一.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,555

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

var e=["2","5","4","1"];

document.write(‘<b>‘+e.splice(1,3)+‘</b>‘+‘</br>‘);//5,4,1

var f=["2","5","4","1"];

document.write(‘<b>‘+f.splice(2)+‘</b>‘+‘</br>‘+‘<hr>‘);//4,1

(5)栈方法

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

var g=["red","yellow","blue"];

document.write(‘<b>‘+"修改后数组的新长度为:"+g.push("green","pink")+‘</b>‘+‘</br>‘);

//修改后数组的新长度为:5

document.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>‘);

//本身的类型为:object

document.write(‘<b>‘+f.toString()+‘</b>‘+‘</br>‘);//red,yellow,blue

document.write(‘<b>‘+"使用toString后的类型变为:"+typeof(f.toString())+‘</b>‘+‘</br>‘);//使用toString后的类型变为:string

document.write(‘<b>‘+f.valueOf()+‘</b>‘+‘</br>‘);//red,yellow,blue

document.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所在数组的位置是:0

document.write(‘<b>‘+"从1的位置开始找blue所在数组的位置是:"+h.indexOf("blue",1)+‘</b>‘+‘</br>‘);//从1的位置开始找blue所在数组的位置是:2

document.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的值为:15

data.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,5

document.write(‘<b>‘+"sum的值:"+sum+‘</b>‘+‘</br>‘);//原来数组:15

document.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,2

data333=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()的返回值:false

data444=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的值:15

var sum1=data5.reduce(function(x,y,index,data5){return x+y});

document.write(‘<b>‘+"sum1的值:"+sum1+‘</b>‘+‘</br>‘);//sum1的值:15

var sum2=data5.reduce(function(x,y,index,data5){return x*y},2);

document.write(‘<b>‘+"sum1的值:"+sum2+‘</b>‘+‘</br>‘);//sum2的值:240

时间: 2024-12-30 04:27:44

javascript Array学习与使用的相关文章

javascript Array学习

首先感谢Dash 我再也不用到处乱找文档了 再次感谢日食记 让我的看到了世界的美好 好的 我们进入正题 注解 我所有的学习心得都建立在ECMAscript5之后 IE9之前的浏览器概不负责 javascript Array是一个好玩的对象 如何检测她呢 首先instanceof是个不错的方法 if (value instanceof Array) { } 不过根据javascript高级程序设计说 这样做 如果一个人重新构造了Array函数 你完了 so 这样 if(Arrays.isArray

javascript Array学习(二)

首先感谢Dash 我再也不用到处乱找文档了 再次感谢日食记 让我的看到了世界的美好 好吧 array有什么好玩的方法吗 splice 很好玩的 splice 可以对数组进行删除 添加 修改操作 var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; // 插入  // 找到下表为2的位置 删除0个元素 插入 'drum' var removed = myFish.splice(2, 0, 'drum'); // myFish is ['an

javascript Array 方法学习

原生对象Array学习 Array.from()   从类似数组的对象或可迭代的对象返回一个数组 参数列表 arraylike  类似数组的对象或者可以迭代的对象 mapfn(可选)   对对象遍历映射的函数 this(可选)  选择映射函数的this对象 var charArr = Array.from("abc"); console.log(charArr[0]); //a var str = "abc"; console.log(str[0]); //a va

初步总结javascript中学习DOM之前的知识

嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把这些重新练习了一下,感觉还是蛮容易找到学习的兴趣的,顿时就默默的开始了今天的练习过程.今天就总结下初步认识javascript时间的一些实例,记得前面总结的并不完全,所以在这里总结一下基本概念. 一.基本的认识一些类型和方法 <script> var colors = new Array(3);

javascript 基础学习整理

1. javascript是动态语言,脚本语言,弱类型语言. 2. javascript代码在html文件中的位置安排,放在<body></body>内部与外部的区别.如何引用外部的javascript文件. 3. javascript单行注释与多行注释. 4. javascript如何申明变量. 5. javascript分支语句的使用. 6. javascript如何弹出警告框.确认框. 7. javascript函数的编写:带参数.带返回值. 8. javascript函数循

javascript小白学习指南1---0

第二章 变量和作用域 在看第二章时我希望,你可以回顾一下前一次所讲的内容  如果有所遗忘 点这里 今天我们来说说 变量和作用域的问题 本章主要内容 基本类型和引用类型 执行环境 垃圾回收(了解即可) 基本类型和引用类型 JS中可能包含两种不同的数据类型的值:  基本类型  和 引用类型    基本类型值 指的是简单的数据段   而 引用类型指那些可能由多个值构成的对象. 如何定义基本类型值和引用类型值呢?  看下面 创建一个变量并给它赋值就OK了. 对于引用类型我们可以添加 和删除它的属性和方法

js Array 学习

摘抄自<JavaScript权威指南> 1.join()返回生成的字符串.数组元素转化为字符串,拼接.默认分隔符:“,”. 2.reverse()返回逆序的数组,替换.数组中的元素倒序. 3.sort()返回排序后的数组,替换.数组中的元素排序.无参数:按字母表排序,undefined元素尾部:参数为比较函数: 4.concat()创建并返回一个新数组.新数组的元素:调用concat()的原始数组的元素,concat()的每个参数.参数自身是数组,则连接数组的元素,而非数组本身.不会递归扁平化

Javascript Promise 学习

Promise 就是处理异步的一个规范方法 a();b();alert("a");如果a() 里面有一个ajax 或者settimeout 那么alert("a") 会先跑这就是异步了.从前我们用一堆callBack函数来解决问题,但是这样写不好看.promise 的写法美丽多了依据上面的例子a().then(b).then(function(){alert("");})这样它会先跑完 a -> b - > alert("&

javascript基础学习(十)

javascript之数组 学习要点: 数组的介绍 定义数组 数组元素 数组的方法 一.数组的介绍 数组中的元素类型可以是数字型.字符串型.布尔型等,甚至也可以是一个数组. 二.定义数组 1.通过数组的构造函数来定义数组: var arr=new Array(); var arr=new Array(size); var arr=new Array(element1,element2,...); 2.直接定义数组: var arr=["字符串",true,13]; ps: 和Objec