ES6 新特性与数组方法
ES5 数组新方法
forEach
forEach 方法对数组的每个元素执行一次提供的函数。功能等同于 for 循环。
应用场景：为一些相同的元素，绑定事件处理器！
var arr = ['张飞', '关羽', '赵云', '马超']
// 第一个参数：item，数组的每一项元素
// 第二个参数：index，数组的下标
// 第三个参数：array，正在遍历的数组
arr.forEach(function(item, index, array) {
console.log(item, index, array)
})
// 箭头函数写法
arr.forEach((item, index, array) => {
console.log(item, index, array)
})
map
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。返回的数组的长度和原数组是一样的。
var arr = [1, 2, 3, 4, 5]
// 返回值：一个新数组，每个元素都是回调函数的结果
var newArray = arr.map(function(element, index, array) {
return element * element
})
console.log(newArray) // [1, 4, 9, 16, 25]
// 箭头函数写法
var newArray = arr.map(element => element * element)
filter
filter 用于过滤掉'不合格'的元素。返回一个新数组，如果在回调函数中返回 true，那么就留下来，如果返回 false，就扔掉，因此返回的数组的长度和原数组的长度不一定一致。
var arr = [1000, 5000, 20000, 3000, 10000, 800, 1500]
var newArray = arr.filter(function(element, index, array) {
if (element > 5000) {
return false
} else {
return true
}
})
console.log(newArray) // [1000, 5000, 3000, 800, 1500]
// 箭头函数写法
var newArray = arr.filter(element => element > 5000)
some
some 用于遍历数组，如果有至少一个满足条件，就返回 true，否则返回 false。同样的每一个元素都会执行一遍 function，相当于最后返回的结果进行了一个 || 运算，全为 false 才是 false。
var arr = [2, 4, 6, 8, 10, 21]
// 判断数组是否包含奇数
var flag = arr.some(function(element, index, array) {
if (element % 2 == 1) {
return true
} else {
return false
}
})
console.log(flag) // true
// 箭头函数写法
var flag = arr.some(element => element % 2 == 1)
every
every 用于遍历数组，只有当所有的元素返回 true，才返回 true，否则返回 false，每个元素执行完 function 返回的结果做一个 && 运算，全为 true 结果才是 true。
var arr = [2, 4, 6, 8, 10, 21]
// 判断数组是否都是偶数
var flag = arr.every(function(element, index, array) {
if (element % 2 == 0) {
return true
} else {
return false
}
})
console.log(flag) // false
// 箭头函数写法
var flag = arr.every(element => element % 2 == 0)
方法对比总结
| 方法 | 作用 | 返回值 |
|---|---|---|
| forEach | 只会让每个元素执行一次函数 | undefined |
| map | 返回一个新的数组，长度和原数组一样 | 新数组 |
| filter | 得到一个新数组，保留哪些满足条件（返回 true） | 新数组 |
| some | 得到布尔值，只要有函数返回 true，整体结果就是 true | boolean |
| every | 得到布尔值，要所有的函数都返回 true，结果就是 true | boolean |
ES6 变量声明
ES6 中提供了两个声明变量的关键字：const 和 let。
注意： 在 ES5 中 var 声明的全局变量都是顶级对象（window）的属性，而 ES6 中声明的全局变量不属于顶级对象的属性。
var age = 18
console.log(this.age) // 18
let age = 18
console.log(this.age) // undefined
let 使用
ES6 新增了 let 命令，用来声明变量。它的用法类似于 var。
- let 声明的变量只有在当前作用域有效
- 不存在变量提升
- 不允许重复声明
- 块级作用域
{
let a = 10
var b = 1
}
a // ReferenceError: a is not defined
b // 1
// let 的情况
console.log(bar) // 报错 ReferenceError
let bar = 2
let a = 10
let a = 1 // 报错 Identifier 'a' has already been declared
for 循环的计数器，就很合适使用 let 命令。
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i) // ReferenceError: i is not defined
上面代码中，计数器 i 只在 for 循环体内有效，在循环体外引用就会报错。
下面的代码如果使用 var，最后输出的是 10。
var a = []
for (var i = 0; i < 10; i++) {
a[i] = function() {
console.log(i)
}
}
a[6]() // 10
