|
@@ -0,0 +1,107 @@
|
|
|
|
|
+<!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>
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li>内容一</li>
|
|
|
|
|
+ <li>内容二</li>
|
|
|
|
|
+ <li>内容三</li>
|
|
|
|
|
+ <li>内容四</li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <script>
|
|
|
|
|
+ var arr = ["小明", "小红", "Lucy"];
|
|
|
|
|
+ let obj = {
|
|
|
|
|
+ name: "赵家锐",
|
|
|
|
|
+ age: 22,
|
|
|
|
|
+ sex: "男",
|
|
|
|
|
+ };
|
|
|
|
|
+ // for(var i=0;i<arr.length;i++) {
|
|
|
|
|
+ // console.log(arr[i]);
|
|
|
|
|
+ // }
|
|
|
|
|
+ // 1.forEach
|
|
|
|
|
+ arr.forEach((ele, index) => {
|
|
|
|
|
+ console.log(ele, "ele"); // 每一项
|
|
|
|
|
+ console.log(index, "index"); // 下标
|
|
|
|
|
+ });
|
|
|
|
|
+ // 2.for of:遍历数组时 key代表数组中的每一项；不可以遍历对象；所以这个一般用于遍历数组
|
|
|
|
|
+ for (var key of arr) {
|
|
|
|
|
+ console.log(key, "key");
|
|
|
|
|
+ }
|
|
|
|
|
+ // for(var key of obj) {
|
|
|
|
|
+ // console.log(key,'key1')
|
|
|
|
|
+ // }
|
|
|
|
|
+ // 3.for in:遍历数组时，key代表数组中的索引(下标);遍历对象时 key代表对象中的属性
|
|
|
|
|
+ for (var key in arr) {
|
|
|
|
|
+ console.log(key, "in");
|
|
|
|
|
+ }
|
|
|
|
|
+ for (var key in obj) {
|
|
|
|
|
+ console.log(key, "in1");
|
|
|
|
|
+ }
|
|
|
|
|
+ let arr1 = [1, 2, 3, 4, 5, 6];
|
|
|
|
|
+ // 4.filter 过滤 将符合过滤条件的元素返回到新数组中 原数组不发生更改
|
|
|
|
|
+ let arr2 = arr1.filter((ele) => {
|
|
|
|
|
+ return ele >= 4;
|
|
|
|
|
+ });
|
|
|
|
|
+ console.log(arr2, "arr2");
|
|
|
|
|
+ console.log(arr1, "arr1");
|
|
|
|
|
+ let arr3 = [
|
|
|
|
|
+ {
|
|
|
|
|
+ age: 12,
|
|
|
|
|
+ name: "LiLi",
|
|
|
|
|
+ content: "好好学习",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ age: 22,
|
|
|
|
|
+ name: "赵某人",
|
|
|
|
|
+ content: "上课睡觉",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ age: 32,
|
|
|
|
|
+ name: "Lucy",
|
|
|
|
|
+ content: "过年",
|
|
|
|
|
+ },
|
|
|
|
|
+ ];
|
|
|
|
|
+ // ele => Element
|
|
|
|
|
+ let arr4 = arr3.filter((ele) => {
|
|
|
|
|
+ return ele.age > 20;
|
|
|
|
|
+ });
|
|
|
|
|
+ console.log(arr4, "arr4");
|
|
|
|
|
+ // 5.map 主要是为了映射出一个新数组 将特定的函数条件返给新数组 不会改变原数组
|
|
|
|
|
+ let arr5 = arr1.map((ele) => {
|
|
|
|
|
+ return ele * 2;
|
|
|
|
|
+ });
|
|
|
|
|
+ console.log(arr5, "arr5");
|
|
|
|
|
+ console.log(arr1, "arr1");
|
|
|
|
|
+ // 5.some 判断数组是否符合当前条件 有一个符合 则为true;都不符合 才为false
|
|
|
|
|
+ var newArr = [34, 23, 56, 76, 54, 18];
|
|
|
|
|
+ let arr6 = newArr.some((ele) => {
|
|
|
|
|
+ return ele > 70;
|
|
|
|
|
+ });
|
|
|
|
|
+ console.log(arr6, "arr6");
|
|
|
|
|
+ //6.every 判断数组是否符合当前条件 有一个不符合 则为false;都符合 才为true
|
|
|
|
|
+ let arr7 = newArr.every((ele) => {
|
|
|
|
|
+ return ele > 10;
|
|
|
|
|
+ });
|
|
|
|
|
+ console.log(arr7, "arr7");
|
|
|
|
|
+ // 7.reduce 从左到右 累增累减
|
|
|
|
|
+ let arr8 = newArr.reduce((total, num) => {
|
|
|
|
|
+ return total + num;
|
|
|
|
|
+ });
|
|
|
|
|
+ console.log(arr8, "arr8");
|
|
|
|
|
+ // 8.find 查找符合当前条件的第一个值并返回
|
|
|
|
|
+ let arr9 = newArr.find((ele) => {
|
|
|
|
|
+ return ele > 10;
|
|
|
|
|
+ });
|
|
|
|
|
+ console.log(arr9, "arr9");
|
|
|
|
|
+ // 9.类数组 转为 正常数组 Array.from()
|
|
|
|
|
+ var list = document.querySelectorAll("ul li");
|
|
|
|
|
+ console.log(list,'list');
|
|
|
|
|
+ console.log([...list],'list');
|
|
|
|
|
+ console.log(Array.from(list));
|
|
|
|
|
+ </script>
|
|
|
|
|
+ </body>
|
|
|
|
|
+</html>
|
e