JavaScript常用数组API（2）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript常用数组API（2），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7493字，纯文字阅读大概需要11分钟。
内容图文
数组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;
}
内容总结
以上是互联网集市为您收集整理的JavaScript常用数组API（2）全部内容，希望文章能够帮你解决JavaScript常用数组API（2）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。