JavaScript：ES5新增方法

1.概述

ES5中给我们新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括：

• 数组方法
• 字符串方法
• 对象方法

---

2.数组方法

迭代（遍历）方法：forEach()、filter()、some();

2.1 遍历方法：forEach

forEach用于遍历数组，可传入参数有当前值、当前索引、当前数组

语法：

array.forEach(function(currentValue,index,arr))

• currentValue:数组当前项的值
• index：数组当前项的索引
• arr：数组对象本身

如：

<script>
    var arr = [1, 2, 3]
    // 1.forEach
    arr.forEach(function (value, index, arr) {
        console.log(value);
        console.log(index);
        console.log(arr);
    })
</script>

显示结果：

2.2 筛选方法：filter

filter方法可以筛选数组中满足要求的项，并将这些项放入一个新的数组中返回。

语法：

arr.filter(function(current,index,arr))

• fliter方法创建了一个符合筛选要求的新数组
• currentValue:数组当前项的值
• index：数组当前项的索引
• arr：数组对象本身

如下：筛选value值大于1的项

<script>
    var arr = [1, 2, 3]
    // 2.filter
    var newarr = arr.filter(function (value, index, arr) {
        return value > 1;
    })
    console.log(newarr);
</script>

显示结果：

2.3 查找方法：some

some方法可以查找一个数组中是否含有满足条件的元素，找到则直接结束查找，返回true，否则false。

语法：

arr.some(function(currentValue,index,arr))

• some()方法用于检测数组中是否有满足条件的元素
• 返回的是布尔值，找到返回true，没找到返回false
• 如果找到则立即停止查找
• currentValue:数组当前项的值
• index：数组当前项的索引
• arr：数组对象本身

如下：

<script>
        var arr = [1, 2, 3]
        // 3.some
        var res = arr.some(function (value) {
            return value === 2;
        })
        var res2 = arr.some(function (value) {
            return value === 4;
        })
        console.log(res);
        console.log(res2);
    </script>

显示结果：

---

3.字符串方法

3.1 去除空格 trim

trim（）方法会从一个字符串的两端删除空白字符

语法：

str.trim()

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

如下：

<script>
    var str = ' 123  ';
    var str1 = str.trim();
    console.log(str1);
</script>

显示结果：

我们常用这个方法来对输入框内的内容进行处理。
如下：
功能：如果输入框内未填写内容包括只输入了空格，则要求用户输入内容。

<script>
    // 功能：如果输入框内未填写内容包括只输入了空格，则要求用户输入内容。
    var text = document.querySelector('input');
    var btn = document.querySelector('button');
    btn.onclick = function () {
        var str = text.value.trim();//关键代码
        console.log(str);
        if (str === '')
            alert('请输入内容')
        else
            alert('输入内容成功：' + str)
    }
</script>

分析：
这里添加了给文本框内的值添加了关键方法trim

var str = text.value.trim();//关键代码

使得得到的文本框内容去除空格，不然用户只输入空格的话也会进入输入成功条件

---

3.对象方法

3.1 定义新属性或修改属性 defineProperty

defineProperty对象方法可以给一个对象定义新属性，如果存在此属性还可以进行修改

语法：

Object.defineProperty(obj,prop,descriptor)

• obj:目标对象（必需）
• prop：需定义或修改的属性名（必需）
• descriptor：目标属性所拥有的属性（必需）
  descriptor含有的属性：
  1.value：设置属性的值 默认为undefined
  2.writable：值是否可以重写。默认为false
  3.enumerable：目标属性是否可以被枚举。默认为false
  4.configurable：目标属性是否可以被删除或是否可以再次修改特性。默认为false

1.value 有这个属性则修改，无则添加

<SCript>
        var obj = {
            name: 'xy',
            age: 20
        }
        //     1.value：设置属性的值 默认为undefined
        // 1.1:有这个属性则修改
        Object.defineProperty(obj, 'age', {
            value: 21
        })
        // 1.2：没有这个属性则定义
        Object.defineProperty(obj, 'sex', {
            value: '男'
        });
    </SCript>

2.writable 设置属性不可重写

 <SCript>
        var obj = {
            name: 'xy',
            age: 20
        }
  
        //     2.writable：值是否可以重写。默认为false
        // 设置名字不可重写
        Object.defineProperty(obj, 'name', {
            writable: false
        })
        obj.name = 'xxy';
        console.log(obj);
false
    </SCript>

名字并未修改为xxy

3.enumerable：目标属性是否可以被枚举

<SCript>
        var obj = {
            name: 'xy',
            age: 20
        }
      
        //     3.enumerable：目标属性是否可以被枚举。默认为false
        Object.defineProperty(obj, 'age', {
            enumerable: false
        })
        console.log(Object.keys(obj));
        Object.defineProperty(obj, 'age', {
            enumerable: true
        })
        console.log(Object.keys(obj));
 
    </SCript>

4.configurable：目标属性是否可以被删除或是否可以再次修改特性

  <SCript>
        var obj = {
            name: 'xy',
            age: 20
        }
        //     4.configurable：目标属性是否可以被删除或是否可以再次修改特性。默认为false
        Object.defineProperty(obj, 'name', {
            configurable: false
        })
        delete obj.name;
        console.log(Object.keys(obj));
        Object.defineProperty(obj, 'name', {
            configurable: true
        })
        delete obj.name;
        console.log(Object.keys(obj));
    </SCript>

可知设置为false是并不能删除name属性，第二次修改时报错，不能重新修改name属性。