高程笔记-数组

发表于

《JavaScript高级程序》笔记，包含数组的创建、检测以及数组方法。

创建方式

  • 构造函数var arr = new Array(1,2,3)
  • 字面量方式var arr = [1,2,3]

继承Object

以下方法原始值由Array对象派生的所有对象继承。

toSource(): 返回该对象的源代码。仅Gecko 核心的浏览器支持。
toString(): 把数组转换为字符串，并返回结果
toLocaleString(): 把数组转换为本地数组，并返回结果
valueOf(): 返回数组对象的原始值

检测数组

es3方法value instanceof Array,仅用在单一全局执行环境。
es5方法Array.isArray(vlaue)，不限环境，需要ie9+及以上版本支持。

不会改变原始数组

concat()

连接两个或更多的数组，并返回结果。
arrayObject.concat(arrayX,arrayX,……,arrayX)其中arrayX可以是数组也可以是具体值。

1
2
3
4
var a = [1,2,3],
    b = [4,5,6];
console.log(a.concat(b));     //[1, 2, 3, 4, 5, 6]
console.log(a.concat(0,-1,b));//[1, 2, 3, 0, -1, 4, 5, 6]

join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
arrayObject.join(separator)，其中separator可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

1
2
3
var arr = ['h','e','l','l','o'];
arr.join();    //"h,e,l,l,o"
arr.join('');  //"hello"

slice()

从某个已有的数组返回选定的元素。

1
2
3
4
var arr = ['h','e','l','l','o'];
var callback =arr.slice(2);
console.log(arr);       // ["h", "e", "l", "l", "o"]
console.log(callback);  // ["l", "l", "o"]

改变原始数组

pop()

删除并返回数组的最后一个元素。

1
2
3
4
var arr = ['h','e','l','l','o'];
var callback =arr.pop();
console.log(arr);       //["h", "e", "l", "l"]
console.log(callback);  // o

push()

向数组的末尾添加一个或更多元素，并返回新的长度。

1
2
3
4
var arr = ['h','e','l','l','o'];
var callback =arr.push('!');
console.log(arr);       // ["h", "e", "l", "l", "o", "!"]
console.log(callback);  // 6

shift()

删除并返回数组的第一个元素。

1
2
3
4
var arr = ['h','e','l','l','o'];
var callback =arr.shift();
console.log(arr);       // ["e", "l", "l", "o"]
console.log(callback);  // h

unshift()

向数组的开头添加一个或更多元素，并返回新的长度。

1
2
3
4
var arr = ['h','e','l','l','o'];
var callback =arr.unshift('say:');
console.log(arr);       // ["say:", "h", "e", "l", "l", "o"]
console.log(callback);  // 6

sort()

对数组的元素进行排序。返回对数组的引用。在原数组上排序。
arrayObject.sort(sortby)，其中sortby可选。规定排序顺序。必须是函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr = [2,4,7,9,1,10];
console.log(arr.sort()) //[1, 10, 2, 4, 7, 9]默认排序

var callback =arr.sort(function(a,b){
    if(a < b){return -1}
    else if(a = b){return 1}
    else{return 0}
});
//方法简化
//var callback =arr.sort(function(a,b){
//    return a-b
//})

console.log(arr);       // [1, 2, 4, 7, 9，10]
console.log(callback);  // [1, 2, 4, 7, 9，10]

splice()

删除元素，并向数组添加新元素。返回删除项的数组。
arrayObject.splice(index,howmany,item1,…..,itemX)，其中index，必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。howmany，必需。要删除的项目数量。如果设置为 0，则不会删除项目。item1,.....,itemX,可选。向数组添加的新项目。

1
2
3
4
var arr = ['h','e','l','l','o'];
var callback =arr.splice(1,4,'i','!');
console.log(arr);       // ["h", "i", "!"]
console.log(callback);  // ["e", "l", "l", "o"]

es5的五种数组迭代方式

  • every():对数组中每一项运行给定函数，如果该函数对每一项都返回true,则返回true。

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

  • forEach():对数组中每一项运行给定函数，这个方法没有返回值。

  • map():对数组中每一项运行给定函数，返回每次函数掉用的结果组成的数组。

  • some():对数组中每一项运行给定函数，如果该函数对任一项返回true,则返回true。

备注：以上方法都不会修改数组中的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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 ) //false

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

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

var mapResult = numbers.map(function(item,index,array){
    return ( item * 2 )
});
console.log( mapResult ) //[2,4,6,8,10,8,6,4,2]

numbers.forEach(function(item,index,array){
    //执行程序
});

IE9+、FireFox2+、Safari3+、Opera9.5+ 和Chrome兼容。

es5缩小方法

reduce()和reduceRight()，都会迭代数组所有项，构建一个最终返回的值，第一个是从头到尾迭代，第二个是从尾到头。
参数两个[callback, initialValue]

  • initialValue：可选参数, 作为第一次调用 callback 的第一个参数
  • callback:function(previousValue,currentValue,currentIndex,array){}
    • previousValue：上一次调用回调函数返回的值，或者是提供的初始值（initialValue）
    • currentValue：数组中当前被处理的元素
    • currentIndex：当前被处理元素在数组中的索引, 即currentValue的索引.如果有initialValue初始值, 从0开始.如果没有从1开始
    • array：调用 reduce 的数组
1
2
3
4
5
var value = [1,2,3,4,5];
var sum = value.reduce(function(prev,cur,index,array){
    return prev + cur;
})
alert(sum) //15
------本文结束 感谢阅读------