36 ES5中新增的方法

技术交流QQ群:1027579432，欢迎你的加入！

欢迎关注我的微信公众号：CurryCoder的程序人生

1.ES5新增方法概述

ES5中给我们新增了一些方法，可以很方便的操作数组或字符串，这些方法主要包括：
- 数组方法
- 字符串方法
- 对象方法

2.数组方法

(迭代(遍历)方法：forEach()、map()、filter()、some()、every()。

  // forEach()：遍历数组
  var arr = new Array(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);

forEach()方法语法规范：
- currentValue:数组当前项的值；
- index:数组当前项的索引；
- arr:数组对象本身；
```
array.forEach(function(currentValue, index, arr))
```
filter()方法用于创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组。

注意：filter()方法直接返回一个新的数组。

  // filter()筛选数组
  var arr = new Array(1, 2, 3, 4, 5, 6);
  var newArr = arr.filter(function(value, index){
      return value % 2 === 0;
  })
  console.log(newArr);

filter()方法语法规范：
- currentValue:数组当前项的值；
- index:数组当前项的索引；
- arr:数组对象本身；
```
array.filter(function(currentValue, index, arr))
```
some()方法用于检查数组中的元素是否满足指定条件，通过点查找数组中是否有满足条件的元素。
注意：它的返回值是布尔类型，如果查找到这个元素，就返回true，如果查找不到就返回false。

如果找到第一个满足条件的元素，则循环立即停止，不再继续查找。

  // some()方法：检测数组中的元素是否存在满足条件的元素
  var arr = [10, 24, 5];
  var flag = arr.some(function(value){
      return value >= 20;
  })
  console.log(flag);
  var arr1 = ['red', 'pink', 'blue'];
  var flag1 = arr1.some(function(value){
      return value === 'yellow';
  })
  console.log(flag1);

some()方法语法规范：
- currentValue:数组当前项的值；
- index:数组当前项的索引；
- arr:数组对象本身；
```
array.some(function(currentValue, index, arr))
```

3.字符串方法

trim()方***从一个字符串的两端删除空白字符。语法规范如下：
```
  str.trim()
```

trim()方法并不会影响原先字符串本身，它返回的是一个新的字符串。

  <input type="text"><button>点击</button>
  <div></div>
  <script>
  // trim()方法删除字符串两侧空格
  var str = '  Curry  Coder    ';
  console.log(str);
  var str1 = str.trim();
  console.log(str1);

  var input = document.querySelector('input');
  var btn = document.querySelector('button');
  var div = document.querySelector('div');
  btn.onclick = function(){
      var str = input.value.trim();
      if(str === ''){
          alert('请输入内容');
      } else {
          console.log(str);
          console.log(str.length);
          div.innerHTML = str;
      }
  }
  </script>

4.对象方法

Object.keys()方法用于获取对象自身所有的属性。语法规范如下：
```
  Object.keys(obj);
```
效果类似于for ... in；

返回一个由属性名组成的数组；

  // Object.keys()用于获取对象自身所有的属性
  var obj = {
      name: '小米',
      price: 1999,
      type: 'mi9'
  };
  var arr = Object.keys(obj);
  console.log(arr);
  arr.forEach(function(value){
      console.log(value);
  })

Object.defineProperty()方法用于定义新的属性或修改原来的属性。语法规范如下：
```
  Object.defineProperty(obj, property, descriptor);
```

Object.defineProperty()第三个参数descriptor说明：以对象形式{}书写。

value:设置属性的值，默认为undefined;
writable:值是否可以重写，默认为false;
enumerable:目标属性是否可以被枚举，默认为false;

configurable:目标属性是否可以被删除或是否可以再次修改特殊，默认为false;

// Object.defineProperty()方法用于定义新的属性或修改原来的属性
var obj = {
  id: 1,
  name: '小米',
  price: 1999,
  type: 'mi9'
};
// 以前对象添加和修改属性的方法
// obj.num = 10000;
// console.log(obj);
// obj.price = 99;
// Object.defineProperty()方法用于定义新的属性或修改原来的属性
Object.defineProperty(obj, 'price', {
  value: 9.9
});
console.log(obj);

Object.defineProperty(obj, 'num', {
  value: 10000, 
  configurable: true
});

Object.defineProperty(obj, 'id', {
  writable: false  // 不允许修改这个属性值
})
obj.id = 2;  // 无效修改
console.log(obj);

Object.defineProperty(obj, 'address', {
  value: '地球村',
  writable: false,  // 不允许修改这个属性值
  enumerable: true,
  configurable: false
})
var res = Object.keys(obj);
console.log(res);

delete obj.address;
console.log(obj);

delete obj.num;
console.log(obj);