一直都在拜膜各为大神的博客,总以为写博客是一件很简单的事情,结果今天想写一篇总结性的博客,就不知从何处下笔了。
这才知道原来写博客也是技术活,写得不好处请多多指教,嘿嘿~~~~
这几天一直都在看js数组,总结了以下内容:
ECMAScript数组长度是可以动态调整的,并且数组里每一项可以保存任何类型数组,
如:var arr = [1, 'str', [1, 2], ,]; //数值,字符串,数组,undefined等。
一.创建数组方式
1.使用Array构造函数
var colors = new Array();
var colors = new Array(20); //预先保存数组长度
var colors = Array(); //省略new
2.数组字面量 (注:推荐使用)
var colors = ['red', 'blue'];
var name = [];
var values = [1,2,]; //不推荐使用 IE8之前元素含有3项,主流浏览器元素含有2项
var values = [,,,]; //不推荐使用 IE8之前元素含有4项,主流浏览器元素含有3项undefined
二.数组操作
1.增加数组元素
var arr = [1, 3, 4, 6];
arr[arr.length] = 'str';
arr.push(4, 5); //在尾部添加
arr.unshift(9, 7); //在头部添加
2.删除数组元素
delete arr[0];
arr.length -= 1;
b.pop(); //删除尾部
b.shift(); //删除头部
3.遍历数组
1> for循环
for(var i = 0, len = arr.length; i < len; i++) {
console.log(arr[i]);
}
2> for-in
for(var i in arr) {
console.log(arr[i]);
}
注:for-in在遍历数组顺序不定
此方法有些不足,由于Array是对象,会继承原型上的属性,
添加代码 Array.prototype.x = "inherit";
再试试上述遍历方法,结果是 // 1 3 4 6 inherit
为了避免上述情况,添加元素判断就ok啦!
for(var i in arr) {
if(arr.hasOwnProperty(i)) {
console.log(arr[i]);
}
}
三.数组方法
1.栈方法
push() //进栈 pop() //出栈 上面代码已应用到此两种方法
2.队列方法
unshift() //进队列 shift() //出队列 上面代码已应用到此两种方法
3.排序方法
var b = [1, 2, 6, 8, 10, 9];
1> reverse() 逆序 原数组值改变
b.reverse(); // [9, 10, 8, 6, 2, 1]
但此方法不够灵活,因此,有了下面的方法
2> sort() 升序 原数组值改变
sort()方法是调用每个数组的toString()转型方法,然后比较首字母得到字符串,例如:
var arr = [1, 6, 4, 30];
arr.sort(); //[1, 30, 4, 6] 30虽然小于4,6,但按字符串"30"则在"4"和"6"之前
var arr1 = ['db', 'cb', 'ca', 'ab'];
arr1.sort(); // ["ab", "ca", "cb", "db"]
由于不能将数值进行升序或降序操作,因此用sort()方法接受一个比较函数作为参数。例如:
var arr = [2, 6, 90, 4, 9, 10];
arr.sort(function(a, b) { //升序
return a - b;
});
console.log(arr); //[2, 4, 6, 9, 10, 90]
arr.sort(function(a, b) { //升序
return b - a;
});
console.log(arr); //[90, 10, 9, 6, 4, 2]
4.操作方法
1> concat() 原数组值不变
var arr = [2, 6, 90, 4, 9, 10];
arr.concat(); // [2, 6, 90, 4, 9, 10] 无参数,复制原数组
arr.concat(2,3); // [2, 6, 90, 4, 9, 10, 2, 3] 有参数,将参数项添加至末尾
arr.concat([2,3]); //[3, 4, 6, 7, 8, 2, 3] 参数为数组,则将数组中每一项添加至末尾
2> slice() 原数组值不改变
var arr = [2, 6, 90, 4, 9, 10];
arr.slice(2); // [90, 4, 9, 10] 从索引值为2处至最后选取
arr.slice(2, 4); //[90, 4] 从索引值为2处至4选取,不包括结束位置的项
arr.slice(-4, -2); //[90, 4] 参数为负数,则将负数加数组长度,即相当于slice(2, 4)
注: 结束位置小于起始位置,则返回空数组
3> splice() 数组中最强大的方法 原数组值改变
删除:
var arr = [3, 4, 6, 7, 8];
arr.splice(2,1); //从索引为2处,删除1项
arr; //[3, 4, 7, 8]
插入:
arr.splice(2,0,'g'); //从索引为2处,插入'g'
arr; //[3, 4, "g", 6, 7, 8]
替换:
arr.splice(1,2,'a','b'); //从索引为1删除2项,并添加'a','b'
arr; //[3, "a", "b", 7, 8]
注:以下方法只用ECMAScript5支持
5. 位置方法
两个方法都接受两个参数1.查找项,2.查找起始处,并返回索引值。查找元素必须严格相等(即值和类型都相等)
1> indexOf() 从数组开始处查找 原数组不改变
var arr = [1,2,3,4,1,2];
arr.indexOf(1); //0
arr.indexOf(10); //找不到返回-1
arr.indexOf(1, 2); //4
arr.indexOf(2, -1); //5
2> lastIndexOf() 从数组末尾查找 原数组不改变
arr.lastIndexOf(1); //4
arr.lastIndexOf(1, 2); //0
arr.lastIndexOf(2, -2); //1
6.迭代方法
以下5个函数都接收两个参数,1.在每一项运行的函数 2.运行该函数的作用域对象(影响this值)
其中,传入的函数有三个参数 1. 数组每一项项的值 2.索引值 3.数组对象本身
var arr = [3, 5, 7, 9, 0];
1> every() 数组中每一项满足给定函数,则返回true
arr.every(function(item, index, array) {
return x === 3;
}); // false;
2> some() 数组中任意一项满足给定函数,则返回true
arr.some(function(item, index, array) {
return x === 3;
}); //true
3> filter() 对数组中每一项进行给定函数操作,将返回结果为true的项组成数组返回
arr.filter(function(item, index, array) {
return index % 2 === 0;
}); //[3, 7, 0]
4> forEach() 对数组中每一项进行给定函数操作,没有返回值,相当于for循环
arr.forEach(function(item, index, array){
return console.log(item);
}); // [3, 5, 7, 9, 0]
5> map() 对数组中每一项进行给定函数操作,并将函数调用结果组成数组返回
console.log(arr.map(function(item, index, array){
return item + 1;
})); //[4, 6, 8, 10, 1]
7.归并方法
以下两种方法都是迭代数组的所有项,并接受两个参数1.每一项调用的函数 2.作为归并基础的初始值(可选)
其中,每一项调用的函数支持4个参数,1.前一个值,2.当前值,3.项的索引,4.数组对象
1> reduce() 从数组开始处迭代 不改变原数组
var arr = [1, 2, 3];
var sum = arr.reduce(function(prev, cur, index, array){
return prev + cur;
}, 0);
sum; // 6
2> reduceRight() 从数组末尾处迭代 不改变原数组
代码与上述相同,只不过换一个函数名啦!
好了,第一篇博客完成了,肯定有很多不足,有什么不对的地方求指教,以后会多多努力的!走在热爱前端的路上。。。。。。