ES5新增方法

迭代(遍历)方法: forEach()、map()、 filter()、 some()、 every() ;

map()和forEach()相似，some()和every()相似

1.数组方法forEach遍历数组

array. forEach ( function (currentValue, index, arr) )

• currentValue :数组当前项的值

• index :数组当前项的索引

• arr: 数组对象本身

​
  //相当于数组遍历的 for循环 没有返回值
        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);

结果为：

2.数组方法filter过滤数组

array.filter (function (currentvalue, index, arr))

• filter() 方法创建一个新的数组 ,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组

• 注意它直接返回一个新数组

• currentValue: 数组当前项的值

• index :数组当前项的索引

• arr: 数组对象本身

  var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(value, index) {
     //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value >= 20;
     // 返回数组里面的偶数给新数组
     //return value % 2 === 0;// 返回原数组里面的偶数给新数组
  });
  console.log(newArr);//[66,88] //返回值是一个新数组

3.数组方法some

array. some (function (currentvalue, index, arr))

• some() 方法用于检测数组中的元素是否满足指定条件.通俗点查找数组中是否有满足条件的元素

• 注意它返回值是布尔值如果查找到这个元素,就返回true,如果查找不到就返回false.

• 如果找到第一个满足条件的元素，则终止循环不在继续查找.

• currentValue: 数组当前项的值

• index :数组当前项的索引

• arr :数组对象本身

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

1. filter是查找满足条件的元素，返回的是一个数组，而且是把所有满足条件的元素返回回来

2. some也是查找满足条件的元素是否存在，返回的是 一个布尔值，如果查找到第一个 满足条件的元 素就终止循环

4.筛选商品案例

1. 把数据渲染到页面中（forEach）

2. 根据价格显示数据(filter)

3. 根据商品名称显示数据

1. 定义数组对象数据

   var data = [{
               id: 1,
               pname: '小米',
               price: 3999
           }, {
               id: 2,
               pname: 'oppo',
               price: 999
           }, {
               id: 3,
               pname: '荣耀',
               price: 1299
           }, {
               id: 4,
               pname: '华为',
               price: 1999
           }, ];

2. 使用forEach遍历数据并渲染到页面中

   data.forEach(function(value) {
     var tr = document.createElement('tr');
     tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
     tbody.appendChild(tr);
    });

3. 根据价格筛选数据

   1. 将渲染数据的逻辑封装到一个函数中

      function setDate(mydata) {
            // 先清空原来tbody 里面的数据
        tbody.innerHTML = '';
        mydata.forEach(function(value) {
            //创建元素
          var tr = document.createElement('tr');
            //给元素赋值
          tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
            //元素添加到指定位置
            tbody.appendChild(tr);
        });
       }

   2. 将筛选之后的数据重新渲染

      // 点击按钮就用过滤器筛选出数组里面符合条件的对象 
      search_price.addEventListener('click', function() {
           var newDate = data.filter(function(value) {
           return value.price >= start.value && value.price <= end.value;
           });
           console.log(newDate);
           // 把筛选完之后的对象渲染到页面中
           setDate(newDate);
      });

   4.根据商品名称筛选

   1. 获取用户输入的商品名称

   2. 为查询按钮绑定点击事件,将输入的商品名称与这个数据进行筛选

       // 如果查询数组中唯一的元素，用some方法更合适,因为它找到这个元素,就不在进行循环，效率更高
      search_pro.addEventListener('click', function() {
           var arr = [];
           data.some(function(value) {
             if (value.pname === product.value) {
               // console.log(value);
               arr.push(value); //为数组添加元素
               return true; // return 后面必须写true  
             }
           });
           // 把拿到的数据渲染到页面中
           setDate(arr);
      })

5.some和forEach区别

• 如果查询数组中唯一的元素, 用some方法更合适,在some 里面 遇到 return true 就是终止遍历 迭代效率更高

• 在forEach 里面 return 不会终止迭代

• filter里面遇到return也不会终止迭代

6.trim方法去除字符串两端的空格

var str = '   hello   '
console.log(str.trim()）  //hello 去除两端空格
var str1 = '   he l l o   '
console.log(str.trim()）  //he l l o  去除两端空格，不影响中间

运用案例：

<script>
        // trim方法去除字符串两侧空格
        var input = document.querySelector("input");
        var btn = document.querySelector("button");
        var div = document.querySelector("div");
        btn.addEventListener('click', function () {
            var str = input.value.trim();
            if (str === '') {
                alert('请输入内容');
            } else {
                console.log(str);
                console.log(str.length);
                div.innerHTML = str;
            }
            input.value = '';
        })
    </script>

7.对象方法

7.1获取对象的属性名

Object.keys() 用于获取对象自身所有的属性

Object . keys (obj)

• 效果类似for...in

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

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

7.2Object.defineProperty

Object.defineProperty() 定义对象中新属性(设置)或修改原有的属性。

object . defineProperty(obj, prop, descriptor)

• obj: 必需。目标对象

• prop :必需。需定义或修改的属性的名字

• descriptor :必需。目标属性所拥有的特性

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

• value: 设置属性的值,默认为undefined

• writable: 值是否可以重写。true| false 默认为false

• enumerable: 目标属性是否可以被枚举。true | false默认为false

• configurable: 目标属性是否可以被删除或是否可以再次修改特性true | false默认为false

Object.defineProperty(对象，'修改或新增的属性名'，{
        value:修改或新增的属性的值,
        writable:true/false,//如果值为false 不允许修改这个属性值
        enumerable: false,//enumerable 如果值为false 则不允许遍历
        configurable: false  //configurable 如果为false 则不允许删除这个属性以及不允许再次修改第三个参数里面的特性
})