前端基础之JS(一)

2023-12-06 本文已影响0人若雨千寻

JavaScript

1.1 let var const的区别？

var ES5变量声明方式

在变量未赋值时，变量undefined（为使用声明变量时也为undefined）
作用域 var的作用域为方法作用域；只要在方法内定义了，整个方法内的定义变量后的代码都可以使用

let ES6变量声明方式

在变量为声明前直接使用会报错
作用域 let为块级作用域通常let比var范围要小
let进制重复声明变量，否则会报错；var可以重复声明

const ES6变量声明

const为常量声明方式；声明变量时必须初始化，在后面出现的代码中不能再修改常量的值
const实际上保证的，并不是变量的值不得改动，而时变量指向的哪个内存地址不得改动

1.2 js数据类型，区别

基本数据类型：

number，string，boolean，null，undefined，symbol，bigint

引用数据类型：

object，function

object：普通对象，数组对象，正则对象，日期对象，math数学函数对象。

两种数据存储方式：

基本数据类型是直接存储再栈中的简单数据段，占据空间小、大小固定，属于被频繁使用的数据。栈是存储基本数据类型值和执行代码的空间。

引用数据类型是存储在堆内存中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向队中该实体的起始地址，当解释器寻找引用值时，会检索其在栈中的地址，取得地址后从堆中获得实体。

两种数据类型的区别：

堆比栈空间大，栈比堆运行速度快
堆内存是无序存储，可以根据引用直接获取
基础数据类型比较稳定，而且相对来说占用的内存小
引用数据类型大小是动态的，而且是无限的

1.3 Javascript 创建对象的几种方式？

简单对象的创建使用对象字面量的方式{}

const Cat = {};

new 一个function

function Person(){
}
const personOne=new Person();

使用工厂方式来创建（Object 关键字）

const wcDog =new Object();

使用 Object.create() 创建对象（使用现有对象作为原型）

const person = Object.create(anotherPerson);

使用 ES6 中的类（Class）创建对象（其实质还是使用构造函数）：

class Person {
  constructor(name) {
    this.name = name;
  }
}
const person = new Person('John');

1.4 ==、===和object.is 区别

== 值比较值
===值和类型都比较
object.is 和 === 区别 +-0 false NaN true

console.log(+0 === -0);       //true
console.log(NaN === NaN);     //false
Object.is(+0,-0)              //false
Object.is(NaN,NaN)            //true

1.5 如何区分数组和对象？

通过 ES6 中的 Array.isArray

Array.isArray([]) //true
Array.isArray({}) //false

通过 instanceof 来识别

[] instanceof Array //true
{} instanceof Array //false

通过调用 constructor 来识别

{}.constructor //返回 object
[].constructor //返回 Array

通过 Object.prototype.toString.call 方法来识别

Object.prototype.toString.call([]) //["object Array"]
Object.prototype.toString.call({}) //["object Object"]

1.6 作用域和作用域链

作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离
变量，不同作用域下同名变量不会有冲突

ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。
ES6 的到来，为我们提供了‘块级作用域’,可通过新增命令 let 和 const 来体现

什么是作用域链？

当代码在一个环境中执行时，会创建变量对象的一个作用域链
由子级作用域返回父级作用域中寻找变量，就叫做作用域链
作用域链中的下一个变量对象来自包含环境，也叫外部环境。而再下一个变量对象则来自中的最后一个对象
作用域链前端始终都是当前执行的代码所在环境的变量对象，如果环境是函数，则将其活动对象作为变量对象

如何延长作用域链？

执行环境的类型只有两种，全局和局部（函数）。但是有些语句可以在作用域链的前端临时增加一个变量对象，该变量对象会在代码执行后被移除具体来说就是执行这两个语句时，作用域链都会得到加强

try - catch 语句的 catch 块；会创建一个新的变量对象，包含的是被抛出的错误对象的声明
with 语句。with 语句会将指定的对象添加到作用域链中

1.7 constructor的理解

创建的每个函数都有一个prototype（原型）对象，这个属性是一个指针，指向一个对象。在默认情况下，所有原型对象都会自动获得一个constructor属性，之后属性是一个指向prototype属性坐在函数的指针。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针，指向构造函数的原型对象。注意当将构造函数的prototype设置为等于一个以对象字面量形式创建的新对象时，constructor属性不再指向该构造函数

1.8 webworker和websocket

web socket：在一个单独的持久连接上提供全双工、双向的通信。使用自定义的协议（ws://、wss://），同源策略对web socket不适用。
web worker：运行在后台的JavaScript，不影响页面的性能。
创建worker：var worker = new Worker(url);
向worker发送数据：worker.postMessage(data);
接收worker返回的数据：worker.onmessage
终止一个worker的执行：worker.terminate();

1.9 XML与JSON的区别？

数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。
数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
数据描述方面。JSON对数据的描述性比XML较差。
传输速度方面。JSON的速度要远远快于XML。

1.10 map 和 forEach 的区别？********

相同点：

都是循环遍历数组中的每一项
每次执行匿名函数都支持三个参数，参数分别为item（当前每一项），index（索引值），
arr（原数组）
匿名函数中的this都是指向window
只能遍历数组

不同点：

map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
forEach()允许callback更改原始数组的元素。map()返回新的数组。

1.11 for of 可以遍历哪些对象？

for..of..: 它是es6新增的一个遍历方法，但只限于迭代器(iterator), 所以普通的对象用for..of遍历
是会报错的。
可迭代的对象：包括Array, Map, Set, String, TypedArray, arguments对象等等

1.13 new操作符具体干了什么呢?

创建空对象；
var obj = {};
设置新对象的constructor属性为构造函数的名称，设置新对象的proto属性指向构造函数的
prototype对象；
obj.proto = ClassA.prototype;
扩展了新对象的原型链。
使用新对象调用函数，函数中的this被指向新实例对象：
ClassA.call(obj); //{}.构造函数();
返回this指针。当存在显示的返回时，返回return后面的内容。新建的空对象作废。

1.14 作用域