JavaScript常用数组API（2）

数组API

indexOf

描述：indexOf用于在数组中arr中查找searchElement

​ 找到第一个匹配元素后返回它在数组中的索引值

​ 没有找到则返回-1

语法： arr.indexOf(searchElement[,fromIndex=0]);

参数：searchElement需要在数组中查找的元素

​ fromIndex（number）开始查找的索引，默认值0

返回值：返回searchElement在arr中的索引值

var arr = [1, 2, 32, 4, 5, 226, 1, 32, 56];
console.log(arr.indexOf(32, 3));//7

//indeOf的原理分析
var arr = [1, 2, 32, 4, 5, 226, 1, 32, 56];
   // console.log(arr.indexOf(32, 5));

Array.prototype.indexof = function(searchElement, fromIndex) {
	fromIndex = fromIndex || 0;
    // console.log(this);
    // this关键字出现在函数中，谁调用该函数，this就指向谁
	for (var i = fromIndex; i < this.length; i++) {
		if (this[i] === searchElement) return i;
	}
	return -1;
}
console.log(arr.indexof(32, 5));

forEach

描述：forEach函数会遍历数组 为每一个数组的元素执行一个回调函数

语法：arr.forEach(callback);

参数：callback（回调函数）

​ 回调参数：currentValue 当前值

​ [index] 当前值对应的索引

​ [array] 当前数组

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(currentValue, index) {
	console.log(currentValue, index);
});

arr.forEach(function(val) {
	console.log(val * 5);
});

//forEach原理分析
Array.prototype.foreach = function(callback) {
	for (var i = 0; i < this.length; i++) {
		callback(this[i], i, this);
        // this关键字出现在函数中，谁调用该函数，this就指向谁
	}
}
var arr2 = [2, 3, 4, 5, 6];
arr2.foreach(function(val, i) {
	console.log(val, i);
});

filter

描述：filter方法用于检测数组中的每一个元素是否符合给定函数中的布尔表达式条件

​ 将所有结果为true的数组 组成一个新数组并返回

语法：arr.filter(callback);

参数：callback（回调函数）

​ 回调参数：currentValue 当前值

​ [index] 当前值对应的索引

​ [array] 当前数组

返回值：新数组，包含了所有通过测试的元素

var arr = [6, 543, 867, 543, 32, 13, 12, 11, 28, 513, 52];
//选出数组中所有的偶数
	//for循环
	var arr2 = [];
	for (var i = 0; i < arr.length; i++) {
		if (arr[i] % 2 == 0) arr2.push(arr[i]);
	}
	console.log(arr2);
	//forEach
	arr.forEach(function(elm) {
		if (elm % 2 == 0) arr2.push(elm);
	});
	console.log(arr2);
	//filter
	var result = arr.filter(function(val) {
		return val % 2;
	});
	console.log(result);
//选出age大于18的对象
	var data = [{
            name: 'zhangsan',
            age: 25
        }, {
            name: 'lisi',
            age: 15
        }, {
            name: 'wangwu',
            age: 13
        }, {
            name: 'zhaoliu',
            age: 27
        }, {
            name: 'fengqi',
            age: 11
        }];
	var result = data.filter(function(val) {
		return val.age >= 18;
        });
	console.log(result);

//filter原理分析
Array.prototype.filter1 = function(callback) {
	var result = [];
	for (var i = 0; i < this.length; i++) {
		if (callback(this[i], i, this)) {
			result.push(this[i]);
		}
	}
	return result;
}
var arr = [6, 543, 867, 543, 32, 13, 12, 11, 28, 513, 52];
var result = arr.filter1(function(val, i) {
 	return val % 2 == 0;
});
console.log(result);

map

描述：映射

​ 1、遍历数组 为数组中的每一个元素执行一个回调函数 传入每一个元素

​ 2、修改(操作)数组中的元素

​ 3、返回一个修改后的新数组

语法：arr.map(callback);

参数：callback（回调函数）

​ 回调参数：currentValue 当前值

​ [index] 当前值对应的索引

​ [array] 当前数组

返回值：新数组

//奇数乘3偶数乘4
var arr = [1, 2, 3, 4, 5];
	arr = arr.map(function(val) {
		if (val % 2) {
			return val * 3;
		} else {
			return val * 4;
		}
	});
console.log(arr);
//挑选出对象中的age并将数值放到一个新的数组
        var data = [{
            name: 'zhangsan',
            age: 25
        }, {
            name: 'lisi',
            age: 15
        }, {
            name: 'wangwu',
            age: 13
        }, {
            name: 'zhaoliu',
            age: 27
        }, {
            name: 'fengqi',
            age: 11
        }];

        var result = data.map(function(val) {
            return {
                ee: val.age
            };
        });
        console.log(result);

//map原理
Array.prototype.map1 = function(callback) {
	var result = [];
	for (var i = 0; i < this.length; i++) {
		result.push(callback(this[i], i, this));
	}
	return result;
}

var arr = [2, 654, 1, 32, 6];
var arr2 = arr.map1(function(val) {
	return val / 2;
});
console.log(arr2);
console.log(arr);

every

描述： every会遍历数组，为每一个数组的元素执行一个回调函数

​ 在回调函数中提供一个布尔表达式，如果数组中的每一个元素都通过布尔表达式的测试则every的结果返回true，否则返回false

语法： arr.every(callback(element[,index[,array]]));

参数：callback（回调函数）

​ 回调参数： element 元素

​ [index] 当前值对应的索引

​ [array] 当前数组

返回值：布尔值

//判断数组中的每一个元素是否都是奇数
var arr = [15, 221, 31, 77, 19];
var result = arr.every(function(val) {
	return val % 2;
});
console.log(result);

//判断年龄是成年人
var data = [{
    name: 'zhangsan',
    age: 25
}, {
    name: 'lisi',
    age: 18
}, {
    name: 'wangwu',
    age: 21
}, {
    name: 'zhaoliu',
    age: 27
}, {
    name: 'fengqi',
    age: 19
}];
var res = data.every(function(val) {
	return val.age >= 18;
});
console.log(res);

//every原理
Array.prototype.every1 = function(callback) {
	var temp;
	for (var i = 0; i < this.length; i++) {
		temp = callback(this[i], i, this);
		if (!temp) return false; 
		// 只要有一个是false就retrun结果
	}
	return true; //循环结束都没有false则返回true
}
var arr = [152, 221, 31, 77, 19];
var res = arr.every1(function(val) {
	return val % 2;
});
console.log(res);

some

描述： some会遍历数组，为每一个数组的元素执行一个回调函数

​ 在回调函数中提供一个布尔表达式，如果数组中有一个元素都通过布尔表达式的测试则every的结果返回true，否则返回false

语法： arr.some(callback(element[,index[,array]]));

参数：callback（回调函数）

​ 回调参数： element 元素

​ [index] 当前值对应的索引

​ [array] 当前数组

返回值：布尔值

var arr = [1, 2, 3, 4, 5];
var res = arr.some(function(val) {
	return val > 10;
});
console.log(res);

reduce

描述：归并

语法：arr.reduce(callback[,object]);

参数：callback(function)

​ object 传入到回调中的对象

​ 回调参数：

​ prev 上一个

​ next 下一个

​ 当拥有object参数时

​ 回调参数：

​ object

​ currentValue

返回值：归并结果

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.reduce(function(prev, next) {
    // 当回调设置返回值后,prev是前一次的返回值
    // 没有设置返回值为undefined
    // 第一次调用回调时，prev是数组中的一个值
    // next始终是下一个值
    console.log(prev, next);
    return 2;
});
//求和
var result = arr.reduce(function(prev, next) {
    return prev + next;
});
console.log(result);

//统计
var arr = [6, 54, 24, 325, 34, 5, 4363, 1654, 87, 6, 327];
var result = arr.reduce(function(obj, cur) {
    // console.log(obj, cur);
    cur % 2 ? obj.odd++ : obj.even++;
    obj.sum += cur;
    return obj;
}, {
    odd: 0,
    even: 0,
    sum: 0
	});
console.log(result);

//reduce原理
Array.prototype.reduce1 = function(callback, object) {
    var result; // 用于临时存放 结果对象
    if (typeof object === 'object' && object !== null) {
        for (var i = 0; i < this.length; i++) {
            result = callback(object, this[i]);
        }
        return result;
    }
}

var arr = [1, 2, 3, 4, 5, 6, 7];
var result = arr.reduce1(function(obj, current) {
    current % 2 ? obj.odd++ : obj.even++;
    return obj;
}, {
    odd: 0,
    even: 0
});

console.log(result);

find

描述：find方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

语法：arr.find(callback);

参数：callback(function)

​ 回调函数：currentValue

​ index

​ array

返回值：返回第一个符合布尔表达的值

var arr = [11, 654, 65, 35, 72];
var result = arr.find(function(val) {
    return val % 5 == 0;
});
console.log(result);

//find原理
Array.prototype.find1 = function(callback) {
    for (var i = 0; i < this.length; i++) {
        if (callback(this[i], i, this)) {
            return this[i];
        }
    }
}

var arr = [11, 654, 65, 35, 72];
var result = arr.find1(function(val) {
    return val % 17 == 0;
});

console.log(result);

findIndex

描述：findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1

语法：arr.findIndex(callback);

参数：callback(function)

​ 回调参数：currentValue

​ index

​ array

var arr = [11, 654, 65, 35, 72];
var index = arr.findIndex(function(val) {
    return val % 19 == 0;
});
console.log(index);

//findIndex原理
Array.prototype.findIndex1 = function(callback) {
    for (var i = 0; i < this.length; i++) {
        if (callback(this[i], i, this)) {
            return i;
        }
    }
    return -1;
}