类型判断：
<!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 = 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>
原文转载：http://www.shaoqun.com/a/490106.html
盘古集团：https://www.ikjzd.com/w/1448
telegram：https://www.ikjzd.com/w/1734
houzz：https://www.ikjzd.com/w/236
类型判断：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="https://maxcdn.
c2c模式：c2c模式
zozotown：zozotown
邵琪伟提出推进旅游与文化产业紧密融合共同繁荣 ：邵琪伟提出推进旅游与文化产业紧密融合共同繁荣
2020韶关樱花节在哪里举办？韶关樱花节地点？：2020韶关樱花节在哪里举办？韶关樱花节地点？
客家梅州祥辉楼：筑起越南归侨爱国情怀：客家梅州祥辉楼：筑起越南归侨爱国情怀
没有评论:
发表评论