JavaScript学习--Array类型

本文是自己的学习总结,供初学者参考使用。大神请忽略。。。。知识总结自JS高级编程^ _ ^

首先,JS中的Array类型的每一项可以保存任意类型的数据。而且数组的大小是可以动态调整的,它是随着数据的添加自动增长的。

* 创建数组的方式

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

var names=new Array();

var names=Array();  //可以省略new 操作符 。

var names=new Array(20);

var names=new Array("Merry","Jack","Lily");

第二种是使用数组字面量表示法。项之间用逗号隔开。

var names=["Mary","Rose"];

var names=[];   //空数组

var numbers=[4,5,];   //这样会创建一个包含2项或者3项的数组,不要这么做。

var options=[,,,,];    //这样会创建一个包含4项或者5项的数组。不要这样做。

在读取或者设置数组的值时,要使用方括号并提供索引。索引的值的不同可以改变数组的结构。

var numbers=[4,5,9,10,11,12];

console.log(numbers[1]);  //  5

numbers[6]=13 ;  //直接把值13加入到数组中。此时数组的长度为7

numbers[99]=99;   //此时数组的长度变为100。其他的值都是undefined

var colors=["Red","Green","Orange"];

colors.length=2;

console.log(colors[2]);  // undefined

*转换方法

所有对象都具有toLocalString()、toString()、valueOf()方法。

var names=["Merry","Lily","Tom"];

console.log(names.toString()) ; //Merry,Lily,Tom
console.log(names,valueOf()) ; // ["Merry", "Lily", "Tom"]
console.log(names);                // ["Merry", "Lily", "Tom"]

toLocalString()方法经常也会返回与前两个方法相同的值,但也不总是如此。请看下面的例子。

var person1={

  toLocaleString:function(){
  return "Nikolaos";
  },
  toString:function(){return "Niko";}
}
var person2={
toLocaleString:function(){
  return "Grigorios";
  },
  toString:function(){return "Greg";}
}

var people=[person1,person2];

console.log(people);  //[object,object]  in chrome

console.log(people);   /*[Object { toLocaleString=function(), toString=function()}, Object { toLocaleString=function(), toString=function()}]   in firefox */

alert(people);           //Nikp,Greg
console.log(people.toString());    //Nikp,Greg
console.log(people.toLocaleString());    //Nikolaos,Grigorios

*栈方法与队列方法

数组可以表现的像栈和队列一样,栈是一种后进先出的数据结构,就像一个只允许一人通过的死胡同,你先进去的你就只能最后出来。而队列则是先进先出的数据结构。听名字就知道像排队一样,谁先来得谁最先接受服务,最先离开。JS专门给数组提供了一些方法,以便它可以实现栈和队列那样的行为。

主要用到的方法就是push() ; pop() ; shift() ; unshift() ;

push() 方法是可以接收任意数量的参数,把它们逐个加入到数组的末尾,返回的修改后的当前数组的长度。

pop()方法则是从数组中移除末尾最后一项,返回移除的项。

shift()移除数组中的第一个项,返回该项。

unshift()在数组前端添加任意项,返回数组的长度。

var colors=new Array();

var count=colors.push("red","green");

console.log(count)     // 2 

count=colors.push("black");

console.log(count)    // 3

var item=colors.pop();

console.log(item);     //black

console.log(colors.length)   //2

console.log(colors.shift());  // red 

console.log(colors.unshift("Yellow","CCCC"))   // 3  Yellow,CCC,green

*重排序方法

最直接的方法是sort()|默认是按照升序排列数组|和reverse()|反转数组|方法。

var number=[0,1,5,10,15];

console.log(number.reverse())  // [15, 10, 5, 1, 0]

console.log(number.sort())   //[0, 1, 10, 15, 5]

可以看到reverse()方法将数组反转了,,可是sort()方法却并没有得到我们想要的效果。这是因为后者先会调用数组的toString()方法,然后比较得到的字符串,虽然数值10大于5但是转为字符串后却到了5的前面。因此我们一般不会直接让数值数组利用sort()进行排序,而是会给sort()一个排序方法。

var number=[0,1,10,5,15];

function compare(value1,value2){

if(value1 < value2)
    { return 1;}
  else if(value1>value2)
     {  return -1;}
    else
       { return 0;}
}

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

*操作方法

concat()方法可以基于当前数组中的所有项创建一个新数组。具体来说,这个方法会先创建一个副本,然后将接收到的参数添加到副本的末尾,返回这个新的副本数组。

var names=["May","Alisa"];

var newnames=names.concat("Jacky",["Mark","Mohan"]);

console.log(newnames[3]);  //Mark
console.log(newnames)   // ["May", "Alisa", "Jacky", "Mark", "Mohan"]

slice()方法是基于当前数组的一个或者多个item创建新的数组。当接受一个参数时,会返回从该参数位置开始到末尾的所有项。当接受两个参数时,返回起始到结束但不包括结束位置的所有项。

var names=["May","Alisa"];

var newnames=names.concat("Jacky",["Mark","Mohan"])

var newnames2=newnames.slice(1);

var newnames3=newnames.slice(2,4);

var newnames4=newnames.slice(-1,-3);

var newnames5=newnames.slice(-2,-1);  //当参数为负数时,会加上数组的长度来确定位置

console.log(newnames2)   // ["Alisa", "Jacky", "Mark", "Mohan"]

console.log(newnames3)   // ["Jacky", "Mark"]

console.log(newnames4)   //[]

console.log(newnames5)   //["Mark"]

splice()方法算是最强大的数组方法了,它有很多种用法。主要用途是向数组中部插入项。使用方式有3种。

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

*插入:可以向指定位置插入任意数量的项,需提供3个参数:起始位置,0(要删除的项数),要插入的项。例如splice(2,0,"AAA","BBB")从位置2开始插入两项。

*替换:插入项的同时删除原来位置的项,相当于替换。需提供3个参数:起始位置,要删除的项数,要插入的项。例如splice(2,1,"AAA","BBB")从位置2开始先把原来的删除,再插入新的两项。

var names=["Novia","Alisa","May"];
var removednames=names.splice(0,1);    

console.log(names)   //["Alisa", "May"]
console.log(removednames)  //["Novia"]

removednames=names.splice(1,0,"Jacky","Melody");

console.log(names);  // ["Alisa", "Jacky", "Melody", "May"]
console.log(removednames)   // []

removednames=names.splice(1,1,"Cherry","Tom")
console.log(names)   // ["Alisa", "Cherry", "Tom", "Melody", "May"]
console.log(removednames)  // ["Jacky"]

*位置方法

数组实例有两个位置方法 indexOf()和 lastIndexOf()。两者都接收两个参数:要查找的项和(可选)表示查找起点位置的索引。前者是从前向后查找,后者是从后向前查找。

var number=[1,2,3,4,4,5,6];

console.log(number.indexOf(4))  //3
console.log(number.lastIndexOf(4))  //4

console.log(number.indexOf(4,4))   //4
console.log(number.lastIndexOf(4,4))   //4

*迭代方法

数组有5个迭代方法。每个方法都要接收2个参数:要在每一项上运行的函数和(可选)作用域对象。根据使用方法的不同,这个函数执行后的返回值可能会也可能不会影响返回值。

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

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

*forEach(): 对数组的每一项运行给定的函数,没有返回值。

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

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

注意的是:所有的方法都不会影响数组的值。

其中every()和some()是最相似的。都用于查询数组的项是否满足某一条件。如果全部满足,返回true.则every()才会返回true.只要有一项返回true。some()就会返回true.

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);

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

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

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

//forEach 方法没有返回值。可以利用数组的每一项执行一些操作

numbers.forEach(function(item,index,array){
if(item>3)
  console.log(‘this number is > 3.‘)
  else if(item<3)
    console.log(‘this number is < 3.‘)
 else
   console.log(‘this number is = 3.‘)
})

得到的结果为:

*归并数组

ECMAScript 5 新增了两个归并方法:reduce()和reduceRight()。这两个方法都会迭代数组的所有项,然后构建一个最终的返回值。reduce()从数组第一项开始逐个遍历到最后。而reduceRight()是从最后一项开始向前遍历。

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

var sum=numbers.reduce(function(pre,cur,index,array){return pre+cur})
console.log(sum);  //25

var sum2=numbers.reduceRight(function(pre,cur,index,array){return pre+cur})
console.log(sum2)   //25

使用这两个方法,主要取决于要从哪头遍历数组,除此之外,它们完全相同。

时间: 2024-10-14 01:43:32

JavaScript学习--Array类型的相关文章

JavaScript中Array类型方法总结

Array类型是ECMAScript中最常用的类型之一,ECMAScript中的数组与其他多数语言中的数组有着相当大的区别.ECMAScript数组的每一项可以保存任何类型的数据.这里总结了数组类型的大多数方法,方便以后查找使用. 一.创建数组的基本方式 创建数据的基本方式有两种: 1.使用Array构造函数 var colors=new Array();var colors=new Array(20); //创建length值为20的数组var colors=new Array("red&qu

JavaScript 学习笔记— —类型判断

//1 判断是否为数组类型 var a=[0]; console.log(isArray(a)); function isArray(obj){ return (typeof obj=='object') && obj.constructor==Array; } console.log("2-----------------------------------") //2 判断是否为字符串类型 console.log(isString('test')); console

JavaScript之Array类型

特殊性 数组的每一项可以保存任何类型的数据 大小可以动态调整(即随着数据的添加而自动增长容量) length属性非只读! 创建数组的基本方式 //Array构造函数 var colors = new Array(); colors = new Array(20);//初始化数组容量 colors = new Array('red','blue',4)//创建包含该三项值的数组 //数组字面量表示 colors = ['name',4,true]; 利用length的非只读性.自动更新性 //移除

javascript中Array类型常用方法

方法总览: instanceOf Array.isArray() toString() join() push() pop() shift() unshift() splice() concat() slice() indexOf lastIndexOf reverse() sort() forEach() filter() map() every() some() reduce() reduceRight() 一.检测方法 instanceof Array.isArray()   (ES5 新

javascript中array类型队列方法总结

队列方法 数组推入: push()    unshift()   调用方法返回数组新长度 数组移除: pop()     shift()       调用方法返回移除的那个元素 注:ie7及更早的版本中,unshift()方法总是返回undefined Demo

总结Array类型中常用的方法

Array类型应该是 ECMAScript 中最常用的类型之一了,并且它定义的数组与其他语言有着相当大的区别.数组是数据的有序集合,我们可以通过下标对指定位置的数据进行读写:特别的是,在 ECMAScript 中,数组的每一项可以保存任何类型的数据,数组的大小可以动态调整,它可以随着数据的添加自动增长来容纳新增的数据,从而变得更加灵活.下面总结了Array类型常见的一些方法. 一.栈方法 push() , pop() 这两个方法可以使数组的行为类似于"栈"这种数据结构,"栈&

理解javascript中的Array类型

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

全栈JavaScript之路(十)学习 DocumentFragment 类型 节点

DocumentFragment 类型节点,代表一个文档片段,是一种轻量级的'文档' 对象,可以包含其它类型节点,并有能力访问.操作其中的节点,但是在文档中没有文档标记,相当于是一个页面不可见的容器.其构造函数为,function DocumentFragment() {[native code]}. DocumentFragment 类型节点的特征; nodeType:11 nodeName:#document-fragment nodeValue:null prasentNode:null

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde