ES5 中新增的方法

ES5 新增方法概述

---

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

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

数组方法

---

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

1. forEcher()
   • 语法：
     array.forEach(function(currentValue,index,arr))
     (1) currentValue：数组当前项的值。
     (2) index：数组当前项的索引。
     (3) arr：数组对象本身。
   • 示例：

// forEach 迭代（遍历）数组。
var arr = [1,2,3,4,5,6,7,8,9,0]
var sum = 0
arr.forEach(function(value,index,array){
	sum += value	// 返回的值是1~9的和。
})

2. filter()
   • 语法：
     arrry.filter(function(currentValue,index,arr))
     (1) filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组。
     (2) 注意它直接返回一个新数组。
     (3) currentValue：数组当前项的值。
     (4) index：数组当前项的索引。
     (5) arr：数组对象本身。
   • 示例：

// filter 筛选数组。
var arr = [1,8,85,84,55,81,63]
// 因为生成了一个新的数组，所以需要定义一个变量来接收一下。
var newArr = arr.filter(function(value,index,array){
	// return value >= 20	返回的值都大于20。
	return value % 2 === 0	// 返回的值都是偶数。
})
console.log(newArr)

3. some()
   • 语法：
     arrry.some(function(currentValue,index,arr))
     (1) some()方法用于检测数组中的元素是否满足指定条件，通俗点就是查找数组中是否有满足条件的元素。
     (2) 注意它返回值是布尔值，如果找到这个元素，就返回True，如果找不到就返回False。
     (3) 如果找到第一个满足条件的元素，则终止循环，不再继续查找。
     (4) currentValue：数组当前项的值。
     (5) index：数组当前项的索引。
     (6) arr：数组对象本身。
   • 示例：

var arr = [15,82,41,53,20,10,3]
var flag = arr.filter(function(value,index,array){
	// return value >= 20	返回值是Ture。
	return value < 3	// 返回值是False。
})

字符串方法

---

trim() 方法会从一个字符串的两端删除空白字符。
* 语法：
str.trim()
(1) trim() 方法并不影响原字符串本身，它返回的是一个新的字符串。
(2) trim() 方法不会删除字符串中间输入的空格。

var str = '    andy    '
console.log(str)	// 输出结果会在两端产生空格。
var str1 = str.trim()
console.log(str1)	// 输出结果会删除在两端产生的空格。

示例：为防止用户输入空格，可以采用 trim() 方法删除两端的空格。

对象方法

---

1. Object.keys() 用于获取对象自身所有的属性。
   • 语法
     Object.keys(obj)
     (1) 效果类似 for…in 。
     (2) 返回一个由属性名组成的数组。
2. Object.defineProperty() 定义对象中的新属性或修改原有的属性。
   • 语法
     Object.defineProperty(obj,prop,descriptor)
     (1) obj：必需。目标对象。
     (2) prop：必需。需定义或修改的属性的名字。
     (3) descriptor：必需。目标属性所拥有的特性。
     (4) Object.defineProperty() 第三个参数 descriptor 说明：以对象形式 {} 书写。
     (5) writable：值是否可以重写。true | false 默认为 false 。
     (6) value：设置属性的值，默认为 undefined 。
     (7) enumrable：目标属性是否可以被枚举（是否允许被遍历）。true | false 默认为 false 。
     (8) configurable：目标属性是否可以被删除或是再修改特性。true | false 默认为 false 。

拓展知识

---

查询商品

// 获取相应的元素
var tbody = document.querySelector('tbody')
var search_price = document.querySeletor('.search_price')
var start = document.querySeletor('.start')
var end = document.querySeletor('.end')
setDate(date)
// 把数据渲染到页面中
function setDate(mydate){
    tbody.innerHTML = ''
    mydate.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.filiter(function(){
		return value.price >= start.value && value.price <= end.value
	})
	// 把筛选完之后的对象渲染到页面中。
	setDate(newDate)
})
// 根据商品名称查找商品
// 如果查询数组中唯一的元素，用 some 方法更合适，因为它找到这个元素，就不再进行循环，效率更高。
var product = document.querySelector('.product')
var search_pro = document.querySeletor('.search_pro')
search_pro.addEventlistener('click',function(){
	var arr = [] 
	date.some(function(value){
		if(value.pname === product.value){
			return ture	// return 后面必须写 ture 。
		}
	})
	// 把拿到的数据渲染到页面上。
	setDate(arr)
})

forEach 和 some 的区别

---

var arr = ['red','pink','green','blue']
arr.forEach(function(value){
	if(value == 'green'){
		console.log('找到了该元素！')
		return ture	// 在 forEach 里面，return 不会终止迭代。
	}
	console.log(11)
})
// 在控制台输出3次11.
arr.some(function(value){
	if(value == 'green'){
		console.log('找到了该元素！')
		return ture	// 在 some 里面，遇到 return ture 就是终止遍历，迭代效率更高。
	}
	console.log(11)
})
// 在控制台输出2次11
arr.filter(function(value){
	if(value == 'green'){
		console.log('找到了该元素！')
		return ture	// 在 filter 里面，return 不会终止迭代。
	}
	console.log(11)
})
// 在控制台输出3次11

总结：forEach 和 some 的区别就是 return 在some中会终止迭代，而在 forEach 中不会。