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 +"<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：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

转载于:https://www.cnblogs.com/bijiapo/p/5440512.html