js中数组的基本使用

javascript中数组的使用

Array对象

用于在单个变量中存储多个值,数组是值的有序集合，每个值叫做元素，每个元素在数组中都有数字组成的编号。数组是弱类型的，元素可以是不同类型的数据

var arr = [1,"abc",true,null,undefined,[1,2,3],{x:a}}]

Array对象的创建

1：var arr = new Array();//构造器
arr[0] = 1;
arr[1] = 2;
2：var arr = new Array(1,2,3);
3：var arr = new Array(6);
4：var arr = [1,2,3]

数组的增删：

var arr =[5,6,7,8,9]
console.log(arr)//5,6,7,8,9
console.log(arr.length)//5
arr.length=4
console.log(arr)//5,6,7,8
console.log(arr.length)//4
console.log(arr[2])//7
console.log(3 in arr)//true
delete arr[2]
console.log(arr)//5,6,3:8
console.log(arr[2])//undefined
console.log(3 in arr)//false
console.log(arr.length)//4

数组的迭代：

var arr = [1,2,3,4,5];
for(var i = 0 ; i < arr.length ; i++){
console.log(arr[i])//1,2,3,4,5
}
for(i in arr){
console.log(arr[i])//1,2,3,4,5
}
Array.prototype.a = "hello";
for(i in arr){
console.log(arr[i])//1,2,3,4,5,hello
}

for(i in arr){
if(arr.hasOwnProperty(i)){
console.log(arr[i]);//1,2,3,4,5
}
}

稀疏数组

var arr = [undefined];
console.log(0 in arr)//true

var arr = new Array(1);
console.log(0 in arr)//false

arr.length = 100;
arr[99] = 123;
console.log(99 in arr)//true
console.log(98 in arr)//false

var arr = [,,]
console.log(0 in arr)//false

Array对象方法

改变元数组的方法：

• push()
• pop()
• shift()
• unshift()
• sort()
• reserve()

不改变元数组的方法，返回新的数组或其他：

• valueOf()
• toString()
• toLocaleString()
• toSource()
• join()
• concat()
• slice()
• splice()
• indexOf()
• lastIndexOf()
• every()
• some()
• filter()
• map()
• forEach()
• reduce()
• reduceRight()
• isArray

1：valueOf()

返回数组对象的原始值

valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

语法：

arr.valueOf()

运行：

var arr = new Array(1,2,3,4,5);
document.write(arr +"
");
document.write(arr.valueOf() +"
");

输出：

1,2,3,4,5
1,2,3,4,5

2：toString()

把数组转化为字符串，并返回结果，不改变原来数组

语法：

arr.toString()

运行:

输出：

1,2,3,4,5
object
object
string
1,2,3,4,5
string
string

3：<a name=toLocalString">toLocaleString()

把数组转化为本地字符串，并返回结果，不会改变原数组，和toString（）类似

首先调用每个数组元素的 toLocaleString() 方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。

语法：

arr.toLocaleString()

4：sort()

对数组的元素进行排序，改变的是原数组，不会创建新数组

是按照字符编码的顺序进行排序。数组的元素都转换成字符串，以便进行比较。

语法：

arr.sort()

运行：

输出：

George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas
Adrew,George,James,John,Martin,Thomas
对数字大小排序

运行：

输出：

George,John,Thomas
Thomas,John,George

6：push()

在数组的末尾添加一个或多个元素，并返回数组的长度，改变的是原数组，不会创建新数组

语法：

arr.push("xxx")

运行：

输出：

George,John,Thomas,James,Adrew,Martin
7
George,John,Thomas,James,Adrew,Martin,tom

7：pop()

删除并返回数组的最后一个元素，改变的是原数组，不会创建新数组,

如果数组是空的，那么 pop() 方法将不进行任何操作，返回 undefined 值。

语法：

arr.pop()

运行：

输出：

George,John,Thomas,James,Adrew,Martin
Martin
George,John,Thomas,James,Adrew

8：unshift()

向数组的开头添加一个或多个元素，并返回数组的长度,改变的是原数组，不会创建新数组

语法：

arr.unshift("xxx")

运行：

输出：

George,John,Thomas,James,Adrew,Martin
7
tom,George,John,Thomas,James,Adrew,Martin

9：shift()

删除并返回数组的第一个元素,改变的是原数组，不会创建新数组,

如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。

unshift() 方法无法在 Internet Explorer 中正确地工作！

语法：

arr.shift()

运行：

输出：

George,John,Thomas,James,Adrew,Martin
George
John,Thomas,James,Adrew,Martin

10：concat()

连接两个或多个数组，并返回结果,不会改变原数组，创建新数组

语法：

arr.concat([a,b])

运行：

输出：

1,2,3,4,5,6,7,8
1,2,3
4,5,6
7,8

11：join()

数组转化为字符串，并通过指定的分隔符进行分隔,不改变原数组

语法：

arr.join("")

运行：

输出：

object
George,John,Thomas
object
string
George.John.Thomas
George|John|Thomas
George&John&Thomas

输入：

function repeatString(str,n){
return new Array(n+1).join(str)
}

调用：

repeatString("a",4)
repeatString("hi",4)

输出：

aaaa
hihihihi

12：slice()

从已有的数组中返回选定的元素，不改变原数组，创建新数组

语法：

arr.slice(start,end)

运行：

输出：

George,John,Thomas
John,Thomas
George,John,Thomas

13：splice()

删除元素，并向数组添加新元素,改变原数组，不会创建新数组

语法：

arr.splice(index,num,"xxx")
index：删除起始位置
num：删除个数
xxx：添加新数组

运行：

输出：

a,b,c
b,c
a,d

14：toSource()

返回该对象的源代码

只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法。

toSource() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

语法：

arr.toSource()

15：indexOf()

ES5

元素存在，返回元素所在的位置，不存在，返回-1

语法：

arr.indexOf("a")//从第一个位置找
arr.indexOf("a",n)//从第n+1个位置找

运行：

输出：

a,b,c
1
a,b,c

16：lastIndexOf()

ES5

返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。不存在，返回-1

语法：

arr.lastIndexOf("a")//从倒数一个位置找
arr.lastIndexOf("a",n)//从倒数n+1个位置找

运行：

输出：

a,b,c
2
a,b,c

17：every()

ES5

检查数组中所有元素是否符合指定条件（通过函数处理）

• every()方法使用指定函数检测数组中的所有元素
• 如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会在检测
• 如果所有元素都满足条件，则返回true
• every()不会对空数组检测
• every()不会改变原数组

语法：

arr.every(check)
function check(value,index,arr){}
value:每一个值
index:索引值
arr：原数组

运行：

输出：

23,34,25
23,34,25
23,34,25
23,34,25
true
23,34,25

18：some()

ES5

检查数组是否有元素符合指定条件（通过函数处理）

• some() 方法使用指定函数检测数组中的所有元素
• 如果数组中检测到有一个元素满足条件，则整个表达式返回 true ，且剩余的元素不会再进行检测。
• 如果没有元素都满足条件，则返回 false
• some() 不会对空数组进行检测。
• some() 不会改变原始数组。

语法：

arr.some(check)
function check(value,index,arr){}
value:每一个值
index:索引值
arr：原数组

运行：

输出：

23,34,25
23,34,25
true
23,34,25

19：filter()

ES5

检测数值元素，并返回符合条件的所有元素的数组

• filter()方法创建一个新数组，新数组中的元素是经过检测之后符合条件的所有元素
• filter() 不会对空数组进行检测。
• filter() 不会改变原始数组。

语法：

arr.filter(check)
function check(value,index,arr){}
value:每一个值
index:索引值
arr：原数组

运行：

输出：

23,34,25
23,34,25
23,34,25
23,34,25
34,25
23,34,25

20：map()

ES5

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

• map()方法创建一个新数组，新数组中的元素是经过检测之后符合条件的所有元素
• map() 不会对空数组进行检测。
• map() 不会改变原始数组。

语法：

arr.map()

运行：

输出：

1,2,3
1,1.4142135623730951,1.7320508075688772
1,2,3

21:forEach()

输入：

var arr = [1,2,3,,4,5]
arr.forEach(function(value,index,_arr){
console.log("value:"+value+";index:"+index+";原元素："+_arr)
})

输出：

value:1;index:0;原元素：1,2,3,,4,5
value:2;index:1;原元素：1,2,3,,4,5
value:3;index:2;原元素：1,2,3,,4,5
value:4;index:4;原元素：1,2,3,,4,5
value:5;index:5;原元素：1,2,3,,4,5

22：reduce

ES5

对元素的俩俩遍历操作

输入：

var arr = [1,2,3,4]
var sum = arr.reduce(function(x,y){
return (x+y)
})
console.log(sum)
输出：

10

输入：

var arr = [5,6,4]
var sum = arr.reduce(function(x,y){
console.log(x+":"+y)
return x > y ? x : y;
})
console.log(sum)
输出：

5:6
6:4
6

22：reduceRight

ES5

对元素的俩俩反向遍历操作

输入：

var arr = [1,2,3,4]
var sum = arr.reduceRight(function(x,y){
return (x+y)
})
console.log(sum)
输出：

10

输入：

var arr = [5,6,4]
var sum = arr.reduceRight(function(x,y){
console.log(x+":"+y)
return x > y ? x : y;
})
console.log(sum)
输出：

4:6
6:5
6

23 isArray()

判断是否为数组

语法：

Array.isArray([])//true
[] instanceof Array //true
({}).toString.apply([]) === "[object Array]"//true
[].constructor === Array //true

Array对象属性

1：constructor

返回创建此对象的数组函数的引用

语法：

arr.constructor

运行：

输出：

object
function Array() { [native code] }
true

2：length

设置或者返回数组中的元素的长度

语法：

array.length

说明：

数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。

属性 length 声明了数组中的元素的个数。

数组的 length 属性在用构造函数 Array() 创建数组时被初始化。

给数组添加新元素时，将更新 length 的值。

设置 length 属性可改变数组的大小。如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失。如果设置的值比它的当前值大，数组将增大，新的元素被添加到数组的尾部，它们的值为 undefined。

运行：

输出：

arr1改变前：a,b,c
arr1改变前的长度：3
arr1改变后：a,b
arr1改变后的长度：2
arr2改变前：,
arr2改变前的长度：2
arr2改变后：,,,,
arr2改变后的长度：5

3：prototype

向数组添加属性和方法

语法：

arr.prototype

运行：

输出：

goods:篮球
age:28
name:frank