浙江龙网

  1. 首页 > 生活百科 > >

原生JavaScript

生活百科原生JavaScript

原生JavaScript

为了方便查看. 所有的js和css代码都是嵌入式直接写在html代码中
1.js的引入方式<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box1 {width: 200px;height: 200px;background-color: red;}</style></head><body><div class="box1"></div><script>// 注: 部分js代码写错了也不报错var obj = document.getElementsByClassName('box1')[0];obj.onclick = function(){this.style.backgroundColor = "green";}</script><!--<script src="https://www.huyubaike.com/biancheng/js/a.js"></script>--></body></html>2.数组对象var arr = ["Maxs_hu", 11, 3, 4]// 取数组中内容arr[0]// 数组长度arr.length// 取出数组中最后一个元素arr.pop()// 即使内部放置索引也会取出最后一个// 头部插入元素arr.unshift("xxx")// 头部移出元素arr.shift('xxx')// 切片arr.slice(0, 3)// 顾头不顾尾// 反序arr.reverse()// 数组拼接arr.join(':')// 两个数组的拼接arr.concat(数组1)// 排序arr = [5, 3, "a", "-1"]// 使用sort函数默认使用ascii排序// sort会取出两个值进行减法运算(减法运算会将字符串转乘number类型进行运算). 最终比出大小arr.sort(function (x, y){return x - y})// splice用法: 可以删头删尾删中间//从1位置开始. 删除两个. 然后在1位置插入后面的三个字符串arr.splice(1, 2, "xxx", "yyy", "zzz")// 遍历列表中每个元素arr.forEach(function(item){console.log(item)})// 没有返回值arr.map(function(item){console.log(item)})// 有返回值// 案例:var res = arr.forEach(function(item){return item + "_sb"})// output: undefined -> void function return value is usedvar result = arr.map(function(item){return item + "_sb"})// map可以拿到返回值3.Date日期对象// 四种生成时间的方法var d1 = new Date()// 获取当前时间var d2 = new Date('2022/9/29 9:08:08')var d3 = new Date(7000)var d4 = new Date(2022, 11, 11, 11, 11, 11, 3000)// 获取本地时间d1.toLocaleString()// 获取当前时间d1.getDate()d1.getHours()d1.getDay()d1.getSeconds()// 具体用法可查看文档 https://www.cnblogs.com/linhaifeng/article/9346128.html4.Math对象// 向下取整Math.floor(5.9)// 5// 向上取整Math.cell(5.9)// 6// 取最大. 最小Math.max(1, 2, 3, 4)Math.min(1, 2, 3, 4)// 取0-1中十五位小数的随机数Math.random()//取3-7中的随机数3 + Math.random()*45.Json对象// Json字符串转化成对象var str1='{"name":"egon","age":18}';var obj1=JSON.parse(str1);console.log(obj1.name);console.log(obj1["name"]);// dic对象转化成JSON对象var obj2={"name":"egon","age":18};var str2 = JSON.stringify(obj2)console.log(str2)6.RegExp对象// 1. 创建正则对象的方式1// 参数1 正则表达式// 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)// 注意：正则放到引号内，{}内的逗号后面不要加空格var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 匹配用户名只能是英文字母、数字和_，并且首字母必须是英文字母 。长度最短不能少于6位 最长不能超过12位 。reg1.test("egon_123") // true// 2. 创建正则对象的方式2var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; // 不要加引号reg2.test("egon_123")// true// 3. String对象与正则结合的4个方法var s1="hello world";s1.match(/l/g) // 符合正则的内容["l", "l", "l"]s1.search(/h/g) // 符合正则的内容的索引0s1.split(/ /) // ["hello", "world"]s1.replace(/l/g,'L') // "heLLo worLd"// 4. 匹配模式g与ivar s2="name:Egon age:18"s2.replace(/e/,"赢") // "nam赢:Egon age:18"s2.replace(/e/g,"赢") // "nam赢:Egon ag赢:18"s2.replace(/e/gi,"赢") //"nam赢:赢gon ag赢:18"// 5. 注意1：// 1、如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找 。// 2、该属性值默认为0，所以第一次仍然是从字符串的开头查找 。// 3、当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置 。// 4、当再次执行test()函数时，将会从该索引位置处开始查找 ， 从而找到下一个匹配 。// 5、因此 ， 当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0 。// 6、如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0 。var reg3 = /egon/g;reg3.lastIndex0reg3.test("egon") // true，匹配成功truereg3.lastIndex // 匹配成功reg3.lasIndex=44reg3.test("egon") // 从4的位置开始匹配，本次匹配失败falsereg3.lastIndex // 匹配失败，lastIndex归为00reg3.test("egon") // 再次匹配成功true// 6. 注意2：// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true 。var reg4 = /^undefined$/;reg4.test(); // 返回truereg4.test(undefined); // 返回truereg4.test("undefined"); // 返回true

推荐阅读


上一篇：3 Java注解：一个真实Elasticsearch案例

下一篇：Mysql单表访问方法，索引合并，多表连接原理，基于规则的优化，子查询优化