【ES5】 新增方法概述 —— forEach() - filter() - some() - map() - trim() - Object.defineProperty()

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

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

---

一、数组方法

迭代(遍历)方法：forEach、map()、 filter()、every()

1.forEach

对数组的每个元素执行一次给定的函数。

1.1 写法

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

• Item：数组当前项
• index： 数组当前索引
• arr： 数组本身

1.2 特点

没有返回值，forEach直接改变该数组

1.3 案例

//forEach 迭代(遍历)数组
    let arr = [1, 2, 3]
    arr.forEach((item, index, array) => {
        console.log("每个数组元素为" + item);
        console.log("每个数组元素的索引号为" + index);
        console.log("数组本身" + array);
    })
    /*
    每个数组元素为1
    每个数组元素的索引号为0
    数组本身1,2,3
    每个数组元素为2
    每个数组元素的索引号为1
    数组本身1,2,3
    每个数组元素为3
    每个数组元素的索引号为2
    数组本身1,2,3
    */

2. filter

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

2.1 写法

array.filter( function(Item,index,arr) )

• Item：数组当前项
• index： 数组当前索引
• arr： 数组本身

2.2 特点

• 有返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。
• 常用于在一个数组中，筛选出对自己有用的数据

2.3 案例

从数组中筛选出大于10的数字

//filter 迭代(遍历)数组
    let arr = [1, 6, 14, 2, 42, 4]
    let resuslt = arr.filter((item, index, array) => {
        return item > 10
    })
    console.log(resuslt);  // [14, 42]

3. some

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

3.1 写法

array.some( function(Item,index,arr) )

• Item：数组当前项
• index： 数组当前索引
• arr： 数组本身

3.2 特点

• 有返回值：注意它的返回值是布尔值，如果查找到这个元素，就返回true，如果找不到就返回false。
• 如果找到第一个满足条件的的元素，则终止循环，不再继续查找

3.3 案例

数组中是否有大于20的元素

//some 查找数组中是否有满足条件的元素
    let arr = [1, 30, 14]
    let resuslt = arr.some((item) => {
        return item > 20
    })
    console.log(resuslt);  // true

3.4 filter与some的区别

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

4. map

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

4.1 写法

array.map( function(Item,index,arr) )

• Item：数组当前项
• index： 数组当前索引
• arr： 数组本身

4.2 特点

• 有返回值：一个由原数组每个元素执行回调函数的结果组成的新数组。
• 常用于改变数组中的元素，并组中一个新数组，和forEach有点相似，但是forEach是直接改变原数组，不返回新数组

4.3 案例

让数组中每一个元素自加一

//map 迭代(遍历)数组
    let arr = [1, 6, 14, 2, 42, 4]
    let resuslt = arr.filter((item) => {
        return item + 1
    })
    console.log(resuslt);  // [2, 7, 15, 3, 43, 5]

二、字符串方法

1. trim

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

1.1 写法

str.trim()

1.2 特点

• trim()方法并不影响原字符串，它返回的是一个新的字符串
• trim()只能去除两边的空格，并不能去除中间的空格

1.3 案例

//some 查找数组中是否有满足条件的元素
    let str =  "    andy    "
    let resuslt = str.trim()
    console.log(resuslt);  //andy

三、对象方法

Object.defineProperty()

Object.defineProperty()定义对象中新属性或者修改原有属性。

写法

Object.defineProperty(obj,prop,descriptor)

• obj:必需。目标对象
• prop(str)∶必需。需定义或修改的属性的名字
• descriptor(obj) :必需。目标属性所拥有的特性

Object.defineProperty)第三个参数descriptor说明︰以对象形式{}书写

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

案例1

• 将obj对象的价格改为1000
• 将obj的id改为不可重写

//Object.defineProperty() 定义新属性或修改原有的属性
let obj = {
    id:1,
    pname:"小米",
    price:1999
}
//将obj对象的价格修改为1000
Object.defineProperty(obj,"price",{
    value: 1000
})
//将obj对象的id属性更改为 -----> 不可修改
Object.defineProperty(obj,"id",{
    writable:false
})
//检验结果
console.log(obj.price); // 1000
obj.id = 2
console.log(obj.id); // 1

案例2

• 将obj的价格设置为不可枚举
• 将obj的id设置为不可删除

//Object.defineProperty() 定义新属性或修改原有的属性
let obj = {
    id:1,
    pname:"小米",
    price:1999
}
//将obj的价格设置为不可枚举
Object.defineProperty(obj,"price",{
    enumerable: false
})
//将obj的id设置为不可删除
Object.defineProperty(obj,"id",{
    configurable:false
})
//检验结果
console.log(Object.keys(obj)); // 1000

delete obj.id
console.log(obj); //{id: 1, pname: '小米', price: 1999}