前端面试题(实习篇)第一天内容补充

程序员文章站 2022-03-04 12:13:21

...

BOM里边的常见方法

BOM的意思是浏览器对象模型

1:Navigator

Navigator对象包含有关浏览器的信息，根据W3Cschool，该对象被所有浏览器所支持

appVersion

返回浏览器的平台和版本信息

userAgent

返回由客户机发送服务器的user-agent头部的值

userLanguage

返回OS的自然语言设置

2:History

History对象包含用户(在浏览器窗口中)访问的URL，它是window对象的一部分，可通过window.history属性来对其进行访问

history.go()

history.go(0)用于刷新页

history.go(-1)实现页面的后退

history.go(1)前进一步

history.back()

加载history列表中的前一个URL

history.forward()

加载history列表中的下一个URL

3：Screen

height

返回显示器屏幕的总高度

width

返回显示器屏幕的总宽

使用方法

console.log(window.screen.width)

前端面试题(实习篇)第一天内容补充

4：location

<script>
        function printInfo() {
            var loc = window.location;
            console.log("host:"+loc.host);//设置和返回主机名和当前URL的端口号
            console.log("hostname:"+loc.hostname);//设置和返回当前URL的主机名
            console.log("pathname:"+loc.pathname);
            console.log("port:"+loc.port);//设置和返回当前URL的端口号
            console.log("protocal:"+loc.protocal);//设置或返回当前的URL的协议
            console.log("search:"+loc.search);//设置或者返回从问号(?)开始的URL(查询部分)
        }
    </script>

此外，使用location还可以实现页面的跳转

 <script>
	    console.log(window.location.href);//打印当前页面的网址
        function toNew(){//调用该方法就可以实现页面跳转
            window.location.href = "https://www.baidu.com";
        }
  </script>

注：以上方法都隶属于Window对象(浏览器中打开的窗口)

5:window

clearInterval()

取消由setInterval()设置的timeout

<body>
    <p onclick="updateTime()">
        开始更新时间
    </p>
    <p id="timeContainer">
    </p>
    <script>
    var id;
    function updateTime() {
        id = window.setInterval(showTime,1000);//setInterval接收两个参数，第一个参数是需要调用的函数或者要执行的代码串，第二个参数是调用或执行该函数的时间间隔
    }
    function showTime(){   
    
     document.getElementById("timeContainer").innerText = new Date();
    }
</script>
</body>

也可以使用addEventListener方法

<body>
<button id="button">按钮</button>
</body>
<script>
let pcwidth=function(){
        console.log(window.screen.availWidth)
    }
   let ej= window.setInterval(pcwidth,1000)
    
    button.addEventListener('click',()=>{
        window.clearInterval(ej)
    }
</script>

clearTimeout()

取消由setTimeout()方法设置的timeout

<body>
    <p onclick="al()">
        单击此处4秒后弹出警告框
    </p>
    <p onclick="a2()">
        单击此处取消警告框的弹出
    </p>
    <script>
    var id;
    function al() {
        id = window.setTimeout(showAlert,4000);
    }
    function showAlert() {
        window.alert("警告框");
    }
    function a2() {
        window.clearTimeout(id);
    }
</script>
</body>

alert()

显示带有一段信息和一个确认按钮的警告框

confirm()

显示带有一段消息以及确认按钮和取消按钮的对话框

prompt()

显示可提示用户输入的对话框

参考：W3CSchool

Map()方法

<script>
    let arr = [1, 2, 3, 4, 5];
    // let arrTwo=arr.map(function(i){
    //     return i*2
    // })
    let arrTwo = arr.map((i) => i * 2);//这里的i表示的就是数组的每一个元素
    document.write(arrTwo);
  </script>

let arrThree = arr.map((item, index) => {
      console.log(item + "-" + index);
    });

前端面试题(实习篇)第一天内容补充

["1", "2", "3"].map(parseInt);的值为什么会是`[1,NAN,NAN]

详细解答

call()

所谓方法，其实就是对象里面定义的函数

对象方法中的this指向方法所属对象

var obj={
age:17,
name:'bob',
person:function(){
console.log(this.name+'现在的年龄是'+this.age+'岁')//这里的this指向obj
}
}
obj.person();//bob的年龄是17岁

使用call()方法可以改变对象中方法里边this的指向，使用流程是拥有方法的对象调用call，call里面写入需要显示出来的值

var obj={
age:17,
name:'bob',
person:function(){
console.log(this.name+'现在的年龄是'+this.age+'岁')//这里的this指向obj
}
}
var objtwo={name:'xiaohui',age:'20'}
obj.person.call(objtwo)//此时person方法里边的this指向的已经不是obj，而是objtwo了

call()方法使用的是列表传参

let obj = {
      name: "小张",
      age: 18,
      myFun: function (money, car) {
        console.log(this.name + " 年龄" + this.age+' 存款'+money+' 代步工具 '+car);
      },
    };
    let objtwo = { name: "xiaohui", age: 22 };
    obj.myFun.call(objtwo, 5000, 'BMW');

apply()和bind()使用方法和call几乎一致，略有不同的是apply在传参给方法的时候需要使用数组的方式，使用bind需要在call()同样使用方法的基础上再加一个()来立即执行

前端面试题(实习篇)第一天内容补充

BOM里边的常见方法

1:Navigator

2:History

3：Screen

4：location

5:window

Map()方法

call()

前端面试题（实习篇）第一天

前端面试题(实习篇)第一天内容补充