關(guān)于JavaScript 數(shù)組你應(yīng)該知道的事情（推薦）

const numbers = [1, 2, 3, 4]

const numbersPlusOne = numbers.map(n => n + 1) // 每個(gè)元素 +1
console.log(numbersPlusOne) // [2, 3, 4, 5]

const allActivities = [
 { title: 'My activity', coordinates: [50.123, 3.291] },
 { title: 'Another activity', coordinates: [1.238, 4.292] },
 // etc.
]

const allCoordinates = allActivities.map(activity => activity.coordinates)
console.log(allCoordinates) // [[50.123, 3.291], [1.238, 4.292]]

const numbers = [1, 2, 3, 4, 5, 6]
const oddNumbers = numbers.filter(n => n % 2 !== 0)
console.log(oddNumbers) // [1, 3, 5]

const participants = [
 { id: 'a3f47', username: 'john' },
 { id: 'fek28', username: 'mary' },
 { id: 'n3j44', username: 'sam' },
]

function removeParticipant(participants, id) {
 return participants.filter(participant => participant.id !== id)
}

console.log(removeParticipant(participants, 'a3f47')) // [{ id: 'fek28', username: 'mary' }, { id: 'n3j44', username: 'sam' }];

const numbers = [37, 12, 28, 4, 9]
const total = numbers.reduce((total, n) => total + n)
console.log(total) // 90

const map = (arr, fn) => {
 return arr.reduce((mappedArr, element) => {
 return [...mappedArr, fn(element)]
 }, [])
}

console.log(map([1, 2, 3, 4], n => n + 1)) // [2, 3, 4, 5]

const filter = (arr, fn) => {
 return arr.reduce((filteredArr, element) => {
 return fn(element) ? [...filteredArr] : [...filteredArr, element]
 }, [])
}

console.log(filter([1, 2, 3, 4, 5, 6], n => n % 2 === 0)) // [1, 3, 5]

function flatDeep(arr) {
 return arr.reduce((flattenArray, element) => {
 return Array.isArray(element)
 ? [...flattenArray, ...flatDeep(element)]
 : [...flattenArray, element]
 }, [])
}

console.log(flatDeep([1, 2, 3, [4, [[[5, [6, 7]]]], 8]])) // [1, 2, 3, 4, 5, 6, 7, 8]

const numbers = [1, 2, 3]
const numbersCopy = [...numbers]
console.log(numbersCopy) // [1, 2, 3]

const otherNumbers = [4, 5, 6]
const numbersConcatenated = [...numbers, ...otherNumbers]
console.log(numbersConcatenated) // [1, 2, 3, 4, 5, 6]

const arr = ['foo', 42, { name: 'Thomas' }]
let copy = [...arr]

copy[0] = 'bar'

console.log(arr) // No mutations: ["foo", 42, { name: "Thomas" }]
console.log(copy) // ["bar", 42, { name: "Thomas" }]

copy[2].name = 'Hello'

console.log(arr) // /!\ MUTATION ["foo", 42, { name: "Hello" }]
console.log(copy) // ["bar", 42, { name: "Hello" }]

const sports = ['football', 'archery', 'judo']
const hasFootball = sports.includes('football')
console.log(hasFootball) // true

const numbers = [1, 2, 3]
const otherNumbers = [4, 5, 6]

const numbersConcatenated = numbers.concat(otherNumbers)
console.log(numbersConcatenated) // [1, 2, 3, 4, 5, 6]

// You can merge as many arrays as you want
function concatAll(arr, ...arrays) {
 return arr.concat(...arrays)
}

console.log(concatAll([1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12])) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

const numbers = [1, 2, 3, 4, 5]
numbers.forEach(console.log)
// 1 0 [ 1, 2, 3 ]
// 2 1 [ 1, 2, 3 ]
// 3 2 [ 1, 2, 3 ]

const sports = ['football', 'archery', 'judo']

const judoIndex = sports.indexOf('judo')
console.log(judoIndex) // 2

const users = [
 { id: 'af35', name: 'john' },
 { id: '6gbe', name: 'mary' },
 { id: '932j', name: 'gary' },
]

const user = users.find(user => user.id === '6gbe')
console.log(user) // { id: '6gbe', name: 'mary' }

const users = [
 { id: 'af35', name: 'john' },
 { id: '6gbe', name: 'mary' },
 { id: '932j', name: 'gary' },
]

const user = users.findIndex(user => user.id === '6gbe')
console.log(user) // 1

const numbers = [1, 2, 3, 4, 5]
const copy = numbers.slice()

// 傳統(tǒng)方式
// 用循環(huán)來(lái)決定消息的數(shù)量
const nbMessages = messages.length < 5 ? messages.length : 5
let messagesToShow = []
for (let i = 0; i < nbMessages; i++) {
 messagesToShow.push(posts[i])
}

// 假設(shè) arr 少于 5 個(gè)元素
// slice 將會(huì)返回原數(shù)組的整個(gè)淺拷貝
const messagesToShow = messages.slice(0, 5)

const users = [
 {
 id: 'fe34',
 permissions: ['read', 'write'],
 },
 {
 id: 'a198',
 permissions: [],
 },
 {
 id: '18aa',
 permissions: ['delete', 'read', 'write'],
 },
]

const hasDeletePermission = users.some(user =>
 user.permissions.includes('delete')
)
console.log(hasDeletePermission) // true

const users = [
 {
 id: 'fe34',
 permissions: ['read', 'write'],
 },
 {
 id: 'a198',
 permissions: [],
 },
 {
 id: '18aa',
 permissions: ['delete', 'read', 'write'],
 },
]

const hasAllReadPermission = users.every(user =>
 user.permissions.includes('read')
)
console.log(hasAllReadPermission) // false

const numbers = [1, 2, [3, 4, [5, [6, 7]], [[[[8]]]]]]

const numbersflattenOnce = numbers.flat()
console.log(numbersflattenOnce) // [1, 2, 3, 4, Array[2], Array[1]]

const numbersflattenTwice = numbers.flat(2)
console.log(numbersflattenTwice) // [1, 2, 3, 4, 5, Array[2], Array[1]]

const numbersFlattenInfinity = numbers.flat(Infinity)
console.log(numbersFlattenInfinity) // [1, 2, 3, 4, 5, 6, 7, 8]

const sentences = [
 'This is a sentence',
 'This is another sentence',
 "I can't find any original phrases",
]

const allWords = sentences.flatMap(sentence => sentence.split(' '))
console.log(allWords) // ["This", "is", "a", "sentence", "This", "is", "another", "sentence", "I", "can't", "find", "any", "original", "phrases"]

const wordsCount = allWords.reduce((count, word) => {
 count[word] = count[word] ? count[word] + 1 : 1
 return count
}, {})
console.log(wordsCount) // { This: 2, is: 2, a: 1, sentence: 2, another: 1, I: 1, "can't": 1, find: 1, any: 1, original: 1, phrases: 1, }

const participants = ['john', 'mary', 'gary']
const participantsFormatted = participants.join(', ')
console.log(participantsFormatted) // john, mary, gary

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

const nodes = document.querySelectorAll('.todo-item') // 這是一個(gè) nodeList 實(shí)例
const todoItems = Array.from(nodes) // 現(xiàn)在你能使用 map filter 等等，就像在數(shù)組中那樣!

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()

const names = ['john', 'mary', 'gary', 'anna']
names.sort()
console.log(names) // ['anna', 'gary', 'john', 'mary']

const numbers = [23, 12, 17, 187, 3, 90]
numbers.sort()
console.log(numbers) // [12, 17, 187, 23, 3, 90] 🤔。

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 } ]

// 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" }]

const numbers = [1, 2, 3, 4, 5]

numbers.reverse()
console.log(numbers) // [5, 4, 3, 2, 1]

const todoItems = [1, 2, 3, 4, 5]

const itemsIncremented = []
for (let i = 0; i < items.length; i++) {
 itemsIncremented.push(items[i] + 1)
}

console.log(itemsIncremented) // [2, 3, 4, 5, 6]

const todos = ['Write an article', 'Proofreading']
todos.push('Publish the article')
console.log(todos) // ['Write an article', 'Proofreading', 'Publish the article']

const itemsIncremented = todoItems.map(x => x + 1)

const todos = ['Write an article', 'Proofreading']
console.log([...todos, 'Publish the article']) // ['Write an article', 'Proofreading', 'Publish the article']

const months = ['January', 'February', 'March', 'April', ' May']

// With splice
months.splice(2, 1) // remove one element at index 2
console.log(months) // ['January', 'February', 'April', 'May']

// Without splice
const monthsFiltered = months.filter((month, i) => i !== 3)
console.log(monthsFiltered) // ['January', 'February', 'April', 'May']

const months = ['January', 'February', 'March', 'April', ' May']

// With splice
months.splice(1, 3) // remove thirds element starting at index 1
console.log(months) // ['January', 'May']

// Without splice
const monthsFiltered = [...months.slice(0, 1), ...months.slice(4)]
console.log(monthsFiltered) // ['January', 'May']

const numbers = [1, 2, 3, 4, 5]

// With shift
const firstNumber = numbers.shift()
console.log(firstNumber) // 1
console.log(numbers) // [2, 3, 4, 5]

// Without shift
const [firstNumber, ...numbersWithoutOne] = numbers
console.log(firstNumber) // 1
console.log(numbersWithoutOne) // [2, 3, 4, 5]

const numbers = [3, 4, 5]

// With unshift
numbers.unshift(1, 2)
console.log(numbers) // [1, 2, 3, 4, 5]

// Without unshift
const newNumbers = [1, 2, ...numbers]
console.log(newNumbers) // [1, 2, 3, 4, 5]