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返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

filter是查找满足条件的元素，返回的是一个数组，而且是把所有满足条件的元素返回回来
some也是查找满足条件的元素是否存在，返回的是一个布尔值，如果查找到第一个满足条件的元素就终止循环

4.筛选商品案例

把数据渲染到页面中（forEach）
根据价格显示数据(filter)
根据商品名称显示数据

定义数组对象数据

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

使用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);
 });

根据价格筛选数据

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

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

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

// 点击按钮就用过滤器筛选出数组里面符合条件的对象 
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.根据商品名称筛选

获取用户输入的商品名称

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

 // 如果查询数组中唯一的元素，用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 则不允许删除这个属性以及不允许再次修改第三个参数里面的特性
})

posted @ 2020-10-13 23:36 星辰ꦿ.大海阅读(111) 评论(0) 编辑收藏举报

刷新页面返回顶部

星辰ꦿ.大海