const potentialParticipants = [ { id: 'k38i', name: 'john', age: 17 }, { id: 'baf3', name: 'mary', age: 13 }, { id: 'a111', name: 'gary', age: 24 }, { id: 'fx34', name: 'emma', age: 34 }, ] const participantsFormatted = potentialParticipants .filter(user => user.age > 18) .map(user => user.name) .join(', ') console.log(participantsFormatted) // gary, emma
from
这是一个静态方法，从类数组中创建新的数组，或者像例子中的字符串一样遍历对象。当处理 dom 时，这个方法十分有用。
const nodes = document.querySelectorAll('.todo-item') // 这是一个 nodeList 实例 const todoItems = Array.from(nodes) // 现在你能使用 map filter 等等，就像在数组中那样!
你曾经见到过我们使用 Array 代替数组实例吗？这就是问什么 from 被称作静态方法。
接着可以愉快处理这些节点，比如用 forEach 在每个节点上注册事件监听：
todoItems.forEach(item => { item.addEventListener('click', function() { alert(`You clicked on ${item.innerHTML}`) }) })
最好了解突变
下面是其他常见的数组方法。不同之处在于，它们会修改原数组。修改数组并没有什么错，最好是你应该有意识去修改它。
对于这些方法，如果你不想去改变原数组，只能在操作前浅拷贝或者深拷贝。
const arr = [1, 2, 3, 4, 5] const copy = [...arr] // or arr.slice()
sort
是的，sort 修改了原数组。事实上，在这里进行了数组元素排序。默认的排序方法把所有的元素转换成字符串，然后按照字母表排序它们。
const names = ['john', 'mary', 'gary', 'anna'] names.sort() console.log(names) // ['anna', 'gary', 'john', 'mary']
如果你有 Python 背景的话，要小心了。使用 sort 在数字数组中不会得到你想要的结果
const numbers = [23, 12, 17, 187, 3, 90] numbers.sort() console.log(numbers) // [12, 17, 187, 23, 3, 90] 🤔。
那么如何对一个数组排序？额，sort 接受一个函数，一个比较函数。这个函数接受两个参数：第一个元素（我们称呼为 a）和第二个元素作比较（b）。这两个元素之间的比较需要返回一个数字。
如果为负，a 排序在 b 之前。
如果为正，b 排序在 a 之前。
如果是0，没有任何改变。
那么你可以使用下面的方式排序数组：
const numbers = [23, 12, 17, 187, 3, 90] numbers.sort((a, b) => a - b) console.log(numbers) // [3, 12, 17, 23, 90, 187]
或者通过最近时间排序：
const posts = [ { title: 'Create a Discord bot under 15 minutes', date: new Date(2018, 11, 26), }, { title: 'How to get better at writing CSS', date: new Date(2018, 06, 17) }, { title: 'JavaScript arrays', date: new Date() }, ] posts.sort((a, b) => a.date - b.date) // Substracting two dates returns the difference in millisecond between them console.log(posts) // [ { title: 'How to get better at writing CSS', // date: 2018-07-17T00:00:00.000Z }, // { title: 'Create a Discord bot under 15 minutes', // date: 2018-12-26T00:00:00.000Z }, // { title: 'Learn Javascript arrays the functional way', // date: 2019-03-16T10:31:00.208Z } ]
fill
fill 修改或者填充了数组的所有元素，从开始索引到结束索引，使用一个静态值。fill 最有用的作用是使用静态值填充一个新数组。
// Normally I would have called a function that generates ids and random names but let's not bother with that here. function fakeUser() { return { id: 'fe38', name: 'thomas', } } const posts = Array(3).fill(fakeUser()) console.log(posts) // [{ id: "fe38", name: "thomas" }, { id: "fe38", name: "thomas" }, { id: "fe38", name: "thomas" }]
reverse
这个方法名在这里显而易见。然而，像留意 sort 那样，reverse 会反转数组的位置。
const numbers = [1, 2, 3, 4, 5] numbers.reverse() console.log(numbers) // [5, 4, 3, 2, 1]
你可以替换的方法
终于，在这个最后的部分，你将发现改变原数组的方法，同时可以很容易替换其中一些。我不是说你应该抛弃这些方法。只是想要你意识到一些数组方法有副作用，并且这里有可选择的其他方法。
push
处理数组时这是使用最多的方法。事实上，push 允许你在数组中添加一个或者多个元素。它也通常基于一个旧数组构建一个新数组。