No2.4 前端面试题 1. ajax 2. 浏览器的存储方式 3. 深拷贝与浅拷贝 4.js微任务和宏任务

1. ajax

1. 什么是ajax

• ajax是创建交互式网页应用开发技术
• 在不重新加载整个网页的前提下,与服务器交换数据并更新部分内容

2. 如何实现

• 1. 创建XmlHttpRequest对象 简称xmh
• 2. 通过xmh对象里的open()方法,和服务器建立连接
• 3. 构建请求所需的数据,并通过xmh的send()发送给服务器
• 4. 通过xmh的onreadystate chansge事件监听服务器和你的通信状态
• 5. 接收并处理服务器响应的数据结果
• 6. 把数据渲染到HTML页面上

2. 浏览器的存储方式

1. cookies

• 本地存储方式
• 兼容性好 请求头自带cookie
• 存储量小,资源浪费,使用麻烦

1. localstorage

• 键值对方式存储,永久存储,兼容性好,操作方便
• 保存值的类型被限定,浏览器在隐私模式下不可读取,不能被爬虫

1. sessionstorage

• 是会话级别的存储方式,页面关闭后会立刻清理

4. indexedDB

• 以键值对进行存储,可以快速读取,适合web场景

3. 深拷贝与浅拷贝

1. 浅拷贝:

1. 什么是浅拷贝

• 浅拷贝就是通过赋值的方式进行拷贝，把对象的表层赋值给一个新的对象，如果里面有属性值为数组或者对象的属性，那么就只会拷贝到该属性在栈空间的指针地址，新对象的这些属性数据就会跟旧对象公用一份，也就是说两个地址指向同一份数据，一个改变就会都改变。

2. 如何实现浅拷贝

• 1. 扩展运算符

let obj={
		name:'张三',
		age:22
	}
let obj1={...obj}
obj1.name='李四'
console.log(obj);//{name:'张三',age:22}
console.log(obj1);//{name:'李四',age:22}

• 2. Object.assign

const obj = {};
const source = {
  name: 'nordon',
  info: {
    age: 18
  }
};
Object.assign(obj, source);
console.log(obj); // {name: 'nordon', info: {…}}
source.info.age = 20;
console.log(obj);
console.log(source);//obj和source的age都变成了20

• 3. Array.prototype.concat/slice

3. 注意事项

• 不会拷贝对象的继承属性；
• 不会拷贝对象的不可枚举的属性；
• 可以拷贝 Symbol 类型的属性

2. 深拷贝

1. 什么是深拷贝

• 深拷贝就是完全拷贝一份新的对象,会在堆内存中开辟新的空间,主要针对的是引用数据类型,拷贝的对象修改后,原对象不会受影响

2. 如何实现深拷贝

• 1. JSON.parse(JSON.stringify()) 缺点: 无法拷贝内部函数

let obj={
	name:'张三',
	age:22,
	fn(){
		console.log('123');
	}
}
let obj1=JSON.parse(JSON.stringify(obj))
obj1.name='王五'
console.log(obj);//{name:'张三',age:22,fn:f}
console.log(obj1);//{name:'王五',age:22}

• 2. 利用递归函数

function deepClone1(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空，并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone1(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

4.js微任务和宏任务

• js代码执行流程:同步==>事件循环(微任务,宏任务)>微任务>宏任务==>微任务

1. js是单线程语言
2. 同步任务全部执行完后才会执行事件循环,事件循环包含微任务和宏任务
3. 宏任务:promise.then 微任务:定时器(setTimeout…)…

<script>
  setTimeout(function () {
             console.log(1);
         })0
         new Promise((resolve) => {
             console.log(2);
             resolve()
         }).then(() => {
             console.log(3);
         }).then(() => {
             console.log(4);
         })
         console.log(5);
         // 控制台输出结果:2 5 3 4 1
		 
  for (var i = 0; i < 3; i++) {
	     setTimeout(function () {
		 console.log(i);
		}, 1000 * i);
	 }    //0秒输出3,1秒输出3,2秒输出3
 </script>