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

相关文章
相关标签/搜索