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 則不容許刪除這個屬性以及不容許再次修改第三個參數裏面的特性
})