【javascript】Array 常用方法


一、创建数组

创建空数组

// 创建一个空数组
var arr1= new Array();		// new 一个空数组
var arr2 = new Array(20);	// 创建数组,包含20个初始空间,默认值 undefined
var arr3 = new Array('red', 'blue', 'green');	// 创建数组,并初始化

var arr4 = [];				// 通过字面量创建
var arr5 = ['red', 'blue', 'green'];	// 初始化

不推荐做法

var arr1 = [1, 2, ];	// 会创建包含2或3项的元素,不推荐这样做
var arr2 = [, , , ,];	// 会包含4或5项元素,不推荐这样做

对于上述 arr1,在 IE 中,arr1 会成为一个包含 3 个项且每项的值分别为 1、2 和 undefined 的数组;在其他浏览器中,values 会成为一个包含 2 项且值分别为1 和 2 的数组
而 arr2 ,前面4项元素都为 undefined


二、访问数组

javascript 中,访问数组可以通过方括号访问。但与其它语言不同的是,当索引越界时,不会报错,会返回 undefined

var arr = [1,2,3];
console.log(arr[0]);	// 1
console.log(arr[1]);	// 2
console.log(arr[3]);	// undefined
console.log(arr[100]);	// undefined

javascript 与其它语言还有一个区别,数组的 length 属性不是只读的
当给 length 属性赋值更小时,数组后面的元素会被删除;更大时,自动添加 undefined

var arr = [1,2,3];
console.log(arr[2]);	// 3
console.log(arr.length);	// 3
arr.length = 2;
console.log(arr[2]);	// undefined
console.log(arr.length);	// 2

三、检测数组

可以通过以下两种方式检测一个 object 是不是 Array 类型

if (obj instanceof Array) {
	...
}

if (Array.isArray(obj)) {
	...
}

四、栈方法

js 提供了 pushpop两个方法用于栈的行为

var arr = [];
arr.push(1);	// [1]
arr.push(2);	// [1, 2]
var item = arr.pop();	// item = 2, arr = [1]

五、队列方法

js 提供了 shiftunshift两个方法用于队列
shift 从首部取出,unshift 从首部添加

shift 搭配 push 可以实现队列,尾进首出
unshift 搭配 pop 可以实现反向队列,首进尾出

// shift 和 push
var arr = [];
arr.push(1);	// [1]
arr.push(2);	// [1,2]
var item = arr.shift();	// item = 1, arr = [2]

// unshift 和 pop
var arr1 = [];
arr1.unshift(1);	// [1]
arr1.unshift(2);	// [2, 1]
var item1 = arr.pop();	 // item1 = 1, arr = [2]

六、重排序方法

reversesort
reverse 方法用于翻转数组,不再赘述。本节主要讲 sort 方法

sort 方法用于给数组排序,默认情况下,小的在前面,大的在后面。但默认情况下,sort 方法会调用每个数组项的 toString 方法,比较字符串

var arr = [0, 1, 5, 15, 10];
arr.sort();	// [0, 1, 10, 15, 5]

比较字符串的第一个字母,若相等,继续比较,1打头的永远在9打头的前面,因为 sort 认为1比9小,哪怕是100也会认为比99小,因为比较的不是数字,而是字符串。如果是英文,则比较 ascii 码。

若想给数字排序,则需要传入 compare 比较函数
传入 value1, value2。若返回值为负数,则 value1 在前,value2 在后

var arr  = [0, 1, 5, 15, 10];
// 假如我们想从小到大排序
arr.sort(function compare(value1, value2) {
	if (value1 < value2) {	// value1 比 value2 小,value1 前,应返回负数
		return -1;
	} else {
		return 1;
	}
});
console.log(arr);	// [ 0, 1, 5, 10, 15 ]
// 从大到小
arr.sort(function compare(value1, value2) {
	if (value1 < value2) {
		return 1;
	} else {
		return -1;
	}
});

上述代码可以优化

arr.sort(function compare(value1, value2) {	// 从小到大
	return value1 - value2;	// value1 小,差为负数,value1在前,小的在前
});

七、操作方法

sliceconcatsplice

concat 方法传入多个对象,如果是元素,追加到数组后,如果是数组,把数组里面的元素追加到数组后

// concat
var arr = [1];
arr.concat(2, [3, 4]);	// [1, 2, 3, 4]

slice(a[, b]) 截取数组从索引 a 到 索引 b 的片断,但不包含b 。如果 b 省略,默认截取到最后

var arr = [1,2,3,4,5];
var arr1 = arr.slice(1, 4);	// arr1 = [2, 3, 4]
var arr2 = arr.slice(2);	// arr2 = [3, 4, 5]

splice(a, b[, args...]) 从 索引a 开始,删除 b 个元素,并把 args 添加到索引 a 的位置。该方法可以实现删除、插入、替换操作

var arr = [1,2,3,4,5];
var a = arr.splice(0, 1);	// a = 1, arr = [2, 3, 4, 5]
arr.splice(0, 0, 1);	// 删除0个,在0的位置添加1,arr = [1,2,3,4,5]
var b = arr.splice(1, 2, 3, 4, 5);	// 从索引 1 开始,删除2个,把3,4, 5插入到该位置
// b = [2, 3], arr = [1, 3, 4, 5, 4, 5];

八、位置方法

js 提供 indexOflastIndexOf 查询元素索引,一个从头开始查,一个从尾开始查。还可以指定开始参数,表示从某个索引开始查起

var arr = [1,2,3,4,5,4,3,2,1];
var index1 = arr.indexOf(2);	// index1 = 1
var index2 = arr.lastIndexOf(2);	// index2 = 7
var index3 = arr.indexOf(2, 2);		// index3 = 7;

九、迭代方法

js 提供了以下五个迭代方法。在迭代方法中,传入的函数参数均为
item, index, array
元素,索引,数组

方法说明
every对数组中每一项运行该函数,如果每一项均返回 true,则返回 true
some同every,只要有一个 true,则返回 true
forEach对每一项运行指定函数,没有返回值
filter对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组
map对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
var number = [1,2,3,4,5,4,3,2,1];
var statu = number.every(
    function(item, index, array) {
        return item > 2;
    }
)
console.log(statu);		// false

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

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

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

number.forEach(function(item, index, array) {
	console.log(item);
});		// 输出数组每个元素

十、归并方法

js 中提供了 reducereduceRight 两个方法迭代所有项,并构建最终的返回值
reduce 从左向右,reduceRight 从右向左

传入函数参数:
prev, cur, index, array
上一个函数的累计和,当前值,索引,数组

// 利用 reduce 给数组求和
var arr = [1,2,3,4,5];
var sum = arr.reduce(function(prev, cur, index, array) {
	return prev + cur;
});	// sum = 15
// 利用 reduceRight 求数组元素的积
var multi = arr.reduceRight(function(prev, cur, index, array) {
	return prev * cur;
});	// multi = 120

注意,arr 中有5个元素,只会运行 4 次。为了保证每次运行都有 prev,第一次运行时,prev = 1, cur = 2,最后一次运行时 cur = 5。所以只会运行 arr.length - 1 次

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

竹一笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值