1.concat
说明: 用于合并两个或多个数组。此方法不会更改现有数组,返回值是一个新数组。
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
console.log(array1.concat(array2));
// ["a", "b", "c", "d", "e", "f"]
语法:var new_array = old_array.concat(value1[, value2[, …[, valueN]]]);
参数:valueN(可选)
返回值: 新的Array实例。
concat方法不会改变this或任何作为参数提供的数组,而是返回一个浅拷贝,它包含与原始数组相结合的相同元素的副本。 原始数组的元素将复制到新数组中。
①.数据类型如字符串,数字和布尔(不是String,Number 和 Boolean 对象):concat将字符串和数字的值复制到新数组中。
var array1 = [1, 2, 3];
var array2 = array1.concat(); // [1, 2, 3]
// 无参数时,可以利用该方法进行拷贝数组(前提是数组里不包含对象)
②. 对象引用(而不是实际对象):concat将对象引用复制到新数组中。 原始数组和新数组都引用相同的对象。 也就是说,如果引用的对象被修改,则更改对于新数组和原始数组都是可见的。 这包括也是数组的数组参数的元素。
var array1 = [1, 2, 3];
var array2 = [{name: 'zxx'}];
var array3 = array1.concat(array2);
array3[3].age = 18;
console.log(array3); // [1, 2, 3 , {name: 'zxx', age: 18}]
console.log(array2); // [{name: 'zxx', age: 18}]
2.join
说明: 将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。
var elements = ['Fire', 'Wind', 'Rain'];
console.log(elements.join());
// expected output: "Fire,Wind,Rain"
console.log(elements.join(''));
// expected output: "FireWindRain"
console.log(elements.join('-'));
// expected output: "Fire-Wind-Rain"
语法: arr.join([separator])
参数: separator(可选)。 指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果省略,数组元素用逗号分隔。如果separator是空字符串(""),则所有元素之间都没有任何字符。
返回值:一个所有数组元素连接的字符串。如果 arr.length 为0,则返回空字符串。
3.pop
说明: 从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
语法: arr.pop();
返回值: 从数组中删除的元素(当数组为空时返回undefined)
pop方法根据 length属性来确定最后一个元素的位置。如果不包含length属性或length属性不能被转成一个数值,会将length置为0,并返回undefined。
如果你在一个空数组上调用 pop(),它返回 undefined。
var myFish = ["angel", "clown", "mandarin", "surgeon"];
var popped = myFish.pop();
console.log(myFish);
// ["angel", "clown", "mandarin"]
console.log(popped);
// surgeon
4.push
说明: 将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
语法: arr.push(element1, …, elementN);
参数: elementN 被添加到数组末尾的元素;
返回值: 当调用该方法时,新的 length 属性值将被返回。
push 方法根据 length 属性来决定从哪里开始插入给定的值。如果 length 不能被转成一个数值,则插入的元素索引为 0,包括 length 不存在时。当 length 不存在时,将会创建它。
①.添加元素到数组:
var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");
console.log(sports);
// ["soccer", "baseball", "football", "swimming"]
console.log(total);
// 4
②. 合并两个数组:
注意当第二个数组(如示例中的moreVegs)太大时不要使用这个方法来合并数组,因为事实上一个函数能够接受的参数个数是有限制的。
var arr1 = ['parsnip', 'potato'];
var arr2 = ['celery', 'beetroot'];
// 将第二个数组融合进第一个数组
// 相当于 arr1.push('celery', 'beetroot');
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);
// ['parsnip', 'potato', 'celery', 'beetroot']
③.像数组一样使用对象:
Array.prototype.push 可以在一个对象上工作。 注意,我们没有创建一个数组来存储对象的集合。 相反,我们将该集合存储在对象本身上,并使用在 Array.prototype.push 上使用的 call 来调用该方法,使其认为我们正在处理数组,而它只是像平常一样运作,这要感谢 JavaScript 允许我们建立任意的执行上下文。
var obj = {
length: 0,
addElem: function addElem (elem) {
[].push.call(this, elem);
}
};
obj.addElem({});
obj.addElem({});
console.log(obj.length);
// 2
注意,尽管 obj 不是数组,但是 push 方法成功地使 obj 的 length 属性增长了,就像我们处理一个实际的数组一样。
5.shift
说明: 从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
语法: arr.shift()
返回值: 从数组中删除的元素; 如果数组为空则返回undefined 。
shift 方法移除索引为 0 的元素(即第一个元素),并返回被移除的元素,其他元素的索引值随之减 1。如果 length 属性的值为 0 (长度为 0),则返回 undefined。
shift 方法并不局限于数组:这个方法能够通过 call 或 apply 方法作用于类似数组的对象上。但是对于没有 length 属性(从0开始的一系列连续的数字属性的最后一个)的对象,调用该方法可能没有任何意义。
var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
console.log('调用 shift 之前: ' + myFish);
// "调用 shift 之前: angel,clown,mandarin,surgeon"
var shifted = myFish.shift();
console.log('调用 shift 之后: ' + myFish);
// "调用 shift 之后: clown,mandarin,surgeon"
console.log('被删除的元素: ' + shifted);
// "被删除的元素: angel"
6. unshift
说明: 将一个或多个元素添加到数组的开头,并返回该数组的新长度。
语法: arr.unshift(element1, …, elementN)
参数: elementN 要添加到数组开头的元素;
返回值: 当一个对象调用该方法时,返回其length属性值;
var arr = [1, 2];
arr.unshift(0); //result of call is 3, the new array length
//arr is [0, 1, 2]
arr.unshift(-2, -1); // 5
//此时数组为 [-2, -1, 0, 1, 2]
arr.unshift( [-3] );
//此时数组为 [[-3], -2, -1, 0, 1, 2]
7. slice
说明:返回一个新的数组对象,这一对象是一个由 begin和 end(不包括end)决定的原数组的浅拷贝。原始数组不会被改变。
语法: arr.slice(begin, end);
参数说明:
- begin(可选)
从该索引处开始提取原数组中的元素(从0开始)。
如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。
如果省略 begin,则 slice 从索引 0 开始。
- end(可选)
在该索引处结束提取原数组元素(从0开始)。slice会提取原数组中索引从 begin 到 end 的所有元素(包含begin,但不包含end)。
slice(1,4) 提取原数组中的第二个元素开始直到第四个元素的所有元素 (索引为 1, 2, 3的元素)。
如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。
如果 end 被省略,则slice 会一直提取到原数组末尾。
如果 end 大于数组长度,slice 也会一直提取到原数组末尾。
返回值: 一个截取之后的新数组
①. 返回现有数组的一部分:
var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1.slice(); // 可实现数组的浅拷贝;
var arr3 = arr1.slice(0,2); // [1, 2]
②. 将类数组对象转换成一个新数组:
function list() {
return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]
也可以利用bind
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);
function list() {
return slice(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]
以下主要是ES5 数组新增的方法:
1. every
语法: arr.every(callback[, thisArg]);
参数:
- callback
用来测试每个元素的函数,被调用时传入三个参数: 元素值, 元素的索引, 原数组;
- thisArg(可选)
执行callback时使用的this值,如省略,则在非严格模式下为全局对象,在严格模式下为undefined。
说明: every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 true,every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。
实例:
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// true
兼容老版本IE(Polyfill)
if (typeof Array.prototype.every != "function") {
Array.prototype.every = function(fn){
if (this === void 0 || this === null || typeof fn !== 'function')
throw new TypeError();
var t = Object(this), context = arguments.length >= 2 ? arguments[1] : void 0;
var len = t.length, bool = true;
for(var i = 0;i < len; i++){
if(!bool) break;
bool = !!fn.call(context, t[i], i, t);
}
return bool;
}
}
2. filter
语法:var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
参数:
- callback
用来测试数组中每个元素的函数。此函数接受三个参数,element表示数组中当前正在处理的元素, index(可选)表示正在处理的元素在数组中的索引。
- array(可选)
数组本身;
- thisArg(可选)
执行 callback 时,用于 this 的值。
实例:
下例使用 filter 创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成。
function isBigEnough(element) {
return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
console.log(filter);
// [12, 130, 44]
兼容老版本IE(Polyfill)
if (typeof Array.prototype.filter != "function") {
Array.prototype.filter = function (fn, context) {
var arr = [];
if (typeof fn === "function") {
for (var i = 0, length = this.length; i < length; i++) {
fn.call(context, this[i], i, this) && arr.push(this[i]);
}
}
return arr;
};
}
3. forEach
说明:用于数组遍历,循环。那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)。
参数跟filter方法一样。
var array = [1, 2, 3];
delete array[1]; // 移除 2
alert(array); // "1,,3"
alert(array.length); // but the length is still 3
array.forEach(alert); // 弹出的仅仅是1和3
注意:如果使用箭头函数表达式来传入函数参数,thisArg 参数会被忽略,因为箭头函数在词法上绑定了 this 值。
兼容老版本IE(Polyfill)
if (typeof Array.prototype.forEach != "function") {
Array.prototype.forEach = function (fn, context) {
if (typeof fn === "function"){
for (var i = 0, length = this.length; i < length; i++) {
if(Object.prototype.hasOwnProperty.call(this, i)) {
fn.call(context, this[i], i, this);
}
}
}
};
}
4. indexOf
语法:arr.indexOf(searchElement[, fromIndex = 0])
参数:
- searchElement
被查找的元素;
- fromIndex(可选)
开始查找的位置。默认值为0。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。为负值,则从searchElement.length + fromIndex位置开始查找。如值仍小于0, 则整个searchElement都会被查询。
实例:
var array = [2, 5, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1
array.indexOf(9, 2); // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
兼容老版本IE(Polyfill)
if (typeof Array.prototype.every != "function") {
Array.prototype.indexOf = function(searchElement, fromIndex) {
var k;
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var O = Object(this);
var len = O.length >>> 0;
if (len === 0) {
return -1;
}
var n = +fromIndex || 0;
if (Math.abs(n) === Infinity) {
n = 0;
}
if (n >= len) { // fromIndex值大于数组长度则返回-1;
return -1;
}
k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); // 为负数判断
while (k < len) {
if (k in O && O[k] === searchElement) { // 利用===来判断
return k;
}
k++;
}
return -1;
}
}
5. lastIndexOf
语法:arr.lastIndexOf(searchElement[, fromIndex])
参数:
- searchElement
被查找的元素;
- fromIndex(可选)
从此位置开始逆向查找。默认为数组的长度减 1(arr.length - 1),即整个数组都被查找。如果该值大于或等于数组的长度,则整个数组会被查找。如果为负值,将其视为从数组末尾向前的偏移。即使该值为负,数组仍然会被从后向前查找。如果该值为负时,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。
实例:
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3
兼容老版本IE(Polyfill)
if (typeof Array.prototype.lastIndexOf != "function") {
Array.prototype.lastIndexOf = function (searchElement, fromIndex) {
var index = -1, length = this.length;
fromIndex = fromIndex * 1 || length - 1;
for (var k = length - 1; k > -1; k-=1) {
if (k <= fromIndex && this[k] === searchElement) {
index = k;
break;
}
}
return index;
};
}
6. map
语法:var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])
参数:
- callback
生成新数组元素的函数,使用三个参数;
currentValue, callback 数组中正在处理的当前元素
index可选, callback 数组中正在处理的当前元素的索引。
array可选, map 方法调用的数组
- thisArg(可选)
执行 callback 函数时值被用作this
实例:
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
var kvArray = [{key: 1, value: 10},
{key: 2, value: 20},
{key: 3, value: 30}];
var reformattedArray = kvArray.map(function(obj) {
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
});
// reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}],
// kvArray 数组未被修改:
// [{key: 1, value: 10},
// {key: 2, value: 20},
// {key: 3, value: 30}]
兼容老版本IE(Polyfill)
if (typeof Array.prototype.map != "function") {
Array.prototype.map = function (fn, context) {
var arr = [];
if (typeof fn === "function") {
for (var k = 0, length = this.length; k < length; k++) {
arr.push(fn.call(context, this[k], k, this));
}
}
return arr;
};
}
7. reduce
语法:arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
参数:
- callback
执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数,包含四个参数:
accumulator,累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue;
currentValue, 数组中正在处理的元素。
index 可选, 数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则从索引1起始
array 可选, 调用reduce()的数组
简单来说:callback函数接受4个参数:之前值、当前值、索引值以及数组本身
- initialValue(可选)
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错
实例:
var arr = [0, 1, 2, 3, 4];
var sum = arr.reduce(function(accumulator, currentValue, currentIndex, array){
return accumulator + currentValue;
});
console.log(sum); // 10
// 二维数组的扁平化
var matrix = [
[1, 2],
[3, 4],
[5, 6]
];
// 二维数组扁平化
var flatten = matrix.reduce(function (previous, current) {
return previous.concat(current);
});
console.log(flatten); // [1, 2, 3, 4, 5, 6]
兼容老版本IE(Polyfill)
if (typeof Array.prototype.reduce != "function") {
Array.prototype.reduce = function (callback, initialValue ) {
var previous = initialValue, k = 0, length = this.length;
if (typeof initialValue === "undefined") {
previous = this[0];
k = 1;
}
if (typeof callback === "function") {
for (k; k < length; k++) {
this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
}
}
return previous;
};
}
8. reduceRight
跟reduce相比,用法类似,差异在于reduceRight是从数组的末尾开始实现
实例:
var arr= [1, 2, 3, 4];
var specialDiff = arr.reduceRight(function (previous, current, index) {
if (index == 0) {
return previous + current;
}
return previous - current;
});
console.log(specialDiff); // 0
// 定义可组合函数
const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value)
// 加1
const inc = (n) => n + 1
// 乘2
const double = (n) => n * 2
// 组合
console.log(compose(double, inc)(2)); // 6
// 组合
console.log(compose(inc, double)(2)); // 5
兼容老版本IE
(Polyfill)
if (typeof Array.prototype.reduceRight != "function") {
Array.prototype.reduceRight = function (callback, initialValue ) {
var length = this.length, k = length - 1, previous = initialValue;
if (typeof initialValue === "undefined") {
previous = this[length - 1];
k--;
}
if (typeof callback === "function") {
for (k; k > -1; k-=1) {
this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
}
}
return previous;
};
}
9. some
some 方法为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some() 将会立即返回 true。否则,some() 返回 false。callback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。
参数跟every方法一样。
兼容老版本IE(Polyfill)
if (typeof Array.prototype.some != "function") {
Array.prototype.some = function(fn){
if (this === void 0 || this === null || typeof fun !== 'function')
throw new TypeError();
var t = Object(this), context = arguments.length >= 2 ? arguments[1] : void 0;
var len = t.length, bool = false;
for(var i = 0;i < len; i++){
if(bool) break;
bool = !!fn.call(context, t[i], i, t);
}
return bool;
}
}
参考资料:
MDN Array
ES5中新增的Array方法详细说明