js基础知识回顾（面试题）

1. js的数据类型

• string（字符串类型），
• number（数字类型），
• boolean（布尔值），
• null（空），
• undefined（未定义），
• object（对象），
• symbol（ES6）

• bigint (ES10)

2.基本数据类型和引用数据类型 

1. 基础数据类型：名和值是存放在栈内存中，当赋值给另一个变量时会给一个新的内存空间，不会改变原有的值。（string、number、boolean、null、undefined、sybol）
2. 引用数据类型：名是存放在栈内存中，值是存放在堆内存中，栈内存指针指向堆内存的值，所以当赋值给另一个变量时栈内存的名会指向同一个堆内存的值。（object、array、function）

3. 判断数据类型：typeof、instanceof以及Object.prototype.toString 

	typeof	instanceof	Object.prototype.toString
定义	判断变量的数据类型	检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上	判断所有数据的类型，constructor.prototype
使用区间	判断任何数据的数据类型	只检测对象的具体类型	判断所有数据的类型
用法	typeof  【data】	【object】 instanceof 【构造函数】	Object.prototype.toString.call(【data】)
返回值	number、string、boolean、undefined、object、function	true、false	String,Number,Boolean,Undefined,Null ,Function,Date,Array,RegExp,Error, HTMLDocument,...
注意	引用类型除了funcation其他返回的都是object，无法确定对象的具体类型 typeof null === 'object';(历史遗留) typeof [] === 'object' ; typeof {} === 'object';	数组[]结果既是Array又是Object。三者关系: 从instanceof 能够判断出 [].__proto__ 指向 Array.prototype， 而 Array.prototype.__proto__ 又指向了Object.prototype，Object.prototype.__proto__ 指向了null,标志着原型链的结束 [] instanceof Object  === true; [] instanceof Array === true; let a={}; a instanceof Object  === true; a instanceof Array === false;	Object.prototype.toString.call('') ; // [object String] Object.prototype.toString.call(1) ; // [object Number] Object.prototype.toString.call(true) ; // [object Boolean] Object.prototype.toString.call(undefined) ; // [object Undefined] Object.prototype.toString.call(null) ; // [object Null] Object.prototype.toString.call(new Function()) ; // [object Function] Object.prototype.toString.call(new Date()) ; // [object Date] Object.prototype.toString.call([]) ; // [object Array] Object.prototype.toString.call(new RegExp()) ; // [object RegExp] Object.prototype.toString.call(new Error()) ; // [object Error] Object.prototype.toString.call(document) ; // [object HTMLDocument] Object.prototype.toString.call(window) ; //[object Window]
其他	typeof new Date(); //object 无效	new Date() instanceof Date;//true

【新增知识点】：constructor属性，判断实例对象是在那个构造函数中产生。

4. js数组方法

详细用法如下文档：

js数组处理函数_Pistachio839的博客-CSDN博客js数组处理函数案例源数组：let arr=[90,23,56,32,76,56]以下操作是对源数组操作1. push()，数组末尾添加元素arr.push(100)console.log(arr) // [90, 23, 56, 32, 76, 56, 100]let x= arr.push(101)console.log(x) // 7数组末尾添加元素可添加多个（用逗号隔开）有返回值，返回插入后的数组长度可改变源数组2. unshift() ，数组开头添加元素arrhttps://blog.csdn.net/Pistachio839/article/details/122585153

方法	定义	是否改变原数组
push	数组添加末尾元素	改变
unshift	数组添加开头元素	改变
pop	数组删除末尾元素	改变
shift	数组删除开头元素	改变
splice	删除指定元素 || 删除并添加指定元素	改变
sort	数组排序	改变
reverse	数组倒序	改变
concat	拼接数组	不改变
join	根据指定字符，将数组变成字符串	不改变
indexOf	查询元素首次出现的位置索引	不改变
lastIndexOf	查询元素最后一次出现的位置索引	不改变
forEach	数组循环，无返回值	不改变
map	数组循环，有返回值	不改变
filter	数组过滤，返回符合条件的元素	不改变
reduce	数组累加器js中reduce()方法使用_Pistachio839的博客-CSDN博客_js reduce不执行

5. 逻辑运算符

• 优先级是：逻辑非！、逻辑与&& 、逻辑或||  。

类型	逻辑与 &&	逻辑或 ||	逻辑非!
定义	如果 expr1 能被转换为 false，那么返回 expr1；否则，返回expr2。两个操作数都为 true 时 结果为 true；两个操作数为false时 结果为false。	如果 expr1 能被转换为 true，那么返回 expr1；否则，返回expr2。一个或两个操作数为 true 时 结果为 true；两个操作数为 false 则返回 false。	只有一个操作数。 true 则返回 false；false则返回 true。
布尔值计算	true && true; // true true && false; // false false && true; // false false && false; // false	true || true; // true true || false; //true false || true; // true false || false; // false	! true;  // false ! false; // true
数字计算	1 && 9 ; // 9 1 && 0; // 0 0 && 5; // 0 0 && 0; // 0	1 || 9 ; // 1 1 || 0; // 1 0 || 5; // 5 0 || 0; // 0	! 9; // false ! 0; // true
字符串计算	'aa' && 'bb'; // 'bb' 'aa' && ' '; // ' '  ' ' && 'aa'; // 'aa' ' ' && ''; // '' '' && 'aa'; // '' 注意：空字符串'' 和空格字符串' '	'aa' || 'bb'; // 'aa' 'aa' || ' '; // ' aa' ' ' || 'aa'; // ' ' ' ' || ''; // ' ' '' || 'aa'; // ''	! 'aa'; //false ! ' '; // false ! ''; //true

• js运算符的优先级为:

优先级	运算符	说明	结合性
1	[]、.、()	字段访问、数组索引、函数调用和表达式分组	从左向右
2	++ -- -~!delete new typeof void	一元运算符、返回数据类型、对象创建、未定 义的值	从右向左
3	*、/、%	相乘、相除、求余数	从左向右
4	+、-	相加、相减、字符串串联	从左向右
5	<<、>>、>>>	左位移、右位移、无符号右移	从左向右
6	<、<=、>、>=、instanceof	小于、小于或等于、大于、大于或等于、是否 为特定类的实例	从左向右
7	==、!=、===、!==	相等、不相等、全等，不全等	从左向右
8	&	按位“与”	从左向右
9	^	按位“异或”	从左向右
10	|	按位“或”	从左向右
11	&&	短路与（逻辑“与”）	从左向右
12	||	短路或（逻辑“或”）	从左向右
13	?:	条件运算符	从右向左
14	=、+=、-=、*=、/=、%=、&=、|=、^=、<、<=、>、>=、>>=	混合赋值运算符	从右向左
15	,	多个计算	按优先级计算，然后从右向左

• js的数字、字符、逻辑符运算

// 乘法*、加号+、减法-优先级高于逻辑与&&；先算加法，再算逻辑与;
// 逻辑与pre1为false时才为pre1，否则为pre2.
1 + 2 && 3; // 3
5 - 5 && 4;; // 0
1 * 0 && 3; // 0

// 数字与字符相加，则数字转化为字符相加；其他-、*、/则为NaN
0 + 'string' && 'finally';  // 'finally'

'string' - 0 && 'finally'; // NaN

6. 深浅拷贝

浅拷贝：

        1. slice（0） 截取字符串

        2. concat（） 拼接

        3. assign（） 源对象复制到目标对象

        4. ... 扩展运算符

深拷贝：       

        1. JSON.parse（JSON.stringfy（））

• 无法拷贝undefined、函数
• 无法拷贝对象原型链上的属性和方法
• 拷贝date的时候会变成字符串

        2. object.create() 重新创建对象

        3. jQuery.extend() 

        4. lodash._.cloneDeep()

        5. 普通递归函数实现深拷贝 

function deepClone(source) {
  if (typeof source !== 'object' || source == null) {
    return source;
  }
  const target = Array.isArray(source) ? [] : {};
  for (const key in source) {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      if (typeof source[key] === 'object' && source[key] !== null) {
        target[key] = deepClone(source[key]);
      } else {
        target[key] = source[key];
      }
    }
  }
  return target;
}