JS阅读笔记——数组[Array]
最近在看zepto源码,里面用到了很多基础知识,借此机会又把基础知识复习和整理了一遍,算是温故而知新吧。先从引用类型Array写起吧
1. length属性
代码:
var arr =[1,2,3];
console.log(arr.length); //3
//数组的length属性不是只读的,通过设置这个属性,,从数组末尾移除项或添加新项
arr.length = 2;
console.log(arr); //[1,2]
arr.length =5;
console.log(arr); //[1,2,undefined,undefined,undefined]
2. 队列方法 push(arg1, arg2, ...)与shift()
push()是向数组末端添加项,shift()是从数组前端移除项。这两个方法都会对原始数组产生变化。
代码:
var arr =[1,2,3];
var count = arr.push(4); //count为push的项数:1
console.log(arr); //1,2,3,4 会对原始数组产生变化
var item = arr.shift(); //item 为取出来的值:1
console.log(arr); //2,3,4 会对原始数组产生变化
3.队列方法 pop()与unshift(arg1, arg2, ...)
这组方法与上组正好相反,pop()是从数组末端移除,shift()是从数组前端向内添加项。大家自行验证。
4. concat()
concat()基于当前数组中的所有项创建一个新数组,如果传递的是一个数组,则会将该数组中的每一项都添加到结果数组中。
代码:
var arr =[1,2,3];
//concat的参数如果是数组,就取出每一项。否则就取出单项
var arr2 = arr.concat(10,11,[12,13],null,{name:123});
console.log(arr); //[1,2,3]
console.log(arr2); //[1, 2, 3, 10, 11, 12,13,null,{name:123}]
arr.push(20,21,[22,23],null,{name:123});
console.log(arr); //原数组产生变化[1,2,3,20,21,[22,23],null,{name:123}]
注意这里与push的区别:
- concat的参数如果是数组,就取出每一项。否则就取出单项
- push会对原数组产生变化,而concat不会。所以concat后要赋给一个新数组。
之所以会强调上面两点,是有时候我们会发现代码输出的不是我们想要的结果。
5. slice(startIndex, endIndex)
startIndex为起始位置,endIndex为结束位置。
var arr = ['Lucy', 'Lily', 'Zhang San', 'Test'];
//无参数,取全部,即从0到length
var arr3 = arr.slice(); //["Lucy", "Lily", "Zhang San", "Test"]
console.log(arr3);
//1个参数,从开始位置取到length
arr3 = arr.slice(1); //从1开始取到length ["Lily", "Zhang San", "Test"]
console.log(arr3);
//2个参数,从起始下标取到结束下标 (endIndex - startIndex)项
arr3 = arr.slice(1,3); //从1起始到3结束下 (3-1) 项 ["Lily", "Zhang San"]
console.log(arr3);
//如果参数是负数的话,用长度加该数
arr3 = arr.slice(1,-1); //从1到 arr.length-1;
console.log(arr3); //["Lily", "Zhang San"]
6. splice(startIndex, count, arg1,arg2,arg3......)
startIndex:第1个参数,表示要删除项的下标
count :第2个参数, 删除的项数
arg1, arg2,arg3:之后的几项表示要插入的项
代码:
var arr = [1,2,3,4];
arr.splice(0,1); //从0的位置删除1项,[2,3,4]
console.log(arr);
var removedItem = arr.splice(1,1,'red','green'); //从1的位置开始删除一项,之后再插入两项 [2, "red", "green",4]
console.log(arr);
console.log(removedItem); //[3]