帶你學習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新增的一些方法，有數組方法、字元串方法、對象方法等等，主要分享了哥方法的用法，特點等等。如果想瞭解更多，請掃描二維碼：