javascript作用域
何谓作用域呢，简略而言，就是标识符在某个范畴起成果与作用，目标是为了进步程序的可靠性，缩小命名抵触
JS的作用域
- 全局作用域
- 部分作用域
全局作用域
标识符处于整个<script>元素或内部独自一个js文件的范畴内，便叫做全局作用域如下：变量num处于全局作用域内
<script> var num = 10; console.log(num) //标识符num的作用域便属于全局作用域 </script>部分作用域
- 标识符处于函数外部的范畴，便叫做部分作用域
<script> function fn() { var num = 20; console.log(num) //20 } fn() //调用函数</script>变量的作用域
依据作用域的不同，变量也分为全局变量和局部变量
全局变量
全局作用域
- 在全局作用域下申明的变量属于全局变量
<script> var num = 10; console.log(num) //10 function fn() { console.log(num) //10 } fn()</script>- 在函数外部未应用var申明的变量也属于全局变量
<script> function fn() { num = 2; //此时num属于全局变量 } fn() console.log(num) // 2</script>局部变量
在函数的外部申明的变量属于局部变量
<script> function fn() { var num = 20; } console.log(num) //此时会报错 num属于局部变量</script>函数的形参也能够看做局部变量
<script> function fn(num) { console.log(num)// num = 2 } fn(2) console.log(num) // 会报错 num属于局部变量 只能在外部调用</script>全局变量和局部变量的区别
- 全局变量在全局的任何地位都能被调用到，只有当浏览器敞开时才会被销毁，因而比拟占内存
- 局部变量在函数执行完结后便会被销毁，因而比拟节俭内存资源。
块级作用域
ES6之后 引入了块级作用域 何谓块级作用域呢 {}就是一个简略的块级作用域
<script> if(5>3) { var num = 20; } console.log(num) //20</script>作用域链
外部函数拜访内部函数变量的机制，采纳链式的形式一级一级向上获取获取数据，称为作用域链（就近准则）
<script> var num = 20; function fn() { var num =25; function fn2() { console.log(num) //25 就近准则 } fn2() } fn()</script>作用域链习题
习题一
<script> function f1() { var num = 123; function f2() { console.log(num) } f2() //123 } var num = 456; f1()</script>习题二
<script> var a = 1; function fn1() { var a = 2; var b = '22'; fn2() function fn2(){ var a = 3; fn3(); function fn3() { var a = 4; console.log(a); //a = 4 console.log(b); //b = '22' } } } fn1()</script>JavaScript预解析
js引擎执行js代码分为两步：预解析 代码执行
- 预解析：js引擎会把js外面的所有应用var 申明的变量和function申明的函数晋升到以后作用域的最顶部
- 代码执行 ：依照代码执行的程序从上往下执行
预解析分为变量预解析及函数预解析
- 变量预解析会把变量申明晋升到以后作用域的最后面，不晋升赋值操作
- 函数预解析会把函数申明晋升到以后作用域的最后面，不调用函数
变量预解析
<script> console.log(num); //undefined var num = 10;/* 上述代码的步骤相当于* var num;* console.log(num);* num = 10;*/</script>函数预解析
函数预解析的第一种状况
<script> fn() //hello function fn() { console.log('hello') } /* 上述代码相当于 * function fn() { * console.log('hello') } fn() */</script>函数预解析的第二种状况
<script> fn() var fn = function() { console.log('222') } /* 上述代码相当于 var fn; fn(); //会报错 fn = function() { cosnle.log('222') } */</script>预解析案例
案例一
<script> var num = 10; fun(); function fun() { console.log(num); //undefined var num = 20; } /* 下面的代码相当于以下步骤 var num; function fun() { var num; console.log(num); num = 20; } num = 10; fun() */</script>案例二
<script> var num = 10; function fn() { console.log(num); //undefined var num = 20; console.log(num) //20 } fn(); /* 上述代码相当于以下操作 var num ; function fn() { var num; console.log(num); num = 20; console.log(num); } num = 10; fn() */ </script>案例三
<script> var a = 18; f1(); function f1() { var b = 9; console.log(a); //underfined console.log(b); // 9 var a ='123' } /* 上述代码相当于以下操作 var a; function f1() { var b; var a; b = 9; console.log(a); console.log(b); a ='123' } a = 18; f1(); */</script>案例四
<script>f1();console.log(c);console.log(b);console.log(a); function f1() { var a = b = c = 9; console.log(a); console.log(b); console.log(c);}/* 上述代码相当于以下操作function f1() { var a； a = 9； b =9； c = 9; console.log(a); //9 console.log(b); //9 console.log(c) //9 }f1();console.log(c); //9 console.log(b); // 9console.log(a); //报错*/</script>javascript对象
什么是对象？
对象是一组无序的相干属性与办法的汇合，所有的事物都能够是对象，例如数值 字符串 数组 函数等等
对象是由属性与办法的汇合
- 属性：事物的特色，在对象中用属性示意(罕用名词)
- 办法：事物的行为，在对象中用行为示意（罕用动词）
为什么须要对象？
保留一个值时，能够用到变量，保留多个值时，能够用到数组示意。对象能够示意事物的具体信息，让构造更清晰。
如何创建对象
- 利用字面量创建对象
- 利用new Object创建对象
- 利用构造函数创建对象
采纳字面量的形式创建对象
<script> // 应用对象 var object = { name:'尧子陌', age :24, sex:"男", height:'173cm', sayHi:function() { console.log('爱学习 爱劳动 爱国家') } } // 调用对象的属性 console.log(object.name); console.log(object['name']) // 调用对象的办法 object.sayHi()</script>注意事项
- 对象之间采纳键对值的模式 两头用英文状态下的冒号相隔开
- 多组属性之间用英文状态下的逗号相隔开
- 调用对象的办法切记不要遗记小括号
如何调用对象的属性与办法呢
调用对象的属性
- 对象.属性
- 对象['属性']
调用对象的办法
- 对象.办法()
变量与属性 函数与办法的区别
- 变量是独自申明赋值 独自存在
- 属性是对象外面的变量 不须要申明 用来形容事物的特色
- 函数是独自存在 通过 函数名（）来进行调用
- 办法是对象外面的函数，通过 对象.办法（）来进行调用。用来形容事物的行为与性能
利用new Object创建对象
注意事项
- 应用new Object创建对象并采纳等号赋值的形式，增加对象的办法和属性。
- 多组属性之间采纳分号相隔开；
- 调用对象的办法和属性和字面量创建对象统一
<script> var object = new Object(); object.name = '尧子陌'; object.sex= '男'; object.height = '175cm'; object.kill = function() { console.log('爱生存') } console.log(object) console.log(object.name); object.kill()</script>构造函数
构造函数是一种非凡的函数，次要用来初始化对象，即为对象成员变量赋初始值，它与new一起应用，把对象中公共的属性与办法抽取进去，封装到函数外面。
注意事项
- 构造函数名的首字母要大写
- 构造函数不须要return 便能够返回后果
- 构造函数必须跟new关键字一起应用
- 属性与办法后面必须要应用this
<script> function Star(name,sex,age,behavior) { this.name = name; this.sex = sex; this.age = age ; this.behavior = function(){ console.log('会说 会唱') } } var people1 = new Star('尧子陌','男',"24"); console.log(people1) people1.behavior()</script>构造函数的案例
应用构造函数创立猪八戒 后羿两个对象
<script> function Hero(name,sex,age) { this.name =name; this.sex = sex; this.age = age; this.skill = function(name) { console.log(name) } } var people1 = new Hero('猪八戒',"男",'1200'); people1.skill("毫发无损"); console.log(people1) var people2 = new Hero('后羿',"男",'1200'); people1.skill("只识弯弓射大雕"); console.log(people2)</script>构造函数与对象
- 构造函数抽取对象的公共属性与办法，泛指某一大类
- 应用new关键字创立的对象的过程被称为对象实例化
new关键字
new在执行过程
1.在内存中创立一个空对象
2.this指向这个新的对象
3.执行构造函数外面的代码 给这个新对象增加属性与办法
4.返回这个新对象（构造函数不须要return）
遍历对象
for( 变量 in 对象) { }变量用key示意 但还是简写k
<script> var obj = { name:'尧子陌', sex:"男", age:"18", skill:function() { return "天生帅气 人见人爱" } } for(var k in obj) { console.log(k) //打印对象的属性 console.log(obj[k]) //打印对象的属性值 }</script>总结
- 对象能够让构造更加清晰
- 对象是简单类型object
- 实质：对象就是一组无序的相干属性与办法的汇合
- 构造函数是泛指一大类
- 对象是指具体的一个的事物
- 应用for in能够遍历对象
js内置对象
javascript中对象分为3种：自定义对象 内置对象 浏览器对象后面两种对象是js根底，属于ECMAscript;浏览器对象属于咱们js独有的内置对象属于js语言自带的一些对象，这些对象供开发者应用。进步开发效率。js内置的对象：Math Data Array string等等如何查文档呢
MDN:developer.mozilla.org/zh-CN/
如何学习对象中的办法？
- 查看该办法的性能
- 查看外面参数的类型与意
- 查看返回值的意义和类型
- 通过demo进行测试
Math对象
Math是js中的内置对象，它领有数学常数属性和数学函数办法 ，它并不是一个函数对象。Math.max:返回多个数值中的最大值 Math.min:返回多个数值中的最小值<script> console.log(Math.PI) //打印圆周率 console.log(Math.max(5,20,60,100)) //获取最大值 console.log(Math.min(5,20,60,100)) //获取最小值</script>,案例：封装一个属于本人的数学对象，外面有PI 最大值和最小值。
<script> var myMath = { PI:3.141592653589793, Max:function() { var max = arguments[0]; for(var i = 0;i<arguments.length;i++) { if(max<arguments[i]) { max = arguments[i] } } return max; }, Min:function() { var min = arguments[0]; for(var i = 0;i<arguments.length;i++) { if(min > arguments[i]) { min = arguments[i] } } return min; } }// 调用对象console.log(myMath.PI) //获取圆周率console.log(myMath.Max(5,20,450,650)); //获取最大值console.log(myMath.Min(20,1,6,90,50)); //获取最小值</script>Math对象中罕用的办法
取绝对值办法:Math.abs()
<script> console.log(Math.abs(1)) //1 console.log(Math.abs(-1)) //1 console.log(Math.abs('-2')) //2 会将字符串的2转换成数值2 console.log(Math.abs('尧子陌')) //遇到非数字 间接显示NaN</script>三个取整办法
- Math.floor() 向下取整
- Math.ceil() 向上取整
- Math.round() 四舍五入取整
<script>// Math.floor() 向下取整console.log(Math.floor(-2.5)) // -3 console.log(Math.floor(1.8)) // 1console.log(Math.floor(2.5)) // 2console.log(Math.floor(0.5)) // 0//Math.ceil() 向上取整console.log(Math.ceil(2.6)) //3console.log(Math.ceil(5.8)) // 6 console.log(Math.ceil(-1.5))// -1 console.log(Math.ceil(0.6)) //1//Math.round() 四舍五入取整console.log(Math.round(2.6)) //3console.log(Math.round(5.8)) // 6 console.log(Math.round(-1.5))// -1 console.log(Math.round(0.6)) //1</script>留神:Math.round(-1.5)及Math.ceil(-1.5)会往大的取值
获取随机数
Math.random() ：生成随机数（0~1)
<script> console.log(Math.random()) //生成0~1之间的随机数</script>生成[min,max]之间的整数 包含max min
Math.floor(Math.random() * (max - min + 1)) + min; 案例：生成1~10之间的任意整数
<script> function getRandom(min,max) { return Math.floor(Math.random()*(max-min+1))+min } console.log(getRandom(1,10)) //生成1~10之间任意的整数</script>猜数字游戏
<script> // 封装一个获取随机数的函数 function getRandom(min,max) { return Math.floor(Math.random()*(max-min+1))+min } var random = getRandom(1,10); while(true) { var userName = prompt("请输出数字"); //必须写在while语句外面 输出谬误，则会始终会弹出输入框的后果 if(userName>random) { alert("对不起 你猜大了") }else if(userName<random) { alert("对不起 你猜小了") }else { alert("祝贺你 你猜对了"); break; } }</script>日期对象
注意事项
- Date对象和Math对象不一样，它属于构造函数
- Date对象用来解决日期和工夫
获取以后的工夫
<script> var time = new Date(); console.log(time) //获取以后工夫</script>Date()外面的参数
- Date()外面的参数代表工夫 个别用字符串的模式写入参数
<script> var time = new Date('2020-7-17 15:49'); console.log(time) </script>日期格式化
案例：拼出以后的日期
<script> var date = new Date(); //实例化对象 var year = date.getFullYear() //返回以后的年份 var month = date.getMonth()+1 //获取以后的月份，因为返回的月份比理论月份小一 所以加1 var dates= date.getDate();// 获取以后日期 var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'] var days = date.getDay() //获取以后星期几 console.log('往年是:'+year+"年" +month+"月"+dates+"日 "+arr[days])</script>封装一个日期格式化函数
<script> function getTimer() { var date = new Date(); var h = date.getHours() //获取以后的工夫 h= h<10?"0"+h:h var m = date.getMinutes()//获取以后的分钟 m= m<10?'0'+m:m var s = date.getSeconds() //获取以后的秒 s= s<10?"0"+s:s; return h+":"+m+":"+s } console.log(getTimer())</script>获取日期的总的毫秒数（工夫戳）
共有四种办法
<script> var date = new Date(); console.log(date.valueOf()) console.log(date.getTime()) console.log(+new Date()) console.log(Date.now()) //h5新增办法</script>倒计时
外围算法
- 用户输出的工夫减去以后的工夫 即为倒计时
- 用工夫戳来做，用户输出的工夫总毫秒数减去以后工夫总毫秒数，失去的就是残余的工夫的毫秒数。
- 把剩余时间的总毫秒数转换为天 时 分 秒
<script> function countTime(time) { var nowTime = +new Date() //获取以后工夫的总毫秒数 var inputTime = +new Date(time) //获取用户输出的总毫秒数 var times = (inputTime-nowTime) /1000 //失去总秒数 var d = parseInt(times/60/60/24); d = d<10?'0'+d :d var h = parseInt(times/60/60%24); h = h<10?'0'+h :h var m =parseInt(times/60%60); m = m<10?'0'+m :m var s = parseInt(times%60)//取整 s = s<10?'0'+s :s return d +"天"+ h +"时"+m +"分"+s +"秒" } console.log(countTime("2020-10-17 18:00:00"))</script>数组
- new Array() 若没有参数 则默认为空数组
- new Array(5) 参数若有一个数字 则代表以后数组的长度
- new Array(5,5,6) 参数若有2个及2个以上 外面则是数组元素
<script> var arr1 = new Array() //申明一个空数组 var arr2 = new Array(5) //一个参数则代表数组的长度 var arr3 = new Array(5,6,9,89) //两个以上的参数则代表数组元素 console.log(arr1) console.log(arr2) console.log(arr3)</script>如何检测是否为数组
- 通过instanceof 用来检测类型是否为数组
- 通过Array.isArray(参数)来检测是否为数组
上述办法 若参数为数组 则显示true 若参数不是数组 则返回false
instanceof
<script> var arr = []; var obj = {} console.log(obj instanceof Array)//instanceof 用来检测类型是否为数组 console.log(arr instanceof Array);//instanceof 用来检测类型是否为数组</script>Array.isArray()
<script> var arr = []; var obj = {}; console.log(Array.isArray(arr)) //isArray()用来检测是否为数组 console.log(Array.isArray(obj)) //isArray()用来检测是否为数组</script>通过判断数组的形式来反转数组
<script> /* 反转数组 */ function reverse(arr) { if(Array.isArray(arr)) { var newArr = []; for(var i = arr.length-1;i>=0;i-- ) { newArr[newArr.length] = arr[i] } return newArr }else { return '不属于数组类型 请从新输出数组' } } console.log(reverse([5,50,60,96,50])) console.log(reverse(5,50,60,96,50)) </script>数组办法
push()
<script> var arr = [1,2,3]; console.log(arr.push(4,5,6)) //显示的是数组的个数 console.log(arr) //原数组也会扭转</script> 注意事项
- push是能够给数组的开端增加一个或者多个数组元素
- push（）前面的参数间接写数组元素即可
- push结束之后 显示的是新数组长度
- 原数组的也会发生变化
unshift()
<script> var arr = [20,50,60,90,90]; console.log(arr.unshift("尧子陌","hello")); // 返回的是新数组的长度 console.log(arr) </script>注意事项
- unshift是能够给数组的结尾 增加一个或者多个数组元素
- unshift()前面的参数间接写数组元素即可
- unshift结束之后 显示的是新数组的长度
- 原数组的也会发生变化
pop()
<script> var arr = [5,20,60,90,45,50]; console.log(arr.pop()); //50 console.log(arr) </script>注事事项
- pop()是删除数组的最初一项元素 返回值是数组的最初一个元素
- pop()外面没有参数
- 原数组也会产生扭转
shift()
<script> var arr = [5, 20, 60, 82, 80, 85]; console.log(arr.shift()) //5</script>注意事项
- unshift是删除数组的第一个元素
- 返回值是数组的第一个元素
- unshift（）外面没有参数
- 原数组会发生变化
案例
把一个蕴含工资的数组[1500,1200,2000,2100,1800],要求把数组中的工资超过2000的删除，残余的放到新数组外面
<script> var arr = [1500, 1200, 2000, 2100, 1800, 2300, 2500, 6500]; var newArr = []; for (var i = 0; i < arr.length; i++) { if (arr[i] > 2000) { newArr.push(arr[i]) //采纳push的办法 把大于2000的数组元素存储到新数组 } } console.log(newArr);</script>数组排序
reverse()
目标：实现数组反转
<script> var arr = ['pink', 'balck', 'yellow', 'red']; arr.reverse() //实现数组反转成果 console.log(arr)</script>sort()
目标:数组排序
- a -b：实现升序
- b -a :实现降序
<script> var arr = [50, 60, 30, 60, 8, 20]; arr.sort(function(a, b) { return a - b //a - b 是升序 b-a是降序 }) console.log(arr)</script>数组索引办法
indexOf()
- 参数为数组元素，返回的后果是该数组元素的索引号，从后面开始查找。
- 如果数组中没有该数组元素，且返回的索引号为-1
<script> var arr = ["尧子陌", "临风笑却世间", '22', '33', '55']; console.log(arr.indexOf('临风笑却世间')) //1 console.log(arr.indexOf('惊鸿')) // -1</script>lastIndexOf()
- 参数为数组元素 返回的后果为该数组元素的索引号，从前面开始查找
- 如果数组中没有该数组元素，则返回的索引号为-1
<script> var arr = ['尧子陌', '惊鸿', '220', '550', '665', '尧子陌', '惊鸿', '220', '550', '665']; console.log(arr.lastIndexOf('惊鸿')) // 6 console.log(arr.lastIndexOf('520')) // -1</script>数组去重(重点)
思路如下
- 遍历旧数组
- 拿旧数组的数组元素去查问新数组，如果该数组元素在新数组没有呈现过，则增加，反之则不增加
<script> function unique(arr) { var newArr = []; // 申明一个新数组 for (var i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) === -1) { newArr.push(arr[i]) } } return newArr // 返回新数组 } console.log(unique(['c', 'a', 'c', 'b', 'd', 's', 'c', 'aa', 'b', 'a', 'a']))</script>数组转换成字符串
toString()
- 利用toString()将数组转换成字符串
<script> var arr = [20, 50, 60, '尧子陌']; console.log(arr.toString()) //控制台打印后果</script>join(分隔符)
- 利用join可将数组转换成字符串，另外还能够跟上分隔符
<script> var arr = [20, 50, 60, '尧子陌']; console.log(arr.join("&")) //控制台打印后果</script>字符串对象
思考问题:
字符串为根本数据类型，为什么会有办法和属性呢?很简略，因为有根本包装数据类型
根本包装类型
- 何谓根本包装类型呢，简略而言，就是把根本数据类型转换成简单数据类型
<script> var str = 'strong'; console.log(str.length) //6/*1.利用长期变量把根本数据类型包装成简单数据类型 var temp = new String('strong');2.把长期变量赋值给str str = temp;3.销毁长期变量temp temp = null*/</script>非凡援用类型
Js中有三种非凡援用类型：Number String Boolean
字符串的不可变性
利用变量名可将字符串从新赋值，但相当于在内存中从新开拓一块空间，因而不要拼接字符串，会造成电脑卡顿
依据字符返回索引地位
- indexOf("查找的字符元素",[起始的地位])
- lastIndexOf("查找的字符元素"，[起始地位])
注意事项
- 应用lastIndexOf()的时候，第二个参数为从哪个索引号开始查找，是从右往左查找的
<script> var str = 'acdefghibcdezafghdefghaijklbmnb'; console.log(str.indexOf('a', 3)); //查找a从索引3开始查找 console.log(str.indexOf('b', 3)) // 查找b从索引3开始查找 console.log(str.lastIndexOf('b', 26)) //查找b从索引26开始查找 -1</script>返回字符地位(重点)
查找字符串 abcofoxyozzopp 呈现的地位及次数
<script> var str = 'abcofoxyozzopp'; var num = 0; // 统计o呈现的次数 var index = str.indexOf('o') //查找o第一次呈现的地位 while (index !== -1) { console.log(index); num++ index = str.indexOf('o', index + 1) } console.log('o呈现的次数：' + num)</script>思路如下
- 先查找第一个o呈现的地位
- indexOf()的索引只有不是-1，便持续向下查找
- indexOf()只能查找第一个o,所以前面的查找，肯定是以后索引加1，从而持续查找
依据地位返回字符
charAt(index):依据地位返回字符
<script> var str = 'andy' console.log(str.charAt(2)) //d 依据索引地位返回字符</script>利用charAt()返回字符串的每一项
<script> var str = 'YaoZiMo'; for (var i = 0; i < str.length; i++) { console.log(str.charAt(i)) //打印字符串的每一项元素 }</script>charCodeAt()：依据地位返回字符串绝对应的ASCII码
<script> var str = 'andy' console.log(str.charCodeAt(2)) //100 依据索引地位返回绝对应的字符ASCII码</script>str[index]:依据索引地位返回字符（具备兼容性）
<script> var str= 'andy'; console.log(str[2]) //d</script>案例
判断一个字符串'abcoefoxyozzopp'中呈现次数最多的字符 并统计次数
- 外围算法：利用charAt()遍历这个字符串
- 把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在就+1
- 利用遍历得出最大值和字符
<script> var str = 'abcoefoxyozzopp'; var obj = {}; for (var i = 0; i < str.length; i++) { var charts = str.charAt(i) if (obj[charts]) { // obj[charts]失去是属性值 obj[charts]++ } else { obj[charts] = 1; } } console.log(obj) //开始遍历对象 var max = 0; var ch = "" for (var k in obj) { if (obj[k] > max) { max = obj[k]; ch = k; } } console.log("次数最多的字符:", ch) console.log("次数为:" + max)</script>字符串的其它办法
concat(str1,str2,str3...)
<script> var str = 'hello'; console.log(str.concat('word')) //helloword</script>substr(star,length)
<script> var str = 'hello my name is china'; console.log(str.substr(2, 3)) //llo</script>replace('被替换后字符'，'替换后的字符')
<script> var str = 'hello hello' console.log(str.replace('o', 'y'))</script>案例
将下列字符串中的‘a’替换为‘b’
<script> var str = 'aaccvricunrbeuaaaaaadeufban'; while (str.indexOf('a') !== -1) { str = str.replace('a', 'b') } console.log(str)</script>将字符串转换为对象
split('分隔符')
目标：将字符串转换成数组
<script> var str = 'pink,blue,yellow'; console.log(str.split(',')) var str = 'hello&dark&yellow'; console.log(str.split('&'))</script>