前端开发 - JavaScript - 下
Posted Alice的小屋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发 - JavaScript - 下相关的知识，希望对你有一定的参考价值。
12.数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组</title> </head> <body> <script type="text/javascript"> // 容器 装东西 // python 叫 列表list // js 叫 数组 Array 对象 属性和方法 数组得 属性是 索引和length; 其他都是方法; /* 数组得创建 1.字面量方式创建（推荐大家使用这种方式创建数组 简单粗暴） 2.使用构造函数得方式创建，使用new关键词对构造函数进行创建对象 */ //1. var colors = [‘red‘,‘color‘,‘yellow‘]; console.log(colors); // 空数组 var emptyArray = []; console.log(emptyArray); //2. var colors2 = new Array(); // 空数组 console.log(colors2); var colors3 = new Array(‘white‘,‘red‘,‘orange‘); console.log(colors3); //对数组赋值 var arr = []; arr[0] = 123; arr[1] = ‘abc‘; arr[2] = ‘哈哈哈‘; console.log(arr); // 通过下标取到相应得值 console.log(arr[2]); console.log(arr.length); //for 循环遍历 arr 数组得遍历 for(var i=0;i<arr.length;i++){ console.log(arr[i]) } </script> </body> </html>
13.数组常用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组常用方法</title> </head> <body> <script type="text/javascript"> /* 网站：学习网站 开发者网络 https://developer.mozilla.org/zh-CN/ */ //1.数组得合并 concat var north = [‘北京‘,‘天津‘,‘河北‘]; var south = [‘深圳‘,‘上海‘,‘湖南‘]; var newArr = north.concat(south); console.log(newArr); //2.将数组转换成字符串 var score = [98,97,66,100]; //toString() 直接转换为字符串 每个元素使用逗号隔开 var str = score.toString(); console.log(str); //join()方法 将数组中得元素使用指定得字符串连接起来，形成一个新得zifuchuan var str2 = score.join(‘|‘); console.log(str2); //3.查找下标 //indexOf() 正向查找 如果查找得值 不在数组中 返回-1 var index = score.indexOf(101); console.log(index); //方向查找 var lastIndex = score.lastIndexOf(66); console.log(lastIndex); //4.数组得排序 //反转数组 var names = [‘alice‘,‘alex‘,‘egon‘,‘xiaoma‘]; var reverseNames = names.reverse(); console.log(reverseNames); console.log(‘:‘,names); //sort() 按照26个字母排序得 数组 var enames = names.sort(); console.log(enames); console.log(‘,,,‘,names); //5.移除元素和添加元素 //shift() 移除第一个元素 返回第一个元素 var firstName = names.shift(); console.log(firstName); console.log(names); console.log(reverseNames); console.log(enames); //unshift() 向数组得开头添加一个多个元素，并返回新的长度 var newLength = names.unshift(‘shanshan‘,‘haha‘); console.log(newLength); console.log(names); //push() pop() //push() 向数组得末尾添加一个或者多个元素，并返回新的长度 var newNames = names.push(‘老村长‘,‘哈哈‘); console.log(newNames); console.log(names); //pop() 返回被删除得元素，删除数组得最后一个元素 var a = names.pop(); console.log(a); console.log(names); //练习 对字符串反转 var str11 = ‘hello luffy‘; console.log(str11.split(‘‘).reverse().join(‘‘)); </script> </body> </html>
14.函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数</title> </head> <body> <script type="text/javascript"> //函数得声明 /* python:函数得应用 def add(): pass 调用 add() */ //1.js 中函数得声明 function add() { // alert(‘函数被调用了‘) } //调用 add(); //2.带参数 形参 实参 function add2(a,b) { // alert(a+b); } add2(3,4); //3.函数有返回值 function add3(x,y) { return x+y; } var sum = add3(4,5); alert(sum); </script> </body> </html>
15.Object 构造函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Object构造函数</title> </head> <body> <script type="text/javascript"> //对象得创建 //1.字面量方式创建 推荐使用这种方式 简单 直观 //key:value var stu = { name:‘alex‘, age:22, fav:‘鸡汤‘ }; console.log(stu); console.log(window); // 点语法 包括get 方法 set 方法 var n = stu.name; // get console.log(n); console.log(stu.name); stu.age = 34; // set console.log(stu.age); //2.使用Object() 创建 function add() { } add(); // Object() 构造函数 1.首字母大写 碰见构造函数 要想创建对象new var obj = new Object(); obj.name = ‘xiaoma‘; console.log(obj); //使用构造函数得方式创建对象 //---------构造函数--------- //1.函数名首字母要大写 //2.构造函数不需要return //3.为对象添加成员变量 this.name = ‘alex‘ var Stu = function () { this.name = ‘alex‘; this.age = 18; this.fav = function () { console.log(‘吃饭饭‘) } }; //创建对象 var s = new Stu(); console.log(s); var s1 = new Stu(); console.log(s1); //弊端：每次 new 一个对象，里面得成员变量和方法都一样； //推荐大家使用的构造函数的方式： function Animal() { this.name = ‘doudou‘; this.age = 12; // this.fav = function () { // console.log(this.age) // } } Animal.prototype.showname = function () { //执行相应的操作 alert(this.name) }; Animal.prototype.showname2 = function () { alert(this.age) }; var a = new Animal(); a.showname(); a.showname2(); </script> </body> </html>
16.对象补充
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对象补充</title> </head> <body> </body> <script type="text/javascript"> var json1 = { name : ‘张三‘, age : ‘李四‘, fav : ‘唱歌‘ } var str1 = ‘{"name": "Alex", "age": 18}‘; //将JSON转化为JSON字符串 var jsonStr1 = JSON.stringify(json1) console.log(jsonStr1) //将json字符串转化为JSON var json2 = JSON.parse(str1); console.log(json2) </script> </html>
17.String Number
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>String Number</title> </head> <body> <script type="text/javascript"> //内置对象 //String 字符串对象 var str = ‘hello alex‘; console.log(str.length); // 变大写 var bigStr = str.toUpperCase(); console.log(bigStr); console.log(str); // 变小写 console.log(‘small:‘,bigStr.toLowerCase()); //切割 第一个参数 以什么样的字符串切割，第二个返回数组的最大长度； var newArr = str.split(‘ ‘,1); var newArr = str.split(‘ ‘); // var newArr = str.split(‘ ‘,1); console.log(newArr); //提取 从哪到哪 >=2 <6 左闭右开 会返回一个新的字符串 console.log(str.substring(2,6)); //Number //1.将number 转换成zifuchuan var num = 132.325643; var numStr = num.toString(); console.log(numStr); console.log(typeof numStr); //2.四舍五入 var newNum = num.toFixed(2); console.log(newNum); </script> </body> </html>
18.Date
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Date</title> </head> <body> <script type="text/javascript"> //W3C 文档 js chm 手册 // http://www.w3school.com.cn/ //http://www.w3school.com.cn/jsref/jsref_obj_date.asp //创建日期对象 var myDate = new Date(); //获取一个月中的某一天 console.log(myDate.getDate()); //获取当天的日期 console.log(Date()); //获取一年中的某一个月 console.log(myDate.getMonth()); //month+1 console.log(myDate.getDate()); console.log(myDate.getFullYear()); </script> </body> </html>
19.Math
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Math</title> </head> <body> <script type="text/javascript"> //Math http://www.w3school.com.cn/jsref/jsref_obj_math.asp var x = 1.8; //天花板函数 大于等于x 并且与它最接近的整数 var a = Math.ceil(x); console.log(a); //地板函数 小于等于x 并且与它最接近的整数 console.log(Math.floor(x)); //求两个数的最大值，最小值 console.log(Math.max(2.8,5)); console.log(Math.min(2.8,5)); //random 随机数 0-1 之间的随机数 包含0 不包含1 var ran = Math.random(); console.log(ran); //100-200之间的随机数 var c = 100 + Math.random()*100; console.log(c); //min - max 之间的随机数 min + Math.random()*(max-min) // 5-15之间的数 var d = 5 + Math.random()*(15-5); console.log(d); </script> </body> </html>
20.定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> <script type="text/javascript"> //setInterval() 一直操作 setTimeout() 执行一次 var n = 0; var time = null; time = setInterval(function () { n++; console.log(n) },1000); //setTimeout(code,1000) var tt=setTimeout(function () { console.log(time); window.clearInterval(time); },5000) </script> </body> </html>
21.正则表达式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>正则表达式</title> </head> <body> </body> <script type="text/javascript"> //RegExp对象 //创建正则对象方式1 //参数1 正则表达式（不能有空格） //参数2 匹配模式：常用g（全局匹配；找到所有匹配，而不是第一个匹配后停止）和i（忽略大小写吧） var str = ‘hello World‘; var reg1 = new RegExp(‘e‘,‘ig‘); console.log(reg1) //2.字面量方式创建 var reg2 = /o/gi;//检测字符e，不区分大小写，全局匹配 //正则对象提供的检索方式 //test() 检测字符串中是否包含定义字符模式，返回布尔 //要检索的字符在字符串str中 返回true console.log(reg2.test(str)); //2.2 exec() 具体执行匹配，返回数组 console.log(reg2.lastIndex); // 2 保存一次匹配时开始的下标 console.log(reg2.exec(str)); //["o", index: 7, input: "hello world"] console.log(reg2.lastIndex); //2 //3.常用方法 //match var reg3 = /d/g; console.log(str.match(reg3)) //2.replace替换： str.replace(被替换的，替换的) console.log(str.replace(reg3,‘*‘)); //3.search() console.log(str.search(reg3));//查询字符串在字符中出现的位置 下标 //4.split() console.log(str.split(reg3)); </script> </html>
22.元字符
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>元字符</title> <script> window.onload = function (){ //元字符 //1.单个字符和数字 //1 . 匹配除换行符以为的任意字符 var str = "oweb"; var reg = /./g; console.log(reg.exec(str)); var str = "www/baidu/com"; var reg = /www\......\.com/g; //如果想不让字符有其他意义 转义\ console.log(reg.exec(str)); //2. [] 匹配[]里面的任意一个字符 var str1 = "4awebadsads"; var reg1 = /[a-zA-Z0-9]/g; // 匹配字母还是数字 console.log(reg1.exec(str1)); var str2 = "1s34"; var reg2 = /[0-9][0-9][0-9]/g; console.log(reg2.exec(str2)); //3. [^] 所有不在这个范围内的字符 var str3 = "abd"; var reg3 = /[^a-z]/g; //匹配除小写字母以外的任意字符 console.log(reg3.exec(str3)); //4. \ var str4 = "web"; var reg4 = /\d/g; //匹配数字 var reg5 = /\D/g; //非数字 console.log(reg4.exec(str4)); //null console.log(reg5.exec(str4)); //w var reg6 = /\w/g; //匹配数字 字母 下划线_ var reg7 = /\W/g; //匹配除数字 字母 下划线以外的任意字符 console.log(reg6.exec(str4)); //w console.log(reg7.exec(str4)); //null var reg8 = /\s/g; //空格 var reg9 = /\S/g; //非空白字符 console.log(reg8.exec(str4)); //null console.log(reg9.exec(str4)); //w //5 锚字符 ^以什么开头 $以什么结尾 var str = "www."; var reg10 = /^www/g; // ^字符 console.log(reg10.exec(str)); var reg11 = /www\.$/g; //字符$ console.log(reg11.exec(str)); //重复的字符 //? 匹配前面的字符0个或一个 ， var strs = "webr44546ere"; var reg12 = /[0-9]?/g; console.log(reg12.exec(strs)); //* 匹配0个或任意多个字符 尽可能多的匹配 var reg13 = /[a-z]*/g; //匹配小写字母，0个或多个 console.log(reg13.exec(strs)); //+ 至少匹配一次 var reg14 = /\d+/g; console.log(reg14.exec(strs)); //{4} var stra = "11274567800"; var rega = /^1\d{10}$/g; //匹配连续的四个数字 console.log(rega.exec(stra)); //{1,4} 最少一个最多4个 var strb = "edg"; var regb = /^[a-zA-z]{2,3}$/g; console.log(regb.exec(strb)); //|| 竖线 或者 var strc = "www.google"; //baidu google ujiuye var regc = /www.baidu|google|ujiuye/g; console.log(regc.exec(strc)); //() 分组 var strc = "www.google"; //baidu google ujiuye var regc = /www.(baidu)|(google)|(ujiuye)/g; console.log(regc.exec(strc)); console.log(RegExp.$1); console.log(RegExp.$2); console.log(RegExp.$3); var str = "helloworld"; var reg = /(hello)(world)/g; /* console.log(reg.exec(str)); console.log(RegExp.$1);*/ console.log(str.replace(reg,"$2 $1")); } </script> </head> <body> </body> </html>
23.正则表达式相关练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正则表达式相关练习</title> </head> <body> <script type="text/javascript"> //正则表达式练习 http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp window.onload = function () { //1.检索字符串中是否不包含字母 var str = ‘12‘; var reg1 = /[^a-zA-Z]/g; console.log(reg1.test(str)); if(reg1.test(str)){ console.log(‘不包含‘); }else{ console.log(‘包含‘); } //2.去除字符串首尾空格 var str2 = ‘ hello world! ‘; //开头的空格 var reg =/^\s+/ig; // + 1到多次！ var str3 = str2.replace(reg,""); var reg2 = /\s+$/ig; var str4 = str3.replace(reg2,""); console.log("|"+str4+"|"); //3.检查用户账号 function checkUser(str) { var re = /^[a-zA-Z]\w{3,15}$/ig; if(re.test(str)){ console.log(‘正确‘) }else{ console.log(‘错误‘) } } checkUser(‘alex_haha‘); //4.手机号码 11位数字以1开头 function checkMobile(str) { var re = /^1\d{10}$/ig; if(re.test(str)){ console.log(‘正确‘) }else{ console.log(‘错误‘) } } checkMobile(‘13788881239‘); checkMobile(‘137893813323‘); //5.电话号码 区号+号码 区号以0开头 3位或4位 // 号码由7位或8位数字组成 // 区号与号码之间可以无连接符，也可以"-"连接 function checkPhone(str) { var re = /^0\d{2,3}-?\d{7,8}$/ig; if(re.test(str)){ console.log(‘正确‘) }else{ console.log(‘错误‘) } } checkPhone("095-12345678"); //6.邮箱 //规则：第一部分@第二部分 //第一部分：由字母 数字 下划线 短线 - 点号 . 组成 //第二部分：为一个域名 域名由 字母 数字 短线 短线 - 域名后缀组成 // 域名后缀一般为 .xxx 或者 .xxx.xx 一区的域名后缀一般为 2-4 位，如cn, function checkEmail(str) { var re = /^(\w-*\.*)[email protected](\w-?)+(\.\w{2,})+$/ig; if(re.test(str)){ console.log(‘正确‘) }else{ console.log(‘错误‘) } } checkEmail(‘[email protected]‘); } </script> </body> </html>
以上是关于前端开发 - JavaScript - 下的主要内容，如果未能解决你的问题，请参考以下文章
markdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发