ES5中新增的方法，让你的开发效率6的飞起

本是古典何须时尚 2023-02-23 05:10 23阅读 0赞

# 前言 #

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);

打印结果如下：  
![在这里插入图片描述][20200705154353774.png]

## 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)

打印结果如下：  
![在这里插入图片描述][20200705155146172.png]

## 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);

打印结果如下：  
![在这里插入图片描述][20200705155657478.png]

## 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);

打印结果如下：  
![在这里插入图片描述][20200705160144346.png]  
注意：如果查询数组中唯一的元素，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);

打印结果如下：  
![在这里插入图片描述][2020070516055725.png]

# 字符串方法 #

## 1.trim() ##

trim方法可以去除字符串两侧的空格，返回的是一个新的字符串。

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

打印结果如下：  
![在这里插入图片描述][20200705161154333.png]

# 对象方法 #

## 1.Object.keys() ##

该方法用于获取对象自身所有的属性，返回一个由属性名组成的数组。

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

打印结果如下：  
![在这里插入图片描述][20200705161438528.png]

## 2.Object.defineProperty() ##

该方法用来定义新属性或修改原有的属性。

打印结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

# 总结 #

以上简述了ES5中的某些方法，使用这些方法可以使我们的开发更加便利。

[20200705154353774.png]: https://img-blog.csdnimg.cn/20200705154353774.png
[20200705155146172.png]: https://img-blog.csdnimg.cn/20200705155146172.png
[20200705155657478.png]: https://img-blog.csdnimg.cn/20200705155657478.png
[20200705160144346.png]: https://img-blog.csdnimg.cn/20200705160144346.png
[2020070516055725.png]: https://img-blog.csdnimg.cn/2020070516055725.png
[20200705161154333.png]: https://img-blog.csdnimg.cn/20200705161154333.png
[20200705161438528.png]: https://img-blog.csdnimg.cn/20200705161438528.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200705162746272.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx,size_16,color_FFFFFF,t_70