|
|
@@ -0,0 +1,153 @@
|
|
|
+<!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>
|
|
|
+ let arr = [1,2,3,4,5,6,7,8,9,10];
|
|
|
+
|
|
|
+ // 1. for循环
|
|
|
+ // for(let i=0;i<arr.length;i++){
|
|
|
+ // console.log(arr[i]);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 2. forEach循环
|
|
|
+ // 回调函数中可以传递3个参数
|
|
|
+ // 1. 数组中的每一个元素
|
|
|
+ // 2. 数组中的每一个元素的索引
|
|
|
+ // 3. 数组本身
|
|
|
+ // arr.forEach(function(val,index,thisArr){
|
|
|
+ // console.log(val,index,thisArr);
|
|
|
+ // })
|
|
|
+ // 可以只接收数组内的值，不接收索引和数组本身
|
|
|
+ // arr.forEach(function(val){
|
|
|
+ // console.log(val);
|
|
|
+ // })
|
|
|
+
|
|
|
+ // 3. map循环
|
|
|
+ // 回调函数中可以传递3个参数
|
|
|
+ // 1. 数组中的每一个元素
|
|
|
+ // 2. 数组中的每一个元素的索引
|
|
|
+ // 3. 数组本身
|
|
|
+ // map循环和forEach循环的区别
|
|
|
+ // 1. map循环有返回值，forEach循环没有返回值
|
|
|
+ // 2. map循环一般用作于对数组中的每一个元素进行操作
|
|
|
+ // let newArr = arr.map(function(val,index,thisArr){
|
|
|
+ // // console.log(val,index,thisArr);
|
|
|
+ // return "a" + val;
|
|
|
+ // })
|
|
|
+ // console.log(newArr);
|
|
|
+
|
|
|
+ // 4. filter循环
|
|
|
+ // filter循环和map循环的区别
|
|
|
+ // filter 常用作与过滤数组的值
|
|
|
+ // 只有循环返回true的时候才有资格进入新数组
|
|
|
+ // let newArr = arr.filter(function(val,index,thisArr){
|
|
|
+ // if(val > 5){
|
|
|
+ // return true
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // console.log(newArr);
|
|
|
+
|
|
|
+ // 5. some循环
|
|
|
+ // some常用作于判断数组中是否有满足条件的元素
|
|
|
+ // 只要有一个元素满足条件，就会返回true
|
|
|
+ // 所有元素都不满足条件，才会返回false
|
|
|
+ // let bool = arr.some(function(val,index,thisArr){
|
|
|
+ // if(val > 5){
|
|
|
+ // // 如果满足条件一定要 return true
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // console.log(bool);
|
|
|
+
|
|
|
+ //6. every循环
|
|
|
+ // every循环和some循环的区别
|
|
|
+ // every循环只有所有元素都满足条件，才会返回true
|
|
|
+ // 哪怕只要有一个元素不满足条件，就会返回false
|
|
|
+ // let bool = arr.every(function(val,index,thisArr){
|
|
|
+ // if(val >5){
|
|
|
+ // // 如果满足条件一定要 return true
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // console.log(bool);
|
|
|
+
|
|
|
+ // 7. reduce循环
|
|
|
+ // 一共四个参数
|
|
|
+ // 1. 上一次的返回值
|
|
|
+ // 2. 当前的元素
|
|
|
+ // 3. 当前的索引
|
|
|
+ // 4. 数组本身
|
|
|
+ // 常用作于数组的累加
|
|
|
+ // arr.reduce(function(pre,next,index,thisArr){
|
|
|
+ // console.log(pre,next,index,thisArr);
|
|
|
+ // return pre + next;
|
|
|
+ // })
|
|
|
+
|
|
|
+ // 8. for in 循环
|
|
|
+ // 遍历对象的属性
|
|
|
+
|
|
|
+ // let person = {
|
|
|
+ // name:"张三",
|
|
|
+ // age:18,
|
|
|
+ // sex:"男",
|
|
|
+ // school:"清华大学"
|
|
|
+ // }
|
|
|
+ // for(let key in person){
|
|
|
+ // console.log(key);
|
|
|
+ // // 如果想通过一个变量去对中找相匹配的属性用[]
|
|
|
+ // console.log(person[key])
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 9. find 循环
|
|
|
+ // find 返回第一个满足条件的值
|
|
|
+ // let newVal = arr.find(function(val,index,thisArr){
|
|
|
+ // if(val >5){
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // console.log(newVal)
|
|
|
+
|
|
|
+ // 10. findIndex 循环
|
|
|
+ // findIndex 返回第一个满足条件的索引
|
|
|
+ // let newIndex = arr.findIndex(function(val,index,thisArr){
|
|
|
+ // if(val > 5){
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // console.log(newIndex)
|
|
|
+
|
|
|
+ // 11. for of 循环
|
|
|
+ // for of 循环数组（可迭代的对象）
|
|
|
+
|
|
|
+ // for(let val of arr){
|
|
|
+ // console.log(val);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 通过添加keys()方法可以获取数组的索引
|
|
|
+ // for(let index of arr.keys()){
|
|
|
+ // console.log(index);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 通过添加values()方法可以获取数组的值
|
|
|
+ // for(let val of arr.values()){
|
|
|
+ // console.log(val);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 通过添加entries()方法可以获取数组的索引和值
|
|
|
+ // for(let _val of arr.entries()){
|
|
|
+ // console.log(_val[0],_val[1]);
|
|
|
+ // }
|
|
|
+ // 通过结构赋值直接将索引和值赋值给变量
|
|
|
+ for(let [val,index] of arr.entries()){
|
|
|
+ console.log(val,index);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
