ES5中新增的方法

前言

ES5也被稱爲ECMAScript 5或ECMAScript 2009，在ES5中新增了許多方法，包括數組方法、字符串方法、對象方法等。今天我們主要來學習以下內容：

• 數組迭代方法：forEach()、map()、filter()、some()、every()
• 字符串方法：trim()
• 對象方法：Object.keys()、Object.defineProperty()

數組迭代方法

1.forEach()

forEach是用來遍歷數組的，有三個參數，參數一是數組元素，參數二是數組元素的索引，參數三是當前遍歷的數組，主要用法如下：

var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function(value, index, array) {
    console.log('每個數組元素' + value);
    console.log('每個數組元素的索引號' + index);
    console.log('數組本身' + array);
    sum += value;
})
console.log(sum);

打印結果如下：

2.map()

map用來創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數後返回的結果。map返回的是一個新的數組，有三個參數，參數一是數組元素，參數二是數組元素的索引，參數三是當前遍歷的數組。用法如下：

var arr = [2, 4, 6, 8];
var map1 = arr.map(function(value, index, arr) {
	console.log('每個數組元素' + value);
    console.log('每個數組元素的索引號' + index);
    console.log('數組本身' + arr);
	return value * 2
});
console.log(arr)
console.log(map1)

打印結果如下：

3.filter()

filter用於篩選創建一個新的數組，新數組中的元素是指定數組中符合條件的所有元素，主要用於篩選數組。filter直接返回一個新的數組，有三個參數，參數一是數組元素，參數二是數組元素的索引，參數三是當前遍歷的數組。用法如下：

var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index, arr) {
	console.log('每個數組元素' + value);
    console.log('每個數組元素的索引號' + index);
    console.log('數組本身' + arr);
    return value % 2 === 0;
});
console.log(arr);
console.log(newArr);

打印結果如下：

4.some()

some查找數組中是否有滿足條件的元素，返回的是一個布爾值，如果查找到第一個滿足條件的元素就終止循環。有三個參數，參數一是數組元素，參數二是數組元素的索引，參數三是當前遍歷的數組。用法如下：

var arr1 = ['red', 'pink', 'blue'];
var flag1 = arr1.some(function(value, index, arr) {
	console.log('每個數組元素' + value);
    console.log('每個數組元素的索引號' + index);
    console.log('數組本身' + arr);
    return value == 'pink';
});
console.log(flag1);

打印結果如下：

注意：如果查詢數組中唯一的元素，some，filter，forEach都可以實現，但是使用some更加合適，因爲some中遇到return true會終止遍歷，而forEach和filter裏面不會終止遍歷。

5.every()

every判斷一個數組內的所有元素是否都能滿足某個指定函數。它返回一個布爾值，當數組中每個元素都符合條件才能返回true，若有一個不符合，則返回false。有三個參數，參數一是數組元素，參數二是數組元素的索引，參數三是當前遍歷的數組。用法如下：

var arr1 = [10, 20, 30, 40, 50];
var flag1 = arr1.every(function(value, index, arr) {
	console.log('每個數組元素' + value);
    console.log('每個數組元素的索引號' + index);
    console.log('數組本身' + arr);
    return value % 10 === 0;
});
console.log(flag1);

打印結果如下：

字符串方法

1.trim()

trim方法可以去除字符串兩側的空格，返回的是一個新的字符串。

var str = '   an  dy   ';
var str1 = str.trim();
console.log(str);
console.log(str1);

打印結果如下：

對象方法

1.Object.keys()

該方法用於獲取對象自身所有的屬性，返回一個由屬性名組成的數組。

var obj = {
  id: 1,
  pname: "努比亞",
  price: 2999,
  num: 2000,
};
var arr = Object.keys(obj);
console.log(arr);

打印結果如下：

2.Object.defineProperty()

該方法用來定義新屬性或修改原有的屬性。

var obj = {
  id: 1,
  pname: "小米",
  price: 1999,
};
Object.defineProperty(obj, "num", {
  value: 1000,
  // enumerable 如果值爲false 則不允許遍歷, 默認的值是 false
  enumerable: true,
});
console.log('添加了num值');
console.log(obj);
Object.defineProperty(obj, "price", {
  value: 9.9,
});
console.log('修改了價格');
console.log(obj);
Object.defineProperty(obj, "id", {
  // 如果值爲false 不允許修改這個屬性值 默認值也是false
  writable: false,
});
obj.id = 2;
console.log('嘗試修改不能修改的id屬性');
console.log(obj);
Object.defineProperty(obj, "address", {
  value: "北京",
  // enumerable 如果值爲false 則不允許遍歷, 默認的值是 false
  enumerable: false,
  // configurable 如果爲false 則不允許刪除這個屬性，不允許在修改第三個參數裏面的特性 默認爲false
  configurable: false,
});
console.log('遍歷一下屬性值');
console.log(Object.keys(obj));
delete obj.address;
console.log('刪除一下不能刪除的屬性');
console.log(obj);

打印結果如下：

總結

以上簡述了ES5中的某些方法，使用這些方法可以使我們的開發更加便利。