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对象方法
改变元数组的方法：
不改变元数组的方法，返回新的数组或其他：
- 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 +"<br/>");
document.write(arr.valueOf() +"<br/>");
输出：
1,2,3,4,5
1,2,3,4,5
2：toString()
把数组转化为字符串，并返回结果，不改变原来数组
语法：
arr.toString()
运行:
<script>
var arr = new Array(1,2,3,4,5);
document.write(arr +"<br/>");
document.write(typeof arr +"<br/>");
arr.toString();
document.write(typeof arr+"<br/>");
document.write(typeof arr.toString()+"<br/>");
var _arr = arr.toString();
document.write(_arr +"<br/>");
document.write(typeof arr.toString()+"<br/>");
document.write(typeof _arr +"<br/>");
</script>
输出：
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()
运行：
<script>
var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";
document.write(arr +"<br/>");
document.write(arr.sort() +"<br/>");
document.write(arr +"<br/>");
</script>
输出：
George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas
Adrew,George,James,John,Martin,Thomas
对数字大小排序
运行：
<script type="text/javascript">
function sortNumber(a,b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
输出：
10,5,40,25,1000,1
1,5,10,25,40,1000
5：reverse()
颠倒数组中元素的顺序，改变的是原数组，不会创建新数组
语法：
arr.reverse()
运行：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.reverse())
</script>
输出：
George,John,Thomas
Thomas,John,George
6：push()
在数组的末尾添加一个或多个元素，并返回数组的长度，改变的是原数组，不会创建新数组
语法：
arr.push("xxx")
运行：
<script>
var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";
document.write(arr +"<br/>");
document.write(arr.push("tom") +"<br/>");
document.write(arr +"<br/>");
</script>
输出：
George,John,Thomas,James,Adrew,Martin
7
George,John,Thomas,James,Adrew,Martin,tom
7：pop()
删除并返回数组的最后一个元素，改变的是原数组，不会创建新数组,
如果数组是空的，那么 pop() 方法将不进行任何操作，返回 undefined 值。
语法：
arr.pop()
运行：
<script>
var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";
document.write(arr +"<br/>");
document.write(arr.pop() +"<br/>");
document.write(arr +"<br/>");
</script>
输出：
George,John,Thomas,James,Adrew,Martin
Martin
George,John,Thomas,James,Adrew
8：unshift()
向数组的开头添加一个或多个元素，并返回数组的长度,改变的是原数组，不会创建新数组
语法：
arr.unshift("xxx")
运行：
<script>
var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";
document.write(arr +"<br/>");
document.write(arr.unshift("tom") +"<br/>");
document.write(arr +"<br/>");
</script>
输出：
George,John,Thomas,James,Adrew,Martin
7
tom,George,John,Thomas,James,Adrew,Martin
9：shift()
删除并返回数组的第一个元素,改变的是原数组，不会创建新数组,
如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。
unshift() 方法无法在 Internet Explorer 中正确地工作！
语法：
arr.shift()
运行：
<script>
var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";
document.write(arr +"<br/>");
document.write(arr.shift() +"<br/>");
document.write(arr +"<br/>");
</script>
输出：
George,John,Thomas,James,Adrew,Martin
George
John,Thomas,James,Adrew,Martin
10：concat()
连接两个或多个数组，并返回结果,不会改变原数组，创建新数组
语法：
arr.concat([a,b])
运行：
<script>
var a = [1,2,3];
var b = [4,5,6];
var b = [7,8];
document.write(a.concat(b,c)+"<br/>");
document.write(a+"<br/>");
document.write(b+"<br/>");
document.write(c+"<br/>");
</script>
输出：
1,2,3,4,5,6,7,8
1,2,3
4,5,6
7,8
11：join()
数组转化为字符串，并通过指定的分隔符进行分隔,不改变原数组
语法：
arr.join("")
运行：
<script>
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(typeof arr+"<br/>");
document.write(arr.join()+"<br/>");
document.write(typeof arr+"<br/>");
document.write(typeof arr.join()+"<br/>");
document.write(arr.join(".")+"<br/>");
document.write(arr.join("|")+"<br/>");
document.write(arr.join("&")+"<br/>");
</script>
输出：
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)
运行：
<script>
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr+"<br/>");
document.write(arr.slice(1)+"<br/>");
document.write(arr+"<br/>");
</script>
输出：
George,John,Thomas
John,Thomas
George,John,Thomas
13：splice()
删除元素，并向数组添加新元素,改变原数组，不会创建新数组
语法：
arr.splice(index,num,"xxx")
index：删除起始位置
num：删除个数
xxx：添加新数组
运行：
<script>
var arr = new Array(3)
arr[0] = "a"
arr[1] = "b"
arr[2] = "c"
document.write(arr+"<br/>");
document.write(arr.splice(1,2,"d")+"<br/>");
document.write(arr+"<br/>");
</script>
输出：
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个位置找
运行：
<script>
var arr = new Array(3)
arr[0] = "a"
arr[1] = "b"
arr[2] = "c"
document.write(arr+"<br/>");
document.write(arr.indexOf("b")+"<br/>");
document.write(arr+"<br/>");
</script>
输出：
a,b,c
1
a,b,c
16：lastIndexOf()
ES5
返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。不存在，返回-1
语法：
arr.lastIndexOf("a")//从倒数一个位置找
arr.lastIndexOf("a",n)//从倒数n+1个位置找
运行：
<script>
var arr = new Array(3)
arr[0] = "a"
arr[1] = "b"
arr[2] = "c"
document.write(arr+"<br/>");
document.write(arr.lastIndexOf("c")+"<br/>");
document.write(arr+"<br/>");
</script>
输出：
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：原数组
运行：
<script>
var arr = new Array(3)
arr[0] = "23";
arr[1] = "34";
arr[2] = "25";
document.write(arr+"<br/>");
document.write(arr.every(check)+"<br/>");
document.write(arr+"<br/>");
function check(value,idnex,arr){
document.write(arr+"<br/>");
return value>18
}
</script>
输出：
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：原数组
运行：
<script>
var arr = new Array(3)
arr[0] = "23";
arr[1] = "34";
arr[2] = "25";
document.write(arr+"<br/>");
document.write(arr.some(check)+"<br/>");
document.write(arr+"<br/>");
function check(value,idnex,arr){
document.write(arr+"<br/>");
return value>18
}
</script>
输出：
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：原数组
运行：
<script>
var arr = new Array(3)
arr[0] = "23";
arr[1] = "34";
arr[2] = "25";
document.write(arr+"<br/>");
document.write(arr.filter(check)+"<br/>");
document.write(arr+"<br/>");
function check(value,idnex,arr){
document.write(arr+"<br/>");
return value>24
}
</script>
输出：
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()
运行：
<script>
var arr = new Array(3)
arr[0] = "1";
arr[1] = "2";
arr[2] = "3";
document.write(arr+"<br/>");
document.write(arr.map(check)+"<br/>");
document.write(arr+"<br/>");
function check(value,index,arr){
console.log(value)
console.log(index)
console.log(arr)
return Math.sqrt(value)
}
</script>
输出：
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
运行：
<script>
var arr = new Array();
document.write(typeof arr +"<br/>");
document.write(arr.constructor +"<br/>");
document.write(arr.constructor == Array);
</script>
输出：
object
function Array() { [native code] }
true
2：length
设置或者返回数组中的元素的长度
语法：
array.length
说明：
数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。
属性 length 声明了数组中的元素的个数。
数组的 length 属性在用构造函数 Array() 创建数组时被初始化。
给数组添加新元素时，将更新 length 的值。
设置 length 属性可改变数组的大小。如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失。如果设置的值比它的当前值大，数组将增大，新的元素被添加到数组的尾部，它们的值为 undefined。
运行：
<script>
var arr1 = new Array();
var arr2 = new Array(2);
arr1[0] = "a";
arr1[1] = "b";
arr1[2] = "c";
document.write("arr1改变前："+arr1+"<br/>");
document.write("arr1改变前的长度："+arr1.length+"<br/>");
arr1.length = 2;
document.write("arr1改变后："+arr1+"<br/>");
document.write("arr1改变后的长度："+arr1.length+"<br/>");
document.write("arr2改变前："+arr2+"<br/>");
document.write("arr2改变前的长度："+arr2.length+"<br/>");
arr2.length = 5;
document.write("arr2改变后："+arr2+"<br/>");
document.write("arr2改变后的长度："+arr2.length+"<br/>");
</script>
输出：
arr1改变前：a,b,c
arr1改变前的长度：3
arr1改变后：a,b
arr1改变后的长度：2
arr2改变前：,
arr2改变前的长度：2
arr2改变后：,,,,
arr2改变后的长度：5
3：prototype
向数组添加属性和方法
语法：
arr.prototype
运行：
<script>
function Person(name,age){
this.name= name;
this.age = age;
}
var person = new Person("frank",28);
Person.prototype.goods = "篮球";
Person.prototype.age = 30;
document.write("goods:"+person.goods+"<br/>");
document.write("age:"+person.age+"<br/>");
document.write("name:"+person.name+"<br/>");
</script>
输出：
goods:篮球
age:28
name:frank
