ES5 和 ES6 那些你必须知道的事儿
ES5 新增的东西
一, 数组方法
1,forEach
用途: 遍历, 循环
对于空数组不会执行回调函数
- // 用法
- array.forEach(
- function(currentValue, index, arr),
- thisValue
- )
- //currentValue 必需. 当前元素
- //index 可选. 当前元素的索引值.
- //arr 可选. 当前元素所属的数组对象.
- //thisValue 可选. 传递给函数的值一般用 "this" 值. 如果这个参数为空, "undefined" 会传递给 "this" 值
- <button onclick="numbers.forEach(myFunction)">点我</button>
- <p > 数组元素总和:<span id="demo"></span></p>
- <script>
- var sum = 0;
- var numbers = [65, 44, 12, 4];
- function myFunction(item) {
- sum += item;
- demo.innerhtml = sum;
- }
- </script>
- 2,map
用途: 映射
map() 方法返回一个新数组, 数组中的元素为原始数组元素调用函数处理后的值.
map() 方法按照原始数组元素顺序依次处理元素.
map() 方法不会对空数组进行检测.
map() 方法不会改变原始数组
- // 用法
- array.map(
- function(currentValue,index,arr),
- thisValue
- )
- var numbers = [65, 44, 12, 4];
- function multiplyArrayElement(num) {
- return num * document.getElementById("multiplyWith").value;
- }
- function myFunction() {
- document.getElementById("demo").innerHTML = numbers.map(multiplyArrayElement);
- }
- 3,filter
用途: 过滤器
filter() 方法创建一个新的数组, 新数组中的元素是通过检查指定数组中符合条件的所有元素.
filter() 不会对空数组进行检测.
filter() 不会改变原始数组.
- // 用法
- array.filter(
- function(currentValue,index,arr),
- thisValue
- )
- <p > 最小年龄: <input type="number" id="ageToCheck" value="18"></p>
- <button onclick="myFunction()">点我</button>
- <p > 所有大于指定数组的元素有? <span id="demo"></span></p>
- <script>
- var ages = [32, 33, 12, 40];
- function checkAdult(age) {
- return age>= document.getElementById("ageToCheck").value;
- }
- function myFunction() {
- document.getElementById("demo").innerHTML = ages.filter(checkAdult);
- }
- </script>
- 4,some
用法: some() 方法用于检测数组中的元素是否满足指定条件(函数提供).
some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件, 则表达式返回 true , 剩余的元素不会再执行检测.
如果没有满足条件的元素, 则返回 false.
some() 不会对空数组进行检测.
some() 不会改变原始数组.
- // 用法
- array.some(
- function(currentValue,index,arr),
- thisValue
- )
- <p > 最小年龄: <input type="number" id="ageToCheck" value="18"></p>
- <button onclick="myFunction()">点我</button>
- <p > 判断结果: <span id="demo"></span></p>
- <script>
- var ages = [4, 12, 16, 20];
- function checkAdult(age) {
- return age>= document.getElementById("ageToCheck").value;
- }
- function myFunction() {
- document.getElementById("demo").innerHTML = ages.some(checkAdult);
- }
- </script>
- // 输出结果为 true 或者 false
- 5,every
用法: every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供).
every() 方法使用指定函数检测数组中的所有元素:
如果数组中检测到有一个元素不满足, 则整个表达式返回 false , 且剩余的元素不会再进行检测.
如果所有元素都满足条件, 则返回 true.
every() 不会对空数组进行检测.
every() 不会改变原始数组.
- // 用法
- array.every(
- function(currentValue,index,arr),
- thisValue
- )
- <p > 最小年龄: <input type="number" id="ageToCheck" value="18"></p>
- <button onclick="myFunction()">点我</button>
- <p > 是否所有年龄都符号条件? <span id="demo"></span></p>
- <script>
- var ages = [32, 33, 12, 40];
- function checkAdult(age) {
- return age>= document.getElementById("ageToCheck").value;
- }
- function myFunction() {
- document.getElementById("demo").innerHTML = ages.every(checkAdult);
- }
- </script>
- // 返回 true 或者 false
- 6,indexOf
用法: indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.
- // 用法
- stringObject.indexOf(searchvalue,fromindex)
- // 该方法将从头到尾地检索字符串 stringObject, 看它是否含有子串 searchvalue. 开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时). 如果找到一个 searchvalue, 则返回 searchvalue 的第一次出现的位置. stringObject 中的字符位置是从 0 开始的.
- //searchvalue 必需. 规定需检索的字符串值.
- //fromindex 可选的整数参数. 规定在字符串中开始检索的位置. 它的合法取值是 0 到 stringObject.length - 1. 如省略该参数, 则将从字符串的首字符开始检索.
- //indexOf() 方法对大小写敏感!
- // 如果要检索的字符串值没有出现, 则该方法返回 -1.
- <script type="text/javascript">
- var str="Hello world!"
- document.write(str.indexOf("Hello") + "<br />")
- document.write(str.indexOf("World") + "<br />")
- document.write(str.indexOf("world"))
- </script>
- // 输出
- // 0
- // -1
- // 6
- 7,lastIndexOf
用法: lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置, 在一个字符串中的指定位置从后向前搜索.
- stringObject.lastIndexOf(searchvalue,fromindex)
- // 如果在 stringObject 中的 fromindex 位置之前存在 searchvalue, 则返回的是出现的最后一个 searchvalue 的位置.
- // 该方法将从尾到头地检索字符串 stringObject, 看它是否含有子串 searchvalue. 开始检索的位置在字符串的 fromindex 处或字符串的结尾(没有指定 fromindex 时). 如果找到一个 searchvalue, 则返回 searchvalue 的第一个字符在 stringObject 中的位置. stringObject 中的字符位置是从 0 开始的.
- //lastIndexOf() 方法对大小写敏感!
- // 如果要检索的字符串值没有出现, 则该方法返回 -1.
- <script type="text/javascript">
- var str="Hello world!"
- document.write(str.lastIndexOf("Hello") + "<br />")
- document.write(str.lastIndexOf("World") + "<br />")
- document.write(str.lastIndexOf("world"))
- </script>
- // 输出
- // 0
- // -1
- // 6
- 8,reduce
用法: reduce() 方法接收一个函数作为累加器, 数组中的每个值 (从左到右) 开始缩减, 最终计算为一个值.
reduce() 可以作为一个高阶函数, 用于函数的 compose.
reduce() 对于空数组是不会执行回调函数的.
- // 用法
- array.reduce(
- function(
- total,
- currentValue,
- currentIndex,
- arr
- ),
- initialValue
- )
- //total 必需. 初始值, 或者计算结束后的返回值.
- // 实例: 四舍五入后计算数组元素的总和
- <button onclick="myFunction()">点我</button>
- <p > 数组元素之和: <span id="demo"></span></p>
- <script>
- var numbers = [15.5, 2.3, 1.1, 4.7];
- function getSum(total, num) {
- return total + Math.round(num);
- }
- function myFunction(item) {
- document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
- }
- </script>
- 9,reduceRight
reduceRight()方法的功能和 reduce()功能是一样的,
不同的是 reduceRight()从数组的末尾向前将数组中的数组项做累加.
来源: https://www.cnblogs.com/yangyangxxb/p/10125913.html