JavaScript进阶学习笔记（三）--- ES5新增方法

JavaScript进阶学习笔记（三）— ES5新增方法

1、forEach()

​ forEach(function(value,index,array){ }) 方法是用来遍历数组元素的，相当于 for循环。参数是一个函数，该函数有三个参数，分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有，其他参数可以看情况选择。forEach() 不支持的 continue 与 break 语句，所以一旦开始，就一定会遍历到最后。该方法不会改变原数组。

// 案例代码

var arr = [1,2,3,4,5];
// 遍历数组
arr.forEach(function(value, index, array) {
       //参数一是:数组元素  参数二是:数组元素的索引  参数三是:当前的数组
       console.log(value); // 1 2 3 4 5
       console.log(index); // 0 1 2 3 4
       console.log(array); // [1,2,3,4,5]
 })

2、filter()

​ filter(function(value, index,array) { }) 方法用来过滤数组，筛选数组中所有符合条件的元素，并将这些数组复制到一个新的数组中，然后返回这个新数组。参数是一个函数，该函数有三个参数，分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有，其他参数可以看情况选择。该方法不会改变原数组。

// 案例代码

    var arr = [12, 66, 4, 88, 3, 7];
    var newArr = arr.filter(function(value, index,array) {
        //参数一是:数组元素  参数二是:数组元素的索引  参数三是:当前的数组
        if(value >= 20) { // 筛选条件
            return value;
        }
    });
    console.log(newArr);//[66,88] //返回值是一个新数组

3、some()

​ some(function(value, index,array) { }) 方法用于查找数组中是否存在满足条件的元素，返回值为一个布尔值。该方法会从第一个元素开始依次遍历数组中的元素，直到碰到一个满足条件的元素，返回 true ，然后停止遍历，剩下的元素不再进行访问。如果没有符合条件的元素则返回 false 。参数是一个函数，该函数有三个参数，分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有，其他参数可以看情况选择。该方法不会改变原数组。

// 案例代码

 var arr = [10, 30, 4, 2];
 var flag = arr.some(function(value,index,array) {
    //参数一是:数组元素  参数二是:数组元素的索引  参数三是:当前的数组
     return value < 3;
  });
console.log(flag);// true 返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

4、every()

​ every(function(value, index,array) { }) 方法用于检测数组中的所有元素是否都符合条件，如果数组中存在一个元素不满足条件，则返回 false ，并且剩余的元素不会再进行检测。如果所有元素都符合条件，则返回 true 。参数是一个函数，该函数有三个参数，分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有，其他参数可以看情况选择。该方法不会改变原数组。

// 案例代码

 var arr = [10, 30, 4, 2];
 var flag = arr.every(function(value,index,array) {
    //参数一是:数组元素  参数二是:数组元素的索引  参数三是:当前的数组
     return value < 20;
  });
console.log(flag);// false 返回值是布尔值,只要查找到不满足条件的一个元素就立马终止循环

5、map()

​ map(function(value, index,array) { }) 方法用于处理数组中的元素，比如算术运算、调用数学函数等，然后以一个新数组的形式返回处理后的数据。参数是一个函数，该函数有三个参数，分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有，其他参数可以看情况选择。该方法不会改变原数组。只是返回一个新数组。

// 案例代码

 var arr = [10, 30, 4, 2];
 var result = arr.map(function(value,index,array) {
    //参数一是:数组元素  参数二是:数组元素的索引  参数三是:当前的数组
     return value -1;
  });
console.log(result);// [9,29,3,1]

6、some() 和 forEach()的区别

​ forEach() 方法是遍历数组中的所有元素，不会受任何语句影响，遇到 return 也不会停止迭代，一定会遍历所有元素。而 some() 方法也是遍历数组中的元素，但是一旦遇到符合条件的元素，就会立即停止遍历，或者遇到 return true; 也会停止遍历。

​ 所以如果是查找数组中的唯一的元素或筛选是否又符合条件的元素，用 some() 效率更高。如果想要查找数组中所有符合条件的元素，则需要使用forEach() 。

7、trim()

​ trim() 方法用于删除字符串的头部和尾部的空白符，只保留中间的字符串，字符串中间的空白符是不会被去除的。空白符包括：空格、制表符 tab、换行符等等。但不会改变原字符串，只是返回一个处理后的新字符串。

// 案例代码

var str = '   hello   '
console.log(str.trim()）  //hello 去除两端空格
var str1 = '   he l l o   '
console.log(str.trim()）  //he l l o  去除两端空格

8、Object.keys()

​ Object.keys(obj) 方法是用来获取对象中的属性名，只有一个参数obj，代表要获取属性名的对象。返回值是一个数组，数组里面的元素就是获取的属性名。

// 案例代码

 var obj = {
     id: 1,
     pname: '小米',
     price: 1999,
     num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id，pname,price,num]

9、Object.defineProperty()

​ Object.defineProperty(对象,设置或修改对象的属性名,{value: 设置或修改对象的属性值}) 方法用于修改对象的属性值，或者给对象新增一条属性。共有三个参数，分别为： 要操作的对象、要操作的属性值、一个对象里面包含修改后的值，以及设置是否能被再次修改、是否能够被删除等属性。

// 案例代码

/*Object.defineProperty(对象，修改或新增的属性名，{
		value:修改或新增的属性的值,
		writable:true/false,//如果值为false 不允许修改这个属性值
		enumerable: false,//enumerable 如果值为false 则不允许遍历
        configurable: false  //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})	*/

        var obj = {
            id: 1,
            pname: '小米',
            price: 1999
        };
 		// 1. 以前的对象添加和修改属性的方式
        // obj.num = 1000;
        // obj.price = 99;
        // console.log(obj);
        // 2. Object.defineProperty() 定义新属性或修改原有的属性
        Object.defineProperty(obj, 'num', {
            value: 1000,
            enumerable: true
        });
        console.log(obj);
        Object.defineProperty(obj, 'price', {
            value: 9.9
        });
        console.log(obj);
        Object.defineProperty(obj, 'id', {
            // 如果值为false 不允许修改这个属性值 默认值也是false
            writable: false,
        });
        obj.id = 2;
        console.log(obj);
        Object.defineProperty(obj, 'address', {
            value: '中国山东蓝翔技校xx单元',
            // 如果只为false 不允许修改这个属性值 默认值也是false
            writable: false,
            // enumerable 如果值为false 则不允许遍历, 默认的值是 false
            enumerable: false,
            // configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为false
            configurable: false
        });
        console.log(obj);
        console.log(Object.keys(obj));
        delete obj.address;
        console.log(obj);
        delete obj.pname;
        console.log(obj);
        Object.defineProperty(obj, 'address', {
            value: '中国山东蓝翔技校xx单元',
            // 如果只为false 不允许修改这个属性值 默认值也是false
            writable: true,
            // enumerable 如果值为false 则不允许遍历, 默认的值是 false
            enumerable: true,
            // configurable 如果为false 则不允许删除这个属性 默认为false
            configurable: true
        });