web前端：經常使用的js語法

經常使用的js語法

一、提取數組對象中的某個屬性值，並返回一個新數組

//實例一：單純的提取數組對象中的某個屬性值，返回一個數組var detailList = [
        {          id:1,          name:'張三'
        },
        {          id:2,          name:'李四'
        },
        {          id:3,          name:'王五'
        },
      ]var result = detailList.map(function(item) {               return item.name;
  });console.log(result, '新數組');//['張三'，'李四','王五']//實例二：提取數組對象中的某個屬性值，並返回一個帶有屬性名的新數組var detailList = [
        {          id:1,          name:'張三'
        },
        {          id:2,          name:'李四'
        },
        {          id:3,          name:'王五'
        },
      ]var result = detailList.map(item =>({    bossName:item.name,    bossId:item.id
}))console.log(result, '新數組');//[{bossName:'張三',bossId:1},{bossName:'李四',bossId:2},{bossName:'王五',bossId:3}]1234567891011121314151617181920212223242526272829303132333435363738394041

對了，在這裏說一下，我目前是在職web前端開發，若是你如今正在學習前端，瞭解前端，渴望成爲一名合格的web前端開發工程師，在入門學習前端的過程中有碰見任何關於學習方法，學習路線，學習效率等方面的問題，均可以隨時關注並私信我：前端，我都會根據你們的問題給出針對性的建議，缺少基礎入門的視頻教程也能夠直接來找我，我這邊有最新的web前端基礎精講視頻教程， 還有我作web前端技術這段時間整理的一些學習手冊，面試題，開發工具，PDF文檔書籍教程，均可以直接分享給你們。

二、判斷數組對象中是否存在某個屬性值

var list = [
    {
          id:1,
          name:'張三'
        },
        {
          id:2,
          name:'李四'
        },
        {
          id:3,
          name:'王五'
        },
]var result = list.some(function (item) {                if(item.name==='李四'){                    return true
                }
              })

  console.log(result) //true/false123456789101112131415161718192021

三、根據數組對象中的某個屬性值，取它整個對象

var list = [
    {          id:1,          name:'張三'
        },
        {          id:2,          name:'李四'
        },
        {          id:3,          name:'王五'
        },
]  var result = list.find(item=>item.name==='李四')  var id = result && result.id  console.log(id) //2123456789101112131415161718

四、替換數組對象中的某個屬性值

data:[
	{name: 'xxx', status: 0},
	{name: 'xxx', status: 1},
	{name: 'xxx', status: 0},
	{name: 'xxx', status: 1},
]

data.forEach(item => {	if (item.status === 0) {
		// 'status'爲屬性名，'非活動'爲修改後的內容 
		item.status = '非活動'
	} else if (item.status === 1) {
		item.status = '活動'
	}
})12345678910111213141516

五、向數組對象中添加屬性

//實例：適合作購物車勾選商品的勾選狀態//接口返回的商品列表數據listlet arr = this.listlet curData = []
arr.forEach((item, index) => {
    curData.push(Object.assign({}, item, { 'selected': true }))
  })this.list = []this.list = curData// console.log(this.list, '新增屬性')12345678910

---

下面說說理論知識：

find()：返回經過測試的數組的第一個元素的值

在第一次調用 callback 函數時會肯定元素的索引範圍，所以在 find 方法開始執行以後添加到數組的新元素將不會被 callback 函數訪問到。若是數組中一個還沒有被callback函數訪問到的元素的值被callback函數所改變，那麼當callback函數訪問到它時，它的值是將是根據它在數組中的索引所訪問到的當前值。被刪除的元素仍舊會被訪問到。

語法：

array.find(function(value, index, arr),thisValue)1

value:必須，表明當前元素，其餘四個參數都是可選，index代表當前索引值，arr表明當前的數組，thisValue表明傳遞給函數的值，通常用this值，若是這個參數爲空，undefined會傳遞給this值

返回值：返回符合測試條件的第一個數組元素的值，若是沒有符合條件的則返回undefined。

 var arr = [1,2,3,4,5,6,7]; var ar = arr.find(function(elem){     return elem>5;
 }); console.log(ar);//6console.log(arr);//[1,2,3,4,5,6,7]123456

find()方法爲數組中的每一個元素都調用一次函數執行，當數組中的元素在測試條件時返回true，find()返回符合條件的元素，以後的值不會再執行函數。若是沒有符合條件的元素則返回undefined。

filter()：建立一個新數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素

filter遍歷的元素範圍在第一次調用 callback以前就已經肯定了。在調用filter以後被添加到數組中的元素不會被filter遍歷到。若是已經存在的元素被改變了，則他們傳入callback 的值是 filter 遍歷到它們那一刻的值。被刪除或歷來未被賦值的元素不會被遍歷到。

語法：

array.filter(function(value, index, arr),thisValue)1

value:必須，表明當前元素，其餘四個參數都是可選，index表明當前索引值，arr表明當前的數組，thisValue表明傳遞給函數的值，通常用this值，若是這個參數爲空，undefined會傳遞給this值

返回值：返回數組，包含了符合條件的全部元素，若是沒有符合條件的則返回空數組

 var arr = [1,2,3,4,5,6,7]; var ar = arr.filter(function(elem){     return elem>5;
 }); console.log(ar);//[6,7]console.log(arr);//[1,2,3,4,5,6,7]123456

map()：返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值，map()方法按照原始數組元素順序依次處理元素

map方法會給原數組中的每一個元素都按順序調用一次callback函數，callback每次執行後的返回值（包括undefined）組合起來造成一個新數組。callback函數只會在有值的索引上被調用，那些歷來沒被賦過值或者使用delete刪除的索引則不會被調用。

使用map方法處理數組時，數組元素的範圍是在callback方法第一次調用以前就已經肯定了。在map方法執行的過程當中，原數組中新增長的元素將不會被callback訪問到，若已經存在的元素被改變或刪除了，則他們傳遞到callback的值是map方法遍歷到他們的那一刻的值，而被刪除的元素將不會被訪問到。

語法：

array.map(function(value, index, arr),thisValue)1

value:必須，表明當前元素，其餘四個參數都是可選，index表明當前索引值，arr表明當前的數組，thisValue表明傳遞給函數的值，通常用this值，若是這個參數爲空，undefined會傳遞給this值

返回值：返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值

 var arr = [1,2,3,4,5,6,7]; var ar = arr.map(function(elem){    return elem*4;
 }); console.log(ar);//[4, 8, 12, 16, 20, 24, 28]console.log(arr);//[1,2,3,4,5,6,7]123456

forEach()：用於調用數組每一個元素，並將元素傳遞給回調函數（注意沒有辦法跳出或終止forEach語句，除非拋出異常）

forEach 遍歷的範圍在第一次調用 callback前就會肯定。調用forEach 後添加到數組中的項不會被callback訪問到。若是已經存在的值被改變，則傳遞給 callback 的值是 forEach遍歷到他們那一刻的值。已刪除的項不會被遍歷到

語法：

array.forEach(function(value, index, arr),thisValue)
1

value:必須，表明當前元素，其餘四個參數都是可選，index表明當前索引值，arr表明當前的數組，thisValue表明傳遞給函數的值，通常用this值，若是這個參數爲空，undefined會傳遞給this值

返回值：undefined

 var arr = [1,2,3,4,5,6,7]; var sum = 0; var ar = arr.forEach(function(elem){
    sum+=elem*4;
 }); console.log(ar);//undefined
 console.log(arr);//[1,2,3,4,5,6,7]
 console.log(sum);//11212345678

forEach()返回值爲undefined，裏面即使有return語句，返回值依然是undefined

嗯、如今總結一下

從上面的內容咱們能夠看出，上面的四個語法以及參數的意義是同樣的，並且都不會對空數組進行檢測，也不會改變原始數組

如今說說各自的意義：

find()方法主要用來返回數組中符合條件的第一個元素（沒有的話，返回undefined）

filter()方法主要用來篩選數組中符合條件的全部元素，而且放在一個新數組中，若是沒有，返回一個空數組

map()方法主要用來對數組中的元素調用函數進行處理，而且把處理結果放在一個新數組中返回（若是沒有返回值，新數組中的每個元素都爲undefined）

forEach()方法也是用於對數組中的每個元素執行一次回調函數，但它沒有返回值（或者說它的返回值爲undefined，即使咱們在回調函數中寫了return語句，返回值依然爲undefined）

【免責聲明：本文圖片及文字信息均由千鋒重慶web前端培訓小編轉載自網絡，旨在分享提供閱讀，版權歸原做者全部，若有侵權請聯繫咱們進行刪除。】