JS基础知识查漏补缺

当初转行入门时直接上手的jquery然后就不停的写业务，学vue、react框架，基础很薄弱，于是打算记录一下平常看到的基础小知识，连载中…

1. 什么是变量提升(Hoisting)

展开查看

b()  // undefined
console.log(a) // undefined
var a = 'Hello world'
function b() {
    console.log(a)
}

**函数和变量相比，会被优先提升。这意味着函数会被提升到更靠前的位置。**所以上面的栗子会输出两个undefined

变量提升并不是在物理层面将函数或者变量放到代码的最前面，而是在编译阶段提前在内存中为期开辟空间，变量只声明并且赋值为 undefined
es6的let并不是不会提前开辟空间，而是由于let的特性(报错Reference Error: Cannot access 'a' before initialization)导致并不能提前使用
变量提升 - 术语表 | MDN

2. call、apply 区别

展开查看

let a = {
    value: 1
}
function getValue(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value)
    console.log(this)
}
getValue.call(a, 'yck', '24')   // 分别输出yck 24 1 {value: 1}
getValue.apply(a, ['yck', '24']) // 分别输出yck 24 1 {value: 1}
getValue() // undefined undefined undefined window对象

call 和 apply 都是改变 this 的指向的，作用都是相同的，只是传参的方式不同。

除了第一个参数外，call 可以接收一个参数列表，apply 只接受一个参数数组。

3. 如何判断数据类型

展开查看

在 ECMAScript 规范中，共定义了 7 种数据类型，分为 基本类型 和 引用类型 两大类，如下所示：

基本类型：String、Number、Boolean、Symbol、Undefined、Null
引用类型：Object
使用typeof判断

typeof ''; // string 有效
typeof 1; // number 有效
typeof Symbol(); // symbol 有效
typeof true; //boolean 有效
typeof undefined; //undefined 有效
typeof null; //object 无效
typeof [] ; //object 无效
typeof new Function(); // function 有效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效


使用toString
toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
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 global] window 是全局对象 global 的引用

4. == 和 === 的区别以及新增的 Object.is

展开查看

`==`  抽象相等，比较时，会先进行隐式强制类型转换，然后再比较值
`===` 严格相等，会比较两个值的类型和值
ps：es6中新增了一个新的方法`Object.is()`来比较两个值严格相等，它与严格比较运算符（===）基本一致，不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

“1” == 1返回true，’true’ == true 为什么返回false?
在转换不同的数据类型时，相等和不相等操作符遵循下列基本规则：

如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false转换为0，而true转换为1；
如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值；
如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf()方法，用得到的基本类型值按照前面的规则进行比较；
其次，NaN与任何值都不相等，包括NaN本身。

5. 什么是解构赋值?

展开查看

将`=`右边的结构分解(解构)，然后按照格式给`=`左边进行赋值，主要分为数组的解构赋值和对象的解构赋值。

let a,b,c;
[a,b,...c]=[1,2,3,4,5,6,7];
console.log(a,b,c);//1 2  [3, 4, 5, 6, 7]

6. 写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

展开查看

key 的特殊属性主要用在 Vue/React 的虚拟DOM算法，在新旧nodes对比时辨识VNodes。
但是注意，不要用遍历时的index做key，容易引发[奇怪的bug](Vue2.0 v-for 中 :key 到底有什么用？ - 方应杭的回答 - 知乎
https://www.zhihu.com/question/61064119/answer/766607894)。