陣列參考型別分析：
<!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>
展開語法真的好用啊：
<!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>
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>
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>
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>
自定義過濾函式理解原理：
<!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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/225053.html
標籤：JavaScript