ES5和ES6那些你必須知道的事兒

　　ES5和ES6那些你必須知道的事兒
　　
　　ES5新增的東西
　　
　　1、數組方法
　　
　　一、forEach
　　
　　用途：遍歷，循環
　　
　　對於空數組不會執行回調函數
　　
　　複製代碼
　　
　　//用法
　　
　　array.forEach(
　　
　　function(currentValue,www.gcyl152.com 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( www.yongshiyule178.com item) {
　　
　　sum += item;
　　
　　demo.innerHTML = sum;
　　
　　}
　　
　　</script>
　　
　　複製代碼
　　
　　二、map
　　
　　用途：映射
　　
　　map() 方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。
　　
　　map() 方法按照原始數組元素順序依次處理元素。
　　
　　map() 方法不會對空數組進行檢測。
　　
　　map() 方法不會改變原始數組
　　
　　複製代碼
　　
　　//用法
　　
　　array.map(
　　
　　function(currentValue,www.yigouyule2.cn  index,arr),
　　
　　thisValue
　　
　　)
　　
　　var numbers = [65, 44, 12, 4];
　　
　　function multiplyArrayElement(num) {
　　
　　return num * document.getElementById("multiplyWith").value;
　　
　　}
　　
　　function myFunction() {
　　
　　document.getElementById(www.mcyllpt.com/"demo").innerHTML = numbers.map(multiplyArrayElement);
　　
　　}
　　
　　複製代碼
　　
　　三、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>
　　
　　複製代碼
　　
　　四、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
　　
　　複製代碼
　　
　　五、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
　　
　　複製代碼
　　
　　六、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
　　
　　複製代碼
　　
　　七、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
　　
　　複製代碼
　　
　　八、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>
　　
　　複製代碼
　　
　　九、reduceRight
　　
　　reduceRight()方法的功能和reduce()功能是同樣的，
　　
　　不一樣的是reduceRight()從數組的末尾向前將數組中的數組項作累加。