型別判斷：
<!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"> </head> <style> </style> <body> <script> // let a = 1; // console.log(typeof a); // let b = '1'; // console.log(typeof b); // let c = [1, 2, 3]; // console.log(typeof c); // let d = { a: 1 }; // console.log(typeof d); // function func() { } // console.log(typeof func); // let a; // console.log(typeof a); // console.log(typeof b); // 記得判斷時undefined一定要加引號 // if (typeof a == 'undefined') { // throw new Error('變數a沒有定義~'); // } // instanceof實質是判斷原型鏈上有沒有該屬性 // let a = []; // console.log(a instanceof Array); // let b = {}; // console.log(b instanceof Object); // 自己定義一個建構式 // function User() { } // let a = new User(); // console.log(a instanceof User); // console.log(a instanceof Array); // console.log(a instanceof Object); </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"> </head> <style> </style> <body> <script> // let str = new String('cyy'); // console.log(str); // console.log(str.toString()); // // 字面量方式定義 // let str2 = 'cyy'; // console.log(str2); // 字串轉義 // let str = "cyy is \" hhh~"; // console.log(str); // \t 制表符 // let str = "aaa \t\t bbb"; // console.log(str); // let str2 = "aaa \\ bbb"; // console.log(str2); // // \n 原始碼中換行 // let str3 = "aaa \n bbb"; // console.log(str3); // html中用 來實作空格，而不是\t // let str = "aaa bbb"; // document.write(str); // // html中用<br/>來實作換行符，而不是\n // let str3 = "aaa <br/> bbb"; // document.write(str3); // +號實作字串的連接 // let a = 1; // let b = 2; // console.log(a + b); // let a = 'cyy'; // let b = 'girl'; // console.log(a + ' is ' + b); // 字面量形式實作字串的連接 let a = 'cyy'; let b = 'girl'; console.log(`${a} is a ${b}`); </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> ul { list-style: none; } li { padding: 10px; } li:nth-child(odd) { background: lightgreen; color: white; } </style> </head> <body> <script> // let str = '111'; // str += '222'; // console.log(str); // 模板字面量使用函式 // function show() { // return '111'; // } // console.log(`num is ${show()}`); // console.log(`num is ${3 + 4}`); // let lessons = [ // { title: 'title1' }, // { title: 'title2' }, // { title: 'title3' }, // ]; // function template() { // return ` // <ul> // ${lessons.map(item => item.title)} // </ul> // `; // }; // document.body.innerHTML = template(); // map()函式回傳的是陣列，使用join連接成字串 let lessons = [ { title: 'title1' }, { title: 'title2' }, { title: 'title3' }, ]; // 模板字面量的嵌套 function template() { return ` <ul> ${lessons.map(item => ` <li>${item.title}</li> `).join('')} </ul> `; }; document.body.innerHTML = template(); </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> ul { list-style: none; } li { padding: 10px; } li:nth-child(odd) { background: lightgreen; color: white; } </style> </head> <body> <script> // let name = 'cyy'; // let age = 18; // console.log(`${name} is ${age} years old.`); // 標簽模板的使用 // console.log(tag`${name} is ${age} years old.`); // function tag(str, name, age) { // console.log(str); // console.log(name); // console.log(age); // } // function tag(str, ...args) { // console.log(str); // console.log(args); // } // let name = 'cyy'; // tag`${name}`; // function tag(str, ...args) { // console.log(str); // console.log(args); // } let lessons = [ { title: 'title1', author: 'cyy1' }, { title: 'title2', author: 'cyy2' }, { title: 'title3', author: 'cyy3' } ]; function template() { return ` <ul> ${lessons.map(item => links`<li>標題：${item.title}，作者：${item.author}</li>`).join('')} </ul> `; } // 標簽模板的作用，對標簽里的變數進行二次處理 function links(str, ...args) { // console.log(str); // console.log(args); return str.map((item, key) => { return item + (args[key] ? args[key].replace('title', '<a href="http://www.baidu.com" target="_blank">title</a>') : ''); }).join(''); } document.body.innerHTML += template(); </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> <input type="text" name='pwd'> <script> // let name = " cyy CYY "; // console.log(name); // console.log(name.length); // console.log(name.toUpperCase()); // console.log(name.toLowerCase()); // // trim是去除字串兩邊的空格，而不是中間的 // console.log(name.trim()); // console.log(name.trim().length); // 校驗密碼時通常不允許有空格 // let pwd = document.querySelector('[name=pwd]'); // pwd.addEventListener('keyup', function () { // this.value = https://www.cnblogs.com/chenyingying0/archive/2020/11/15/this.value.trim(); // console.log(this.value.length); // }) let name = "cyyhahaha"; console.log(name[3]); console.log(name.charAt(3)); for (let i = 0; i < name.length; i++) { let span = document.createElement('span'); span.innerHTML = name[i]; span.style.fontSize = (i + 1) * 10 + 'px'; // document.body.appendChild(span); document.body.append(span); } </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> // 字串截取操作 slice substr substring // 填寫一個引數，就是從第幾位開始截取，三個函式效果一樣 let name = "cyyisis"; // console.log(name.slice(0)); // console.log(name.slice(1)); // console.log(name.substr(0)); // console.log(name.substr(1)); // console.log(name.substring(0)); // console.log(name.substring(1)); // slice和substring第二個引數表示截取到第幾位，substr第二個引數表示截取幾個 // console.log(name.slice(2, 4)); // console.log(name.substr(2, 4)); // console.log(name.substring(2, 4)); // 當第一個引數為負數時，slice和substr代表從后往前截取，substring會將負數識別為0 // console.log(name.slice(-3)); // console.log(name.substr(-3)); // console.log(name.substring(-3)); // 當一個引數時負數時 // slice第二個引數表示截取到第幾位，所以是負數 console.log(name.slice(-3, -1)); // substr第二個引數表示截取幾個，所以是正數 console.log(name.substr(-3, 3)); // substring會把負數全部識別為0 console.log(name.substring(-3, -1)); </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> // indexOf第一個引數表示要查找的字符，第二個引數表示從第幾位開始查找 // const str = 'cyyiscyy'; // console.log(str.indexOf('y')); // console.log(str.indexOf('y', 3)); // console.log(str.indexOf('y', 6)); // console.log(str.indexOf('y', 9)); // if (str.indexOf('y') != -1) { // console.log('字串含有字符y'); // } // includes直接判斷字串是否含有某個字符 // console.log(str.includes('y')); // console.log(str.includes('o')); // console.log(str.includes('y', 6)); // console.log(str.includes('y', 9)); // console.log(str.lastIndexOf('y')); // // 從第三個字符開始向前查找 // console.log(str.lastIndexOf('y', 3)); // 判斷是否以指定字符開始或者結束 // console.log(str.startsWith('c')); // console.log(str.startsWith('y')); // console.log(str.endsWith('c')); // console.log(str.endsWith('y')); const words = ['html', 'css', 'js']; const str = '我在學習js呢'; const res = words.some(item => { console.log(str.includes(item)); return str.includes(item); }); if (res) { console.log('找到了'); } </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 name = 'cyy111'; // console.log(name.replace('111', '222')); let words = ['html', 'css', 'js']; let string = 'cyy在學習html，css和js'; const dom = words.reduce((pre, word) => { return pre.replace(word, `<a href="?w=${word}">${word}</a>`); // console.log(pre); // console.log(word); }, string); document.body.innerHTML += dom; </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> // repeat字串的重復 // let str = '*'; // console.log(str.repeat(4)); function phone(number, len = 3) { number = String(number); len = len < number.length ? len : number.length; return number.slice(0, len * -1) + '*'.repeat(len); } console.log(phone(13291990311)); console.log(phone(13291990311, 5)); console.log(phone(13291990311, 11)); console.log(phone(13291990311, 15)); </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 = '99'; // console.log(str + 1); // // 隱式轉換 // console.log(str * 1 + 1); // // 強制轉換 // console.log(Number(str) + 1); // 數值轉字串 // const num = 99; // console.log(typeof num); // // 隱式轉換 // console.log(typeof (num + '')); // // 強制轉換 // console.log(typeof String(num)); // const str = '99.22hahaha'; // console.log(parseInt(str)); // console.log(parseFloat(str)); // const str = 'aaa99.22hahaha'; // console.log(parseInt(str)); // 字串的拆分 // const str = "cyyisagirl"; // console.log(str.split('')); // console.log(str.split('').length); // 陣列轉字串 // const arr = [11, 22, 33]; // console.log(arr.join('')); // console.log(arr.join('-')); // console.log(arr.join('|')); // let str = 'cyyis hahaha'; // console.log(str.substr(3)); // 瀏覽器會隱式地把字串轉為物件，來呼叫方法 // console.log(typeof str); // let str2 = new String('cyyis hahaha'); // console.log(str2.substr(3)); // console.log(typeof str2); // 呼叫原型鏈上的方法 // const arr = [11, 22, 33]; // console.log(arr.toString()); // const num = 99; // console.log(num.toString()); </script> </body> </html>
boolean隱式轉換原理：
<!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> // const boolean = new Boolean(false); // console.log(typeof boolean); // console.log(boolean.valueOf()); // if (boolean.valueOf()) { // console.log(111); // } else { // console.log(222); // } // 字面量形式 // const boolean = true; // console.log(typeof boolean); // if (boolean) { // console.log(111); // } else { // console.log(222); // } // 如果數值和布爾直接進行比較，會把布林值轉換為數值 // true轉為1，false轉為0 // let num = 99; // console.log(num == true); // let num2 = 0; // console.log(num2 == false); // 在運算式判斷中，相當于給數值使用Boolean()來轉換 // let num = 99; // if (num) { // console.log(111); // } // let str = '0'; // console.log(str == false); // let str = '1'; // console.log(str == true); // let str = '99'; // console.log(str == true); // let str = '99'; // if (str) { // console.log(111); // } // 總結：比較時是轉換為數值，判斷時是轉換為布林值 // 陣列和物件轉為布爾，都是真 // 這種情況是轉換為數值 // let arr = []; // console.log(arr == false); // let arr2 = [0]; // console.log(arr2 == false); // let arr3 = [1]; // console.log(arr3 == true); // let arr4 = [1, 2, 3]; // console.log(arr4 == true); // // 這種情況是轉換為布林值 // if (arr) { // console.log(111); // } // console.log(Boolean(arr)); console.log(Boolean({})); if ({}) { console.log(111); } </script> </body> </html>
顯示轉換Boolean型別：
<!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 num = 0; // console.log(!!num); // console.log(Boolean(num)); // let str = '111'; // console.log(!!str); // console.log(Boolean(str)); // let arr = []; // console.log(!!arr); // console.log(Boolean(arr)); // let obj = {}; // console.log(!!obj); // console.log(Boolean(obj)); let date = new Date(); console.log(!!date); console.log(Boolean(date)); </script> </body> </html>
boolean實體操作：
<!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> while (true) { let year = prompt('請輸入cyy的出生年份').trim(); if (!year) continue; // 退出本次回圈，繼續下次回圈 let msg = year == '2020' ? '回答正確' : '回答錯誤'; console.log(msg); break; // 結束回圈 } </script> </body> </html>
number宣告方式與基本函式：
<!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 num = new Number(99); // console.log(typeof num); // console.log(num + 1); // console.log(num.valueOf() + 1); // 值型別 // let num = 99; // console.log(num + 1); // console.log(num.valueOf()); // 判斷整型Number.isInteger // let num = 99; // console.log(Number.isInteger(num)); // let num2 = 99.11; // console.log(Number.isInteger(num2)); // 保留小數 toFixed let num = 100.2233; console.log(num.toFixed(2)); </script> </body> </html>
數值型別轉換技巧與NaN型別：
<!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> <input type="text" name="num1"> <input type="number" name="num2"> <script> //NaN not a number // console.log(Number('hhh')); // console.log(2 / 'hhh'); // 判斷是否是NaN // console.log(Number.isNaN(2 / 'hhh')); // console.log(Object.is(2 / 'hhh', NaN)); //NaN不能本身不等于NaN，不能與自身進行比較 // console.log(NaN == NaN); // 布爾轉數值 // console.log(Number(true)); // console.log(Number(false)); // let input1 = document.querySelector('[name=num1]'); // let input2 = document.querySelector('[name=num2]'); // input1.addEventListener('keyup', function () { // let num1 = input1.value; // console.log(num1); // console.log(typeof num1); // console.log(typeof Number(num1)); // }); // input2.addEventListener('keyup', function () { // let num2 = input2.value; // console.log(num2); // console.log(typeof num2); // console.log(typeof Number(num2)); // }); // Number與parseInt和parseFloat的區別 // let str = "123.456hahaha"; // console.log(Number(str)); // console.log(parseInt(str)); // console.log(parseFloat(str)); // let arr = []; // console.log(Number(arr)); // let arr2 = [1]; // console.log(Number(arr2)); // let arr3 = [1, 2, 3]; // console.log(Number(arr3)); // let obj = {}; // console.log(Number(obj)); // let obj2 = { // valueOf: function () { // return 99; // } // } // console.log(Number(obj2)); let num = 11.234; console.log(num.toFixed(0)); console.log(num.toFixed(1)); console.log(num.toFixed(2)); </script> </body> </html>
Math數學計算
<!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> <input type="text" name="num1"> <input type="number" name="num2"> <script> //Math.min() 最小值 // console.log(Math.min(1, 2, 3, 4, 5)); // 指定以陣列的形式傳參 // let arr = [1, 2, 3, 4, 6]; // console.log(Math.max.apply(null, arr)); // 向上取整 Math.ceil() 向下取整Math.floor() 四舍五入Math.round() // let num = 1.34; // console.log(Math.ceil(num)); // console.log(Math.floor(num)); </script> </body> </html>
Math.random() 隨機點名操作
<!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> <input type="text" name="num1"> <input type="number" name="num2"> <script> //Math.random() >= 0 ~ < 1 // console.log(Math.random()); // // 如果想取得0-整數n之間的隨機整數，比如0-5 // let n = 5; // console.log(Math.floor(Math.random() * (n + 1))); // 如果要取2-5之間的隨機整數，實質就是取0-3之間的隨機整數，然后再加2 // console.log(Math.floor(Math.random() * (5 - 2 + 1)) + 2); // function my_random(min, max) { // return Math.floor(Math.random() * (max - min + 1)) + min; // } // console.log(my_random(2, 5)); // 從陣列中隨意取值 // let arr = ['cyy1', 'cyy2', 'cyy3', 'cyy4']; // let len = arr.length; // // 實質就是索引從0-3 // let index = Math.floor(Math.random() * len); // console.log(arr[index]); // 從陣列的第二位開始取，就是1-3 // let arr = ['cyy1', 'cyy2', 'cyy3', 'cyy4']; // let len = arr.length; // // 實質就是索引從1-3，相當于從0-2，再加上1 // let index = Math.floor(Math.random() * (len - 1)) + 1; // console.log(arr[index]); let arr = ['cyy1', 'cyy2', 'cyy3', 'cyy4', 'cyy5']; function arrayRandomValue(arr, start = 0, end) { end = end ? end : arr.length - 1; const index = Math.floor(Math.random() * (end - start + 1)) + start; console.log(arr[index]); } // arrayRandomValue(arr); // arrayRandomValue(arr, 2, 4); // cyy3-cyy5 arrayRandomValue([1, 4, 7, 0]); </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> // const date = new Date(); // console.log(date); // New Date()和Date()的區別 // let d1 = new Date(); // console.log(d1); // console.log(typeof d1); // console.log(d1 * 1); // 可轉時間戳 // let d2 = Date(); // console.log(d2); // console.log(typeof d2); // console.log(d2 * 1); // const dd = Date.now(); // console.log(dd); // 計算腳本運行時間 // const start = Date.now(); // for (let i = 0; i < 200000000; i++) { } // const end = Date.now(); // console.log(end - start); // 毫秒為單位 // console.log((end - start) / 1000 + '秒'); // js提供的計算腳本執行時間的方法 // console.time('for'); // for (let i = 0; i < 200000000; i++) { } // console.timeEnd('for'); // const date = new Date('2020-11-15 11:11:11'); // console.log(date); // console.log(date.getMonth()); // const date = new Date(1990, 11, 12, 3, 12, 14); // console.log(date); // console.log(date.getMonth()); let arr = [1990, 11, 12, 3, 12, 14]; const date = new Date(...arr); console.log(date); console.log(date.getMonth()); </script> </body> </html>
ISO與TIMESTAMP時間轉換
<!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 time = new Date('1990-12-31 12:11:33'); // console.log(time * 1); // console.log(Number(time)); // console.log(time.valueOf()); // console.log(time.getTime()); // 時間戳轉時間 let timestamp = 662616693000; console.log(new Date(timestamp)); </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> const date = new Date('1996-04-13 12:11:10'); // console.log(date.getFullYear()); // console.log(date.getMonth() + 1); // console.log(date.getDate()); // console.log(date.getHours()); // console.log(date.getMinutes()); // console.log(date.getSeconds()); function timeFormat(date, format = "yyyy-mm-dd hh:ii:ss") { let config = { yyyy: date.getFullYear(), mm: date.getMonth() + 1, dd: date.getDate(), hh: date.getHours(), ii: date.getMinutes(), ss: date.getSeconds() }; for (const key in config) { format = format.replace(key, config[key]); } return format; } console.log(timeFormat(date)); console.log(timeFormat(date, 'yyyy年mm月dd日hh時ii分ss秒')); </script> </body> </html>
優秀的日期處理庫 momentjs
<!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 src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <script> // moment().format(); // let date = moment().format('MMMM Do YYYY, h:mm:ss a'); // console.log(date); console.log(moment().add(1, 'days').format('YYYY年MM月DD日hh:mm:ss')) </script> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/218286.html
標籤：其他
上一篇：JavaScript 值型別使用