對前端開發中常使用的函數方法的一個小總結

時間 2019-11-07

標籤前端開發中常使用函數方法一個總結简体版

原文原文鏈接

第一次在掘金髮文章，好緊張啊~~~~(>_<)~~~~
複製代碼

箭頭函數 MDN地址

先說一下箭頭函數，由於下面默認都使用箭頭函數，基本上不會出現function字樣。ios

// 僅作舉例使用哈

// 原始函數
function json2string(json){
  return JSON.stringify(json)
}

// 一級簡寫: 建立一個變量，並使這個變量等於一個箭頭函數
const json2string = (json) => {
  return JSON.stringify(json)
} 

// 二級簡寫:當函數只有一個參數的時候，能夠省略參數括號
const json2string = json => {
  return JSON.stringify(json)
}

// 三級簡寫: 當函數表達式只有一行的時候，能夠省略return和{}
const json2string = json => JSON.stringify(json)


// 感謝@blacker2018大佬提醒,本例的四級簡寫

const json2string = JSON.stringify


// 例外：當函數沒有參數的時候不能省略()
const helloWorld = () => 'hello world!'
複製代碼

上面是箭頭函數的基本用法，另外說兩句：面試

1, 箭頭函數沒有本身的thisjson

2, 箭頭函數的this指向從自身像外層找所能找到的第一個使用function聲明的函數(見例1)axios

3, 若是一直找到最頂層都沒有function聲明的函數，this指向window數組

3, 9021年了，多使用箭頭函數吧，畢竟好處那麼多，代碼簡潔那麼多bash

例1：函數

export default {
  name: 'test',
  data(){ // 這裏不能用箭頭函數，會改變this指向，請注意
    return {
      count: 0
    }
  },
  mounted(){ // 同理，不能箭頭函數
    this.$axios({...}).then(res => this.count = res.count)
  }
}
複製代碼

囉嗦一句，既然用了箭頭函數，就不要存 this 否則代碼會讓後來人吐槽的ui

好了，BB了半天，正文開始了。this

操做數組的一些經常使用方法

filter() MDN地址

filter的中文解釋是過濾，功能也顯而易見，在一個數組中過濾出知足要求的數據，並返回一個由全部知足條件的數據組成的數組spa

let arr = array.filter(callback[, thisObject]);

callback：要對每一個數組元素執行的回調函數。函數有三個參數：currentElement, currentIndex, currentArray
- currentElement 當前元素
- currentIndex 當前元素的下標如用不到，能夠省略
- currentArray 當前元素所在的數組(也就是當前被遍歷的數組) 用不到能夠省略
thisObject ：在執行回調函數時定義的this對象。

e.g.1 找出一個數組中全部大於3的數字

let arr = [1,2,3,4,5,6,7,8,9]
let arr2 = arr.filter(ele => ele > 3)
複製代碼

e.g.2 過濾數據數據中的全部disabled爲true的數據

const data = [
  {
    title: 'test1',
    disabled: false,
  },
  /*...省略100個*/
  {
    title: 'test100',
    disabled: true,
  }
]
const disabledList = data.filter(ele => ele.disabled)
複製代碼

e.g.3 這個很重要，仍是上面的數據，需求要實現找出全部disabled爲true的數據的title

const disabledList = data.filter(ele => ele.disabled && ele.title) // 這樣能夠嗎? false. 由於filter 不會執行 第一個條件以後的全部條件
複製代碼

難道這個需求就不能實現了嗎？非也。接着往下看

map() MDN地址

這裏的map不是「地圖」的意思，而是指「映射」。map函數相似於上面的filter同樣，接收一個函數，對數組中的每一個元素執行相同的操做，接收一個並返回一個由全部知足條件的數據組成的數組

let newArray = array.map(callback[, thisObject]);

callback：要對每一個數組元素執行的回調函數。函數有三個參數：currentElement, currentIndex, currentArray callback函數若是不寫return 默認return undefined
- currentElement 當前元素
- currentIndex 當前元素的下標如用不到，能夠省略
- currentArray 當前元素所在的數組(也就是當前被遍歷的數組) 用不到能夠省略
thisObject ：在執行回調函數時定義的this對象。

e.g.1 上面filter不能實現的功能，如今配合map實現如下

const data = [
  {
    title: 'test1',
    disabled: false,
  },
  /*...省略100個*/
  {
    title: 'test100',
    disabled: true,
  }
]
// map 函數 當條件不知足時會return undefined 再filter過濾一下
const disabledList = data.map(ele => ele.disabled && ele.title).filter(Boolean) 
複製代碼

e.g.2

組合數據，這個例子主要是描述一種業務場景，能夠看到data中的product字段從我的理解的意義上講，price應該和title && author是一個級別的。如今咱們就實現咱們的想法

const data = [
  {
    title: 'egg',
    author: 'chicken',
    product: {
      price: 100,
      age: 2
    }
  },
  {
    title: 'dog',
    author: 'dog',
    product: {
      price: 1000,
      age: 0.5
    }
  }
]

const newArray = data.map(ele => {
  return {
    ...ele,
    ...ele.product || {} // 兼容沒有product狀況
  }
})

// 上面的函數獲得的結果就知足了咱們自身的需求 ...擴展運算符後面會講
{
    title: 'egg',
    author: 'chicken',
    price: 100,
    age: 2
    product: {
	  price: 100,
      age: 2
    }
  }
複製代碼

forEach() MDN地址

forEach函數相似於上面的map同樣，接收一個函數，對數組中的每一個元素執行相同的操做，和filter/map不一樣的是 forEach 沒有返回值 forEach()對於空數組是不會執行回調函數的

array.forEach(callback[, thisObject]);

callback：要對每一個數組元素執行的回調函數。函數有三個參數：currentElement, currentIndex, currentArray
- currentElement 當前元素
- currentIndex 當前元素的下標如用不到，能夠省略
- currentArray 當前元素所在的數組(也就是當前被遍歷的數組) 用不到能夠省略
thisObject ：在執行回調函數時定義的this對象。

const data = [
  {
    title: 'test1',
    disabled: false,
  },
  /*...省略100個*/
  {
    title: 'test100',
    disabled: true,
  }
]
// map 函數 當條件不知足時會return undefined 再filter過濾一下
const disabledList = data.map(ele => ele.disabled && ele.title).filter(Boolean) 


/***************************************************/
// 上面的例子使用了filter和map兩個遍歷 使用forEach一遍就能夠實現 更高效

let arr = []
data.forEach(ele =>{
  if(ele.disabled) arr.push(ele.title)
})
複製代碼

some() MDN地址

some中文意思是一些，在JS中表示數組中當有一個數據知足條件時返回true

some()是對數組中每一項運行給定函數，若是該函數對任一項返回true，則返回true。

some接收一個函數做爲參數，函數有三個參數：

current 當前元素
index 當前下標
array 被循環的數組

e.g.1

const data = [1,2,3,4,5,6,8]
console.log(data.some(ele => ele > 4)) // true
console.log(data.some(ele => ele < 4)) // true
console.log(data.some(ele => ele > 8)) // false
console.log(data.some(ele => ele >= 2)) // true
console.log(data.some(ele => ele < 1)) // false
複製代碼

e.g.2

const data = [
  { id: 2, count: 200 },
  { id: 4, count: 300 },
  { id: 6, count: 100 },
  { id: 8, count: 700 }, 
]
console.log(data.some(ele => ele.count > 700)) // false
console.log(data.some(ele => ele.count > 600)) // true
複製代碼

every() MDN地址

every()是對數組中每一項運行給定函數，若是該函數對每一項返回true, 則返回true。

every接收一個函數做爲參數，函數有三個參數：

current 當前元素
index 當前下標
array 被循環的數組

const data = [
  { id: 2, count: 200 },
  { id: 4, count: 300 },
  { id: 6, count: 100 },
  { id: 8, count: 700 }, 
]
console.log(data.every(ele => ele.count > 700)) // false
console.log(data.every(ele => ele.count < 900)) // true
複製代碼

reduce() MDN地址

arr.reduce(callback,[initialValue])
複製代碼

callback （執行數組中每一個值的函數，包含四個參數）
- previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
- currentValue （數組中當前被處理的元素）
- index （當前元素在數組中的索引）
- array （調用 reduce 的數組）
initialValue （做爲第一次調用 callback 的第一個參數。）

// 經典面試題： 使用reduce同時實現map和filter
// 例子: 找出全部double後大於50的數
const doubledOver50 = num => num.reduce((finalList, ele) => {
  const number = ele * 2
  if (number > 50) {
    finalList.push(ele)
  }
  return finalList
}, [])
doubledOver50(numbers) // [30, 40]
複製代碼

** reduce還有不少妙用，能夠掘金搜一下哈

flat() MDN地址

這個是ES10的方法，實現數組扁平化，flat函數接收一個值指定要提取嵌套數組的結構深度，默認值爲 1，返回一個包含將數組與子數組中全部元素的新數組。

因爲是ES10的方法，使用的話須要考慮一下兼容性問題，貼上MDN地址：Array.prototype.flat()

let arr1 = [1, 2, [3, 4]];
arr1.flat();  // [1, 2, 3, 4]

let arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]

let arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]

//使用 Infinity 做爲深度，展開任意深度的嵌套數組
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]
複製代碼

扁平化與空項

flat() 方法會移除數組中的空項:

let arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]
複製代碼

indexOf() MDN地址

indexOf()接收一個參數，並查找該元素在數組中的下標，遍歷方向是從前向後遍歷

let arr = [1,2,3,4,5,6,7]

const index = arr.indexOf(2) // 1
複製代碼

lastIndexOf() MDN地址

lastIndexOf()接收一個參數，並查找該元素在數組中的下標, 與indexOf不一樣的是遍歷方向是從後向前遍歷

let arr = [1,2,3,4,5,2,7]
const index = arr.lastIndexOf(2) // 5
複製代碼

find() MDN地址

find()找到數組中第一個符合條件的數據

find()接收一個函數做爲參數, 函數的可選參數有

currentValue
index
arr

e.g.1:

let students = [
  { name: 'tom', age: 18 },
  { name: 'jeck', age: 20 },
  { name: 'bob', age: 19 }
]

let monitor = students.find(ele => ele.age > 18) // {name: 'jeck', age: 20} [返回第一個符合條件的數據並結束循環]
複製代碼

findIndex() MDN地址

查找第一個符合條件的元素的下標，和find的區別就是find返回元素, findIndex返回下標

array.findIndex(callback, thisValue)
複製代碼

callback：要對每一個數組元素執行的回調函數。函數有三個參數：currentElement, currentIndex, currentArray
- currentElement 當前元素
- currentIndex 當前元素的下標如用不到，能夠省略
- currentArray 當前元素所在的數組(也就是當前被遍歷的數組) 用不到能夠省略
thisValue ：在執行回調函數時定義的this對象。

let students = [
  { name: 'tom', age: 18 },
  { name: 'jeck', age: 20 },
  { name: 'bob', age: 19 }
]

let monitor = students.findIndex(ele => ele.age > 18) // 1 [返回第一個符合條件的數據的下標並結束循環]
複製代碼

操做對象的一些經常使用方法

Object.assign() MDN地址

Object.assign() 方法用於將全部可枚舉屬性的值從一個或多個源對象複製到目標對象。它將返回目標對象。

工做中用的最多的就是合併兩個對象了，可是大多數狀況下可使用…擴展運算符代替

對於Object.assign()是否能實現深拷貝，答案是否。具體緣由點我

下面的例子僅僅只是介紹一下對象合併

let obj1 = { a: 1 }
let obj2 = { b:2 }
let obj3 = Object.assign(obj1, obj2) // {a: 1, b: 2}
let obj4 = Object.assign({}, obj1, obj2, obj3) // {a: 1, b: 2}

// 注意：對象的合併是從右向左進行，在上面的例子中，若是obj2中有和obj3同樣的key 那麼obj2中key對應的val會被obj3中對應的val覆蓋掉
複製代碼

Object.keys() MDN地址

Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in 循環遍歷該對象時返回的順序一致。

// 數組
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// 類數組對象
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// 隨機鍵排序的類數組對象
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']


複製代碼

一般使用Object.keys()代替for...in來遍歷對象

let obj = {
  a: 1,
  b: 2
}
let keys = Object.keys(obj).map(ele => ele += 'aaaaa' /* 能夠分別對每一個key作一些改造 */)

複製代碼

Object.values() MDN地址

Object.values()方法返回一個給定對象自身的全部可枚舉屬性值的數組，值的順序與使用for...in循環的順序相同 ( 區別在於 for-in 循環枚舉原型鏈中的屬性 )。

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// 類數組對象
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

// 隨機鍵排序的類數組對象
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']
複製代碼

一般使用Object.values()代替for...in來遍歷對象取value

let obj = {
  a: 1,
  b: 2
}
let values = Object.values(obj).map(ele => ele++ /* 能夠分別對每一個value作一些改造 */)


複製代碼

擴展運算符(…) MDN地址

在開發工做中，不少場景下均可以使用…簡化代碼，下面列了一些使用場景

Math.max (求數組最大值)

// e.g.1 求數組最大值
let data = [1,2,3,4,5,6,7,8]
const big = Math.max(...data) // 8

// e.g.2 取庫存量最多商品的庫存
let data = [
  {
    name: '橘子',
    stock: 100
  },
  {
    name: '橙子',
    stock: 300
  },
  {
    name: '蘋果',
    stock: 700
  }
]

// 結合map使用(map返回一個新數組)
const big = Math.max(...data.map(ele => ele.stock)) // 700
// (其實這個例子用sort方法就能實現，只是舉個例子)

複製代碼

Math.min

// e.g.1 取最小值
// e.g.1 求數組最大值
let data = [1,2,3,4,5,6,7,8]
const big = Math.min(...data) // 1

複製代碼

Array.from

// e.g.1 數組去重
let data = [1,1,2,3,4,4,5,6]
const arr = [...new Set(data)] // [1,2,3,4,5,6]

複製代碼

字符串轉數組

// e.g.1 將一個字符串轉成數組
const arr = [...'hello'] // [‘h’, 'e', 'l', 'l', 'o']

複製代碼

合併數組

// e.g.1 合併兩個數組
let arr1 = [1,2,3,4,5,6]
let arr2 = [1,2,3,4,5,6]
let arr2 = [...arr1, ...arr2] // [1,2,3,4,5,6,1,2,3,4,5,6]

複製代碼

合併對象

let data1 = {
  name: '王二麻子',
  age: 12,
  class: '2(1)班'
}
let data2 = {
  name: '王二麻子',
  hobby: '王者榮耀'
}

let w2mz = {...data1, ...data2} 
// 輸出:
{
  name: '王二麻子',
  age: 12,
  class: '2(1)班',
	hobby: '王者榮耀'
}

// ** 注意: 當出現重複的key的時候，後面的key對應的val會覆蓋掉前面的key對應的val
複製代碼

充當函數省略參數 …other

…other 在函數體內使用other的時候, other是一個由省略參數組成數組 e.g.1

const sum = (a, b, ...num) => {
    let total = num.reduce((prev, current) => current + prev, 0) 
    return a + b + total
}
sum(1, 2, 3, 4, 5, 6, 7, 8, 9)
複製代碼

e.g.2

// 實現一個累加器 要求 能夠傳任意個參數 函數返回一個全部參數的累加和
const sum = (...num) => num.reduce((prev, current) => current + prev, 0) 
console.log(sum(1, 2, 3, 4)) // 10
複製代碼