1. 创建数组

 var colors = new Array();
var colors = new Array(20);
var colors = new Array("blue", "red", "yellow");
var colors = Array();
var colors = [];
var colors = ["red", "blue", "yellow"];
var colors = [1,1,]; // 不推荐这么做 这样会创建一个包含2或3项的数组

2. 数组检测--用于判断一个对象是否是数组

  a. instanceof()

//  用于判断一个对象是否是数组;但是只能用于一个网页或者一个全局对象而言来使用,如果网页中包含多个框架,
// 那么实际上就存在两个以上不同的全局执行环境,那么传入的数组与在第二个框架中原生创建的数组分别各具有各自不同的构造函数。

  b. isArray() 推荐使用

 //example
var test0 = [1,2,3,4];
if(Array.isArray(test0)) {
console.log("this is array");
}

3. array的方法

  1. array 属性--length

 // 和c语言中数组的长度是一个方法不同,不需要在length后面加"()"
var test1 = [1,2,3,4,5];
console.log(test1.length);

  2. 转换方法--toLocalString() toString() valueOf()

    所有对象都具有这三个方法

    a. toLocalString()方法

     数组array的toLocalString()方法则是调用每一项的toLocalString方法

    b. toString()方法

     数组array的toString()方法则是调用每一项的toString方法

     虽然上面的解释好像有点难理解,但是请看例子

 //person1和person2分别为两个对象,都有toLocalString() 与 toString()方法
var person1 = {
toLocaleString: function() {
return 'toLocaleString1';
},
toString: function() {
return 'toString1';
}
}
var person2 = {
toLocaleString: function() {
return 'toLocaleString2';
},
toString: function() {
return 'toString2';
}
}
//people为数组 每一项都是一个对象
var people = [person1, person2];
// alert()需要接收字符串参数,所以会在后台调用toString()方法
alert(people); //输出toString1,toString2
console.log(people.toString()); //输出toString1,toString2
console.log(people.toLocaleString()); //输出toLocaleString1,toLocaleString2

    c.valueOf() 返回的内容也是数组

 console.log(people.valueOf());
alert(people.valueOf()); //还是调用了toString方法

  3.栈方法  push() and pop()

 var test2 = [];
var count = test2.push('red', 'blue'); //推入两项,返回值为数组的长度
console.log(count); //输出2
count= test2.push("white");
console.log(count); //输出3
var item = test2.pop(); //推出最后推入的那一项 数组长度减1
console.log(item);

  4.队列方法 push() and shift()

 var test3 = [];
var count1 = test3.push('red','blue');
console.log(count1); //输出2
count1 = test3.push('white');
console.log(count1); //输出3
var item1 = test3.shift();
console.log(item1); //推出第一项 数组长度减1
// unshift()方法:在数组前端添加任意个项并返回数组长度

  5.重排序方法 reverse() and sort()

    a. reverse()  反转数组的顺序

 var test4 = 'hello world';
var temp = test4.split("").reverse().join("");
console.log(temp); //输出dlrow olleh
console.log(test4); //temp发生反转,但是原字符串并没有发生反转

    b. sort() 按照升序排序数组,但是是对字符串进行排序 所以需要接收一个比较函数作为参数

 var compare = function(value1,value2) {
if(value1 < value2) {
return -1;
}
else if(value1>value2) {
return 1;
}
else {
return 0;
}
}
// 如果value1和value2都是数值类型或者其valueOf()方法会返回数值类型的对象类型,则可以使用更简单的比较函数
var compare1 = function(value1,value2) {
return value1 - value2;
}
var test5 = [0,1,5,10,15];
var test6 = [0,1,5,10,15];
console.log(test5.sort()); //按照字符串排序 输出[0, 1, 10, 15, 5]
console.log(test6.sort(compare1)); //按照数值排序 输出[0, 1, 5, 10, 15]

  6.操作方法 concat() slice() splice()

    a. concat() 会先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组

     // 如果没有提供参数,那么就只是复制当前数组并返回副本

     // 如果提供的参数为一个或多个数组,那么该方法会将这些数组中的每一项都添加到结果数组中

     // 如果提供的参数不是数组,那么这些值就会被简单地添加到结果数组的末尾

 var test7 = ['red', 'blue','green'];
var test8 = test7.concat('yellow', ['white','brown']);
console.log(test8); //输出["red", "blue", "green", "yellow", "white", "brown"] 原数组test7不会发生改变

    b.slice() 基于当前数组中的一个或多个项创建一个新数组  

     // 接收一个或两个参数
     // 参数只有一个,返回从该参数指定位置开始到当前数组末尾的所有项,
     // 参数有两个,则返回起始卫士到结束位置之间的项(注意:不包括结束位置)
     // 同样的,原数组不会受到影响

 var test9 = [0,1,2,3,4,5,6,7,8,9];
var test10 = test9.slice(1);
console.log(test10); //输出[1, 2, 3, 4, 5, 6, 7, 8, 9] 从下标为1开始到数组结束
var test11 = test9.slice(3,8);
console.log(test11); //输出[3, 4, 5, 6, 7] 从下标3开始到下标8之前的位置 (即不包括结束位置)

     // 如果参数中有负数,len = array.length; 则将负数参数与len相加来确定相应的位置

     // 如果起始位置大于结束位置,则返回空数组 (!!!)

    c. splice() 《JavaScript高级程序设计》将它列为最强大的数组方法  有多种用法,其中最主要的用法是向数组的中部插入项

     i. 删除: 可以删除任意数量的项,只需要指定两个参数:要删除的第一项的位置和要删除的项数

 var test12 = [0,1,2,3,4];
var remove = test12.splice(1,2); //splice返回的值是一个数组
console.log(test12); //原数组会发生改变 为删除之后的内容 输出[0, 3, 4]
console.log(remove); //删除的内容,就算删除的项只有一个,也是数组 输出[1, 2]

     ii. 插入: 向指定位置插入任意数量的项,需要提供至少三个参数:插入内容的起始位置,0(即要删除的项数)和要插入的项

 var test13 = [0,1,2,3,4];
remove = test13.splice(1,0,5,6,7,8); //如果是要插入多个项,则是不断添加参数
console.log(test13); //原数组会发生改变,为插入项之后的内容, 输出[0, 5, 6, 7, 8, 1, 2, 3, 4]
console.log(remove); //由于参数中需要删除的项数为0,则返回一个长度为0的数组

      iii. 替换: 向指定位置插入任意数量的项,同时删除任意数量的项,主要提供至少3个参数:起始位置,要删除的项数,以及要插入的项。插入的项数不必与删除的项数相等

 var test14 = [0,1,2,3,4];
remove = test14.splice(1,2,'a','b','c');
console.log(test14); //原数组发生改变 输出[0, "a", "b", "c", 3, 4]
console.log(remove) //被删除的项的数组 输出[1, 2]

  7. 位置方法  indexOf() lastIndexOf() 这两个方法都接受两个参数:要查找的项和(可选)查找起点位置的索引

   // 返回的内容都是要查找的项在数组中的位置,如果没有查找到,则返回-1
   // 注意: 在比较第一个参数与数组中的每一项时,会使用全等操作符,所以要求查找的项必须严格相等(===)

    a. indexOf() 从数组的开头(位置0)开始向后查找

var test15 = [0,1,2,3,4,5,6,7];
console.log(test15.indexOf(3)); //输出3的索引3
console.log(test15.indexOf(3,4)); //因为查找起点位置的索引为4,在索引4之后没有3这一项,所以输出-1

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

console.log(test15.lastIndexOf(3));   //输出3的索引3
console.log(test15.lastIndexOf(3,4)); //查找起点位置的索引为4,往前查找可以找到3这一项 输出3的索引3
console.log(test15.lastIndexOf(3,2)); //查找起点位置的索引为2,2之前没有3这一项,所以输出-1

  8. 迭代方法  every() filter() forEach() map() some() 每一个方法都接收两个参数:要在每一项上运行的函数(可选)运行该函数的作用域对象-影响this的值

   // 传入这些方法中的函数会接收三个参数:数组项的值,该项在数组中的位置和数组对象本身
   // 使用方法不同,这个函数执行后的返回值可能会也可能不会影响方法的返回值

    a. every() 用于查询数组中的项是否满足某个条件 传入的函数必须对每一项都返回true 这个方法才会返回true,否则返回false

 var test16 = [0,1,2,3,4,5,4,3,2,1];
//对每项检查该项的值是否大于2
var result = test16.every(function(item,index,array) {
return (item >2);
});
console.log(result); //输出false
//对每一项检查该项的值是否大于-1
result = test16.every(function(item,index,array) {
return (item > -1);
});
console.log(result); //输出true

    b. some()  与every()方法类似,也是由于查询数组中的项是否满足某个条件 不同的是,传入的函数对数组中的某一项返回true 这个方法就会返回true

 result = test16.some(function(item,index,array) {
return (item>2);
});
console.log(result); //输出true

    c. filter() 利用指定的函数确定是否在返回的数组中包含某一项 即给定一个选择过滤的函数,返回满足条件的项组成的数组

     // 可以说every() 与 some() 确定是否有满足条件的项,filter把满足条件的项过滤出来

 var result1 = test16.filter(function(item,index,array) {
return (item >2);
});
console.log(result1); //输出[3, 4, 5, 4, 3]

    d. map()  返回一个数组,这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果

     //这个函数适合创建包含的项与另一个数组一一对应的数组

 var result2 = test16.map(function(item,index,array) {
return item*2;
});
console.log(result2); //输出[0, 2, 4, 6, 8, 10, 8, 6, 4, 2]

    e. forEach() 对数组中的每一项运行传入的函数,这个方法没有返回值,本质上与使用for循环迭代数组一样

 var sum = 0;
test16.forEach(function(item,index,array) {
sum += item;
});
console.log(sum);

  9. 归并方法  reduce() reduceRight() 迭代数组的所有项,然后构建一个最终返回的值

   // reduce() 从数组的第一项开始,逐个遍历到最后,而reduceRight()则从数组的最后一项开始,向前遍历到第一项
   // 传入函数的参数:这两个方法都接收4个参数:前一个值,当前值,项的索引和数组对象
   // 传入函数在每一项上返回的值都会作为第一个参数自动传给下一项
   // 是使用reduce()还是reduceRight()取决于需要从哪一头开始遍历数组

 var test17 = [1,2,3,4,5,6,7,8,9];
//数组求和
var sum1 = test17.reduce(function(prev,cur,index,array) {
return prev+cur; //每一项上的操作及返回的值
});
console.log(sum1); //sum1获取到的是遍历之后最终的值

JavaScript之Array类型的更多相关文章

  1. 浅谈 JavaScript 中 Array 类型的方法使用

    前言:Array 类型是 JavaScript 中除了 Object 类型以外最常用的类型. 一.创建数组 JavaScript 中的数组与其他语言中的数组有着很大的区别.例如Java.PHP等语言中 ...

  2. JavaScript中Array类型方法总结

    Array类型是ECMAScript中最常用的类型之一,ECMAScript中的数组与其他多数语言中的数组有着相当大的区别.ECMAScript数组的每一项可以保存任何类型的数据.这里总结了数组类型的 ...

  3. javascript 常用array类型方法

    concat:基于当前数组中的所有项创建一个新数据,会创建当前数组一个副本,然后将接受到的参数放到数组末尾,最后返回新数组.如果没有参数,则复制当前数组并返回副本. slice:基于当前数组中一个或多 ...

  4. 总结Array类型中常用的方法

    Array类型应该是 ECMAScript 中最常用的类型之一了,并且它定义的数组与其他语言有着相当大的区别.数组是数据的有序集合,我们可以通过下标对指定位置的数据进行读 写:特别的是,在 ECMAS ...

  5. 从头开始学JavaScript (十二)——Array类型

    原文:从头开始学JavaScript (十二)--Array类型 一.数组的创建 注:ECMAscript数组的每一项都可以保存任何类型的数据 1.1Array构造函数 var colors = ne ...

  6. 《JavaScript高级程序设计》读书笔记 ---Array 类型

    除了Object 之外,Array 类型恐怕是ECMAScript 中最常用的类型了.而且,ECMAScript 中的数组与其他多数语言中的数组有着相当大的区别.虽然ECMAScript 数组与其他语 ...

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

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

  8. JavaScript引用类型之Array类型API详解

    Array类型也是ECMASCRIPT中最常见的数据类型,而且数据的每一项可以保存任何类型的数值,而且数组的大小是可以动态调整的,可以随着数据的添加自动增长以容纳新的数据.下面,总结数据的一些常用方法 ...

  9. javascript array类型用法

    javascript高级编程-Array引用类型用法总结  2016-09-17   |    357 引用类型-Array类型 引用类型是一种数据结构,用于将数据和功能联系起来. 创建对象的方式: ...

随机推荐

  1. vbscript调用fso

    function getVersion(strPath) Dim fver, fso Set fso = CreateObject("Scripting.FileSystemObject&q ...

  2. xcode8+iOS10问题

    .xcode升级到8.0后打印的问题 ()xcode8会打印一些莫名其妙的log 解决方法:Scheme里面添加OS_ACTIVITY_MODE = disable ()xcode8打印log不完整 ...

  3. VC++ 回调函数及使用方法(转)

    转载:http://blog.csdn.net/vsooda/article/details/7435801 转载:http://blog.csdn.net/lincyang/article/deta ...

  4. c# winform DataGridView单击选中一整行,只能单选,不能选择多行,只能选择一行

    设置DataGridView的属性SelectionMode为FullRowSelect 这样就使DataGridView不是选择一个字段,而是选择一整行了 设置DataGridView的属性Mult ...

  5. ubuntu 14.04 vsftpd安装问题

    sudo apt-get install vsftpd; 打开允许访问用户名 local_enable=YES write_enable=YES chroot_list_file=/etc/vsftp ...

  6. Python中MySQLdb模块的安装

    安装 MySQLdb是Python语言访问mysql数据库的一个模块,如果你不确定自己的Python环境中是否已经安装了这个模块,可以打开Python shell,输入import MySQLdb,如 ...

  7. s5pv210启动debian出错提示bash: cannot set terminal process group (-1): Inappropriate ioctl for device

    1.启动参数如下: bootargs=root=/dev/nfs nfsroot=192.168.1.8:/opt/wheezy_fs ip=192.168.1.9:192.168.1.8:192.1 ...

  8. PCA9554

    参考资料: 1. Texas Instruments PCA9554简介 2. PCA9554文档下载 3. PCA9554 Data Sheet 知识点: ● PCA9554是具有中断输出和配置寄存 ...

  9. 读文章《Flexbox详解》笔记

    文章地址:Flexbox详解 属性摘抄: flex container : display: other values | flex | inline-flex; flex-direction: ro ...

  10. jq 实现上下排序的一段代码

    前台页面: <div class="adddaren_box"> {%if isset($masterDetailsInfo)%} <div class=&quo ...