<h3>数组操作有什么作用？</h3>
<h4>1.背景介绍</h4>
<p>JavaScript的array可以包含任意数据类型，并通过索引来访问每个元素。
filter()、some()、map()、forEach()是 ECMAScript5为数组定义的4个迭代方法，是为了更方便的对数组进行操作。</p>
<h4>2.知识剖析</h4>
<h5>map() 方法创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数。</h5>
<p>map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map">MDN</a></p>
<code>
let numbers = [1, 5, 10, 15];
let roots = numbers.map(function(x) {
return x * 2;
});
// roots is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]
let numbers = [1, 4, 9];
// let roots = numbers.map(Math.sqrt);
let roots = numbers.map(function(x){
return Math.sqrt(x);
});
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]
</code>
<h5>some() 方法测试数组中的某些元素是否通过了指定函数的测试。</h5>
<p>some 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。否则，some
返回 false。<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some">MDN</a></p>
<code>
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true
</code>
<h5>filter() 方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。</h5>
<p>filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。</p>
<p>filter 不会改变原数组<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">MDN</a></p>
<code>
function isBigEnough(element) {
return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
</code>
<h5>forEach() 方法对数组的每个元素执行一次提供的函数。</h5>
<p>forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数，那些已删除（使用delete方法等情况）或者未初始化的项将被跳过（但不包括那些值为 undefined 的项）。<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">MDN</a></p>
<p>forEach()方法中的 callback 回调函数默认支持 3 个参数，第 1 个是遍历的数组元素、第2个是元素对应的索引、第3个是数组本身。</p>
<code>
function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
// 注意索引2被跳过了，因为在数组的这个位置没有项
[2, 5, ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[3] = 9
[2, 5,"" ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] =
// a[3] = 9
[2, 5, undefined ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9
let xxx;
// undefined
[2, 5, xxx ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9
</code>
<h4>3.常见问题</h4>
<h5>数组操作的不同之处</h5>
<p>map() 创建一个新数组，每个元素都是函数执行后的结果。原数组不变。</p>
<p>some() 根据调用函数返回 true 或 false。原数组不改变。</p>
<p>filter() 创建一个新数组，数组是满足函数的元素集合。不会改变原数组。</p>
<p>forEach() forEach()仅仅遍历数组每个元素执行一次 callback 函数，它没有返回内容。这一点和map()方法、some()方法、every()方法不同。如果打印forEach()方法返回内容，会出现undefined。不会改变原内容</p>
<h4>4.解决方案</h4>
<h4>5.编码实战</h4>
<h4>6.扩展思考</h4>
filter()、some()、map()、forEach()的共同点是什么？
<h4>7.参考文献</h4>
<p>参考:<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">MDN</a>
</p>
<h4>8.更多讨论</h4>
<p>还有哪些方法可以对数组进行操作？</p>
<p>every() 方法测试数组的所有元素是否都通过了指定函数的测试。</p>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every">MDN</a>
</p>
<p>reduce() 方法对累加器和数组的每个值 (从左到右)应用一个函数，以将其减少为单个值。</p>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce">MDN</a></p>
网友评论