JS内置对象

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

1. 和前两个的区别

在浏览器放小或切换选项卡时会暂停，后两者不会

不能设置变化时间，因为他的刷新频率和电脑刷新频率同步，根据电脑屏幕的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:求幂，如果要求三次根号下的值则将第二个参数改为根号次幂分之