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新增的一些方法，有陣列方法、字串方法、物件方法等等，主要分享了哥方法的用法，特點等等。如果想了解更多，請掃描二維碼：

相關推薦