1. 内置对象
顶级:window
分支:history document location
还有本地对象: Date Math String Array
关于内置对象,本地对象和宿主对象:
https://segmentfault.com/a/1190000011467723
具体内容如下:
2.window下的内置对象
1) 各种弹框(alert confirm prompt
)
2) js里面的全局变量 也是可以通过window点出来的
Eg:
var name="zhangsan";
console.log(window);
//在里面能看到name属性,不过平时使用时可以
//省略window.name而直接写为name
3)大量事件 (以on开头的,onclick等)
4)三大计时器
- setInterval
两种调用形式,回调函数或字符串,字符串形式中函数名称后必须有括号,循环计时器 延迟多长时间去反复执行
Eg:回调函数:
setInterval(function () {
console.log(1);
}, 1000);
字符串函数
function showlog(){
console.log(1);
}
setInterval("showlog()",1000);
计时器的清除
清除计时器返回的值为number
var count = 0;
var timer = setInterval(function () {
count++;
console.log(count);
if (count >= 10) {
console.log(timer);//41???
//关闭计时器
clearInterval(timer);
}
}, 1000);
- Settimeout
一次性计时器 ,延迟多长时间后在输出 也可以通过代码 制作出循环计时器
面试题,js单线程(线程阻塞)——先执行外循环,一次性加到10后在执行循环内的内容;参考电商放大镜;
Eg1:
var timer=setTimeout(function (){
console.log(1);
},1000);
clearTimeout(timer);//没有输出;因为在延迟的一秒已经将计时器清零
Eg2:
for(var i=0;i<10;i++)
{
setTimeout(function (){
console.log(i);//10
},0)
}
Eg3:
for(var i=0;i<10;i++)
{console.log(i);
//输出结果如图;for循环执行完后才能执行内部循环
setTimeout(function (){
console.log(1);
},0)//虽然是0秒,但是仍然占线程
}
详解:为什么for循环结束后直接输出最大值(异步)
console.log(1);
setTimeout(function (){
console.log(3);
},0)
console.log(2);
执行结果为1,2,3;从中可以看到执行顺序
//按照异步(同时执行后续代码 )
// 和同步 (执行完成之后继续执行)代码来理解
for(var i=0;i<10;i++)
{
console.log(1);
setTimeout(function (){
console.log(3);
},0)
console.log(2);
}
执行完的结果为:
let限制变量作用域,声明为局部变量,输出结果为0~9
var 没有限制变量作用域,输出结果为10
for(var i=0;i<10;i++)
{
setTimeout(function (){
console.log(i);//10
},0)
}
console.log(i)//10
改装为循环计时器
函数内部只能写settimeout;否则循环内写循环计时器setInterval会累加,执行速度变快
var count = 0;
var timer=null;
showtime();
function showtime() {
count++;
console.log(count);
timer=setTimeout("showtime()", 1000);
//递归调用设置为循环计时器
}
再想要正确清除计时器时有两种方法
var count = 0;
var timer=null;
showtime();
function showtime() {
count++;
console.log(count);
if(count>=10)
{
clearTimeout(timer);
return;
//写上return跳出递归调用,否则刚清除完下面就会再次重新设置
}
timer=setTimeout("showtime()", 1000);//设置为循环计时器,递归调用
}
或者将判断条件后清除计时器放在创建计时器之后
var count = 0;
var timer=null;
showtime();
function showtime() {
count++;
console.log(count);
timer=setTimeout("showtime()", 1000);//设置为循环计时器
if(count>=10)
{
clearTimeout(timer);
}
}
- requestAnimationFrame
- 和前两个的区别
在浏览器放小或切换选项卡时会暂停,后两者不会
不能设置变化时间,因为他的刷新频率和电脑刷新频率同步,根据电脑屏幕的fps 16ms 刷新一次 1000/60。但是我们可以设置屏幕刷新时间
Ps:快排中的循环跳出条件是<=1;如果是等于1报错
内存溢出,死循环:没有考虑左数组或右数组可能为0 个元素的情况
变量名不能和内置变量同名
清除时只能写为:cancleAnimationFrame(没有调用时的Request)
浏览器兼容性差
为了浏览器的兼容性,引入以下使用方式,并且加入了清除定时器的方式
// 兼容
var windowrequestAnimationFrame = function (callback) {
return requestAnimationFrame(callback) || mozRequestAnimationFrame(callback) || webkitRequestAnimationFrame(callback)
|| msRequestAnimationFrame(callback) || function (callback) {//如果都不支持则使用一次性计时器
setTimeout(function () {
callback();//loop();
}, 1000 / 16)
}
}
var count = 0;
loop();
function loop() {
count++;
console.log(count);
if (count >= 10) {
//cancelRequestAnimationFrame 这个代码不认 会报错 认cancelAnimationFrame
windowcancelAnimationFrame(timer);
return;
}
timer = windowrequestAnimationFrame(loop);
}
5)location:显示当前页面地址的相关信息
(最常用的为页面式的代码跳转)location.href="https://www.baidu.com";
6)history:当前网页的历史记录
length:历史记录条数
back:后退
forward:前进
go(1)go(-1):前进或后退
使用:一般在标签中使用
<a href="javascript:history.back()">倒退</a>
<a href="javascript:history.forward()">前进</a>
<a href="前进页面.html">前进页面</a>
<a href="倒退页面.html">后退页面</a>
a链接静止:
3.日期对象Date(set,get,to方法)
1. 直接实例化获得本地对象
var time=new Date();//new 实例化
两种赋值方法
字符串赋值
var time=new Date("2019 8-13 13:42");//注意格式
console.log(time);
数字赋值(月份会+1显示)
var time=new Date(2019,8,13,13,42);
console.log(time);
2. set方法
var time=new Date();
console.log(time);
time.setDate(20);//日
time.setFullYear(2020);//设置年
time.setHours(0);//小时
time.setMilliseconds(0);//毫秒
time.setMinutes(0);//分
time.setMonth(0);//月
time.setSeconds(0);//秒
time.setTime();//设置当前时间到1970年0点的总毫秒数
time.setYear();//设置1990年至现在的年数
day只能get不能set(周)
3. get方法
和set一致的get方法获取时间,其中
getMonth 获取的月但是比正常的月 少1,因为从0开始记,所以使用时要 +1得到正确的月份显示
getTime 返回距 1970 年 1 月 1 日之间的毫秒数
4. to方法
var time=new Date();
console.log(time);
console.log(time.toDateString());
console.log(time.toISOString());
console.log(time.toLocaleDateString());
console.log(time.toLocaleString());
console.log(time.toLocaleTimeString());
console.log(time.toTimeString());
console.log(time.toUTCString());
4.数学对象
1. 不需要实例化 直接使用(方法如下)
常用方法如下
方法 | 含义 |
---|---|
Math.abs(-1) | 绝对值 |
Math.PI | PI值 |
Math.floor(0.9) | 向下取整 |
Math.ceil(0.9) | 向上取整 |
Math.round(4.4) | 四舍五入 |
Math.max(1, 2) | 判断最大值的 |
Math.min(1, 2) | 取最小值的 |
Math.random() | 随机数 0-1 取小不取大* |
Math.sqrt(4) | 开平方 |
Math.pow(8, 1 / 3) | 求幂 |
Math.sin(180 * Math.PI / 180) | sin值 |
Math.cos(180 * Math.PI / 180) | cos值 |
sin 之类的值要通过计算:换算为弧度
角度*Math.PI/180
6.123233995736766e-17 是无限接近0的值
exp:e的次幂
弧度角度转换
max,min里不能写数组,直接写比较的数字
pow:求幂,如果要求三次根号下的值则将第二个参数改为根号次幂分之