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

5.资料下载

• 笔记及代码，欢迎 star,follow,fork......