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

標籤：JavaScript

上一篇：webpack配置中環境變數-process.env. NODE_ENV

下一篇：30s原始碼刨析系列之函式篇