前端面试题(七)

5 篇文章 0 订阅

1.let和var和const

let:
ES6 新增了let命令,用来声明局部变量和块级作用域变量。它的用法类似于var,但是所声明的全局变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束。
在这里插入图片描述

  1. let 配合for循环的独特应用
    let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响
    在这里插入图片描述
    在这里插入图片描述
  2. let没有变量提升与暂时性死区
    用let声明的变量,不存在变量提升。而且要求必须 等let声明语句执行完之后,变量才能使用,不然会报Uncaught ReferenceError错误。
    (1)使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象;
    (2)使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升;
    (3)ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。(使用const声明的是常量,在后面出现的代码中不能再修改该常量的值。
var tmp=521;
if(true){
    tmp='abc';//ReferenceError: tmp is not defined
    let tmp;
}
  1. let变量不能重复声明
    et不允许在相同作用域内,重复声明同一个变量。否则报错:Uncaught SyntaxError: Identifier ‘XXX’ has already been declared
    在这里插入图片描述
  2. 函数作用域
    作用域不一样,var是函数作用域,而let是块作用域

var:
如果使用关键字 var 声明一个变量,那么这个变量就属于当前的函数作用域,如果声明是发生在任何函数外的顶层声明,那么这个变量就属于全局作用域。

var a = 1; //此处声明的变量a为全局变量
function foo(){
   var a = 2;//此处声明的变量a为函数foo的局部变量
   console.log(a);//2
}
foo();
console.log(a);//1

如果在声明变量时,省略 var 的话,该变量就会变成全局变量,如全局作用域中存在该变量,就会更新其值。

var a = 1; //此处声明的变量a为全局变量
function foo(){
   a = 2;//此处的变量a也是全局变量
   console.log(a);//2
}
foo();
console.log(a);//2

提升是指无论 var 出现在一个作用域的哪个位置,这个声明都属于当前的整个作用域,在其中到处都可以访问到。注意只有变量声明才会提升,对变量赋值并不会提升。

const:
const 声明方式,除了具有 let 的上述特点外,其还具备一个特点,即 const 定义的变量,一旦定义后,就不能修改,即 const 声明的为常量。

const a = 1;
console.log(a);//1
a = 2;
console.log(a);//Uncaught TypeError: Assignment to constant variable.

但是,并不是说 const 声明的变量其内部内容不可变

const obj = {a:1,b:2};
console.log(obj.a);//1
obj.a = 3;
console.log(obj.a);//3

总结:
1.var 声明的变量属于函数作用域,let 和 const 声明的变量属于块级作用 域;
2.var 存在变量提升现象,而 let 和 const 没有此类现象;
3.var 变量可以重复声明,而在同一个块级作用域,let 变量不能重新声明,const 变量不能修改。

2.跨域的四种方法

  1. 使用Jsonp解决跨域
  2. 通过cors解决跨域
  3. 利用iframe
  4. 通过window.name实现跨域

3.请求是什么?

http请求由三部分组成:请求行、消息报头、请求正文
当客户端向服务器的程序提出请求时,web服务器根据请求晌应对应 的页面,当页面中含有php脚本时,服务器会交给PHP解释器进行解 释执行,将生成的html代码再回传给客户端,客户端的浏览器解释 html代码,最终形成网页格式的页面。

4.响应式布局

所谓响应式布局,就是指同一个网页,在不同的终端上的显示效果不同,但是访问的确实是同一个页面,只是因为浏览器会根据终端的不同(例如屏幕宽度、横竖屏、移动端还是pc端等)选择的渲染方式也不同
因此一般而言设计响应式布局需要遵循以下几点:
①页面元素宽度不用px作为单位,而是尽量使用百分比。
②页面框架之间使用流式布局,也就是用float属性,这样当元素超出屏幕宽度的时候会滑倒下面而不是撑出水平滚动条。
③注意图片的大小,尤其是宽度,同样尽量使用百分比

5.css根据不同的屏幕大小实现不同的样式

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="app">
			南京免费代缴社保,公积金,注册公司,大学生租房补贴,详情请联系:18855397334(微信同号)
		</div>
	</body>
</html>
<style>
	/* 大屏幕 :大于等于1200px*/
	@media (min-width: 1200px) { 
		.app{
			background-color: aliceblue;
		}
	}
	/*默认*/
	@media (min-width: 980px){
		.app{
			background-color: aqua;
		}
	}
	/* 平板电脑和小屏电脑之间的分辨率 */
	@media (min-width: 768px) and (max-width: 979px) { 
		.app{
			background-color: antiquewhite;
		}
	}
	/* 横向放置的手机和竖向放置的平板之间的分辨率 */
	@media (max-width: 767px) { 
		.app{
			background-color: beige;
		}
	}
	/* 横向放置的手机及分辨率更小的设备 */
	@media (max-width: 480px) { 
		.app{
			background-color: blueviolet;
		}
	}
</style>

6.事件冒泡和事件捕获的区别

事件冒泡和事件捕获这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。

  1. 事件冒泡
    事件冒泡:事件会从最内层的元素开始发生,一直向上传播,直到document对象。
    当给父子元素的同一事件绑定方法的时候,触发子元素身上的事件,执行完毕之后,也会触发父级元素相同的事件,这种机制叫事件冒泡
  2. 事件捕获
    事件捕获:与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。
    给父子元素用addeventlistener()绑定同一事件时,当触发子元素身上的事件时,先触发父元素,然后在传递给子元素,这种传播机制叫事件捕获;
  3. addEventListener方法
    element.addEventListener(event, function, useCapture)
    第一个参数是需要绑定的事件,第二个参数是触发事件后要执行的函数。而第三个参数默认值是false,表示在事件冒泡的阶段调用事件处理函数,如果参数为true,则表示在事件捕获阶段调用处理函数。
  4. 事件代理机制
 table.addEventListener("click", function(el) {
       //如果触发事件本身的类名==del,那么进行删除操作
       if(el.target.className == "del") {          
       el.target.parentNode.parentNode.remove();
       }
})

7.如何为BUTTON按钮添加事件

  1. button.addEventListener()
  2. button.click()
  3. document.getElementBy(’#foo’).addEventListener(‘click’,function(){})
  4. $("#button).bind(‘click’,function(){})
  5. $("#button).on(‘click’,function(){})

8.遍历数组方法

  1. forEach方法
    forEach是最简单、最常用的数组遍历方法,它提供一个回调函数,可用于处理数组的每一个元素,默认没有返回值。
    在这里插入图片描述

  2. map方法
    map,从字面上理解,是映射,即数组元素的映射。它提供一个回调函数,参数依次为处于当前循环的元素、该元素下标、数组本身,三者均可选。默认返回一个数组,这个新数组的每一个元素都是原数组元素执行了回调函数之后的返回值。
    在这里插入图片描述

  3. filter方法
    filter,过滤,即对数组元素的一个条件筛选。它提供一个回调函数,参数依次为处于当前循环的元素、该元素下标、数组本身,三者均可选。默认返回一个数组,原数组的元素执行了回调函数之后返回值若为true,则会将这个元素放入返回的数组中。
    在这里插入图片描述

  4. some、every方法
    some方法和every的用法非常类似,提供一个回调函数,参数依次为处于当前循环的元素、该元素下标、数组本身,三者均可选。
    数组的每一个元素都会执行回调函数,当返回值全部为true时,every方法会返回true,只要有一个为false,every方法返回false。当有一个为true时,some方法返回true,当全部为false时,every方法返回false。
    在这里插入图片描述

这些是本人理解,如有错,请留言,谢谢。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AI小智

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值