数组原型：
自定义数组原型函数，给所有数组添加公共方法
Array.prototype.unique = function () {
var arr = []; // 临时数组 - 存放去重后的数据
for(var i = 0, len = this.length; i < len; i++){
// 数组的indexOf有兼容性问题, 未检索到则返回 -1
if ( arr.indexOf( this[i] ) == -1 ) {
arr.push( this[i] );
}
}
return arr;
};
var codeArr = [3,1,4,1,5,9,2,6,5,5,5,6,9,1,1,1,3];
console.log( codeArr.unique() );
// [3, 1, 4, 5, 9, 2, 6]
A. 定义方式;
var arr = []; // 数组字面量 var arr = new Array(); // 数组构造函数
B. 数组的读和写
arr[num] // 不可以溢出读 结果undefined arr[num] = xxx; // 可以溢出写
改变原数组方法:
1. arr.push()、arr.pop()
arr.push() 方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。
var arr = [];
arr.push(1); // 1
arr.push("A"); // 2
arr.push(true, {}); // 4
console.log( arr ); // ["1", "A", true, {}]
模拟数组方法：
Array.prototype.push = function (){
for( var i=0;i<arguments.lenght;i++){
this[this.length] = arguments[i];
}
return this.length;
}
arr.pop() 方法用于删除数组的最后一个元素，并返回该元素。
var arr = ["A", "B", "C"]; arr.pop(); // "C" console.log( arr ); // ["A", "B"] // 空数组使用 pop() 方法，不会报错，而是返回 undefined [].pop(); // undefined
2. arr.shift()、arr.unshift()
arr.shift() 方法用于删除数组的第一个元素，并返回该元素。
var arr = ["A", "B", "C"]; arr.shift(); // "A" console.log( arr ); // ["B", "C"]
arr.unshift() 方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。
var arr = ["A", "B", "C"];
arr.unshift("H"); // 4
console.log( arr ); // ["H", "A", "B", "C"]
// 添加多个
arr.unshift("Y", "X");
console.log( arr ); // ["Y", "X", "H", "A", "B", "C"]
3. arr.sort([fn]);
arr.sort() 方法对数组成员进行排序，默认是按照字典顺序排序。
["d", "c", "b", "a"].sort(); // ["a", "b", "c", "d"] [6, 5, 4, 3, 2, 1].sort(); // [1, 2, 3, 4, 5, 6] [11, 101].sort(); // [101, 11] [10111, 1101, 111].sort(); // [10111, 1101, 111] 默认排序不是按照大小排序，而是按照字典顺序。 也就是说，数值会被先转成字符串，再按照字典顺序进行比较，所以 101 排在 11 的前面
sort() 自定义方式排序
var arr = [10111, 1101, 111];
arr.sort(function (a, b) {
// 1. 必须写两个形参,表示进行比较的两个数组成员
// 2. 看返回值
// 1) 大于 0, 表示第一个排在第二个后面
// 2) 其他情况, 都是第一个排在第二个前面
return a - b;
});
// [111, 1101, 10111]
数组中的对象数据:
var arr = [
{ name: "张三", age: 30 },
{ name: "李四", age: 24 },
{ name: "王五", age: 28 }
];
arr.sort(function (a, b) {
return a.age - b.age;
});
// [
// { name: "李四", age: 24 },
// { name: "王五", age: 28 },
// { name: "张三", age: 30 }
// ]
4. arr.reverse()
用于颠倒排列数组元素，返回改变后的数组
var arr = ["A", "B", "C"]; arr.reverse(); // ["C", "B", "A"]
5. arr.splice(从第几位开始， 截取长度， 切口处添加新数据)
用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素
var arr = ["A", "B", "C", "D", "E", "F"]; // 一个参数时: 删除当前位置后面所有元素 arr.splice(2); // ["C", "D", "E", "F"] // 一个参数时: 负数，表示从倒数位置开始删除 arr.splice(-3); // ["D", "E", "F"] // 指定删除长度 arr.splice(1, 2); // ["E", "F"] // 从第一个位置 E 开始删除2个元素 arr.splice(1, 0); // ["E", "F"] // 截取长度为0是，表示不删除 // 从数组的第一个位置添加两个新元素 arr.splice(1, 0, "A", "B"); // ["E", "A", "B", "F"] // 从第一个位置删除2个元素，然后添加新元素 arr.splice(1, 2, "V", "V", "M"); // ["E","V","V","M","F"]
不改变原数组的方法:
1. arr.concat()
用于多个数组合并。将新添加的成员，添加到原数组成员的后面， 然后返回一个新数组
['hello'].concat(['world]);
// ['hello', 'world']
['hello'].concat(['world'], ['!']);
// ['hello','world','!']
[].concat({a: 1}, {b: 2});
// [{a: 1}, {b: 2}]
[2].concat({a: 1});
// [2, {a: 1}]
[1,2,3].concat(4,5,6);
// [1, 2, 3, 4, 5, 6]
如果数组成员包括对象, concat 方法返回当前数组的一个浅拷贝。指的是新数组拷贝的是对象的引用。
注意：改变原对象以后,信数组跟着改变。
var oldArr = [{ a: 1}];
var newArr = oldArr.concat();
oldArr[0].a = 10;
console.log( newArr[0].a );
2. arr.join()
指定参数作为分隔符，把数组转成字符串;默认用逗号分隔
var arr = [1, 2, 3, 4];
arr.join(' '); // '1, 2, 3, 4'
arr.join('|'); // '1 | 2 | 3 | 4'
arr.join(); //'1,2,3,4'
// 如果数组成员是undefined或null或空位，会被转成空字符串
[undefined, null].join('#'); // '#'
['A', , 'B'].join('-'); // 'a--b'
3. arr.toString() 返回数组的字符串形式
var arr = [1, 2, 3, 4]; arr.toString(); // '1,2,3,4' var arr = [1, 2, 3, [4,5,6]]; arr.toString(); // '1,2,3,4,5,6'
4. arr.slice(从该位开始截取, 截取到该位);
用于提取目标数组的一部分，返回一个新数组;
var arr = ['a','b','c']; // 没有参数，返回原数组的拷贝 arr.slice(); // ['a','b','c'] // 如果省略第二个参数，则一直返回到数组的最后一个成员 arr.slice(0); // ['a','b','c'] arr.slice(1); // ['b','c'] // 包前不包后, 数组的第一位到第二位(不包含第二位) arr.slice(1, 2); // ['b'] arr.slice(2, 6); // ['c'] // 支持负数，表示倒数计算的位置 arr.slice(-2); // ['b','c'] arr.slice(-2,-1); // ['b'] // 第一个参数大于等于数组的长度 // 或 第二个参数小于第一个参数，则返回空数组 arr.slice(4); // [] arr.slice(2, 1); // []
slice 方法的一个重要应用，是将类数组的对象转为真正的数组。
var arr = { 0: 'a', 1: 'b', length: 2 };
Array.prototype.slice.call(arr);
// ['a', 'b']
Array.prototype.slice.call(document.querySelectorAll('div'));
Array.prototype.slice.call(arguments);
#### 类数组
1. 属性要为索引(数字)属性, 必须有length
2. 不具有数组所具有的方法
可以给类数组添加数组方法，如push: Array.prototype.push
如果添加splice方法则就跟数组长一样了 [1, 2, 3]
var obj = {
"0": 'a',
"1": 'b',
"2': 'c',
"length": 3,
"push": Array.prototype.push,
"splice": Array.prototype.splice
}
好处: (类数组push是根据length来替换)
Array.prototype.push = function (target) {
obj[obj.length] = target;
obj.length ++;
}
数组的其它方法：
arr.map(); // 不改变原数组
把数组的所有成员依次传入参数函数，把每次执行的结果组成一个新数组返回。
var numbers = [1, 2, 3];
numbers.map(function (n) {
return n + 1;
});
// [2, 3, 4]
函数作为参数调用时, 可以传入三个参数(当前成员, 当前位置, 数组本身)
[1,2,3].map(function(elem, index, arr) {
return elem * index;
});
// [0, 2, 6]
map 方面可以接受第二个参数，用来绑定回调函数内部的 this 变量
var arr = ['a','b','c'];
[1,2].map(function(n) {
// n 是.map前面数组的每一项, this指向arr数组
return this[n];
}, arr);
// ['b', 'c']
遇到数组空位，跳过空位，不执行回调
var f = function (n) {
return 'a';
}
[1, undefined, 2].map(f); // ['a', 'a', 'a']
[1, null, 2].map(f); // ['a', 'a', 'a']
[1, , 2].map(f); // ['a', , 'a']
arr.forEach(); 数组遍历
forEach 方法与 map 方法很相似, 对数组所有成员进行遍历。
forEach 方法没有返回值，值用来操作数据。
// 第一个参数是函数，有三个参数：(当前值, 当前位置, 数组本身)
[0, 5, 3].forEach(function(elem, index, arr) {
console.log('['+index+'] = ' + elem);
});
// [0] = 0
// [1] = 5
// [2] = 3
可以接受第二个参数，用来绑定回调函数内部的 this 变量
var out = [];
[0, 5, 3].forEach(function(n) {
this.push(n * n);
}, out);
console.log(out); // [0, 25, 9]
注意:
1. forEach 方法会跳过数组的空位
2. forEach 方法无法中断循环, 总会将所有成员遍历完。
arr.filter(); 过滤数组成员
用于过滤数组成员，满足条件的成员组成一个新数组返回。
第一个参数是回调函数，必填。遍历所有成员，满足条件的成员组成一个新数组返回。
[1,2,3,4,5].filter(function(elem) {
return (elem > 3);
});
// [4, 5]
返回数组中所有布尔值为 true 的成员
[0, 1, 'a', false, null].filter(Boolean); // [1, 'a']
回调函数可以接受三个参数: (当前成员，当前位置，数组本身)
[1,2,3,4,5].filter(function(elem, index, arr) {
return index % 2 === 0;
});
// [1, 3, 5]
接受第二个参数，用来改变回调函数中的 this 变量
var obj = { Max: 3 };
var arr = [0, 5, 3, 4, 16];
arr.filter(function(n) {
// this 指向 obj
if(n > this.Max) {
return true;
}
}, obj);
// [5, 4, 16]
arr.some(fn)、every(fn);
依次遍历数组成员，回调函数接受三个参数: (当前成员，当前位置，数组本身)
返回一个布尔值.
可以接受第二个参数，用来改变回调函数中的 this 变量
some 方法是只要一个满足条件就返回true, 否则返回 false
var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
return elem >= 3;
});
// true;
every 方法是全部满足条件才返回true,否则返回 false
var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
return elem >= 3;
});
// false;
对于空数组, some 方法返回 false , every 方法返回 true, 回调函数不执行
function isEven(x) {
return x % 2 === 0;
}
[].some(isEven); // false
[].every(isEven); // true
reduce()、reduceRight() 返回最终的统计结果
reduce 是从左到右处理(第一个到最后一个)
reduceRight 是从右到左处理(最后一个到第一个)
第一个参数是一个回调函数, 接受四个参数
1. 积累变量, 默认第一个成员 (必须)
2. 当前变量, 默认第二个成员 (必须)
3. 当前位置(从0开始)
4. 原数组
[1, 2, 3, 4, 5].reduce(function (a, b) {
console.log(a, b);
return a + b;
});
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15
第二个参数，指定初始值，在初始值的基础上累加
[1, 2, 3, 4, 5].reduce(function (a, b) {
console.log(a, b);
return a + b;
}, 10);
// 25
空数组娶不到初始值，reduce方法会报错。
function add(prev, cur) {
return prev + cur;
}
[].reduce(add);
// TypeError: Reduce of empty array with no initial value
[].reduce(add, 1); // 默认返回初始值
// 1
arr.indexOf(查找元素, 指定位置)、arr.lastIndexOf(查找元素，指定位置) // IE8不兼容, 会报错
返回给定元素在数组中第一次出现的位置，如果没有找到则返回 -1
var arr = ["a", "b", "c"];
arr.indexOf("b"); // 1
arr.indexOf("v"); // -1
// 指定搜索的开始位置
arr.indexOf("a", 1); // -1
lastIndexOf 方法返回给定元素在数组中最后一次出现的位置，如果没有找到则返回-1
var a = [2, 5, 9, 2]; a.lastIndexOf(2) // 3 a.lastIndexOf(7) // -1