|
|
@@ -0,0 +1,109 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <script>
|
|
|
+ // es5常用循环
|
|
|
+ // for循环
|
|
|
+ let arr = [1,2,3,4,5,6,7,8,9];
|
|
|
+ // for(var i=0;i<arr.length;i++){
|
|
|
+ // console.log(arr[i]);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // forEach 函数内接收三个参数 分别是 数组内的每一个元素 元素的索引 数组本身
|
|
|
+ // arr.forEach(function(item,index,arr){
|
|
|
+ // console.log(item,index,arr);
|
|
|
+ // })
|
|
|
+
|
|
|
+ // map 函数内接收三个参数 分别是 数组内的每一个元素 元素的索引 数组本身
|
|
|
+ // map 方法返回一个新数组 数组内的每一个元素都是函数内的返回值
|
|
|
+ // 使用场景：对数组内每一个值进行相应的处理 并返回一个新数组
|
|
|
+ // let resArr = arr.map(function(item,index,arr){
|
|
|
+ // // console.log(item,index,arr);
|
|
|
+ // return item * 10;
|
|
|
+ // })
|
|
|
+ // console.log(resArr);
|
|
|
+
|
|
|
+ // filter 函数内接收三个参数 分别是 数组内的每一个元素 元素的索引 数组本身
|
|
|
+ // filter 方法返回一个新数组 数组内的每一个元素都是函数内返回值为true的元素
|
|
|
+ // 使用场景：对数组内每一个值进行相应的判断 并返回一个新数组
|
|
|
+ // let resArr = arr.filter(function(item,index,arr){
|
|
|
+ // // 筛选出数组内的偶数
|
|
|
+ // return item % 2 == 0;
|
|
|
+ // })
|
|
|
+ // console.log(resArr);
|
|
|
+
|
|
|
+ // some 函数内接收三个参数 分别是 数组内的每一个元素 元素的索引 数组本身
|
|
|
+ // some 方法返回一个布尔值 只要有一个元素符合条件 就返回true 否则返回false
|
|
|
+ // 使用场景：对数组内每一个值进行相应的判断 只要有一个符合条件 就返回true 否则返回false
|
|
|
+ // let res = arr.some(function(item,index,arr){
|
|
|
+ // // 判断数组内是否含有5
|
|
|
+ // return item == 5;
|
|
|
+ // })
|
|
|
+ // console.log(res);
|
|
|
+
|
|
|
+ // every 函数内接收三个参数 分别是 数组内的每一个元素 元素的索引 数组本身
|
|
|
+ // every 方法返回一个布尔值 只要有一个元素不符合条件 就返回false 否则返回true
|
|
|
+ // 使用场景：对数组内每一个值进行相应的判断 只要有一个不符合条件 就返回false 否则返回true
|
|
|
+ // let res = arr.every(function(item,index,arr){
|
|
|
+ // // 判断数组内是否所有元素都大于5
|
|
|
+ // return item > 5;
|
|
|
+ // })
|
|
|
+ // console.log(res);
|
|
|
+
|
|
|
+ // reduce 函数内接收四个参数 分别是 上一次的返回值 当前元素 当前元素的索引 数组本身
|
|
|
+ // reduce 方法返回一个值 数组内的每一个元素都进行函数内的操作 并将结果返回
|
|
|
+ // 使用场景：对数组内每一个值进行累加操作 并将结果返回
|
|
|
+ // let res = arr.reduce(function(pre,cur,index,arr){
|
|
|
+ // console.log(pre,cur,index,arr);
|
|
|
+ // return pre + cur;
|
|
|
+ // })
|
|
|
+ // console.log(res);
|
|
|
+
|
|
|
+ // es6 新增遍历方法
|
|
|
+ // find
|
|
|
+ // find 函数内接收三个参数 分别是 数组内的每一个元素 元素的索引 数组本身
|
|
|
+ // find 方法返回一个值 数组内的每一个元素都进行函数内的操作 并将第一个符合条件的元素返回
|
|
|
+ // 使用场景：对数组内每一个值进行相应的判断 并返回第一个符合条件的元素
|
|
|
+ // let res = arr.find(function(item,index,arr){
|
|
|
+ // return item == 5;
|
|
|
+ // })
|
|
|
+ // console.log(res);
|
|
|
+
|
|
|
+ // findIndex
|
|
|
+ // findIndex 函数内接收三个参数 分别是 数组内的每一个元素 元素的索引 数组本身
|
|
|
+ // findIndex 方法返回一个值 数组内的每一个元素都进行函数内的操作 并将第一个符合条件的元素的索引返回
|
|
|
+ // 使用场景：对数组内每一个值进行相应的判断 并返回第一个符合条件的元素的索引
|
|
|
+ // let res = arr.findIndex(function(item,index,arr){
|
|
|
+ // return item == 5;
|
|
|
+ // })
|
|
|
+ // console.log(res);
|
|
|
+
|
|
|
+
|
|
|
+ // for ... of循环
|
|
|
+ // of 循环 可以遍历数组内的每一个元素 默认左侧定一个变量接收每一次循环的值 右侧 需要循环的数组
|
|
|
+ // for(let item of arr){
|
|
|
+ // console.log(item);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // keys() 返回数组中每一个值的索引
|
|
|
+ // for(let index of arr.keys()){
|
|
|
+ // console.log(index);
|
|
|
+ // }
|
|
|
+ // values() 返回数组中每一个值 什么也不写默认就是返回数组内的每一个值
|
|
|
+ // for(let value of arr.values()){
|
|
|
+ // console.log(value);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // entries() 返回数组中每一个值的索引和值
|
|
|
+ for(let item of arr.entries()){
|
|
|
+ console.log(item);
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
