本文详细解析 JavaScript 中 Array 对象的常用方法，包括 map、reduce、filter、sort 以及查找类方法。通过具体代码实例演示如何对数组元素进行映射、归并、筛选和排序。此外，还深入讲解了函数作为返回值、闭包概念、箭头函数的 this 指向以及 ES6 Generator 生成器的使用技巧，帮助开发者掌握现代 JS 核心特性。
map 与 reduce 方法详解
1.map/reduce
map() 方法用于创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
map() 是 Array 对象的一个内置方法。
它的主要作用是对数组中的每一个元素调用自定义函数进行处理。
'use strict';
function pow(x){
return x*x;
}
var arr=[1,2,3,4,5]
var newarray=arr.map(pow)map 的回调函数接收三个参数：
callback(currentValue, index, array)，其中通常只需要使用第一个参数，即当前元素值。
注意：map() 传入的参数是 pow，即函数对象本身，而非函数调用的结果。
通常情况下，map 调用的自定义方法只包含一个参数，即当前处理的数组元素。
2.reduce() 方法
reduce() 同样是 Array 对象的一个内置方法。
它的作用是从数组的前两个元素开始，将它们作为参数传入函数得到结果，
然后将该结果与下一个数组元素再次调用函数，如此迭代直到数组末尾。
例如：[x1, x2, x3, x4].reduce(f) 等价于 f(f(f(x1, x2), x3), x4)。通常 reduce() 调用的自定义方法只包含两个参数。
filter 筛选方法实战
3.filter(筛选)
filter() 方法用于把 Array 的某些元素过滤掉，然后返回剩下的元素组成的新数组。
与 map() 类似，Array 的 filter() 也接收一个函数。不同的是，filter() 把传入的函数依次作用于每个元素，然后根据返回值是 true 还是 false 决定保留还是丢弃该元素。
// 示例：去掉空字符串
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']回调函数
通常我们仅使用第一个参数，表示 Array 的某个元素。回调函数还可以接收另外两个参数，分别表示元素的位置索引和数组本身：
var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
console.log(element); // 依次打印'A', 'B', 'C'
console.log(index); // 依次打印0, 1, 2
console.log(self); // self就是变量arr
return true;
});示例：筛选素数
function get_primes(arr){
if(elem===1){
return false;
}
for(var i=2;i<=elem/2;i++){
if(elem%i==0)
{
return false;
}
}
return true;
});
return x;
}关键点在于正确实现一个判断“是否为素数”的筛选函数。
sort 排序与自定义规则
4.sort(排序)
默认排序会将所有元素转换为字符串，然后根据字符串的 ASCII 值进行排序（非递减顺序，使用 TimSort 算法）。
排序时两两比较，当回调函数返回值大于 0 时，交换元素位置。
自定义数字排序
'use strict'
var arr=[10,20,1,2];
arr.sort(function(x,y){
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
});
console.log(arr); // [1, 2, 10, 20]数字倒序排列示例
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
if (x < y) {
return 1;
}
if (x > y) {
return -1;
}
return 0;
}); // [20, 10, 2, 1]5. 其他的 Array 方法
every, some, find 查找方法
every() 和 some()
这两个方法用于判断数组的所有元素是否满足测试条件（通过提供的函数）。
every() 在所有元素都满足条件时返回 true，只要有一个不满足就返回 false 并终止检测。
some() 在所有元素都不满足条件时返回 false，只要有一个满足就返回 true。
find()
find() 方法用于查找第一个符合条件的元素。
查找符合条件的第一个元素，如果找到了就返回这个元素，否则返回 undefined。
findIndex()
findIndex() 方法用于查找第一个符合条件的元素的索引。
查找符合条件的第一个元素，找到该元素就返回它的索引，如果没有找到就返回 -1。
forEach 遍历与函数返回值
forEach()
forEach() 常用于遍历数组。
(与 map 类似) 把数组每个元素依次传入函数，但不会返回新的数组，主要用于执行副作用操作。
函数作为返回值：在函数内部再定义一个函数，返回值为内部定义的函数。
调用这种返回函数的函数时，每次调用都会返回一个新的函数实例，即使传入相同的参数。
function lazy_sum(arr) {
var sum = function () {
return arr.reduce(function (x, y) {
return x + y;
});
}
return sum;
}
//此时返回的是求和函数
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
f(); // 15 此时调用,才进行计算闭包概念与箭头函数
在函数 lazy_sum 中又定义了函数 sum，并且，内部函数 sum 可以引用外部函数 lazy_sum 的参数和局部变量，当 lazy_sum 返回函数 sum 时，相关参数和变量都保存在返回的函数中，这种称为“闭包（Closure）”的程序结构拥有极大的威力。
闭包概念解析
有权访问另一个函数作用域内变量的函数都是闭包。
函数里面的函数会随着外部定义函数的执行环境而改变。
注意：因为返回值就是一个函数，调用时需要加上小括号。
返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。
如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变：
箭头函数 (=>) 语法：(参数...)=>{函数体} 等价于 function(参数...){函数体}。
当返回的是一个对象时，函数体大括号外边需加小括号。
示例：x=>({foo:x})
关于 this 指向
箭头函数内部的 this 是词法作用域，由上下文确定。
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25箭头函数完全修复了 this 指向问题，this 总是指向词法作用域，也就是外层调用者 obj。
Generator 生成器使用指南
6. generator(生成器)
ES6 引入，借鉴 Python 同名函数概念。
写法与函数类似，只是在 function 后加 *，通过 yield 多次返回值，也可通过 return 返回值。
函数在执行过程中，如果没有遇到 return 语句（函数末尾如果没有 return，就是隐含的 return undefined;），控制权无法交回被调用的代码。
function* (x){
yield x
}
function* fib(max) {
var
t,
a = 0,
b = 1,
n = 0;
while (n < max) {
yield a;
[a, b] = [b, a + b];
n ++;
}
return;
}
fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}直接调用一个 generator 和调用普通函数不一样，fib(5) 仅仅是创建了一个 generator 对象，还没有去执行它。
调用 generator 对象有两个方法：
一是不断地调用 generator 对象的 next() 方法：next() 方法会执行 generator 的代码，然后，每次遇到 yield x; 就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的 value 就是 yield 的返回值，done 表示这个 generator 是否已经执行结束了。如果 done 为 true，则 value 就是 return 的返回值。当执行到 done 为 true 时，这个 generator 对象就已经全部执行完毕，不要再继续调用 next() 了。
var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}第二个方法是直接用 for ... of 循环迭代 generator 对象，这种方式不需要我们自己判断 done：
for (var x of fib(10)) {
console.log(x); // 依次输出0, 1, 1, 2, 3, ...
}generator 还有另一个巨大的好处，就是把异步回调代码变成“同步”代码。这个好处要等到后面学了 AJAX 以后才能体会到。
try {
r1 = yield ajax('http://url-1', data1);
r2 = yield ajax('http://url-2', data2);
r3 = yield ajax('http://url-3', data3);
success(r3);
}
catch (err) {
handle(err);
}看上去是同步的代码，实际执行是异步的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。