ES5方法扩展
ES5 新增方法概述
ES5中给我们新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括：
- 数组方法
- 字符串方法
- 对象方法
数组方法
迭代（遍历）方法：forEach()、map()、filter()、some()、every();
- 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的和。 })
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() 方法删除两端的空格。
对象方法
- Object.keys() 用于获取对象自身所有的属性。
- 语法
Object.keys(obj)(1) 效果类似 for...in 。 (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 中不会。
