数组方法

1. Array.isArray

检测一个值是否是数组
@param obj {object} 需要检测的值
@return {boolean}

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray("foobar"); // false   
Array.isArray(undefined);  // false

2. Array.prototype.concat

将数组和参数拼接起来
@param valueN {arbitrary type} 任意类型需要拼接的值
@return {array} 新的数组实例

var arr = [1, 2, 3]; 
console.log(arr.concat([4, 5])); 
// [1, 2, 3, 4, 5] concat会把第一个[]默认“去掉”后加入
console.log(arr.concat(4, 5)); // [1, 2, 3, 4, 5]
console.log(arr.concat([[4, 5]])) // [1, 2, 3, [4, 5]] 第二个[]不“去掉”
console.log(arr.concat({})); // [1, 2, 3, {}] 
console.log(arr.concat(function(){})); // [1, 2, 3, function(){}]
console.log(arr.concat('123')); // [1, 2, 3, '123']
console.log(arr.concat(true)); // [1, 2, 3, true]

3.Array.prototype.every

测试数组中是否每一个元素都满足某个条件
处理过程：每次将数组中的一个元素作为第一个实参调用callback，如果每次都返回true，则函数返回true；如果有一个返回false，则函数返回false
@param callback {function} 说明测试条件的函数
@param thisArg {object} 可选每次调用callback时this指向的值，如果不指定，在普通模式下，为顶层对象；严格模式为undefined
@return {boolean} 如果都满足条件，返回true；否则，返回false

3.1. 不使用thisArg:

var arr = [1, 2, 3]
function callback(value){
    return value > 0; 
}
var result = arr.every(callback);
console.log(result); // true

3.2 使用thisArg:

var arr = [1, 2, 3];
function callback(value){
    return value > this.length;
} 
var result = arr.every(callback);
console.log(result); // true 因为window.length等于0

var result = arr.every(callback, [1, 1]);
console.log(result); // false 因为[1, 1].length等于2，而arr中元素1小于2

4. Array.prototype.filter

把数组中通过某个条件测试的元素筛选出来
@param callback {function} 说明测试条件的函数
- @param element {arbitrary type} 当前处理的元素
- @param index {number} 可选当前处理元素的索引
- @param array {array} 可选调用filter函数的this（原数组）
@param thisArg {object} 可选调用callback的this，同上
@return {array} 返回一个新数组，元素都是过滤后剩下的元素

function odd(element){
    return element % 2 !== 0;
} 

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = arr.filter(odd);
console.log(result); // [1, 3, 5, 7, 9]

5.Array.prototype.forEach

对数组的每个元素执行一次提供的函数。
@param callback {function} 执行函数
- @param currentValue {arbitrary type} 数组中正在处理的当前元素。
- @param index {number} 可选数组中正在处理的当前元素的索引。
- @param array {array} 可选 forEach()方法正在操作的数组。
@param thisArg {object} 可选当执行回调函数时用作this的值

5.1 不改变原数组

function callback(currentValue, index, array){
    doubleArr.push(currentValue * 2);
}
var arr = [1, 2, 3, 4, 5];
var doubleArr = [];
arr.forEach(callback);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(doubleArr) // [2, 4, 6, 8, 10]

5.2 改变原数组

// 方式一：
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(currentValue, index, array){
    this[index] = currentValue * 2; 
}, arr);
console.log(arr); // [2, 4, 6, 8, 10]

// 方式二：
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(currentValue, index, array){
    array[index] = currentValue * 2; 
});
console.log(arr); // [2, 4, 6, 8, 10]

6.Array.prototype.join

将数组的所有元素连接成一个字符串并返回这个字符串
@param separator {string} 默认为"," 连接时的分隔符
@return {string} 结果字符串。如果 arr.length 为0，则返回空字符串

function train_join(arr, separator=','){
    var result = arr.join(separator);
    console.log(result);
}
var arr = [1, 2, 3, 4];
train_join(arr); // '1,2,3,4'
var arr = [1, 2, [3], 4]
train_join(arr); // '1,2,3,4'
var arr = [1, 2, [[3]], 4] 
train_join(arr);  // '1,2,3,4'

7.Array.prototype.indexOf

返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
@param searchElement {arbitrary type} 要查找的元素
@param formIndex 可选开始查找的位置。默认值为0
@return {number} 首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

7.1 获取特定元素的所有索引

/**
    查找数组中特定元素的所有索引    
    @param element {arbitrary type} 需要查找的元素
    @param fromIndex {number} 开始查找的位置， 默认为0
    @return 
        如果找到元素： {array} 存放所有索引的数组
        如果找不到元素：{number} -1
*/
Array.prototype.allIndexOf = function(element, fromIndex='0'){
    var result = [];
    var curIndex;
    do{
        curIndex = this.indexOf(element, fromIndex);
        result.push(curIndex);
        fromIndex = curIndex + 1;
    }while(curIndex !== -1);

    result.pop(); // 把-1去掉

    return result.length ? result : -1;  
}

7.2 fromIndex为负数时

function train_indexOf(arr, element, fromIndex){
    var result = arr.indexOf(element, fromIndex);
    console.log(result);
}
var arr = [1, 2, 3];
train_indexOf(arr, 2, -3); // 1
train_indexOf(arr, 2, -2); // 1
train_indexOf(arr, 2, -1); // -1

可以发现，即使fromIndex为负数，indexOf函数仍然是从头到尾扫描数组的，如果在[fromIndex, length-1]范围找到元素，那么就返回元素的在原数组的索引；否则，返回-1

8. Array.prototype.lastIndexOf

返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。
@param searchElement {arbitrary type} 寻找的元素
@param fromIndex {number} 可选从此位置开始逆向查找。默认为数组的长度减 1
@return {number} 返回元素的索引，如果找不到，返回-1

function train_lastIndexOf(arr, element, fromIndex){
    fromIndex = fromIndex || arr.length-1;
    var result = arr.lastIndexOf(element, fromIndex);
    console.log(result);
}
var arr = [1, 2, 3];
train_lastIndexOf(arr, 2); // 1, 在[0, length-1]从后往前找
train_lastIndexOf(arr, 2, -2); // 1, 在[0, length-2]从后往前找

同indexOf一样，无论fromIndex是正还是负，查找顺序不变，返回的是在原数组的索引

9. Array.prototype.map

创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
@param callback {function} 生成新数组元素的函数
- @param currentValue {arbitrary type} 当前元素
- @param index {number} 可选当前元素的索引
- @param array {array} 可选原数组
@param thisArg {object} 可选执行 callback 函数时使用的this 值。
@return {array} 一个新数组，每个元素都是回调函数的结果。

function callback(currentVale, index, array){
    return currentVale * 2;
}    
var arr = [1, 2, 3];
var result = arr.map(callback);
console.log(result); // [2, 4, 6]

10. Array.prototype.push

将一个或多个元素添加到数组的末尾，并返回新数组的长度。改变原数组
@param elementN {arbitrary type} 待添加元素
@return {number} 改变后数组的长度

10.1 测试

function train_push(){
    var arr = Array.prototype.shift.call(arguments);
    var length = Array.prototype.push.apply(arr,arguments);
    console.log(length);
    console.log(arr);
}
var arr = [1, 2, 3];
train_push(arr, 1, 2, 3); // 6, [1, 2, 3, 1, 2, 3]
var arr = [1, 2, 3];
train_push(arr, [1, 2, 3]); // 4, [1, 2, 3, [1, 2, 3]]

10.2 用arr来代替elementN传递多个需要添加的元素

/**
    通过数组形参的方式，push多个元素到原数组
    @return {number} 改变后数组的长度
*/
Array.prototype.pushElments = function(){
    Array.prototype.push.apply(this, arguments[0]);
    return this.length;  
}
var arr = [1, 2, 3];
arr.pushElments([1, 2, 3]);
console.log(arr);

11. Array.prototype.pop

从数组中删除最后一个元素，并返回该元素的值。改变原数组
@return {arbitrary type} 返回删除的元素，如果原数组为空，则返回undefined

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

12. Array.prototype.reverse

将原数组中元素的位置颠倒。改变原数组
@return {array} 数组的引用

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

13. Array.prototype.sort

排序数组排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。改变原数组。
@param compareFunction {function} 可选用来指定按某种顺序进行排列的函数。默认为根据字符串Unicode码点排序。
- 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
- 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；
- 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
@return {array} 排序后的数组

// 从小到大排序    
function compareFunction1(a, b){
    /*
        1. 当a < b时，a-b < 0，a(小值)排在b(大值)前面
        2. 当a > b时，a-b > 0，a(大值)排在b(小值)后面  
        => 把小值排在前面
    */
    return a - b;
}
// 从大到小排序
function compareFunction2(a, b){
    /*
        1. 当a < b时，b-a > 0，a(小值)排在b(大值)后面
        2. 当a > b时，b-a < 0，a(大值)排在b(小值)前面 
        => 把大值排在前面
    */
    return b - a;
}
function train_sort(arr, func){
    var result = arr.sort(func);
    console.log(result);
}
var arr = [1, 2, 3];
train_sort(arr, compareFunction1); // [1, 2, 3]
var arr = [1, 2, 3];
train_sort(arr, compareFunction2); // [3, 2, 1]

可以得到的结论是：
如果a<b时，compareFunction返回的结果小于0，那么正序；
如果a<b时，compareFunction返回的结果大于0，那么逆序。

14. Array.prototype.shift

从数组中删除第一个元素，并返回该元素的值。改变原数组
@return {arbitrary type} 返回删除的元素，如果是原数组为空，返回undefined

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

15. Array.prototype.unshift

将一个或多个元素添加到数组的开头，并返回新数组的长度。改变原数组
@param elementN {arbitrary type} 要添加到数组开头的元素。
@return {number} 改变后数组的长度

15.1 测试

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

15.2 使用数组替代elementN

/**
   在数组开头插入若干元素
   @param arr {array} 待插入元素组成的数组
   @return length {number} 返回数组改变后的长度
*/
Array.prototype.unshiftElments = function(){
   return Array.prototype.unshift.apply(this, arguments[0]);
}
var arr = [1, 2, 3];
var length = arr.unshiftElments([1, 2]);
console.log(length); // 5
console.log(arr); // [1, 2, 1, 2, 3]

16. Array.prototype.slice

返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
@param begin {number} 可选开始索引，默认为0
@param end {number} 可选结束索引，默认为length
@return {array} 拷贝后的数组

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

17. Array.prototype.splice

通过删除现有元素和/或添加新元素来更改一个数组的内容 改变原数组
@param start {number} 指定修改的开始位置，默认为0
@param deleteCount {number} 可选删除元素的个数，默认为arr.length-start；如果该值为0，表示不删除元素，则必须增加至少一个元素；如果该值省略，相当于把start（包括start）后面的元素都删除
@param itemN {arbitrary type} 可选增加的元素，从start开始依次增加
@return {array} 由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

17.1 测试

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

17.2 使用数组替代itemN

/**
    在特定位置添加元素，改变原数组
    @param index {number} 索引
    @param arr {array} 需要添加的元素组成的数组
    @retruen {array} 返回添加后的数组的引用
*/
Array.prototype.addItems = function(){
    Array.prototype.unshift.apply(arguments[1], [arguments[0], 0]);
    Array.prototype.splice.apply(this, arguments[1]);
    return this;
}
var arr = [1, 2, 3];
var result = arr.addItems(1, [1, 2, 3]);
console.log(result); // [1, 1, 2, 3, 2, 3]

18. Array.prototype.some

测试数组中的某些元素是否通过由提供的函数实现的测试。
@param callback {function} 说明测试条件的函数
- @param currentValue {arbitrary type} 当前处理的元素
- @param index {number} 可选当前处理元素的索引
- @param array {array} 可选调用some函数的this（原数组）
@param thisArg {object} 可选调用callback的this
@return {boolean} 如果数组有元素通过测试返回true，否则返回false

function callback(currentValue, index, array){
    return currentValue > 2;
}
var arr = [1, 2, 3];
console.log(arr.some(callback)); // true 
var arr = [0, 1, 2];
console.log(arr.some(callback)); // false

19.Array.prototype.toString

返回一个字符串，表示指定的数组及其元素
@return {string} 数组元素组成的字符串

var arr = [1, 2, 3];
var result = arr.toString();
console.log(result) // '1, 2, 3'

20. Array.prototype.reduce

对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。
@param callback {function} 调用的函数
- @param accumulator {number} 累加器
- @param currentValue {number} 当前处理的元素
- @param currentIndex {number} 当前处理元素的索引
- @param array {array} 原数组
@param initialValue {number} 累加器的初始值，默认为数组第一个元素
@return {number} 函数累加的结果

function callback(accumulator, currentValue,currentIndex, array){
    return accumulator + currentValue;
}
var arr = [1, 2, 3];
var result = arr.reduce(callback);
console.log(result); // 6
var result = arr.reduce(callback, 4);
console.log(result); // 10

21. Array.prototype.reduceRight

接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。
@param callback {function} 调用的函数
- @param accumulator {number} 累加器
- @param currentValue {number} 当前处理的元素
- @param currentIndex {number} 当前处理元素的索引
- @param array {array} 原数组
@param initialValue {number} 累加器的初始值，默认为数组第一个元素
@return {number} 函数累加的结果

function callback(accumulator, currentValue,currentIndex, array){
    return accumulator + currentValue;
}
var arr = [1, 2, 3];
var result = arr.reduceRight(callback);
console.log(result); // 6
var result = arr.reduceRight(callback, 4);
console.log(result); // 10

posted @ 2018-09-03 19:16 web_小隆阅读(312) 评论(0) 编辑收藏举报

刷新页面返回顶部

web_小隆