變數
型別
false
Array
有順序
從0開始算
空陣列為 true
常用方法
Array.indexOf & Array.includes ⇒ incluides() 使用在陣列
const arr = [a, b, c]
console.log(arr.indexOf('a')) // 0
console.log(arr.includes('b')) // true
Array.find & Array.filter
const arr = [
{id: 1, title: '1'},
{id: 2, title: '2'}
]
// filter 會遍歷陣列
function getItem (title) {
retrun arr.filter(item => {
retrun item.title === title
})
}
// find 找到後跳出陣列
function getItemId (id) {
retrun arr.find(item => {
retrun item.id === id
})
}
console.log(getItem('1'))
console.log(getItemId(1))
Array.some & Array.find ⇒ some() 使用在物件
const arr = [
{id: 1, title: '1'},
{id: 2, title: '2'}
]
console.log(arr.find(item => {
retrun item.title === '1'
}))
// {id: 1, title: '1'}
console.log(arr.some(item => {
retrun item.title === '1'
}))
// true
Object
Function
undefined & null
Math 物件
事件冒泡 Event bubbling
ES6 知識
var、let、const
Module、impor、export
給定變數
// a.js
export const aString = 'This is a string'
export function aFunction() {
console.log('This is a function')
}
export const aObject = {
a: 1
}
// b.js
import { aString, aFunction, aObject } from './a.js'
console.log(aString)
console.log(aObject)
aFunction()
不給變數
// c.js
export default function() {
console.log('This is a function')
}
// d.js
import getFunction from './c.js'
getFunction()
箭頭 function 與 this
Template literals
解構賦值
const user = {
id: 42,
displayName: 'BenC',
fullName: {
firstName: 'Ben',
lastName: 'Chou'
}
}
const { id, displayName, fullName } = user
console.log(id)
console.log(displayName)
console.log(fullName)
const number = [1, 2, 3, 4, 5]
const [x, y] = number
console.log(x)
console.log(y)
展開運算子
通常用在陣列或是函式的參數
const frameworks = ['vue', 'angular', 'react']
const arr = ['awesome', ...frameworks]
console.log(arr)
其餘運算子
const [a, b, ...others] = arr
console.log(a)
console.log(b)
console.log(others)
物件
const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }
console.log(x)
console.log(y)
console.log(z)
const obj = { x, y, ...z }
console.log(obj)
async & awiat
function asyncFunc1() {
retrun new Promise((resolve, reject) => {
})
}
function asyncFunc2() {
retrun new Promise((resolve, reject) => {
})
}
const asyncCall = async () => {
const result1 = await asyncFunc1()
const result2 = await asyncFunc2()
}
優化
filter ()方法會建立一個新陣列,原陣列的每個元素傳入回調函式,回調函式中會有 retrun 返回值,若返回值為 true,這個元素儲存到新陣列中;若返回值為 false,則該元素不儲存的新鎮列中;原陣列不發生改變
Array.filter((currentValue, index, arr) ⇒ {})
getNumbers () {
const numbers = [10, 20, 100, 30, 320, 55, 80, 210]
const newNumber1 = this.numbers.filter(number => {
retrun number < 100
})
console.log(newNumber1)
}
// [10, 20, 30, 55, 80]
利用 filter,可以巧妙去除 Array 的重複元素,filter ()接收的回調函式,其實可以有多個引數,回調函式可以接收另外兩個引數,表示元素的位置和陣列本身
const numbers = [10, 20, 100, 30, 320, 55, 80, 210]
const newNumber2 = this.numbers.filter((element, index, arr) => {
retrun arr.indexOf(element) === index
})
// [10, 20, 100, 30, 320, 55, 80, 210]
map ()方法返回一個新的陣列,新陣列中的每一個元素為原始陣列對應每一個元素呼叫函式處理後的值;不會對空陣列進行編輯,不改變原來陣列
Array.map((item, index, arr) ⇒ {})
const numbers = [10, 20, 100, 30, 320, 55, 80, 210]
const newNumber3 = this.numbers.map(number => {
retrun number * 2
})
console.log(newNumber3)
// [20, 40, 200, 60, 640, 110, 160, 420]
reduce ()方法接收一個函式作為累加器,陣列中的每一個元素依次執行回調函式,陣列中未被刪除或未被賦值的元素不處理
Array.reduce(callback, [initialValue])
const numbers = [10, 20, 100, 30, 320, 55, 80, 210]
const newNumber4 = this.numbers.reduce((total, number) => {
retrun number + total
}, 0)
console.log(newNumber4)
// 76