JavaScript 数组挖掘，不只是讲数组哟

  • A+
所属分类：Web前端
摘要

数组引用类型分析： 多维数组操作： Array.of与数组创建细节： 类型检测与转换：
便宜好用的国外VPS推荐

数组引用类型分析：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>      <script>         //数组的标准定义方法         // let arr = new Array(1, 2, 3, 4);         // console.log(arr);         // console.log(arr.join('|'));          // 数组的字面量形式         // let arr = [1, 2, 3, 4];         // console.log(arr);         // console.log(typeof arr);          // 数组的赋值是引用类型的         // let arr1 = [11, 22, 33];         // let arr2 = arr1;         // arr1[2] = 555;         // console.log(arr2);         // console.log(arr1);          // 值类型         // let a = 1;         // let b = a;         // b = 99;         // console.log(b);         // console.log(a);          let arr = [11, 22, 33, 44];         console.log(arr);         console.table(arr);          let a = 1;         console.table(a);     </script> </body>  </html>

 

多维数组操作：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>      <script>         // let arr = [11, 22, 33];         // console.log(arr[0]);          // let arr = [         //     [11, 22, 33],         //     [44, 55, 66]         // ];         // console.log(arr[1][2]);          // let lessons = [         //     { name: 'js', click: 11 },         //     { name: 'html', click: 22 },         //     { name: 'css', click: 33 },         // ];         // console.log(lessons[2].name);          // 值类型的使用const之后不能改动         // const a = 1;         // console.log(a);         // a = 2;         // console.log(a);          //数组属于引用类型，使用const之后还是可以改动的         const arr = [11, 22, 33];         arr[0] = 44;         console.log(arr);     </script> </body>  </html>

 

Array.of与数组创建细节：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>      <script>         // let arr = [11, 22, 33, 44, 55];         // console.log(arr.length);          // 数组索引跳跃后，系统会自动用undefined填充         // let arr = [11];         // arr[4] = 55;         // console.log(arr);         // console.log(arr.length);         // console.log(arr[2]);          // let arr = new Array(11, 22, 33);         // console.log(arr.length);         // console.table(arr);          // 如果使用构造函数方式定义数组，那么只填写一个数字时，默认为数组的长度，而不是一个数组的元素         // let arr = new Array(6);         // console.log(arr.length);         // console.table(arr);          // 使用Array.of来解决上面的问题         let arr = Array.of(6);         console.log(arr.length);         console.table(arr);     </script> </body>  </html>

 

类型检测与转换：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>     <div>cyy1</div>     <div>cyy2</div>      <script>         // Array.isArray() 判断是否是数组         // console.log(Array.isArray(1, 2, 3));         // console.log(Array.isArray([1, 2, 3]));         // console.log(Array.isArray({}));         // console.log(Array.isArray(1));          // 数组转字符串         // console.log([1, 2, 3].toString());         // console.log(String([1, 2, 3]));         // console.log(typeof [1, 2, 3].toString());         // console.log(typeof String([1, 2, 3]));         // console.log([1, 2, 3].join('~'));         // console.log(location.href + '?id=' + [1, 2, 3].join('-'));          // 字符串转数组         // let str = 'a,b,c,d,e,f,g';         // console.log(str.split(','));         // let str2 = '1234';         // console.log(Array.from(str2));         // 只要是含有length属性的基本都可以使用Array.from()转数组          // 当对象含有length属性时，也可以使用Array.from()转数组，注意索引需要是数字         // let obj = {         //     name: 'cyy',         //     age: 18         // };         // console.log(Array.from(obj));          // let obj = {         //     name: 'cyy',         //     age: 18,         //     length: 2         // };         // console.log(Array.from(obj));          // let obj = {         //     0: 'cyy',         //     1: 18,         //     length: 2         // };         // console.log(Array.from(obj));          let divs = document.querySelectorAll('div');         let res = Array.from(divs, function (item) {             item.style.backgroundColor = 'pink';             console.log(item.innerHTML);             return item;         });         console.table(res);     </script> </body>  </html>

 

 JavaScript 数组挖掘，不只是讲数组哟

 

 

展开语法真的好用啊：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>         // let arr = [11, 22, 33];         // let arr2 = [44, 55, 66];         // for (const i of arr2) {         //     arr.push(i);         // }         // console.table(arr);          // console.table(arr.concat(arr2));          // console.log([...arr, ...arr2]);          // 不定数量求和         // function my_sum(...args) {         //     return args.reduce((s, v) => {         //         return s += v;         //     }, 0);         // }         // console.log(my_sum(1, 33, 55));      </script> </body>  </html>

 

点语法操作DOM节点元素：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>         .hide {             display: none;         }     </style> </head>  <body>      <div>cyy1</div>     <div>cyy2</div>      <script>          const divs = document.querySelectorAll('div');         // 把DOM元素转数组进行操作的n种方法         // divs.map(item => console.log(item));         // 1、Array.from 转数组         // Array.from(divs).map(item => console.log(item));         // 2、原型链中的方法         // Array.prototype.map.call(divs, item => console.log(item));         // 3、点语法         // [...divs].map(item => console.log(item));         [...divs].map(item => {             item.addEventListener('click', function () {                 this.classList.toggle('hide');             })         });     </script> </body>  </html>

 

使用解构赋值提高效率：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>         // let arr = ['cyy', 2020];         // let name = arr[0];         // let year = arr[1];         // console.log(name, year);          // 解构赋值 语法糖         // let arr = ['cyy', 2020];         // let [name, year] = arr;         // console.log(name, year);          // function get() {         //     return ['cyy', 2020];         // }         // let [name, year] = get();         // console.log(name, year);          // 字符串转数组         // let str = 'cyyisis';         // let [...arr] = str;         // console.log(arr);         // console.log(...str);          // 使用逗号进行占位         // let [, num2] = [11, 22];         // console.log(num2);          // 解构赋值与展开语法的组合运用         // let [name, ...args] = ['cyy', 11, 22, 33];         // console.log(name);         // console.log(args);         // let arr2 = ['cyy2', ...args];         // console.log(arr2);          // 解构赋值配合默认值         // let [name, year = 2020] = ['cyy'];         // console.log(name, year);          // function show([name, year]) {         //     console.log(name, year);         // }         // show(['cyy', 2020]);          function show(...args) {             console.log(args);         }         show([11, 22, 33]);     </script> </body>  </html>

 

添加元素的多种操作技巧：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>         // let arr = [11, 22];         // arr[2] = 33;         // arr[arr.length] = 44;         // console.table(arr);          // 使用点语法一次向数组追加多个元素         // let arr2 = [33, 44, 55];         // console.log([...arr, ...arr2]);          // arr.push(33);         // arr.push(44, 55, 66);         // console.table(arr);          // push的返回值是数组的个数         // let arr2 = [44, 66, 88];         // let length = arr.push(99, ...arr2);         // console.log(length);         // console.log(arr);          function rangeArray(start, end) {             let arr = [];             for (let i = start; i <= end; i++) {                 arr.push(i);             }             return arr;         }         console.log(rangeArray(1, 7));     </script> </body>  </html>

 

数据出栈与入栈及填充操作：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>         // push从后面追加，pop从后面弹出         // let arr = [11, 22, 33, 44, 55];         // let num = arr.pop();         // console.log(num, arr);          // unshift从前面添加，shift从前面弹出         // let arr = [11, 22, 33, 44, 55];         // let num = arr.unshift(55, 66);         // console.log(num, arr);          // let arr = [11, 22, 33, 44, 55];         // let num = arr.shift();         // console.log(num, arr);          // 数组填充以及填充的起始结束位置         // let arr = new Array(5);         // console.log(arr);         // let arr = new Array(5).fill('11');         // console.log(arr);         // let arr = new Array(5).fill('11', 2, 4);         // console.log(arr);     </script> </body>  </html>

 

splice与slice实现数组的增删改查：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>         // slice不会改变原数组         // let arr = [11, 22, 33, 44, 55];         // let res = arr.slice();         // console.log(res);         // let res2 = arr.slice(2);         // console.log(res2);         // // 两个参数时，第一个代表起始（包含），第二个代表结束（不包含）         // let res3 = arr.slice(1, 3);         // console.log(res3);          // splice会改变原数组，第二个参数表示截取几个         // splice实现删除操作         // let arr = [11, 22, 33, 44, 55];         // // let res = arr.splice(1);         // // console.log(res, arr);         // let res = arr.splice(1, 3);         // console.log(res, arr);          // splice实现替换操作         // let arr = [11, 22, 33, 44, 55];         // // let res = arr.splice(1, 1, 77);         // // console.log(res, arr);         // let res = arr.splice(1, 1, 77, 88);         // console.log(res, arr);          // splice实现插入操作         // let arr = [11, 22, 33, 44, 55];         // // let res = arr.splice(1, 0, 77);         // // console.log(res, arr);         // let res = arr.splice(1, 0, 77, 88);         // console.log(res, arr);          // splice向后面追加         // let arr = [11, 22, 33, 44, 55];         // let res = arr.splice(arr.length, 0, 77);         // console.log(res, arr);          // splice向前面追加         let arr = [11, 22, 33, 44, 55];         let res = arr.splice(0, 0, 77);         console.log(res, arr);        </script> </body>  </html>

 

数组移动函数实例：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>         let arr = [11, 22, 33, 44, 55, 66, 77];         function move(arr, from, to) {             if (from < 0 || to >= arr.length) {                 console.error('参数错误~');                 return;             }             let item = arr.splice(from, 1); //此处的item是一个数组，需要使用扩展福展开             console.log(item, arr);             arr.splice(to, 0, ...item);             return arr;         }         console.log(move(arr, 2, 4));      </script> </body>  </html>

 

清空数组的多种处理方式：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>         // let arr = [11, 22, 33, 44, 55, 66, 77];         // // arr = [];         // // arr.length = 0;         // // arr.splice(0);         // // arr.splice(0, arr.length);         // // while (arr.pop()) { }         // console.log(arr);          // let arr = [11, 22, 33, 44, 55, 66, 77];;         // let arr2 = arr;         // arr = [];// 相当于给arr指向了一个新的空白地址，但是arr2仍然是原来的地址         // console.log(arr, arr2);          let arr = [11, 22, 33, 44, 55, 66, 77];;         let arr2 = arr;         arr.length = 0;// 把原来的地址清空了         console.log(arr, arr2);      </script> </body>  </html>

 

数组的拆分与合并操作：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>          // let str = "11,22,33";         // let arr = str.split(',');         // console.log(str.split(','));         // let str2 = arr.join('--');         // console.log(str2);          // let arr = [11, 22];         // let arr2 = [33, 44];         // let arr3 = [55];         // console.log(arr.concat(arr2, arr3));         // console.log([...arr, ...arr2, ...arr3]);          // copyWithin数组内部的复制         // 第一个参数时复制目标的起始位置         // 第二个参数是被复制的元素的起始位置（包含）         // 第三个参数时被复制的元素的结束位置（不包含）         // let arr = [11, 22, 33, 44, 55, 66, 77];         // console.log(arr.copyWithin(2, 3, 6));     </script> </body>  </html>

 

查找元素基本使用：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>          let arr = [11, 22, 33, 44, 55, 66, 77, 33];         // console.log(arr.indexOf(33));         // console.log(arr.lastIndexOf(33));         // if (arr.indexOf(33) != -1) {         //     console.log('找到了');         // }          // console.log(arr.includes(44));         // if (arr.includes(44)) {         //     console.log('找到了');         // }          // 第二个参数指定从哪个位置开始查找         // console.log(arr.indexOf(33));         // console.log(arr.indexOf(33, 3));     </script> </body>  </html>

 

includes方法原理实现：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>          let array = [11, 22, 33, 44, 55, 66, 77, 33];         function includes(arr, find) {             for (const item of arr) {                 if (item == find) return true;             }             return false;         }         console.log(includes(array, 33));     </script> </body>  </html>

 

高效的find与findIndex新增方法：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>          let array = [11, 22, 33, 44, 55, 66, 77, 33];         // let res = array.find(item => {         //     return item == 22;         // });         // console.log(res);          // let res = array.find(item => {         //     return item == 2;         // });         // console.log(res);          // 引用类型无法直接比较         // find返回值，findIndex返回索引位置         let lessons = [             { name: 'cyy1' },             { name: 'cyy2' },             { name: 'cyy3' },         ];         // let res = lessons.includes({ name: 'cyy2' });         // console.log(res);          // let res = lessons.find(item => {         //     return item.name == "cyy2";         // })         // console.log(res);          let res = lessons.findIndex(item => {             return item.name == "cyy2";         })         console.log(res);     </script> </body>  </html>

 

自定义find原型方法实现：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>          let array = [11, 22, 33, 44, 55, 66, 77, 33];         function find(arr, callback) {             for (const item of arr) {                 if (callback(item)) return true;             }             return false;         };         console.log(find(array, function (item) {             return item == 22;         }));          // 使用原型链实现相同的效果         Array.prototype.myFindIndex = function (callback) {             for (const item of this) {                 if (callback(item)) return true;             }             return false;         };         console.log(array.myFindIndex(function (item) {             return item == 222;         }));     </script> </body>  </html>

 

数组排序使用技巧：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>         // a-b从小到大         // let arr = [11, 22, 33, 44, 55, 66, 77, 33];         // arr.sort(function (a, b) {         //     return a - b;         // });         // console.log(arr);          // b-a从大到小         // let arr = [11, 22, 33, 44, 55, 66, 77, 33];         // arr.sort(function (a, b) {         //     return b - a;         // });         // console.log(arr);          let cart = [             { name: 'iphone', price: 12000 },             { name: 'imax', price: 18000 },             { name: 'ipad', price: 5000 },         ];         cart = cart.sort(function (a, b) {             return a.price - b.price;         });         console.table(cart);     </script> </body>  </html>

JavaScript 数组挖掘，不只是讲数组哟

 

 

sort排序算法原理实现：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">     <style>      </style> </head>  <body>       <script>         // a-b从小到大         let arr = [22, 44, 55, 77, 33, 66, 11];         function sort(arr, callback) {             for (let i in arr) {                 for (let j in arr) {                     if (callback(arr[i], arr[j]) < 0) {                         let temp = arr[i];                         arr[i] = arr[j];                         arr[j] = temp;                     }                 }             }             return arr;         }         console.log(sort(arr, function (a, b) {             return a - b;         }));         console.log(sort(arr, function (a, b) {             return b - a;         }));     </script> </body>  </html>

 

循环操作中引用类型使用技巧：

 

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> </head>  <body>      <script>         let lessons = [{             title: 'title1',             cate: 'html'         }, {             title: 'title2',             cate: 'css'         }, {             title: 'title3',             cate: 'js'         }];          // for (let i = 0; i > lessons.length; i++) {         //     lessons[i].title = `cyy${lessons[i].title}`;         // }          // for (const value of lessons) {         //     value.title = `cyy${value}`;         // }          for (const key in lessons) {             lessons[key].title = `cyy${lessons[key].title}`;         }         console.table(lessons);          // for of 操作值类型，不会改变原来的数据         // 操作引用类型，会改变原来的数据         // let arr = [1, 2, 3];         // for (let a of arr) {         //     a++;         // }         // console.log(arr);          // let arr = [{         //     n: 1         // }, {         //     n: 2         // }];         // for (let a of arr) {         //     a.n++;         // }         // console.log(arr);     </script> </body>  </html>

 

forEach 循环方法使用：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <style>         .disabled {             color: #ddd;         }     </style> </head>  <body>     <ul>         <li>html</li>         <li>css</li>     </ul>     <script>         let lessons = [{             title: 'title1',             cate: 'html'         }, {             title: 'title2',             cate: 'css'         }, {             title: 'title3',             cate: 'js'         }];          // lessons.forEach(function(item, index, array) {         //     // item循环的项,index索引,array原数据         //     // console.log(item, index, array);         //     // 默认this是指window对象         //     console.log(this);         // });          // lessons.forEach(function(item, index, array) {         //     // 改变了this的指向         //     console.log(this);         // }, {});          // forEach也是操作引用类型能改变原来的值         // 操作值类型无法改变         // lessons.forEach(function(item, index, array) {         //     item.title = item.title.substr(0, 2);         // });         // console.log(lessons);          let lis = document.querySelectorAll('ul li');         console.log(lis);         // DOM转数组         console.log(Array.from(lis));         console.log([...lis]);         // forEach可以直接操作DOM元素         lis.forEach(item => {             console.log(item);             item.addEventListener('click', function() {                 this.classList.toggle('disabled');             });         });     </script> </body>  </html>

JavaScript 数组挖掘，不只是讲数组哟

 

 

iterator迭代器方法玩转数组：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <style>      </style> </head>  <body>      <script>         let arr = ['html', 'css', 'js'];         // let keys = arr.keys();         // console.log(keys.next());         // console.log(keys.next());         // console.log(keys.next());         // let {         //     value,         //     done         // } = keys.next();         // console.log(value);          // let values = arr.values();         // let {         //     value,         //     done         // } = values.next();         // console.log(value);          // next进行迭代         // let values = arr.values();         // while (({         //         value,         //         done         //     } = values.next()) && done === false) {         //     console.log(value);         // }          // for of使用迭代方法操作数组         // for (let value of arr.values()) {         //     console.log(value);         // }         // for (let key of arr.keys()) {         //     console.log(key);         // }          // entries=values+keys         // let entries = arr.entries();         // console.log(entries); // Array Iterator {}迭代器         // let {         //     value,         //     done         // } = entries.next();         // console.log(value);         // console.log(done);          let entries = arr.entries();         console.log(entries); // Array Iterator {}迭代器         // let {         //     value: [a, b],         //     done         // } = entries.next();         // console.log(a);         // console.log(b);         // console.log(done);          // for (let value of entries) {         //     console.log(value);         // }         for (let [a, b] of entries) {             console.log(a + '--' + b);         }     </script> </body>  </html>

 

every与some是这么用的：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <style>      </style> </head>  <body>     <input type="text" name="title">     <span id="msg"></span>      <script>         // every所有元素返回真，则返回真；有一个元素返回假，则返回假         // let arr = ['html', 'css', 'js'];         // let res = arr.every((item, index, arr) => {         //     console.log(item);         //     return true;         // });         // console.log(res);          // let arr = ['html', 'css', 'js'];         // let res = arr.every((item, index, arr) => {         //     console.log(item);         //     return false;         // });         // console.log(res);          // const user = [{         //     name: 'cyy1',         //     score: 99         // }, {         //     name: 'cyy2',         //     score: 66         // }, {         //     name: 'cyy3',         //     score: 54         // }, ];         // let res = user.every((item) => {         //     return item.score >= 60;         // });         // console.log(res ? '全部及格' : '有人没及格');          let keywords = ['html', 'css', 'js'];         document.querySelector('[name=title]').addEventListener('keyup', function() {             let res = keywords.some((item) => {                 return this.value.includes(item);             });             document.querySelector('#msg').innerHTML = res ? '' : ('必须包含关键词：' + keywords.join(','));         });     </script> </body>  </html>

JavaScript 数组挖掘，不只是讲数组哟

 

 

filter过滤元素使用：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <style>      </style> </head>  <body>      <script>         let lessons = [{             title: 'title1',             cate: 'css'         }, {             title: 'title2',             cate: 'css'         }, {             title: 'title3',             cate: 'html'         }, ];         let res = lessons.filter((item) => {             return item.cate == 'css';         });         console.table(res);     </script> </body>  </html>

JavaScript 数组挖掘，不只是讲数组哟

 

 

自定义过滤函数理解原理：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <style>      </style> </head>  <body>      <script>         // let arr = [1, 2, 3, 4];          // function filter(arr, exception) {         //     let newArr = [];         //     for (let value of arr) {         //         if (exception.includes(value) === false) {         //             newArr.push(value);         //         }         //     }         //     return newArr;         // }         // console.log(filter(arr, [1, 2]));          let arr = [1, 2, 3, 4];          function filter(arr, callback) {             let newArr = [];             for (let value of arr) {                 if (callback(value) === true) {                     newArr.push(value);                 }             }             return newArr;         }         console.log(filter(arr, function(item) {             return item > 2;         }));     </script> </body>  </html>

 

map映射数组与引用类型处理技巧：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <style>      </style> </head>  <body>      <script>         // 值类型，不改变原数据         //   let arr = ['html', 'css'];         //   let res = arr.map(function(item, index, arr) {         //       return `cyy is learning --${item}`;         //   });         //   console.table(arr);         //   console.table(res);           // 引用类型，会改变原数据         // let lessons = [{         //     title: 'title1'         // }, {         //     title: 'title2'         // }, {         //     title: 'title3'         // }, ];         // lessons.map(function(item) {         //     item.click = 1;         // });         // console.log(lessons);          // 浅拷贝操作， 在操作引用类型时不会改变原数据         // let lessons = [{         //     title: 'title1'         // }, {         //     title: 'title2'         // }, {         //     title: 'title3'         // }, ];         // let res = lessons.map(function(item) {         //     return Object.assign({         //         click: 1         //     }, item);         // });         // console.table(lessons);         // console.table(res);          // 或者直接返回新数组         // let lessons = [{         //     title: 'title1'         // }, {         //     title: 'title2'         // }, {         //     title: 'title3'         // }, ];         // let res = lessons.map(function(item) {         //     return {         //         title: item.title,         //         click: 1         //     };         // });         // console.table(lessons);         // console.table(res);     </script> </body>  </html>

 

超好用的reduce方法详解：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <style>      </style> </head>  <body>      <script>         // let arr = [1, 2, 3, 4, 5];         // pre是上一次循环的返回值         // arr.reduce(function(pre, value, index, arr) {         //     console.log(pre, value);         // });         // arr.reduce(function(pre, value, index, arr) {         //     console.log(pre, value);         // }, 0);           // 统计元素在数组中出现的次数         // let arr = [1, 2, 3, 4, 5, 3, 4, 1, 1, 1, 5, 6];          // function arrayCount(arr, num) {         //     return arr.reduce((pre, cur) => {         //         pre += num == cur ? 1 : 0;         //         return pre;         //     }, 0);         // }         // console.log(arrayCount(arr, 1));           // 统计最大值         let arr = [1, 2, 3, 4, 5, 3, 4, 1, 1, 1, 5, 6];          function arrayMax(arr) {             return arr.reduce((pre, cur) => {                 return pre > cur ? pre : cur;             });         }         console.log(arrayMax(arr));     </script> </body>  </html>

 

购物车汇总与获取最贵商品：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <style>      </style> </head>  <body>      <script>         // let cart = [{         //     name: 'good1',         //     price: 15000         // }, {         //     name: 'good2',         //     price: 1200         // }, {         //     name: 'good3',         //     price: 180000         // }, ];          // function maxPrice(arr) {         //     return arr.reduce((pre, cur) => {         //         return pre.price > cur.price ? pre : cur;         //     });         // }         // console.table(maxPrice(cart));          let cart = [{             name: 'good1',             price: 15000         }, {             name: 'good2',             price: 1200         }, {             name: 'good3',             price: 180000         }, ];          function sum(arr) {             return arr.reduce((total, cur) => {                 return total += cur.price;             }, 0);         }         console.log(sum(cart));     </script> </body>  </html>

 

处理购物车中的重复商品：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <style>      </style> </head>  <body>      <script>         // let cart = [{         //     name: 'good1',         //     price: 15000         // }, {         //     name: 'good2',         //     price: 1200         // }, {         //     name: 'good3',         //     price: 180000         // }, ];          // 获取价格超过10000元的商品名称         // function getNameByPrice(arr, price) {         //     return arr.reduce(function(arr, cur) {         //         if (cur.price > price) {         //             arr.push(cur);         //         }         //         return arr;         //     }, []).map(function(item) {         //         return item.name;         //     });         // }          // function getNameByPrice(arr, price) {         //     return arr.reduce(function(arr, cur) {         //         if (cur.price > price) {         //             arr.push(cur);         //         }         //         return arr;         //     }, []).map((item) => item.name);         // }         // console.log(getNameByPrice(cart, 10000));          // let arr = [1, 3, 5, 2, 6, 5, 3, 1];         // let res = arr.reduce(function(arr, cur) {         //     if (arr.includes(cur) === false) {         //         arr.push(cur);         //     }         //     return arr;         // }, []);         // console.table(res);          let cart = [{             name: 'good1',             price: 15000         }, {             name: 'good2',             price: 1200         }, {             name: 'good3',             price: 180000         }, {             name: 'good1',             price: 15000         }, {             name: 'good1',             price: 15000         }, {             name: 'good3',             price: 180000         }];          function filterGoods(arr) {             return arr.reduce(function(arr, cur) {                 let res = arr.find(v => v.name == cur.name);                 if (!res) arr.push(cur);                 return arr;             }, []);         }         console.log(filterGoods(cart));     </script> </body>  </html>

 

炫酷的文字LOGO效果元素创建：

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">     <style>         * {             padding: 0;             margin: 0;         }                  body {             width: 100vw;             height: 100vh;             background: #7481c9;             display: flex;             justify-content: center;             align-items: center;         }                  div {             font-size: 6em;             color: purple;             font-weight: bold;             text-transform: uppercase;         }                  div>span {             position: relative;             display: inline-block;             cursor: pointer;         }                  .color {             animation-name: color;             animation-duration: 1s;             animation-timing-function: linear;             animation-direction: alternate;             animation-iteration-count: 2;         }                  @keyframes color {             50% {                 color: #ffeb3b;                 transform: scale(1.5);             }             100% {                 color: #ff9800;                 transform: scale(.5);             }         }     </style> </head>  <body>     <div>CYYiscyyhahaha</div>     <script>         const div = document.querySelector('div');         [...div.textContent].reduce(function(pre, cur, index) {             if (pre == index) div.innerHTML = '';             // console.log(pre, cur, index);             let span = document.createElement('span');             span.innerHTML = cur;             div.appendChild(span);              span.addEventListener('mouseenter', function() {                 this.classList.add('color');             });             span.addEventListener('animationend', function() {                 this.classList.remove('color');             });             return pre;         }, 0);     </script> </body>  </html>

JavaScript 数组挖掘，不只是讲数组哟

 

便宜好用的国外VPS推荐