一,Number
<body> <h1>数组</h1> <hr> </body> <script> //常用的数字 console.log(10); console.log(3.14); console.log(1e5); //100000 console.log(1e-5); //0.00001 console.log(Infinity); //Infinity console.log(-5/0); //-Infinity var a = 0b1010; //二进制 var b = 0o12; //八进制 var c = 10; var d = 0xA; //十六进制 console.log(a, b, c, d); // 常用常量 console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE); console.log(Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY); console.log(999999999999998); console.log(9999999999999989); // 9999999999999988 console.log(3.1, 3.2); console.log(3.1 + 3.2); // 6.300000000000001 // 常用实例方法 // toExponential(n): (科学计数法计数,然后小数点保留n位小数) console.log(13.145.toExponential(3)); // toFixed(n): (普通计数法,然后小数点保留n位小数) console.log(3.14.toFixed(1)) // 3.14四舍五入保留一位小数 // toPrecision(n): (保留原数字的几位,超过10的使用科学计数法,小数点后面的直接舍去) console.log(156.14.toPrecision(1)) // 2e+2 //toString(n):把数字改成n进制的数 var num = 10; console.log(num.toString()); console.log(10..toString(8)); </script> </html>
二,时间
年：date.getFullYear() 月：date.getMonth() + 1 日：date.getDate() 星期：date.getDay() 小时：date.getHours() 分钟：date.getMinutes() 秒：date.getSeconds() 毫秒：date.getMilliseconds()1,创建并获取当前时间(注意js区分大小写)
var date = new Date();
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>date</title> </head> <body> <h1>date</h1> <hr> </body> <script> //创建并获取时间 var date = new Date(); console.log(date); //Wed Oct 17 2018 18:49:30 GMT+0800 (中国标准时间) // 获得特定的时间组成部分 var year = date.getFullYear(); //年 console.log(year); // 月从0编号 console.log(date.getMonth()+1); //日 console.log(date.getUTCDate()); </script> </html>
三,电子表
用于以上只是的总结,以下知识的引出
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>电子表</title> <style> div { width: 120px; height: 40px; font: normal 18px/40px 'STSong'; text-align: center; border-radius: 5px; color: brown; margin: 50px auto; border: 3px solid black; } </style> </head> <body> <h1>电子表</h1> <hr> <div>13:23:21</div> </body> <script> var div = document.querySelector('div'); function getNeedDate() { var date = new Date(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); return [hour, minute, second]; } setInterval(function() { n_date = getNeedDate() for (var i = 0; i < n_date.lenth; i++) { n_date[i] = n_date[i] < 10 ? '0' + n_date[i] : n_date[i]; } div.innerText = n_date[0] +':' + n_date[1] + ':' + n_date[2]; },300); </script> </html>
四,字符串
charAt(n)：指定索引字符，同[n] concat(str)：将目标字符串拼接到指定字符串之后 indexOf(str)：指定字符串第一次出现的位置 lastIndexOf(str)：指定字符串最一次出现的位置 replace(re, str)：将正则匹配到的字符串替换为指定字符串 substr(n, m)：从索引n开始，截取m个字符长度(m省略代表截取到最后) substring(n, m)：从索引n开始，截取到索引m(m省略代表截取到最后) slice(n, m)：同substring(n, m) split(re)：以指定正则将字符串拆分为数组 toUpperCase()：转换为大写 toLowerCase()：转换为小写 trim()：去除首尾空白字符<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>String</title> </head> <body> <h1>String</h1> <hr> </body> <script> var str = "I \"love\" you"; //I "love" you console.log(str); //length console.log(str.length); // 方法 str = "abc123hello123GOOD123嘿嘿"; // 自定索引下的字符 console.log(str.charAt(1)); console.log(str[1]); // 拼接,返回拼接后的字符串 var newStr = str.concat(123); console.log(str,'\n', newStr); // indexOf(str)：指定字符串第一次出现的位置 console.log(str.indexOf("123")); // 3 // replace(re, str)：将正则匹配到的字符串替换为指定字符串 newStr = str.replace("hello", "world"); console.log(str, newStr); // substr(n, m)：从索引n开始，截取m个字符长度(m省略代表截取到最后) // 索引3开始,截取3个字符长度 newStr = str.substr(3, 3); console.log(newStr); // slice(n, m)：同substring(n, m) // 索引3开始,6结束(不包含6) [3, 6) newStr = str.slice(3, 6); console.log(newStr); // split(re, n)：以指定正则将字符串拆分为数组, n可选为截取后得到的数组最大长度 var arr = str.split("123", 2); console.log(arr); // trim()：去除首尾空白字符 str = " 123 abc " console.log(str.trim()); </script> </html>
五,数组
数组的定义与取值从索引0开始
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Array</title> </head> <body> <h1>Array</h1> <hr> </body> <script> // arr = ['1', '2', '3']; arr = ["1", true, [{key: "value"}]] console.log(arr); // length(元组的长度) console.log(arr.length); // 3 // 常用方法 // concat(arr)：将目标数组拼接到指定数组之后 console.log([1, 2, 3].concat(["4", "5", "6"])); // 结果是新数组 // indexOf(指定元素)：指定元素第一次出现的位置索引 // lastIndexOf(ele)：指定元素最一次出现的位置索引 console.log(arr.indexOf(true)); // 1 // reverse()：反转数组(位置索引反转) console.log(arr.reverse()); // 反转的到新数组 // includes(ele, n)：从索引n开始往后，元素ele是否在数组中，做全等匹配，索引从头开始n可以省略(in只做值匹配) arr = [1, "1", "2"]; console.log(1 in arr); console.log(arr.includes(1, 1)); // 只匹配数字1,从索引1开始 // fill(ele)：以指定元素填充整个数组,不改变数组的个数,只是把数组的内容全部更改 arr.fill(null); console.log(arr); // 操作原数组,一般用来清空数组中的数据(不操作长度) // slice(n, m)：从索引n开始，截取到索引m(m省略代表截取到最后) arr = [1, 2, 3, 4, 5]; console.log(arr.slice(1, 3)); // [1, 3) // join(str)：以指定字符串连接成字符串(在每一个元组之间都添加) var str = arr.join("@"); console.log(str); // 增删改操作方法: 操作的都是原数组 // push() 尾加 | unshift() 头加 // pop() 尾删 | shift() 头删 arr.push(6) console.log(arr); arr.unshift(0); console.log(arr); // 一次操作一个元素 arr.pop(); arr.shift(); console.log(arr); // splice方法 // begin开始索引 // length长度 // 新元素们(可以省略) // 1, 2, 3, 4, 5 // 从头加 arr.splice(0, 0, 0); // 从索引0前方开始操作,操作原数组0个长度,结果多了个元素0 console.log(arr); // 0, 1, 2, 3, 4, 5 // 从尾加 arr.splice(arr.length, 0, 6); console.log(arr); // 0, 1, 2, 3, 4, 5, 6 // 从头删 arr.splice(0, 1) // 从索引0开始,操作原数组一位,替换的新值省略代表删除 console.log(arr); // 1, 2, 3, 4, 5, 6 // 从尾删 arr.splice(arr.length - 1, 1) console.log(arr); // 1, 2, 3, 4, 5 // 替换 arr.splice(2, 1, "3", [0, 0], "3"); // 从索引2开始,用"3", [0, 0], "3"替换掉1位个数的元素 console.log(arr); // 1, 2, "3", [0, 0], "3", 4, 5 </script> </html>
六,面向对象回调
就是定义一个新的函数,在函数内部又调用了在函数外部定义的另一个函数,而在函数外部执行该函数
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>面向对象回调</title> </head> <body> 面向对象回调 </body> <script type="text/javascript"> // 做网络请求的对象 var web = { // 接收: 获得数据后的操作未知? receive: null, // 请求: 请求数据 send: function () { console.log("开始请求数据..."); // 等待一秒: 时间戳应用 var b_time = new Date().getTime(); // 相对1970年毫秒数 var e_time = new Date().getTime(); while(e_time - b_time < 1000) { // console.log(11); e_time = new Date().getTime(); } var data = [1, 2, 3, 4, 5]; console.log("数据请求完毕..."); // 回调 if (web.receive && data) { web.receive(data); } } } // web.send(); // console.log(new Date().getTime()); // 如果获取数据后,该做什么 web.receive = function(data) { console.log(data); } // 可以请求数据了 web.send(); // 规定好获得结果后的操作,就可以做请求操作,集体什么时候来处理数据,时间点不需要管 </script> </html>
七,数组回调的应用
1,过滤器
过滤掉不满足条件的数组,合为满足条件的数组
返回值:过滤后得到的新数组
过滤器回调函数的执行次数 = 被过滤数组的元素个数
var getResult = function (v, i) { //return true; if (v < 5) { return true; } } var newArr = arr.filter(getResult); console.log(arr); console.log(newArr);2,全部满足:every与部分满足:some
过滤器返回值: true | false
true:所有元素都满足条件
false:有一个不满足条件即可//全部满足: every var res = arr.every(function(v) { return v > 3; }); console.log(res); // 部分满足: some res = arr.some(function(v) { return v > 3; }); console.log(res);3,累积: reduce
arr = [4, 2, 1, 3, 5]; res = arr.reduce(function(prev,value,index){ return prev * value; }) console.log(res); // 4*2*1*3*54,排序(默认升序)
newArr = arr.sort(function(o, n) { //o是后面的数,n是前面的数 // return o > n; // 升序, 没有回调函数 return o < n; // 降序 }) console.log(newArr);
八,Math:数学操作
E：返回算术常量 e，即自然对数的底数（约等于2.718） LN2：返回 2 的自然对数（约等于0.693） LN10：返回 10 的自然对数（约等于2.302） LOG2E：返回以 2 为底的 e 的对数（约等于 1.4426950408889634） LOG10E：返回以 10 为底的 e 的对数（约等于0.434） PI：返回圆周率（约等于3.14159）abs(x)：返回 x 的绝对值 ceil(x)：向上取整 floor(x)：向下取整 max(...n)：求最大值 min(...n)：求最小值 pow(x,y)：返回 x 的 y 次幂 random()：返回 0 ~ 1 之间的随机数 round(x)：四舍五入<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Math</title> </head> <body> <h1>Math</h1> <hr> </body> <script> //数学中π的值 console.log(Math.PI); //常用方法 console.log(Math.abs(-10)) console.log(Math.floor(3.9)); // 向下取整 //随机数 : [0,1) console.log(Math.random()) // [0,5) var res = Math.random() //[0, 5]整数 console.log(Math.floor(Math.random() * 6)); // [0, 6) => 向下取整 => [0, 5] console.log(parseInt(Math.random() * 6)); // [0, 6) => 取整数部分 //[5, 10](只能在0-5的任意数上面加5) parseInt(Math.random() * 6) + 5 //[min, max] //parseInt(Math.random() * (max - min + 1)) + min console.log('---------------------------------------') //需求:输入最大值与最小值然后随机输出之间的数字,循环二十次 function randomNum(min, max) { return parseInt(Math.random() * (max - min + 1)) + min; } for (var i = 0; i < 20; i++) { console.log(randomNum(5, 8)); } </script> </html>
九,正则
1,正则对象
// 构造函数 var re = new RegExp('^\\w', 'igm'); // 字面量 var re = /^\w/igm;2,修饰符
i:不分大小写 g:全文匹配 m:多行匹配3,正则方法:
test()：匹配目标字符串，结果为true|false exec()：匹配目标字符串，结果为第一条结果所有信息的数组4,字符串方法
match(re)：匹配指定正则，结果为数组(可全文匹配) search(re)：匹配指定正则，结果为匹配的索引，反之-1 replace(re, newStr)：匹配指定正则，替换匹配的结果(可全文匹配) split(re, n)：按正则进行拆分，n的值可以决定结果的数组长度(可选参数)<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>RegExp</title> </head> <body> <h1>RegExp</h1> <hr> </body> <script> //构造函数 var re = new RegExp('\\w'); var res = re.test("abc"); //返回值只能是true或者是false console.log(res); //字面量 re = /\w/; res = re.test("abc"); console.log(res); res = re.exec("abc"); console.log(res); //字符串的match方法 str = "abcABC"; re = /a/ig; // 所有满足结构的结果数组 var arr = str.match(re); console.log(arr); str = "abc123x9y8z7\n123"; re = /^\d/m; arr = str.match(re); console.log(arr); </script> </html>
719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
