帶你學習ES5中新增的方法

1. ES5中新增了一些方法，能夠很方便的操做數組或者字符串，這些方法主要包括如下幾個方面

• 數組方法
• 字符串方法

• 對象方法
  

  2. 數組方法

  迭代遍歷方法：forEach()、map()、filter()、some()、every()
  判斷方法：isArray()

2.1 forEach跟jQuery的each用法相似。語法是：

array.forEach(function(currentValue, index, arr))

• currentValue: 數組當前項的值
• index: 數組當前項的索引
• arr: 數組對象自己

var arr = [1,2,3]
arr.forEach(function(value, index, array){
    console.log('每一個數組元素'+ value)
  console.log('每一個數組元素的索引值'+ index)
  console.log('數組自己'+ array)
})

運行效果以下圖

2.2 map()

array.map(function(currentValue, index, arr))

map() 方法建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。
注意：map() 方法是直接返回一個新的數組

• currentValue: 數組當前項的值
• index: 數組當前項的索引
• arr: 數組對象自己

var array1 = [1, 4, 9, 16];
var map1 = array1.map(function(value, index, arr) {
return value * 2
});
console.log(map1) //[2,8,18,32]

2.3 filter()

array.filter(function(currentValue, index, arr))

filter()方法用於篩選建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素，主要用於篩選數組。
filter()方法是直接返回一個新的數組

• currentValue: 數組當前項的值
• index: 數組當前項的索引
• arr: 數組對象自己

var arr = [12,66,88]
// 選出大於20的
var newarr = arr.filter(function(value, index){
  return value >=20
})
能夠簡寫成var newarr = arr.filter( //[66, 88])
console.log(newArr) //[66, 88]

預覽效果以下圖

2.4 some()

array.some(function(currentValue, index, arr))

some()方法用於檢測數組中的元素是否知足指定條件，通俗點查找數組中是否有知足條件的元素
注意： some()方法返回值是布爾值，若是查找到這個元素，就返回true,若是查找不到則返回false
若是找到第一個知足條件的元素，則終止循環，不在繼續查找

• currentValue: 數組當前項的值
• index: 數組當前項的索引
• arr: 數組對象自己

var arr=[10,30,4]
var b = arr.some(function(value){
    return value > 20
})
console.log(b) //true

2.5 every()

array.every(function(currentValue, index, arr))

every() 方法測試一個數組內的全部元素是否都能經過某個指定函數的測試。它返回一個布爾值。
注意：every() 方法必須每一個元素都符合條件才能返回true，如有一個不符合，則返回false。
若收到一個空數組，此方法在一切狀況下都會返回 true。

• currentValue: 數組當前項的值
• index: 數組當前項的索引

• arr: 數組對象自己
  

  2.6 isArray()

Array.isArray(obj)

Array.isArray() 用於肯定傳遞的值是不是一個 Array

• obj是須要檢測的值。若是是數組則返回true,不然返回false

區別：

1. filter 是查找知足條件的元素，返回的是一個數組，並且是把全部知足條件的元素返回回來
2. some 是查找知足條件的元素是否存在，返回的是一個布爾值，若是查找第一個知足條件的元素，就終止循環。若是數組中查詢惟一個元素，用some方法更爲合適，由於它找到這個元素，就不在進行循環，效率更高
3. every是查找全部的元素是否符合條件，返回的是一個布爾值

4. map是建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果
   

   3. 字符串方法

   trim() 方法會從一個字符串的兩端刪除空白字符

str.trim()

trim() 方法並不影響原字符串自己，它返回的是一個新字符串。

4. 對象方法

Object.defineProperty()定義對象中新增屬性或修改原有的屬性

Object.defineProperty(obj, prop, descriptor)

• obj: 必需。目標對象
• prop: 必需。 需定義或修改的屬性名字
• descriptor: 必需。目標屬性所擁有的特性

Object.defineProperty() 第三個參數descriptor說明： 以對象形式{}書寫

• value：設置屬性的值，默認爲undefined
• writable:值是否能夠重寫。true | false 默認爲false
• enumerable: 目標屬性是否能夠被枚舉。true | false 默認爲false
• configurable: 目標屬性是否能夠被刪除或是否能夠再次修改特性true | false 默認爲false

var obj = {
id: 1,
pname: '小米',
price: 1999
}
//之前的對象添加和修改屬性的方式
obj.num = 1000
obj.pirce = 99
console.log(obj)

//Object.deefineProperty()定義新屬性或者修改原有的屬性
Object.defineProperty(obj, 'num',{
    value: 1000,
})
Object.defineProperty(obj, 'pricee',{
    value: 9.9,
})
Object.defineProperty(obj, 'id',{
  //若是值爲false,則不容許修改
    writable: false,
})
Object.defineProperty(obj, 'address',{
    value: '中國鄭州市',
  //若是值爲false,則不容許遍歷，枚舉
  enumerable: false
})
console.log(obj)
console.log(Object.keys(obj))

總結

本篇文章主要分享了ES5新增的一些方法，有數組方法、字符串方法、對象方法等等，主要分享了哥方法的用法，特色等等。若是想了解更多，請掃描二維碼：