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中的某些方法，使用这些方法可以使我们的开发更加便利。

本文地址：https://blog.csdn.net/m0_37508531/article/details/107139669