ES5新增方法

1.ES5新增方法

1.1 ES5 新增方法概述

ES5 中给我们新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括：
 数组方法
 字符串方法
 对象方法
迭代(遍历)方法：forEach()、map()、filter()、some()、every()；

1.2数组方法forEach遍历数组

<script>
    // forEach 方法
    var arr = [1,2,3];
    var sum = 0;
    arr.forEach(function(value,index,arr) {
        console.log('每个数组元素' + value);
        console.log('每个数组元素的索引号' + index);
        console.log('数组本身' + arr);
        sum += value;
    });
    console.log(sum);
    </script>
  //相当于数组遍历的 for循环 没有返回值

     Value：数组当前项的值

 index：数组当前项的索引
 arr：数组对象本身

1.3数组方法filter过滤数组

  <script>
    // filter 筛选数组
        var arr = [1,18,33,24,65,78];
        var  Array = arr.filter(function(value,index) {
            // return value >= 20;
            return value % 2 === 0;
        })
        console.log(Array); //返回值是一个新数组
    </script>

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组

 注意它直接返回一个新数组
 currentValue: 数组当前项的值
 index：数组当前项的索引
 arr：数组对象本身

1.4数组方法some

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

  some() 方法用于检测数组中的元素是否满足指定条件.   通俗点 查找数组中是否有满足条件的元素 

 注意它返回值是布尔值, 如果查找到这个元素, 就返回true ,  如果查找不到就返回false.
 如果找到第一个满足条件的元素,则终止循环. 不在继续查找.
 currentValue: 数组当前项的值
 index：数组当前项的索引
 arr：数组对象本身

1.5some和forEach区别

• 如果查询数组中唯一的元素, 用some方法更合适,在some 里面 遇到 return true 就是终止遍历 迭代效率更高

• 在forEach 里面 return 不会终止迭代

<script>
        var arr = ['pink','green','yellow','red'];
      /*   // forEach 迭代/遍历
        arr.forEach(function(value) {
            if(value == 'green'){
                console.log('找到了');
            return value;
            }
            console.log(11);
        }) */
        //如果查询数组中唯一的元素，用some方法更合适
      /*   arr.some(function(value) {
            if(value == 'green') {
              console.log('找到了');
                return true; //在some里面遇到return true就是终止遍历迭代效率更高
            }
            console.log(22);
            }) */
            arr.filter(function(value) {
            if(value == 'green') {
              console.log('找到了');
                return true; // filter里面return不会终止迭代
            }
            console.log(22);
            })
​
    </script>
 

1.6trim方法去除字符串两端的空格

trim()  方法会从一个字符串的两端删除空白字符。

str.trim()

trim() 方法并不影响原字符串本身，它返回的是一个新的字符串。 

 <script>
        // trim 去除字符串两侧空格
        var str = '  andy  ';
        console.log(str);
        var str1 = str.trim();
        console.log(str1);
        // 获取元素
        var input = document.querySelector('input');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click',function(value) {
            if (input.value.trim() === '') {
                alert('请输入内容');
            } else {
                console.log(input.value.trim());
                div.innerHTML = input.value.trim();
            }
        })
    </script>

1.7获取对象的属性名

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

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

 效果类似 for…in
 输出对象中值大于 2 的 key 的数组

1.8Object.defineProperty

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

Object.defineProperty(obj, prop, descriptor)

 <script>
        // object.defineProperty(）定义新属性或修改原有的属性
        // 1．以前的对象添加和修改属性的方式
        var obj = {
            id:1,
            uname:'华为',
            price:3999
        }
        // 1．以前的对象添加和修改属性的方式
        // obj.price = 2999;
        // obj.num = 1000;
        // console.log(obj);
        // 2. object.defineProperty()定义新属性或修改原有的属性
        Object.defineProperty(obj,'price',{
            value:9.9,
        })
        Object.defineProperty(obj,'num',{
            value:1000,
        })
        console.log(obj);
        Object.defineProperty(obj,'id',{
            //如果只为false不允许修改这个属性值―默认值也是false true可以修改
            writable:true,  
        })
        Object.defineProperty(obj,'adress',{
            value:'六盘水师范学院',
            //如果只为false不允许修改这个属性值―默认值也是false true可以修改
            writable:true,  
            //lenumerable如果值为false则不允许遍历，默认的值是false
            enumerable:true,
            // configurable如果为false则不允许删除这个属性不允许在修改第三个参数里面的特性默认为flase
            configurable:false
        })
        console.log(obj);
        console.log(Object.keys(obj));
        delete obj.address;
        delete obj.uname;
        console.log(obj);
        Object.defineProperty(obj,'adress',{
            value:'六盘水师范学院',
            //如果只为false不允许修改这个属性值―默认值也是false true可以修改
            writable:false,  
            //lenumerable如果值为false则不允许遍历，默认的值是false
            enumerable:false,
            // configurable如果为false则不允许删除这个属性不允许在修改第三个参数里面的特性默认为flase
            configurable:true
        })
        console.log(obj);
    </script>Object.defineProperty(对象，修改或新增的属性名，{
        value:修改或新增的属性的值,
        writable:true/false,//如果值为false 不允许修改这个属性值
        enumerable: false,//enumerable 如果值为false 则不允许遍历
        configurable: false  //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})

    Object.defineProperty()   第三个参数 descriptor 说明：

 value: 设置属性的值
 writable: 值是否可以重写。true | false
 enumerable: 目标属性是否可以被枚举。true | false
 configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false

 obj：必需。目标对象 
 prop：必需。需定义或修改的属性的名字
 descriptor：必需。目标属性所拥有的特性