2023-03-02 - 周四 - 天气⚡️

1、v-show 和 v-if 有什么区别？使用场景分别是什么？

2、var、let、const 之间的区别：

var、let、const三者区别可以围绕下面五点展开：

变量提升
暂时性死区
块级作用域
重复声明
修改声明的变量
使用

变量提升

var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined

let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错

// var
console.log(a)  // undefined
var a = 10

// let 
console.log(b)  // Cannot access 'b' before initialization
let b = 10

// const
console.log(c)  // Cannot access 'c' before initialization
const c = 10

暂时性死区

var不存在暂时性死区

let和const存在暂时性死区（TDZ），只有等到声明变量的那一行代码出现，才可以获取和使用该变量

// var
console.log(a)  // undefined
var a = 10

// let
console.log(b)  // Cannot access 'b' before initialization
let b = 10

// const
console.log(c)  // Cannot access 'c' before initialization
const c = 10

块级作用域

var不存在块级作用域，只有函数作用域

let和const存在块级作用域

// var
{
    var a = 20
}
console.log(a)  // 20

// let
{
    let b = 20
}
console.log(b)  // Uncaught ReferenceError: b is not defined

// const
{
    const c = 20
}
console.log(c)  // Uncaught ReferenceError: c is not defined

重复声明

var允许重复声明变量

let和const在同一作用域不允许重复声明变量

// var
var a = 10
var a = 20 // 20

// let
let b = 10
let b = 20 // Identifier 'b' has already been declared

// const
const c = 10
const c = 20 // Identifier 'c' has already been declared

修改声明的变量

var和let可以

const声明一个只读的常量。一旦声明，常量的值就不能改变；但由于JS引用类型特殊，当引用类型部分数据修改（内存地址未改变）时，并不会报错。

// var
var a = 10
a = 20
console.log(a)  // 20

//let
let b = 10
b = 20
console.log(b)  // 20

// const
const c = 10
c = 20
console.log(c) // Uncaught TypeError: Assignment to constant variable

const d = {name:'ZhangSan',age:18};
d.age = 20 // 不会报错，可以修改

使用

能用const的情况尽量使用const，其他情况下大多数使用let，避免使用var

3、说说 JavaScript 中的数据类型有哪些，以及在存储上的区别：

在 JS 中共有 8 种基础的数据类型，分别为： Undefined 、 Null 、 Boolean 、 Number 、 String 、 Object 、 Symbol 、 BigInt 。

其中 Symbol 和 BigInt 是 ES6 新增的数据类型，可能会被单独问：

Symbol 代表独一无二的值，最大的用法是用来定义对象的唯一属性名。
BigInt 可以表示任意大小的整数。

------------类型可分为两类：1、值类型 2、引用类型；二者分别存储在栈和堆中: 值类型的赋值变动过程如下：

let a = 100;
let b = a;
a = 200;
console.log(b); // 100

图片 1.png

值类型是直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；

引用类型的赋值变动过程如下：

let a = { age: 20 };
let b = a;
b.age = 30;
console.log(a.age); // 30

图片 2.png

引用类型是存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；

4、对盒子模型的理解：

CSS3 中的盒模型有以下两种：标准盒模型、IE（怪异）盒模型。

两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：

标准盒模型：只包含 content 。
IE（怪异）盒模型：content + padding + border 。

可以通过 box-sizing 来改变元素的盒模型：

box-sizing: content-box ：标准盒模型（默认值）。
box-sizing: border-box ：IE（怪异）盒模型。

2023-03-03 - 周五 - 天气☀️

1、双向数据绑定是什么？

vue3js.cn/interview/v…

他很细，但是有点旧了，他有说到核心的观察者模式，但是数据劫持说的依然是通过 Object.defineProperty，可以看看。

2、ES6中数组新增了哪些扩展？

看阮一峰大佬的文章就好，全得不得了，红色框起来的内容可以不看。

es6.ruanyifeng.com/#docs/array

3、说说em/px/rem/vh/vw区别?

看下面这个吧，讲挺好的：

vue3js.cn/interview/c…

4、数组的常用方法有哪些？

这个依旧挺全的：

vue3js.cn/interview/J…

如果觉得里面的例子不够，可以去 MDN 官网查一下： developer.mozilla.org/zh-CN/

前端面试题---每天几道（日更--也许吧（（（☹️