ES5新增方法

1. 数组方法forEach遍历数组

• 语法：

 arr.forEach(function(value， index， array) {
       //参数一是:数组元素
       //参数二是:数组元素的索引
       //参数三是:当前的数组
 })
  //相当于数组遍历的 for循环 没有返回值
function forEach（fn）{
    //.....
    //fn();
}

• 代码：

    <script>
        // forEach 迭代(遍历) 数组
        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);
    </script>

2. 数组方法filter过滤数组

• 语法：

  var arr = [12， 66， 4， 88， 3， 7];
  var newArr = arr.filter(function(value， index，array) {
  	 //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value >= 20;
  });
  console.log(newArr);//[66，88] //返回值是一个新数组
function myFilter(fnCallback){
    // 根据fnCallback的返回值来进行过滤
    // 返回值就是过滤条件
    var tj = fnCallback(12,0,arr);
    if(tj){
        newArr.push(12);
    }
}

• 代码：

    <script>
        // filter 筛选数组
        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);
    </script>

3. 数组方法some

• 语法：

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

• 代码：

    <script>
        // some 查找数组中是否有满足条件的元素 
        // var arr = [10, 30, 4];
        // var flag = arr.some(function(value) {
        //     // return value >= 20;
        //     return value < 3;
        // });
        // console.log(flag);
        var arr1 = ['red', 'pink', 'blue'];
        var flag1 = arr1.some(function(value) {
            return value == 'pink';
        });
        console.log(flag1);
        // 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
        // 2. some 也是查找满足条件的元素是否存在  返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环
    </script>

4 筛选商品案例

4.1 定义数组对象数据

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

4.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);
 });

4.3 根据价格筛选数据

1. 获取到搜索按钮并为其绑定点击事件

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

2. 使用filter将用户输入的价格信息筛选出来

   search_price.addEventListener('click'， function() {
         var newDate = data.filter(function(value) {
           //start.value是开始区间
           //end.value是结束的区间
         	return value.price >= start.value && value.price <= end.value;
         });
         console.log(newDate);
    });
   

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.4 根据商品名称筛选

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

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

    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 不会终止迭代

6. 获取对象的属性名

Object.keys(对象) 获取到当前对象中的属性名 ，返回值是一个数组

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

7. Object.defineProperty

Object.defineProperty设置或修改对象中的属性

Object.defineProperty(对象，修改或新增的属性名，{
		value:修改或新增的属性的值，
		writable:true/false，//如果值为false 不允许修改这个属性值
		enumerable: false，//enumerable 如果值为false 则不允许遍历
        configurable: false  //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})	

实例：

<script>
        // Object.defineProperty() 定义新属性或修改原有的属性
        var obj = {
            id: 1,
            pname: '小米',
            price: 1999
        };
        // 1. 以前的对象添加和修改属性的方式
        // obj.num = 1000;
        // obj.price = 99;
        // console.log(obj);
        // 2. Object.defineProperty() 定义新属性或修改原有的属性
        Object.defineProperty(obj, 'num', {
            value: 1000,
            enumerable: true
        });
        console.log(obj);
        Object.defineProperty(obj, 'price', {
            value: 9.9,
            writable: false,
        });
        console.log(obj);
        obj.price = 1;
        console.log(obj);
        Object.defineProperty(obj, 'id', {
            // 如果值为false 不允许修改这个属性值 默认值也是false
            writable: false,
        });
        obj.id = 2;
        console.log(obj);
        Object.defineProperty(obj, 'address', {
            value: '中国山东蓝翔技校xx单元',
            // 如果只为false 不允许修改这个属性值 默认值也是false
            writable: false,
            // enumerable 如果值为false 则不允许遍历, 默认的值是 false
            enumerable: false,
            // configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为false
            configurable: false
        });
        console.log(obj);
        console.log(Object.keys(obj));
        delete obj.address;
        console.log(obj);
        delete obj.pname;
        console.log(obj);
        Object.defineProperty(obj, 'address', {
            value: '中国山东蓝翔技校xx单元',
            // 如果只为false 不允许修改这个属性值 默认值也是false
            writable: true,
            // enumerable 如果值为false 则不允许遍历, 默认的值是 false
            enumerable: true,
            // configurable 如果为false 则不允许删除这个属性 默认为false
            configurable: true
        });
        console.log(obj.address);
</script>