目录
- 一、js概念；js使用；变量与常量；数据类型；运算符；语句
- 二、函数
- 三、类和继承
- 四、数组
- 五、字符串
- 5.1 创建和属性
- 5.2 方法
- 5.2.1 toUpperCase() /toLowerCase()
- 5.2.2 charAt(index)/charCodeAt(index))
- 5.2.3 indexOf(str,fromIndex)
- 5.2.4 lastIndexOf(substring[, startindex])
- 5.2.5 substring(startindex,endindex)
- 5.2.6 substr(startindex,length)
- 5.2.7 split(param)
- 5.2.8 match(rgExp)
- 5.2.9 replace(rgExp, replaceText)
- 5.2.10 search(rgExp)
- 5.2.11 slice(start, [end])
- 5.3 字符串方法应用:获取用户名和服务商
- 六、正则表达式对象(Regular Expression)
- 七、Math对象
- 八、时间对象
- 九、Global对象
- 十、JSON对象
- 十一、自定义对象
- 十二、JS对象操作
一、js概念；js使用；变量与常量；数据类型；运算符；语句
1.1 概念
js:是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等
1.1.1 JavaScript是一门独立的语言
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
JavaScript是一门独立的语言。
JavaScript是一种脚本语言，不需要编译，是解释运行的语言。
JavaScript运行需要环境，最常见的运行环境就是浏览器，现代主流的浏览器都内置了JS引擎，可以运行JavaScript代码。JS也有服务器端运行环境，我们不做讨论（Node.js、GoogleV8引擎…）。
1.1.2 JS的特点
解释运行，没有编译过程
基于对象
弱类型
1.1.3 JavaScript不得不说的历史
和JAVA的关系：语法十分相似，但其实毫无关系。
1995年5月，Netscape，LiveScript
1995年12月，改名为JavaScript
1996年8月，微软，Jscript
1997-1999年，ECMA，ECMAScript，基于已有的JavaScript和Jscript，提出了标准的Script语法规则，JavaScript和Jscript都遵循这套标准。
1999-以后，ECMAScript不断的更新
1.1.4 JS的优点：
交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）
1.2 js使用:元素绑定事件
事件：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）
事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数
常用事件：onclick (单击事件)
语法 ：将事件名称以标签属性的方式绑定到元素上，自定义事件处理
- 通过标签的onclick属性点击后触发所绑定的事件,用法为
onclick=事件("函数名()")
常用事件函数：onsole.log(): 控制台输出 alert(): 弹框 document.write() 输出，重新渲染页面 - 在script标签(type=“text/javascript”)内部编写逻辑操作页面元素节点
<script> type="text/javascript">alert("网页警告框");</script> - 通过script标签的src属性外联js文件，如src=“demo.js”
<script src="index.js"></script>
1.3 变量与常量
- var声明变量；const声明常量；输入函数prompt() 保留小数toFixed()
<script>var a=100; var b,c ;b=10,c=20 ; </script> - JS中有数据类型，但是JS的引用是不区分类型的，所以称JS为弱类型，即，一个引用可以先指向数字类型，后再指向字符类型，还可以再指向对象类型。
1.4 数据类型
1.4.1 类型检测函数typeof(),
eg.typeof(null)特殊空对象
1.4.2 分类
-
JS基本类型一共有五种
Number、String、Boolean、undefined、null -
数值类型中有如下几个特殊值
JS不区分整形和浮点型，JS中的所有数值类型底层实现都是浮点型。
Infinity 无穷大
-Infinity 负无穷大
NaN 非数字，非数字非常特殊，和任何值都不行等，包括本身，即NaN==NaN的值为false。可以通过isNaN()判断某值是否为NaN。
数值类型是基本数据类型，但JS本身提供了对应的包装对象Number，具有和数值处理相关的属性和方法。
Number提供的属性：
Number.MAX_VALUE 可表示的最大数字
Number.MIN_VALUE 可表示的最小数字
Number.NaN 非数字值
Number.POSITIVE_INFINITY 正无穷大
Number.NEGATIVE_INFINITY 负无穷大 -
JS中提供了字符串的包装对象String，提供了字符串处理相关的属性和方法。
String对象提供的属性：length：字符串中字符数
String 对象提供的方法： -
JS中提供了布尔类型的包装对象Boolean，提供了布尔类型处理的相关属性和方法。
-
Undefined类型只有一个值就是undefined，表示变量未定义，当一个变量未初始化时，值为undefined。
-
Null只有一个值就是null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
1.4.3 数据类型转换
- 强制转换:
Number(null、boolean、undefined)分别返回0,1或0，nan
.tostring()
parseFloat(param):从数据中解析整数值(过程：如果参数为非字符串类型,会自动转成字符串；从左向右依次对每一位字符转number,转换失败则停止向后解析,返回结果);
parseint(param):提取number值，包含整数和小数部分 - 隐式转换：当字符串与其他数据类型进行"+"运算时,表示字符串的拼接，不再是数学运算；其他情况下，一律将操作数转number进行数学运算
- 数字：可以转为对应字符串 0转为false其他数字转为true 转为对应的Number包装对象
字符串：空字符串转换为0，数字字符串转换为对应数字，其他字符串转换为NaN，空字符串转为false，其他字符串为true，转为对应的String包装对象。
布尔类型：转为对应字符串，ture转为1false转为0，转为对应的Boolean包装对象。
对象：转为字符串，如果为null则为“null”，如果对象为null则转为false，否则转为true，
1.5 运算符
Javascript中的运算符和Java大致相同。
只是运算过程中需要注意几点：
var x = 3120/1000*1000; x = 3120;而不是3000。
var x = 2.4+3.6 ; x = 6;而不是6.0
var x = “12” + 1; x = “121”;
x = “12” – 1 ; x = 11;
1.5.1 赋值；算数；复合
1.5.2 自增/自减；
<ul>
<li><b>在单独与变量结合时，放前和放后没有区别</b>
<li><b>和其他运算符结合使用：如果是前缀：先++/-- 再进行复制或者其他运算；如果是后缀：先结合其他运算符，在进行 ++/--</b>
</ul>
1.5.3 关系与比较运算符
相等 : 不考虑数据类型,只做值的比较(包含自动类型转换)
全等 : 不会进行数据类型转换,要求数据类型一致并且值相等才判断全等
===(全等) !==(不全等)：用来判断表达式之间的关系,结果永远是布尔值 true/false
-
使用：
- 字符串与字符串之间的比较:依次比较每位字符的Unicode码,只要某位字符比较出结果,就返回最终结果
- 其他情况: 一律将操作数转换为number进行数值比较，如果某一操作数无法转换number，则变成NaN参与比较运算，结果永远是false
- 比较运算符：比较编码和数字大小,null在等值比较时不转数字0，变成NaN参与比较运算，结果永远是false
- 相等会进行隐氏转换比较值，全等会比较类型;null和undefined相等 但是 null和undefined不全等
1.5.4 逻辑运算符&&；||；!
1.5.5 三目运算符：a>b?console.log(‘a比b大’):console.log(‘b比a大’)
1.5.6 实例：自增运算符
<script>
var a = 10 ;
document.write("自增运算符和其他运算符结合使用,a=10,经过a++ + ++a + a++后输出：")
// console.log(a++ + ++a + a++)
document.write(a++ + ++a + a++)
</script>
1.5.7 标记的使用
console.time(‘标记’); // 开始标记
console.timeEnd(‘标记’); // 结束标记
console.log("log1"); // 打印日志
console.info("info1"); // 打印消息
// console.warn(1); // 打印警告
// console.error(1); // 打印错误
// 程序耗时统计
// 开始计时和结束计时的字符串保持一致
console.time('for'); // 计时开始
for(var i = 1; i>=10000; i++){
continue;
}
console.timeEnd('for'); // 计时结束
1.6 语句
- 语句
- if语句：if(){};if(){}else{};if(){}else if(){}
- switch语句：switch(value){case 值1:事件1;break; case 值2:事件2;break;;default:事件3//所有case匹配失败后默认执行的语句}value与值1匹配全等时才执行事件
- while语句while(循环条件){循环体；更新循环变量};do{}while();
- for语句:for(定义循环变量;循环条件;更新循环变量){循环体}
- for while do-while 那个执行效率高？如何检测？
-
var x = 3;
if(x==4)//可以进行比较运算。if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。
因为在Js中0或者null就是false，
非0或者非null就是true（通常用1表示）。
所以if(x=4)结果是true；
<!-- for while do-while 那个执行效率高？如何检测？ --> <!-- if;swich --> <li class="example"><tag>实例1：if语句判断用户是否可以访问：<br></tag> <label for="if">请输入你的年龄：</label> <input type="text" name="" id="if"> <button >提交</button> </li> <li class="example"><tag>实例2：switch语句判断用户是否可以访问：<br></tag> <label for="switch">请输入你的年龄：</label> <input type="text" name="" id="switch"> <button >提交</button> </li> <li class="example"><tag>实例3：循环语句的应用：<br></tag> <label for="for">请输入i：</label><input type="text" name="" id="for"> <button>提交</button> </li> <script> var mytag = $(".example") function judge(regobj,element){ // for(var i=0;i<mytag.length;i++){ // console.log(mytag[i].innerText) // regob.test(mytag[i].innerText)? mytag[i].append(htmlobj):console.log("匹配失败") // } // $(mytag).each(function(i,e){ // console.log(i,e) // regobj.test(e.innerText)? e.append(element):console.log("匹配失败") // }) $.each(mytag,function(i,d){ // console.log(i,d) regobj.test(d.innerText)? d.append(element):console.log("匹配失败") }) } // 实例1 // 添加对象 var regobj1 = new RegExp("实例8.1：if语句判断用户是否可以访问：","ig") // var htmlobj1 = $('<span style="text-indent:4px;color:red">if语句</span>') // var htmlobj2 = $('<span style="text-indent:4px;color:red">青少年访问模式</span>') // $("#if+button").click(function(){ // var ifage=$("#if").val() // // alert(ifage) // if (ifage>=18) judge(regobj1,htmlobj1[0]); // else judge(regobj1,htmlobj2[0]); // }) var span = $("<span></span>") var jsonobj = {"text-indent":"4px","color":"red"} $("#if+button").click(function(){ var ifage=$("#if").val() if (ifage>=18) judge(regobj1,span.html('if语句').css(jsonobj)[0]) else judge(regobj1,span.html('青少年访问模式').css(jsonobj)[0]) }) var regobj2 = new RegExp("实例8.2：switch语句判断用户是否可以访问：","ig") $("#switch+button").click(function(){ var switchage=Number($("#switch").val()) // alert(switchage) switch(switchage){ case 26:judge(regobj2,span.html('switch语句').css(jsonobj)[0]); break; case 17:judge(regobj2,span.html('青少年不可访问').css(jsonobj)[0]); break; default:judge(regobj2,span.html('switch语句').css(jsonobj)[0]); } }) // 实例9 var regobj3 = new RegExp("实例9：循环语句的应用：","ig") $("#for+button").click(function(){ var i = Number($("#for").val()) // alert(i); switch(i){ case 1: for( i=1;i<10;i++) if(i**3==i) { judge(regobj3,span.html(i).css(jsonobj)[0]) console.log(i) } break; case 10: for( i=10;i<100;i++) if((i%10)**3+parseInt(i/10)**3==i){ judge(regobj3,span.html(i).css(jsonobj)[0]) console.log(i) } break; case 100: for(i=100;i<1000;i++) if((i%10)**3+parseInt(i/10%10)**3+parseInt(i/100)**3==i){ judge(regobj3,span.html(i).css(jsonobj)[0]) console.log(i) } break; } }) // 添加字符串： // html1 = '<span style="text-indent:4px;color:red">if语句</span>' // html2 = '<span style="text-indent:4px;color:red">青少年访问模式</span>' // if (ifage>=18) judge(html1) // else judge(html2) // jsonobj2 = { // 'html1' : '<span style="text-indent:4px;color:red">if语句</span>', // 'html2' : '<span style="text-indent:4px;color:red">青少年访问模式</span>' // } // if (ifage>=18) judge(jsonobj2['html1']) // else judge(jsonobj2['html2']) </script>二、函数
function.arguments
为当前执行的 function 对象返回一个arguments 对象。
functionName.caller
返回一个对函数的引用，该函数调用了当前函数。2.1 函数与作用域
2.1.0 函数定义
function 函数名(参数列表){函数体;return 返回值};- 函数调用
函数名(参数列表)
2.1.1 注意
调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。
说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。那么传递的参数呢？
其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一个数组中。例：
function demo()//定义函数。 { alert(arguments.length); } demo(“hello”,123,true);//调用函数。那么弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。
for(var x=0; x<arguments.length; x++) { alert(arguments[x]); }为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。
- 函数在调用时的其他写法：
var show = demo();//show变量接收demo函数的返回值。
var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。
//那么该函数也可以通过show()的方式运行。
2.1.2 动态函数
通过Js的内置对象Function实现。
var demo = new Function(“x”,”y”,”alert(x+y);”); demo(4,6); 如同： function demo(x,y) { alert(x+y); } demo(4,6); 不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。2.1.3 匿名函数
- 匿名函数自执行:
(function (形参){})(实参); - 定义变量接收匿名函数:
var fn=function (){};fn()
注：没有返回值的话 会是 undefined；没有传参的话 会默认传递 undefined
2.1.3 作用域
- 全局变量和全局函数：只要在函数外部使用 var 关键字定义的变量，或函数都是全局变量和全局函数，在任何地方都可以访问;所有省略 var 关键字定义的变量，一律是全局变量
- 局部变量/局部函数：在函数内部使用 var 关键字定义的变量为局部变量，函数内部定义的函数也为局部函数，只能在当前作用域中使用，外界无法访问
- 作用域链：局部作用域中访问变量或函数，首先从当前作用域中查找，当前作用域中没有的话，向上级作用域中查找，直至全局作用域
2.1.4 普通函数与作用域应用
<button onclick="f1() " >点击执行函数调用</button> <div id="dynamic1"></div> <!-- 函数与作用域 --> <script> function func1(a,b){return a>b?'函数1与三目':b} // 全局变量 var a = 10; function func2(){ // 局部变量 var a = 1; $("#dynamic1").append( $('<span style="margin: 10px 40px;color:red"> 函数2内a='+a+'</span><br>') ); // 1 } func2() console.log('执行函数3前a=',a) function func3(){ // 没有添加 var 关键字 说明是全局变量 a = 1; $("#dynamic1").append( $('<span style="margin: 10px 40px;color:red"> 函数3内a='+a+'</span><br>') ); // 1 } func3() console.log('执行函数3后a=',a) function f1(){ $("#dynamic1").append($('<span style="margin: 10px 40px;color:red">'+func1(2,1)+'</span><br>')) func2(); $("#dynamic1").append( $('<span style="margin: 10px 40px;color:red"> 函数2外a='+a+'</span><br>') ); // 1 $("#dynamic1").append( $('<span style="margin: 10px 40px;color:red"> 函数3外a='+a+'</span><br>') ); // 1 $("#dynamic1").append( $('<span style="margin: 10px 40px;color:red"> 函数3内a='+a+'</span><br>') ); // 1 } </script>2.1.5 匿名函数的应用：闭包与作用域
<!-- 闭包函数 --> <button onclick="f2()">点击执行函数调用</button> <div id="dynamic2"></div> <script> var a=1 function fun4(){ function inner(){a++;return a}; return inner() } function fun5(){ var a=10; return function(){a++;return a}; } function f2(){ $("#dynamic2").append( $('<span style="margin: 10px 40px;color:red"> 闭包函数4：a='+fun4()+'</span><br>') ); $("#dynamic2").append( $('<span style="margin: 10px 40px;color:red"> 闭包函数5：a='+fun5()()+'</span><br>') ); } var b = 10 function f3(){ function inner(){ b = 1;console.log('执行闭包函数f3后b=',b) } return inner() } f3() var c = 10 function f4(){ return function(){ var c=1;console.log('执行闭包函数f4后c=',c) } } f4()() // this的使用场景 function f5(){ console.log('this=',this) } f5() f5.call({x:100}) f5.bind({x:200})() </script>闭包函数中作用域的查找规则：不是从执行函数中查找，而是从函数定义的地方查找，向上级作用域查找
注意：两者存在区别// 函数作为参数被传递 function print(fn) { const a = 200 fn() } const a = 100 function fn() { console.log(a) } print(fn) // 100 // 所有的自由变量的查找，是在函数定义的地方，向上级作用域查找 // 不是在执行的地方！！！2.1.6 实际开发中闭包的应用
<script> function createCache() { const data = {} // 闭包中的数据，被隐藏，不被外界访问 return { set: function (key, val) { data[key] = val }, get: function (key) { return data[key] } } } const d = createCache() d.set('a', 100) console.log( d.get('a') ) // console.log(data.a) error </script>2.2 分离绑定事件
- 查找元素var btn=document.getElementById()；
- 函数返回元素节点列表；元素节点对象提供了以下属性来操作元素内容：innerHTML读取或设置元素文本内容,可识别标签语法、innerText设置元素文本内容,不能识别标签语法；
- 绑定事件
btn.onclick = function 函数名()/(){事件}
<button id="clk" style="outline: 1px solid red;font-size: 20px;margin: 10px 40px;"> 分离绑定事件 </button> <!-- 元素绑定事件 --> <script> var clk = document.getElementById('clk'); clk.onclick = function (){ $("#clk").after( $('<span style="margin: 10px 40px;color:red"> 分离绑定事件</span><br>') ) } </script>2.3 改变字体大小和颜色
<div class="overflow"> <div> <a href="javascript:;" >大</a> <a href="javascript:;">中</a> <a href="javascript:;" class="focus">小</a> </div> <div> <a href="javascript:;" >红</a> <a href="javascript:;">绿</a> <a href="javascript:;" class="focus">蓝</a> <select name="" id="select"> <option value="">请选择</option> <option value="red">红</option> <option value="green">绿</option> <option value="blue">蓝</option> </select> </div> <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis delectus architecto quod adipisci ipsam fugiat ipsa necessitatibus minima provident, distinctio facere aliquid sequi quibusdam voluptas eum dignissimos repellendus ipsum officia!</div> </div> <script> $.each($('.overflow a'),function(i,e){ if(i<3){ $(this).click(function(){ // alert($(this).text()) changeFontsize($(this).text()) // console.log($('.overflow a').attr('class')) // $('.overflow a').removeAttr('class') // $(this).attr('class','focus') }) }else{ $(this).click(function(){ alert($(this).text()) changeFontcolor($(this).text()) }) } }) $('#select').change(function(){ $('.content').css('color',$(this).val()) }) function changeFontsize(etext){ switch(etext){ case "大": $('.content').attr('style','font-size:32px');break case "中": $('.content').attr('style','font-size:22px') ;break case "小": $('.content').attr('style','font-size:18px') ;break } } function changeFontcolor(etext){ switch(etext){ case "红": $('.content').attr('style','color:red');break case "绿": $('.content').attr('style','color:green') ;break case "蓝": $('.content').attr('style','color:blue') ;break } } </script>三、类和继承
<script> <!-- 类的定义 --> class Person { constructor(name,age){ this.name = name this.age = age } say(){ console.log(`我是${this.name}，今年${this.age}岁`) } wait(){ setTimeout(function f() { console.log('setTimeout中this=',this) }) } } class Dog { constructor(name){ this.name = name } wait(){ setTimeout( () =>{console.log('setTimeout中this=',this) } ) } } </script> <script> <!-- 类的继承 --> class Student extends Person { constructor(name,age,major){ super(name,age) this.major = major } learn(){ console.log(`我正在学习${this.major}`) } } let zhangsan = new Person('张三',18) zhangsan.say() // zhangsan.wait.call() zhangsan.wait() let jinmao = new Dog('大黄') jinmao.wait() let lisi = new Student('李四',19,'电子信息') lisi.learn() console.log(zhangsan.hasOwnProperty('learn')) // console.log(zhangsan.__proto__) // console.log(Student.prototype) </script>3.1 实例1：简易jQuery源码
<button class="btn">click me</button> <script> class jQuery { constructor(selector){ const selectors = document.querySelectorAll(selector) const length = selectors.length for(let i=0;i<length;i++){ this[i] = selectors[i] } this.length = length } each(fn){ for(let i=0;i<length;i++) fn(this[i]) } on(type,fn){ return this.each(elem=>{ elem.addEventListener(type,fn,false) }) } } const $btn = new jQuery('.btn') console.log($btn) // $li.each(() => alert('clicked')) $btn.on('click',() => {alert('clicked')}) </script>3.2 实例2：深拷贝
<script> const obj1 = { age: 20, name: 'xxx', address: { city: 'beijing' }, arr: ['a', 'b', 'c'] } console.log(deepClone(obj1)) function deepClone(obj = {}){ if (typeof obj !='object' || typeof obj == null) return obj let result if (obj instanceof Array) { result = [] } else { result = {} } for(let key in obj){ console.log(key,obj.hasOwnProperty(key)) if (obj.hasOwnProperty(key)) result[key] = deepClone(obj[key]) } return result } </script>四、数组
JS中提供了数组的包装对象Array，提供了数组处理相关的属性和方法。
Js中数组中的特点：可以存任意元素，长度是可变的。
Array对象提供的属性：
length：数组长度4.1 定义js数组
var arrayObj = new Array(); //创建一个数组
var arrayObj = new Array([size]); //创建一个数组并指定长度，注意不是上限，是长度
var arrayObj = new Array([element0[, element1[, …[, elementN]]]]); 创建一个数组并赋值
var arrayObj = [1,2,5,6,3];//数组直接量定义数组4.2 遍历
for(var i in arr){document.write(i,arr[i])}遍历数组中全部的值 获取到对应的索引
遍历数组的全部内容 ;
for(var i=0;i<length;i++){console.log(arr[i])}如果对应索引的值为空 显示undefined;4.3 方法
4.3.1 尾
push(data)；pop()push(data)在数组的末尾添加一个或多个元素,多个元素之间，使用逗号隔开,返回添加之后的数组长度；pop()移除末尾元素返回被移除的元素4.3.2 首
unshift(data)；shift()unshift(data)在数组的头部添加一个或多个元素，返回回添加之后的数组长度；shift()移除数组的第一个元素返回被移除的元素4.3.3 中：
splice；slice(start, [end])splice(index,num)arr索引值为index的位置开始 返回的截取num个值splice(index,num,new_value1,new_value2)索引值为index的位置开始,若index位置有值，则用new_value代替截取num个值,放在新数组中返回，若index位置无值，则从index位置开始添加new_value
slice(start, [end])
返回一个数组的一段。- 转换：
toString()将数组转换成字符串类型,返回字符串结果; join(param)将数组转换成字符串,可以指定元素之间的连接符,如果参数省略,默认按照逗号连接,返回字符串;
4.3.4 concat([item1[, item2[, . . . [, itemN]]]])
返回一个新数组，这个新数组是由两个或更多数组组合而成的。
4.3.5 reverse()
反转数组,倒序重排, 返回重排的数组,注意该方法直接修改原数组的结构
4.3.6 sort()
对数组中元素排序,默认按照Unicode编码升序排列, 返回重排后的数组,直接修改原有数组
参数 : 可选,自定义排序算法
自定义降序function sortDESC(a,b){ return b-a; } //如果返回值>0,交换元素的值,b-a表示降序排列</b></li>4.4 数组方法应用
<script> var arr=[0,1,2,3,4]; document.write("arr=",arr,"<br>") //类型 var arr = new Array(5,6,7) document.write("arr=",arr,"<br><br>") //对象 document.write('arr[arr.length-1]=',arr[arr.length-1],"<br>") //索引 arr[10]=6;document.write("arr[10]=6修改后arr=",arr,"<br><br>") //修改 for(var i=0;i<arr.length;i++){document.write(i,' ',arr[i],"<br>")} //遍历 for(var i in arr){document.write(i,' ',arr[i]),";"} arr.push(8); document.write("<br>arr=",arr,"<br>") arr.pop();document.write("arr=",arr,"<br>") //pop arr.unshift(0); document.write("arr=",arr,"<br>") arr.shift();document.write("arr=",arr,"<br><br>") var arr = [1,2,3,4,5]; var res = arr.splice(2,2); document.write("res=",res,"<br>"); document.write("arr=",arr,"<br><br>"); var arr = [1,2,3,4,5]; var res = arr.splice(2,2,'?','?'); document.write("res=",res,"<br>"); document.write("arr=",arr,"<br><br>"); var arr = [1,2,5]; document.write("arr=",arr,"<br>"); arr.splice(2,0,3,4); document.write("arr=",arr,"<br><br>"); document.write("str1=",arr.toString(),"<br>") document.write("str2=",arr.join('-'),"<br><br>") //join arr.sort(sortdsc);function sortdsc(a,b){return b-a};document.write("arr=",arr,"<br><br>") //sort // 乱序算法: function getnorepeatarr(arr,len){ res = []; var sortrandom = function (){ return 0.5-Math.random()} arr.sort(sortrandom); for(var i=0;i<len;i++){ res.push(arr[i]) }; return res } document.write("res=",getnorepeatarr([0,1,2,3],4)) 、 </script> <hr>4.5 实例：从十张图片中随机显示五张
<div class="example"><tag>实例13：从十张图片中随机显示五张</tag> </div> <div> <img src="" alt="" class="img"> <img src="" alt="" class="img"> <img src="" alt="" class="img"> <img src="" alt="" class="img"> <img src="" alt="" class="img"> </div> <script> var arr = []; while(arr.length<5){//生成1个包含五个随机数的数组 var i = parseInt(Math.random()*10) if(arr.indexOf(i)<0) arr.push(i) } console.log(arr) $('.img').each(function(i,e){ $(this).attr('src',`imgs/bk${arr[i]}-8.jpg`) }) </script>五、字符串
String对象提供的属性：
length：数组长度5.1 创建和属性
var str1 = 'abcd';
var str2 = new String("abcd")5.2 方法
5.2.1 toUpperCase() /toLowerCase()
转换大小写;返回转换后的字符串,不影响原始字符串
5.2.2 charAt(index)/charCodeAt(index))
获取字符/字符编码获取指定下标的字符/获取指定下标的字符编码;参数为指定的下标,可以省略,默认为0
5.2.3 indexOf(str,fromIndex)
根据字符串找索引值获取指定字符的下标,从前向后查询,找到即返回
参数 :
str 表示要查找的字符串,必填
fromIndex 表示起始下标,默认为0
返回指定字符的下标,查找失败返回-15.2.4 lastIndexOf(substring[, startindex])
返回 String 对象中子字符串最后出现的位置。
5.2.5 substring(startindex,endindex)
根据指定的索引范围截取字符串,startIndex ~ endIndex-1
5.2.6 substr(startindex,length)
根据索引startindex截取指定length的字符串
5.2.7 split(param)
将字符串按照指定的字符进行分割,以数组形式返回分割结果
参数 : 指定分隔符,必须是字符串中存在的字符,如果字符串中不存在,分割失败,仍然返回数组5.2.8 match(rgExp)
使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。
5.2.9 replace(rgExp, replaceText)
返回根据正则表达式进行文字替换后的字符串的复制。
5.2.10 search(rgExp)
返回与正则表达式查找内容匹配的第一个子字符串的位置。
5.2.11 slice(start, [end])
返回字符串的片段。
5.3 字符串方法应用:获取用户名和服务商
<input type="text" placeholder="请输入邮箱地址" id="email"> <button id="btn2">获取用户名和服务商</button> <table> <thead><tr><th>用户名</th> <th>服务商</th> </tr></thead> <tbody id="tbd"></tbody> </table> <script> var email = document.getElementById('email') var btn2 = document.getElementById('btn2') var tbody= document.getElementById('tbd') btn2.onclick = function(){ var str = email.value var arr = str.split('@') // var index = str.indexOf('@') // var u = str.substr(0,index) // var f = str.substring(index+1) var html='<tr>'+'<td > '+arr[0]+'</td>'+ '<td >'+arr[1]+' </td>'+'</tr>' tbody.innerHTML=html } </script>六、正则表达式对象(Regular Expression)
属性lastindex可读可写，表示下一次匹配的起始索引br
- 默认情况下，正则表达式对象不能重复调用方法，如果重复调用，结果会出错：由于 lastIndex 保存再一次匹配的起始下标，重复调用时，不能保证每次都从下标0开始 验证，可以手动调整 lastIndex 为 0。
- 只有正则对象设置全局匹配 g ，该属性才起作用
6.1 创建
var reg1 = /字符模式/修饰符;<br>修饰符 :
i : ignorecase 忽略大小写
g : global 全局范围
var reg2 = new RegExp('匹配模式','修饰符');
正则表达式对象可以接收一个变量;6.2 方法
6.2.1 reExp.test(str)
验证目标字符串str中是否存在满足正则匹配模式reg的内容，存在则返回true，
不存在返回false参数为要验证的字符串6.2.2 rgExp.exec(str)
用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组。
6.2.3 str.match(regExp/subStr)
作用 : 查找字符串中满足正则格式或满足指定字符串的内容
返回 : 数组,存放查找结果,替换6.2.4 str.replace(regExp/subStr,newStr)
作用 : 根据正则表达式或字符串查找相关内容并进行替换
返回 : 替换后的字符串,不影响原始字符串6.3 正则表达式应用
<input type="text" id="keyword"><button id="btn">查找</button> <div > Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis laudantium maiores voluptate. Iure, unde repudiandae molestiae eos doloribus fugit at voluptate earum ad reprehenderit magnam, nesciunt eligendi amet ullam repellendus. </div> <script> var key = document.getElementById('keyword') var btn = document.getElementById('btn') var p = $("#btn+div") btn.onclick = function(){ var reg = new RegExp(key.value,'ig') var str = p.html()//等价于dom对象的innerHTML属性 console.log(str) console.log(str.match(reg)) console.log(reg.test(str)) var res = str.replace(reg,'<tag >'+key.value+'</tag>') // alert(res) reg.test(str)? res : (res =str) // alert(res) p.html(res) $("#btn+div>tag").css("color","red") } </script>七、Math对象
- Math对象主要提供一些列数学运算的方法
- 属性 Math.PI圆周率, Math.E自然对数;
- 方法:
Math.random()随机0-1;
Math.ceil(x)对x向上取整,忽略小数位,整数位+1;
Math.floor(x)对x向下取整,舍弃小数位,保留整数位;
Math.round(x)对x四舍五入取整数
Math.abs(number)
返回数字的绝对值。
Math.exp(number)
返回 e（自然对数的底）的幂。
console.log(parseInt(Math.random()*10)) //0-9 console.log(Math.floor(Math.random()*10)) //0-9 console.log((function(n){return parseInt(Math.random()*n)+1})(9)) //1-9 console.log(Math.floor(Math.random() * (n))); // 0 - (n-1) 的随机整数 向下取整 console.log(Math.floor(Math.random() * n + 1)); //1 - n 的随机整数 向下取整八、时间对象
- 创建:
· var now = new Date()·//Wed Nov 11 2020 18:46:05 GMT+0800 (中国标准时间) - 方法
getTime()：读取或设置当前时间的毫秒数;
getFullYear()//年
getMonth()//月份从0开始
getDate()//某月的第几日
getDay()//星期几
九、Global对象
是一个内部对象，目的是把所有全局方法集中在一个对象中。
Global 对象没有语法。直接调用其方法。
eval(codeString)十、JSON对象
JSON本质上就是一段字符串，能够保存较复杂关系的数据，具有良好的数据保存格式，又极为轻量，加之多种代码平台都支持对字符串的处理，所以我们可以使用JSON字符串进行数据的传入，甚至跨平台传输。
data = { name:"zs", age:19, addr:["bj,sh,gz"], wife:[ {name:"苏荃",age:40,job:["教主夫人","大大老婆"]}, {name:"建宁",age:20,job:["公主","小老婆"]}, ] }查看当前JSON中第二个wife的工作
data[“wife”][1][“job”];十一、自定义对象
除了js内置的对象，也可以自己定义对象。
11.1 构造函数定义对象1
function Person()//很象java中的构造函数。P不一定要大写。 { } var p = new Person(); p.name = “zhangsan”;//定义成员变量。 p.age = 20; //定义成员函数。 p.run = function() { alert(“run”); } p.run();11.2 构造函数定义对象2
function Person(name,age) { this.name = name; this.age = age; } var p = new Person(“zhangsan”,20);11.3 对象直接量
var obj = {name:”张”,age:19,run:function(){alert(“run”)}};十二、JS对象操作
12.1 with语句：with(对象){}
with语句定义了某个对象的作用域，在该域中可以直接调用该对象的成员。
- 格式：
with(对象) {} - 应用：当调用一个对象中多个成员时，为了简化调用，避免”对象.”这种格式的重复书写。
var p = new Person(“zhangsan”,20); alert(p.name+”,”+p.age); 可以写成： var p = new Person(“zhangsan”,20); with(p) { alert(name+”,”+age); }12.2 for…in语句
用于遍历对象属性。
var p = new Person(“zhangsan”,20); for(x in p) { alert(x);//结果是两个对话框，一个是name，一个是age。 alert(x+”:”+p[x]); 可以得到属性与属性的值。p[x]:p对象就是个数组， 要通过指定的元素名获取元素的值。 }12.3 delete语句
删除对象的属性
var p = {name:"liubei",age:19} p.addr = "peixian"; alert(p.addr); delete p.addr; alert(p.addr);-