Es5 new method

1. Array methods forEach Traversal array

 arr.forEach(function(value, index, array) {
    
       // Parameter one is : Array elements 
       // The second parameter is : Index of array elements 
       // The third parameter is : The current array 
 })
  // Equivalent to array traversal  for loop   no return value 

2. Array methods filter Filter array

 var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(value, index,array) {
    
  	 // Parameter one is : Array elements 
     // The second parameter is : Index of array elements 
     // The third parameter is : The current array 
     return value >= 20;
  });
  console.log(newArr);//[66,88] // The return value is a new array 

3. Array methods some

some  Find whether there are elements in the array that meet the conditions  
 var arr = [10, 30, 4];
 var flag = arr.some(function(value,index,array) {
    
    // Parameter one is : Array elements 
     // The second parameter is : Index of array elements 
     // The third parameter is : The current array 
     return value < 3;
  });
console.log(flag);//false The return value is Boolean , As soon as an element satisfying the condition is found, the loop is terminated immediately 

4. Filter product cases

1. Define array object data

   var data = [{
    
               id: 1,
               pname: ' millet ',
               price: 3999
           }, {
    
               id: 2,
               pname: 'oppo',
               price: 999
           }, {
    
               id: 3,
               pname: ' glory ',
               price: 1299
           }, {
    
               id: 4,
               pname: ' Huawei ',
               price: 1999
           }, ];

2. Use forEach Traverse the data and render it to the page

   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. Filter data by price

   1. Get the search button and bind the click event to it

      search_price.addEventListener('click', function() {
    
      });

2. Use filter Filter out the price information entered by the user

    search_price.addEventListener('click', function() {
    
            var newDate = data.filter(function(value) {
    
              //start.value Is the starting interval 
              //end.value Is the end of the interval 
            	return value.price >= start.value && value.price <= end.value;
            });
            console.log(newDate);
       });

3. Re render the filtered data to the table

   1. Encapsulate the logic of rendering data into a function

     function setDate(mydata) {
    
               //  First empty the original tbody  The data in it 
           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.  Re render filtered data 

  search_price.addEventListener('click', function() {
    
              var newDate = data.filter(function(value) {
    
              return value.price >= start.value && value.price <= end.value;
              });
              console.log(newDate);
              //  Render the filtered objects to the page 
              setDate(newDate);
         });

4. Filter by product name

   1. Get the product name entered by the user

   2. Bind click event for query button , Filter the entered product name with this data

     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  It must be written after true 
                }
              });
              //  Render the data to the page 
              setDate(arr);
         })

5.some and forEach difference

• If you query the only element in the array , use some More appropriate , stay some Inside encounter return true Is to stop traversal Iteration is more efficient
• stay forEach Inside return The iteration will not be terminated

6.trim Method to remove spaces at both ends of a string

var str = ' hello '
console.log(str.trim()）  //hello  Remove the spaces at both ends 
var str1 = ' he l l o '
console.log(str.trim()）  //he l l o  Remove the spaces at both ends 

7. Get the property name of the object

Object.keys( object ) Gets the property name in the current object , The return value is an array

 var obj = {
    
     id: 1,
     pname: ' millet ',
     price: 1999,
     num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id,pname,price,num]

8.Object.defineProperty

Object.defineProperty Set or modify properties in an object

Object.defineProperty( object , Modified or added property name ,{
    
		value: Modify or add the value of the attribute ,
		writable:true/false,// If the value is false  It is not allowed to modify this property value 
		enumerable: false,//enumerable  If the value is false  Traversal is not allowed 
        configurable: false  //configurable  If false  You are not allowed to delete this property   Whether the property can be deleted or whether the property can be modified again 
})