JavaScript数组方法总结
gidi521
7年前
<p>说起来很搞笑，我在用 sublime 3 写排序算法的时候，准备用 nodejs 来运行，就用 sublime 3 提供的编译功能。但问题来了，我比较挫，写了个死循环，然后 sublime 3 也不给输出提示，我很疑惑的连续跑了 3 遍，过了一会电脑发热，风扇开始叫了，我察觉到，一看进程，3 个 node 进程在狂吃内存和 cpu，我在想，这个 bug 该反馈给 sublime 3 还是 node 呢？</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e6d0cfa4aacf75a0e8b18875e8a933a3.jpg"></p> <p>JavaScript 中的数组本身就很特别，不像 C 或 Java，搞了数组、list 一整套东西，JS 中的数组就完全可以当作一个栈或队列来使用，四大操作 pop、push、shift、unshift。</p> <p>我今天写这篇博客，主要是写一篇总结，以备以后查看，因为我发现无论数组操作多熟，时间久了都会忘记。</p> <p>对于一个数组方法，我最关心的有两个问题， <strong>返回值是什么，会不会对原始数组造成影响</strong> ，典型的例子就是 splice 和 slice 方法。对于那些返回原数组的函数，我们可以直接调用数组的链式调用，很酷（ array.filter().sort().reverse() ）。</p> <p>我想带着这两个疑问，来总结下 Array 的数组方法。</p> <h2>Array</h2> <p>Array.length 是数组的长度，每个新建的数组对象都会有 length 对象，可以通过 Array.prototype 修改原型，不过数组的基本使用和操作不是今天的重点，我们来看数组方法。</p> <p>一般情况下，数组方法在最后都会带有一个 thisArg 的参数，这个参数会指定内部 this 的指向。如果参数中有回掉函数，这个回掉函数一般接受 3 个参数，value、index 和 array，分别代表当前传入的值，当前传入值所在的索引和当前的处理的数组。</p> <p>目录索引：</p> <h3>concat</h3> <p>这个方法可以用于数组的拼接，参数是一个或多个数组，返回的结果是拼接数组。 </p> <p>concat 方法将创建一个新数组，然后将调用它的对象(this 指向的对象，即原数组)中的元素以及所有参数中的数组类型的参数中的元素以及非数组类型的参数本身按照顺序放入这个新数组,并返回该数组。concat 方法并不修改原数组和参数数组，而且对非数组对象同样有效果。</p> <ol> <li>返回拼接的新数组；</li> <li>不修改原数组和参数数组；</li> <li>参数可以是非数组。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var a1 = [1, 2, 3], a2 = [4, 5, 6], a3 = [7, 8, 9]; var newarr = a1.concat(a2, a3); newarr //[1, 2, 3, 4, 5, 6, 7, 8, 9] a1 //[1, 2, 3] newarr = a1.concat(4, a3);//[1, 2, 3, 4, 7, 8, 9] newarr = a1.concat('hello');//[1, 2, 3, "hello"]</code></pre> </td> </tr> </tbody> </table> <h3>every</h3> <p>every() 方法测试数组的所有元素是否都通过了指定函数的测试。 </p> <p>arr.every(callback) 会对每一个元素都执行 callback 方法，直到 callback 返回 false。有时候 every 方法会和 forEach 方法相比较，因为 forEach 无法停止，而 every 方法返回 flase 时可以中途停止。</p> <ol> <li>若全部通过测试，函数返回值 true，中途退出，返回 false；</li> <li>不对原数组产生影响。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">function isBigEnough(element, index, array) { console.log(index); return (element >= 10); } var passed = [12, 5, 8, 130, 44].every(isBigEnough); // 0 // 1 // passed is false passed = [12, 54, 18, 130, 44].every(isBigEnough); // 0 1 2 3 4 // passed is true</code></pre> </td> </tr> </tbody> </table> <h3>filter</h3> <p>filter() 方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。</p> <p>其实这个方法就是一个过滤方法，前面那个 every 方法，只判断不过滤，filter 会过滤掉一些不符合条件的，并返回新数组。</p> <ol> <li>返回一个满足过滤条件的新数组；</li> <li>不会改变原数组。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">function isBigEnough(element, index, array) { return (element >= 10); } var a1 = [19, 22, 6, 2, 44]; var a2 = a1.filter(isBigEnough); a1 //[19, 22, 6, 2, 44] a2 //[19, 22, 44]</code></pre> </td> </tr> </tbody> </table> <h3>forEach</h3> <p>forEach() 方法对数组的每个元素执行一次提供的函数(回调函数)。 </p> <ol> <li>函数没有返回值，即 underfined；</li> <li>不对原数组产生影响。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element); } // 注意索引2被跳过了，因为在数组的这个位置没有项 var result = [2, 5, 9].forEach(logArrayElements); // a[0] = 2 // a[1] = 5 // a[2] = 9 result //underfined</code></pre> </td> </tr> </tbody> </table> <h3>indexOf</h3> <p>indexOf()方法返回给定元素能找在数组中找到的第一个索引值，否则返回-1。</p> <ol> <li>返回值是找到元素的索引值或 -1；</li> <li>不对原数组产生影响。</li> </ol> <pre> <code class="language-javascript">var array = [1, 2, 5]; array.indexOf(5); // 2 array.indexOf(7); // -1</code></pre> <h3>join</h3> <p>join() 方法将数组中的所有元素连接成一个字符串。</p> <p>其实，对于 join 想到的第一个是字符串的 split 操作，这两个经常搭配用来处理字符串。</p> <ol> <li>返回拼接的字符串；</li> <li>不对原数组产生影响。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var a1 = [1, 2, 3]; var a2 = a1.join(); a1 //[1, 2, 3] a2 //"1,2,3" a2 = a1.join("");//"123" a2 = a1.join("-");//"1-2-3"</code></pre> </td> </tr> </tbody> </table> <h3>lastIndexOf</h3> <p>lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。 </p> <p>其实这个就是 indexOf 的翻版。</p> <ol> <li>返回找到的第一个元素的索引；</li> <li>不对原数组产生影响。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var array = [2, 5, 9, 2]; var index = array.lastIndexOf(2); // index is 3 index = array.lastIndexOf(7); // index is -1 index = array.lastIndexOf(2, 3); // index is 3 index = array.lastIndexOf(2, 2);</code></pre> </td> </tr> </tbody> </table> <h3>map</h3> <p>map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。 </p> <p>map reduce 这两个函数在处理数组上一直都是一把手，带来很大的便捷性。</p> <ol> <li>返回一个经过回掉函数处理的新数组；</li> <li>不对原数组产生影响。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var a1 = [1, 4, 9]; var a2 = a1.map(Math.sqrt); a1 //[1, 4, 9] a2 //[1, 2, 3]</code></pre> </td> </tr> </tbody> </table> <h3>reduce</h3> <p>reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。 </p> <p>reduce 是一个合并的过程，从左到右，直到把所有元素合并到一起，并返回最终的结果。它接受两个参数，第一个参数是一个回掉函数，第二个参数是一个初始值，表示处理第一个元素时的前一个值。这个回掉函数接受四个参数，依次是 accumulator（上次处理的结果），currentValue（当前元素的值），index（当前元素索引），array（调用 reduce 的数组）。</p> <ol> <li>返回最终合并的结果，即回掉函数的输出，可以为字符串，对象，数组等任意结果；</li> <li>不对原数组产生影响。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var getAdd = (pre, cur) => pre + cur; var a1 = [1, 2, 3]; var a2 = a1.reduce(getAdd, 0); a1 //[1, 2, 3] a2 //6</code></pre> </td> </tr> </tbody> </table> <h3>reduceRight</h3> <p>reduceRight() 方法接受一个函数作为累加器（accumulator），让每个值（从右到左，亦即从尾到头）缩减为一个值。（与 reduce() 的执行方向相反）</p> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var toStr = (pre, cur) => '' + pre + cur; var a1 = [1, 2, 3]; var a2 = a1.reduce(toStr, ''); a2 //"123" a2 = a1.reduceRight(toStr, ''); a2 //"321"</code></pre> </td> </tr> </tbody> </table> <h3>push</h3> <p>push() 方法添加一个或多个元素到数组的末尾，并返回数组新的长度（length 属性值）。</p> <p>如果把数组当作栈，push pop 操作是栈进和出，而往往很多人会忽略函数执行后的返回值。</p> <ol> <li>返回 push 操作执行之后数组的长度；</li> <li>肯定改变。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var a1 = [1, 2, 3]; var a2 = a1.push(4); a1 //[1, 2, 3, 4] a2 //4</code></pre> </td> </tr> </tbody> </table> <h3>pop</h3> <p>pop() 方法删除一个数组中的最后的一个元素，并且返回这个元素。 </p> <ol> <li>返回删除的这个元素；</li> <li>肯定改变。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var a1 = [1, 2, 3]; var a2 = a1.pop(); a1 //[1, 2] a2 //3</code></pre> </td> </tr> </tbody> </table> <h3>unshift</h3> <p>unshift() 方法在数组的开头添加一个或者多个元素，并返回数组新的 length 值。</p> <ol> <li>返回 length 值；</li> <li>肯定改变。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var a1 = [1, 2, 3]; var a2 = a1.unshift(4); a1 //[4, 1, 2, 3] a2 //4</code></pre> </td> </tr> </tbody> </table> <h3>shift</h3> <p>shift() 方法删除数组的 第一个 元素，并返回这个元素。该方法会改变数组的长度。 </p> <p>shift 方法和 push 方法可以组成一个队列的操作啦。</p> <ol> <li>返回删除的这个元素；</li> <li>肯定改变。</li> </ol> <h3>reverse</h3> <p>reverse() 方法颠倒数组中元素的位置。第一个元素会成为最后一个，最后一个会成为第一个。 </p> <ol> <li>函数返回值是修改了的原数组；</li> <li>原数组会修改。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var a1 = [1, 2, 3]; var a2 = a1.reverse(); a1 //[3, 2, 1] a1 === a2; //true</code></pre> </td> </tr> </tbody> </table> <h3>slice</h3> <p>slice() 方法会浅复制（shallow copy）数组的一部分到一个新的数组，并返回这个新数组。 </p> <p>slice 的参数包括拷贝的初识位置，结束位置（左闭右开），与 splice 有区别。由于不会改变原数组，这个数组可以用于前拷贝，比如经常看别人使用： arr.slice(0) ，表示拷贝数组。</p> <ol> <li>返回浅拷贝后的新数组；</li> <li>不会改变原数组。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var a1 = [1, 2, 3, 4, 5]; var a2 = a1.slice(1, 3); a1 //[1, 2, 3, 4, 5] a2 //[2, 3]</code></pre> </td> </tr> </tbody> </table> <h3>splice</h3> <p>splice() 方法用新元素替换旧元素，以此修改数组的内容。 </p> <p>如其名，分割，会修改原数组的内容，返回一个新数组，而且它的参数也比较多，第一个参数表示初始位置，第二个参数表示分割长度，第三个参数及以后表示分割后在分割处添加新元素。</p> <ol> <li>返回分割的元素组成的数组；</li> <li>会对数组进行修改，原数组会减去分割数组。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var a1 = [1, 2, 3, 4]; var a2 = a1.splice(1, 2); a1 //[1, 4] a2 //[2, 3] a1 = [1, 2, 3, 4]; a2 = a1.splice(1, 2, 5, 6); a1 //[1, 5, 6, 4]</code></pre> </td> </tr> </tbody> </table> <h3>some</h3> <p>some() 方法测试数组中的某些元素是否通过了指定函数的测试。 </p> <h3>sort</h3> <p>sort() 方法对数组的元素做原地的排序，并返回这个数组。 sort 排序可能是不稳定的。默认按照字符串的Unicode码位点（code point）排序。 </p> <p>sort 函数用于排序，比较常用，若没有制定排序函数，则按照 unicode 位点进行排序，而且数字会被转成字符串，所以 ‘123’ 要排在 ‘11’ 的后面。</p> <p>我们会用 sort 做一些有意思的排序，比如汉字按照拼音排序。</p> <ol> <li>返回排序后的原数组；</li> <li>会对数组进行修改。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var big = function(a, b){ return a - b; } var a1 = [2, 4, 77, 1]; var a2 = a1.sort(big); a1 //[1, 2, 4, 77] a1 === a2; //true</code></pre> </td> </tr> </tbody> </table> <p>localeCompare 可以对汉字进行排序，当同时出现汉字和字母的时候会有 bug：</p> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var sort_py = function(a, b){ return a.localeCompare(b); } var a1 = ["北京", "上海", "南京", "合肥"]; a1.sort(sort_py); //["北京", "合肥", "南京", "上海"]</code></pre> </td> </tr> </tbody> </table> <h3>toString</h3> <p>toString() 返回一个字符串，表示指定的数组及其元素。 </p> <p>显然，这个方法和 join 方法比较一下。</p> <ol> <li>返回拼接的字符串；</li> <li>不会改变原数组。</li> </ol> <pre> <code class="language-javascript">var a1 = [1, 2, 3]; var a2 = a1.toString(); a2 //"1,2,3"</code></pre> <h2>ES6 中新添的数组方法</h2> <p>上面的这些方法都是 ES5 的，来看看 ES6 添加了哪些新方法。</p> <h3>copyWithin</h3> <p>copyWithin() 方法会浅拷贝数组的部分元素到同一数组的不同位置，且不改变数组的大小，返回该数组。 </p> <p>接受三个参数，分别是要拷贝到的位置 target，拷贝开始位置 start 和结束位置 end。</p> <ol> <li>返回修改了的原数组；</li> <li>会对数组进行修改，且是浅拷贝；</li> <li>参数可负，负值时倒推，且 end 为空表示数组长度。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var a1 = [1, 2, 3, 4, 5]; var a2 = a1.copyWithin(0, 2, 4); a1 //[3, 4, 3, 4, 5] a2 //[3, 4, 3, 4, 5] a1 === a2; //true</code></pre> </td> </tr> </tbody> </table> <h3>find</h3> <p>如果数组中某个元素满足测试条件，find() 方法就会返回满足条件的第一个元素，如果没有满足条件的元素，则返回 undefined。 <a href="/misc/goto?guid=4959734906208477292" rel="nofollow,noindex">MDN array.find</a> 。</p> <ol> <li>返回找到的那个元素，若未找到，返回 underfined</li> <li>不对原数组产生影响。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">function isBigEnough(element, index, array) { return (element >= 10); } var a1 = [8, 18, 14]; var num = a1.find(isBigEnough); //18</code></pre> </td> </tr> </tbody> </table> <h3>findIndex</h3> <p>findIndex()方法用来查找数组中某指定元素的索引, 如果找不到指定的元素, 则返回 -1。 </p> <p>这个方法可以参考 find 方法，只是返回值是元素的索引而非元素本身。</p> <h3>fill</h3> <p>使用 fill() 方法，可以将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值。 </p> <p>fill 方法接受三个参数，第一个参数 value 表示要填充到值，后面两个 start 和 end 表示开始和结束位置，可选，且左闭右开。</p> <ol> <li>函数返回值是修改了的原数组；</li> <li>可对数组产生影响。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var a1 = [1, 2, 3, 4, 5]; var a2 = a1.fill(6, 1, 4); a1 //[1, 6, 6, 6, 5] a2 //[1, 6, 6, 6, 5] a1 === a2; //true</code></pre> </td> </tr> </tbody> </table> <h3>keys</h3> <p>数组的 keys() 方法返回一个数组索引的迭代器。 </p> <p>这个方法会返回一个数组索引的迭代器，迭代器在 ES6 中有特殊的用途。</p> <ol> <li>函数返回一个迭代器对象；</li> <li>不会改变原数组。</li> </ol> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var arr = ["a", "b", "c"]; var iterator = arr.keys(); console.log(iterator.next()); // { value: 0, done: false } console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: undefined, done: true }</code></pre> </td> </tr> </tbody> </table> <h3>entries</h3> <p>entries() 方法返回一个 Array Iterator 对象，该对象包含数组中每一个索引的键值对。 </p> <table> <tbody> <tr> <td> <pre> <code class="language-javascript">var arr = ["a", "b", "c"]; var eArr = arr.entries(); console.log(eArr.next().value); // [0, "a"] console.log(eArr.next().value); // [1, "b"] console.log(eArr.next().value); // [2, "c"]</code></pre> </td> </tr> </tbody> </table> <h3>includes</h3> <p>includes() 方法用来判断当前数组是否包含某指定的值，如果是，则返回 true，否则返回 false。 </p> <p>该函数接受两个参数，第二个参数表示开始查找位置，起始位置为 0。这个方法与 indexOf 方法最大的区别不仅在于返回值一个是索引，一个是布尔值，indexOf 方法使用的是 === 来判断，无法判断 NaN 情况，而 includes 可以判断。</p> <ol> <li>返回 true 或 false；</li> <li>不会改变原数组。</li> </ol> <pre> <code class="language-javascript">var a1 = [1, NaN]; a1.indexOf(NaN);//-1 a1.includes(NaN);//true</code></pre> <p> </p> <p>来自：http://yuren.space/blog/2017/01/15/array-function/</p> <p> </p>