美文网首页
36 ES5中新增的方法

36 ES5中新增的方法

作者: CurryCoder | 来源:发表于2020-06-05 22:54 被阅读0次

    技术交流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.资料下载

    相关文章

      网友评论

          本文标题:36 ES5中新增的方法

          本文链接:https://www.haomeiwen.com/subject/fpyzzhtx.html