JavaScript相关细节题

前端 JavaScript

理论知识

发布日期: 2023-09-08

更新日期: 2023-10-28

文章字数: 4.7k

阅读时长: 18 分

阅读次数:

说说JavaScript中的数据类型？存储上的差别？

基本类型

基本类型主要为以下6种：

Number
String
Boolean
Undefined
null
symbol

Number

数值最常见的整数类型格式则为十进制，还可以设置八进制（零开头）、十六进制（0x开头）

let intNum = 55 // 10进制的55
let num1 = 070 // 8进制的56
let hexNum1 = 0xA //16进制的10

浮点类型则在数值汇总必须包含小数点，还可通过科学计数法表示

let floatNum1 = 1.1;
let floatNum2 = 0.1;
let floatNum3 = .1; // 有效，但不推荐
let floatNum = 3.125e7; // 等于 31250000

在数值类型中，存在一个特殊数值NaN，意为“不是数值”，用于表示本来要返回数值的操作失败了（而不是抛出错误）

console.log(0/0); // NaN
console.log(-0/+0); // NaN

Undefined

Undefined 类型只有一个值，就是特殊值 undefined。当使用 var或 let声明了变量但没有初始化时，就相当于给变量赋予了 undefined值

let message;
console.log(message == undefined); // true

包含undefined 值的变量跟未定义变量是有区别的

let message; // 这个变量被声明了，只是值为 undefined

console.log(message); // "undefined"
console.log(age); // 没有声明过这个变量，报错

String

字符串可以使用双引号（"）、单引号（'）或反引号（`）标示

let firstName = "John";
let lastName = 'Jacob';
let lastName = `Jingleheimerschmidt`

字符串是不可变的，意思是一旦创建，它们的值就不能变了

let lang = "Java";
lang = lang + "Script";  // 先销毁再创建

Null

Null类型同样只有一个值，即特殊值 null

逻辑上讲， null 值表示一个空对象指针，这也是给typeof传一个 null 会返回 "object" 的原因

let car = null;
console.log(typeof car); // "object"

undefined 值是由 null值派生而来

console.log(null == undefined); // true

只要变量要保存对象，而当时又没有那个对象可保存，就可用 null来填充该变量

Boolean

Boolean（布尔值）类型有两个字面值： true 和 false

通过Boolean可以将其他类型的数据转化成布尔值

规则如下：

数据类型      				转换为 true 的值      				转换为 false 的值
 String        				 非空字符串          					"" 
 Number 				非零数值（包括无穷值）						0 、 NaN 
 Object 					 任意对象 							   null
Undefined 					N/A （不存在） 						undefined

Symbol

Symbol （符号）是原始值，且符号实例是唯一、不可变的。符号的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险

let genericSymbol = Symbol();
let otherGenericSymbol = Symbol();
console.log(genericSymbol == otherGenericSymbol); // false

let fooSymbol = Symbol('foo');
let otherFooSymbol = Symbol('foo');
console.log(fooSymbol == otherFooSymbol); // false

引用类型

复杂类型统称为Object，我们这里主要讲述下面三种：

Object
Array
Function

Object

创建object常用方式为对象字面量表示法，属性名可以是字符串或数值

let person = {
    name: "Nicholas",
    "age": 29,
    5: true
};

Array

JavaScript数组是一组有序的数据，但跟其他语言不同的是，数组中每个槽位可以存储任意类型的数据。并且，数组也是动态大小的，会随着数据添加而自动增长

let colors = ["red", 2, {age: 20 }]
colors.push(2)

Function

函数实际上是对象，每个函数都是 Function类型的实例，而 Function也有属性和方法，跟其他引用类型一样

函数存在三种常见的表达方式：

函数声明

// 函数声明
function sum (num1, num2) {
    return num1 + num2;
}

函数表达式

let sum = function(num1, num2) {
    return num1 + num2;
};

箭头函数

函数声明和函数表达式两种方式

let sum = (num1, num2) => {
    return num1 + num2;
};

除了上述说的三种之外，还包括Date、RegExp、Map、Set等…

存储区别

基本数据类型和引用数据类型存储在内存中的位置不同：

基本数据类型存储在栈中
引用类型的对象存储于堆中

当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值

下面来举个例子

基本类型

let a = 10;
let b = a; // 赋值操作
b = 20;
console.log(a); // 10值

a的值为一个基本类型，是存储在栈中，将a的值赋给b，虽然两个变量的值相等，但是两个变量保存了两个不同的内存地址

下图演示了基本类型赋值的过程：

引用类型

var obj1 = {}
var obj2 = obj1;
obj2.name = "Xxx";
console.log(obj1.name); // xxx

引用类型数据存放在堆中，每个堆内存对象都有对应的引用地址指向它，引用地址存放在栈中。

obj1是一个引用类型，在赋值操作过程汇总，实际是将堆内存对象在栈内存的引用地址复制了一份给了obj2，实际上他们共同指向了同一个堆内存对象，所以更改obj2会对obj1产生影响

下图演示这个引用类型赋值过程

小结

声明变量时不同的内存地址分配：
- 简单类型的值存放在栈中，在栈中存放的是对应的值
- 引用类型对应的值存储在堆中，在栈中存放的是指向堆内存的地址
不同的类型数据导致赋值变量时的不同：
- 简单类型赋值，是生成相同的值，两个对象对应不同的地址
- 复杂类型赋值，是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象

数组的常用方法有哪些？

数组基本操作可以归纳为增、删、改、查，需要留意的是哪些方法会对原数组产生影响，哪些方法不会

下面对数组常用的操作方法做一个归纳

增

下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响

push()
unshift()
splice()
concat()

push()

push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度

let colors = []; // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
console.log(count) // 2

unshift()

unshift()在数组开头添加任意多个值，然后返回新的数组长度

let colors = new Array(); // 创建一个数组
let count = colors.unshift("red", "green"); // 从数组开头推入两项
alert(count); // 2

splice

传入三个参数，分别是开始位置、0（要删除的元素数量）、插入的元素，返回空数组

let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 0, "yellow", "orange")
console.log(colors) // red,yellow,orange,green,blue
console.log(removed) // []

concat()

首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组

let colors = ["red", "green", "blue"];
let colors2 = colors.concat("yellow", ["black", "brown"]);
console.log(colors); // ["red", "green","blue"]
console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"]

删

下面三种都会影响原数组，最后一项不影响原数组：

pop()
shift()
splice()
slice()

pop()

pop() 方法用于删除数组的最后一项，同时减少数组的length 值，返回被删除的项

let colors = ["red", "green"]
let item = colors.pop(); // 取得最后一项
console.log(item) // green
console.log(colors.length) // 1

shift()

shift()方法用于删除数组的第一项，同时减少数组的length 值，返回被删除的项

let colors = ["red", "green"]
let item = colors.shift(); // 取得第一项
console.log(item) // red
console.log(colors.length) // 1

splice()

传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组

let colors = ["red", "green", "blue"];
let removed = colors.splice(0,1); // 删除第一项
console.log(colors); // green,blue
console.log(removed); // red，只有一个元素的数组

slice()

slice() 用于创建一个包含原有数组中一个或多个元素的新数组，不会影响原始数组

let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1, 4);
console.log(colors)   // red,green,blue,yellow,purple
concole.log(colors2); // green,blue,yellow,purple
concole.log(colors3); // green,blue,yellow

改

即修改原来数组的内容，常用splice

splice()

传入三个参数，分别是开始位置，要删除元素的数量，要插入的任意多个元素，返回删除元素的数组，对原数组产生影响

let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 1, "red", "purple"); // 插入两个值，删除一个元素
console.log(colors); // red,red,purple,blue
console.log(removed); // green，只有一个元素的数组

查

即查找元素，返回元素坐标或者元素值

indexOf()
includes()
find()

indexOf()

返回要查找的元素在数组中的位置，如果没找到则返回 -1

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.indexOf(4) // 3

includes()

返回要查找的元素在数组中的位置，找到返回true，否则false

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.includes(4) // true

find()

返回第一个匹配的元素

const people = [
    {
        name: "Matt",
        age: 27
    },
    {
        name: "Nicholas",
        age: 29
    }
];
people.find((element, index, array) => element.age < 28) // // {name: "Matt", age: 27}

排序方法

数组有两个方法可以用来对元素重新排序：

reverse()
sort()

reverse()

顾名思义，将数组元素方向反转

let values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); // 5,4,3,2,1

sort()

sort()方法接受一个比较函数，用于判断哪个值应该排在前面

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 0,1,5,10,15

转换方法

常见的转换方法有：

join()

join() 方法接收一个参数，即字符串分隔符，返回包含所有项的字符串

let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue

迭代方法

常用来迭代数组的方法（都不改变原数组）有如下：

some()
every()
forEach()
filter()
map()

some()

对数组每一项都运行传入的测试函数，如果至少有1个元素返回 true ，则这个方法返回 true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.some((item, index, array) => item > 2);
console.log(someResult) // true

every()

对数组每一项都运行传入的测试函数，如果所有元素都返回 true ，则这个方法返回 true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2);
console.log(everyResult) // false

forEach()

对数组每一项都运行传入的函数，没有返回值

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
    // 执行某些操作
});

filter()

对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
console.log(filterResult); // 3,4,5,4,3

map()

对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item * 2);
console.log(mapResult) // 2,4,6,8,10,8,6,4,2

`null`和`undefined`

类型判断不同

console.log(typeof null)
console.log(typeof undefined)

何时会得到undefined？

变量声明了但没有赋值
```
let o;
console.log(o)
```
对象的某个属性不存在
```
let obj = {}
console.log(obj.a)
```

传递参数少传参

function fn(a, b){
     console.log(a,b)
 }

函数的默认返回值（构造函数除外）

function fn(){
     console.log(1)
 }
 console.log(fn())

何时会得到null？
- 作为函数的参数（此参数不是对象）,表示空值或缺失值，当函数期望接收一个参数，但没有具体的值可提供时，可以将参数设置为null。
- null是原型链的顶端，意味着它没有任何原型。
  
  原型链是一种对象之间的关系，其中一个对象可以通过原型继承属性和方法。
  
  当一个对象通过原型链查找属性或方法时，如果在当前对象上找不到，它会继续在原型链上的下一个对象中查找，直到找到该属性或方法或者到达原型链的顶端。
  
  因为null没有原型，所以在它上面查找任何属性或方法时，将会返回undefined。
  
  代码示例：
```
let obj = {
    name: 'John',
    age: 25
  };
  
  console.log(obj.name); // 输出: 'John'
  console.log(obj.toString()); // 输出: '[object Object]'
  
  // 将原型设置为 null
  let nullObj = Object.create(null);
  nullObj.name = 'Jane';
  
  console.log(nullObj.name); // 输出: 'Jane'
  console.log(nullObj.toString()); // 报错: nullObj.toString is not a function

//在上述例子中，obj是一个普通的对象，它继承了  Object.prototype上的方法，如toString 。但是  nullObj是通过Object.create(null)创建的，它的原型被设置为null ，因此它没有继承任何方法。当我们尝试调用nullObj.toString()时会报错，因为  nullObj没有从原型链中找到toString方法。
```
  Object.prototype上的方法包括：
  - hasOwnProperty() ：判断对象是否具有指定的属性，而不是继承自原型链。
  - toString() ：返回对象的字符串表示。
  - valueOf() ：返回对象的原始值表示。
  - isPrototypeOf() ：检查对象是否是另一个对象的原型。
  - propertyIsEnumerable() ：检查指定的属性是否可枚举。
  - toLocaleString() ：返回对象的本地化字符串表示。

`for-each`和`map`

for-each的特点：

没有返回值。
不能用 break 打断。
遍历的值为 value。

map 的特点：

有返回值（数组）默认return为undefined
不能用 break 打断
接收的参数是一个函数（value, key)

`for...in` 和 `for...of` 的区别

区别
答案
- for...in 循环用于遍历对象的可枚举属性。它会遍历对象的所有可枚举属性，包括继承自原型链的属性。
  Map对象的键值对并不属于可枚举属性。所以不可使用for...in 循环
  
  常见的不可枚举属性：
  1. 原型链上的属性：对象的原型链上的属性默认是不可枚举的，这意味着它们不会在对象的属性遍历中出现。
  2. 内置的JavaScript属性和方法：一些内置对象（如Array、String、Function等）的属性和方法也是不可枚举的。例如，Array对象的length属性和forEach方法就是不可枚举的。
  3. Symbol类型的属性：使用Symbol作为属性键创建的属性默认是不可枚举的。
  4. 内部属性和方法：JavaScript引擎内部使用的一些属性和方法通常是不可枚举的，因为它们不是为了开发者直接访问而设计的。
- for...of 循环用于遍历可迭代对象（如数组、字符串、Set、Map等）。它会遍历对象的元素值，而不是属性。
- for...in 循环是基于对象的，而 for...of 循环是基于迭代器的。迭代器是一种统一的数据遍历接口，可用于自定义对象的遍历行为。

`for...in` 循环机制

for...in 循环会优先迭代数字属性
会遍历私有的和公有的可枚举属性

JavaScript中的类型转换机制

详见：JavaScript数据对比与转换 | QT-7274 (qblog.top)

递归求和

//js递归求和 1-100
function add(num1, num2){
    let num = num1 + num2
    if(num2 + 1 > 100){
        return num
    }else{
        return add(num, num2 + 1)
    }
}

let sum = add(1,2)

ES6汇总

`var`和`let`和`const`

var：

函数作用域： var 关键字声明的变量具有函数作用域，这意味着变量的作用域限定在声明它的函数内部，而不是块级作用域。这意味着在函数内部的任何位置都可以访问到 var 声明的变量。
变量提升：使用 var 关键字声明的变量会进行变量提升。这意味着无论变量声明在代码的哪个位置，它都会被提升到函数作用域的顶部。这意味着可以在变量声明之前访问变量，但其值为 undefined 。
可重复声明：使用 var 关键字可以多次声明同一个变量，而不会引发错误。这样可能会导致变量被意外覆盖或造成混淆。
全局作用域：在全局范围内使用 var 声明的变量会成为全局对象的属性。这意味着可以在任何地方访问这些变量，但也可能导致全局命名冲突和不良的编程实践。

let与const：

相同点：

let 和 const 关键字声明的变量具有块级作用域，这意味着变量的作用域限定在最近的包含块内（例如，if语句块、循环块等），而不是函数作用域。
没有变量提升：使用 let 和 const 关键字声明的变量不会进行变量提升。这意味着在变量声明之前访问变量会引发错误。
不能重复声明：使用 let 和 const 关键字声明的变量不允许在同一作用域内重复声明同一个变量。这有助于避免变量覆盖和混淆。

不同点：

块级绑定：使用 let 关键字声明的变量可以被重新赋值，而使用 const 关键字声明的变量是常量，不可重新赋值。这意味着使用 const 声明的变量在声明后不能再改变其值。
const实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。

对于简单类型的数据（数值、字符串、布尔值）而言，值就保存在变量指向的内存地址中，因此等同于常量。

但对于复合类型的数据（主要是对象和数组）而言，变量指向的内存地址保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，这完全不能控制。——因此声明一个对象为常量时必须非常小心。
```
const foo = {};

// 为foo添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将foo指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
```

使用ES6快速去重

let arr = [12, 43, 23, 12, 43, 55]
let item = [...new Set(arr)]

`Promise`执行顺序

const promise = new Promise((resolve, reject) =>{
    // Promise中的函数是同步执行的
    console.log(1)
    resolve()
    console.log(2)
} ).then(()=>{
    console.log(3)
})
console.log(4)

//1243
//按照同步执行的顺序来确定打印顺序，在所有同步代码执行完毕后才会执行.then()方法中的回调函数

防抖与节流

详见尚品汇-性能优化 | QT-7274 (qblog.top)

QT-7274

https://qt-7274.github.io/2023/09/08/javascript-xiang-guan-xi-jie-ti/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 QT-7274 !

前端 JavaScript

Vue相关细节题

2023-09-08 理论知识

前端 Vue

CSS中的布局汇总

2023-09-02 前端开发

前端 CSS

JavaScript相关细节题

说说JavaScript中的数据类型？存储上的差别？

基本类型

Number

Undefined

String

Null

Boolean

Symbol

引用类型

Object

Array

Function

存储区别

基本类型

引用类型

小结

数组的常用方法有哪些？

增

push()

unshift()

splice

concat()

删

pop()

shift()

splice()

slice()

改

splice()

查

indexOf()

includes()

find()

排序方法

reverse()

sort()

转换方法

join()

迭代方法

some()

every()

forEach()

filter()

map()

null和undefined

for-each和map

for...in 和 for...of 的区别

for...in 循环机制

JavaScript中的类型转换机制

递归求和

ES6汇总

var和let和const

使用ES6快速去重

Promise执行顺序

防抖与节流

你的赏识是我前进的动力

`null`和`undefined`

`for-each`和`map`

`for...in` 和 `for...of` 的区别

`for...in` 循环机制

`var`和`let`和`const`

`Promise`执行顺序