ES5和ES6那些你必须知道的事儿(一)

ECMAScript · 發表 2018-12-16 11:13:00

摘要： ES5和ES6那些你必须知道的事儿 ES5新增的东西一、数组方法 1、 forEach 用途：遍历，循环对于空数组不会执行回调函数 //用法 array.forEach( function(currentValue,...

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() 从数组的末尾向前将数组中的数组项做累加。

ES5和ES6那些你必须知道的事儿(一)