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 则不允许删除这个属性以及不允许再次修改第三个参数里面的特性
})