前端面试准备笔记之JavaScript(01)

1.1 typeof 能判断哪些类型?

• typeof可以识别所有的值类型
• typeof可以识别函数 //function
• typeof可以判断是否是引用类型(不可以再细分) //object

1.2 javascript如何检测一个变量是一个String类型？请写出函数实现

• 方法一 typeOf

 function isString(obj) {
    return typeof(obj) === "string"? true:false
 }

• 方法二 constructor

constructor 属性，返回对创建此对象的，数组函数的引用

 function isString(obj) {
    return obj.constructor === "String" ? true: false
 }

• 方法三 Object.prototype.toString.call

使用Object.prototype 上的原生toString方法判断数据类型，可以判断基本类型(null undefined "abc" 123 true),可以判断引用类型(函数类型 日期类型 数组类型 正则表达式 自定义类型(这种不能准确判断需要通过instanceof操作符来判断),可以判断原生JSON对象)

 function isString(obj) {
     return Object.prototype.toString.call(obj) === "[object String]"? true:fasle
 }

1.3 何时使用 === 何时使用 ==

1.4 值类型和引用类型的区别

• 值类型(占用空间小)：字符串、数值、布尔值、undefined、symbol(es6新加，为了解决对象属性名重复)

1. 占用空间固定，保存在栈中，当一个方法执行时，每个方法都会建立自己的内存栈，在这个方法内定义的变量将会逐个放入这个栈内存里，随着方法执行结束，这个方法的内存栈也自然销毁了。
2. 保存与复制的是本身
3. 使用typeof检测数据类型
4. 基本类型数据是值类型

• 引用类型(占用空间大)：对象、数组、函数(特殊的引用类型，不用于存储数据，没有拷贝和复制函数一说)、null(特殊的引用类型指向空地址)

1. 引用类型占用空间不固定，保存在堆中。堆内存中的对象不会随方法的结束而销毁，即便这个方法结束后，这个对象还可能被另一个引用变量所引用，只有当一个对象没有任何引用变量引用它时，系统的垃圾回收机制才会在核实的时候回收它。
2. 保存与复制的是指向对象的一个指针
3. 使用instanceof检测数据类型
4. 使用new()方法构造出的对象是引用型

1.5 手写深拷贝

浏览器默认使用的是浅拷贝

function deepClone(obj = {}) {
    if(typeof obj !== 'object' || obj == null){
        // obj 是null或者是值类型不是对象或数组，直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if (obj instaceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用
            result[key] = deepClone(obj[key])
        }
    }

    //返回结果
    return result
}

• 对象转字符串 JSON.stringify(obj)
• JSON字符串转对象 JSON.parse(obj)

1.6 变量计算(类型转换)

• 字符串拼接

const a = 100 + 10 //110
const b = 100 + '10' //'10010'
const c = true + '10' //'true10'

• ==

// 以下如果用=== 都是false
100 == '100' // true
0 == '' // true
0 == false // true
false == '' //true
null == undefined // true

//obj.a == null相当于：
obj.a === null||obj.a === undefined
其他情形一律用 ===

• if语句

// truly 变量：!!a === true 的变量
两部非运算是true，就是truly 变量
// falsely变量：!!a === false 的变量
两部非运算是false，就是falsely变量
!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false

• 逻辑判断

10 && 0  //0
''|| 'abc'  //'abc'
!window.abc  // true

1.7 请用js去除字符串的空格?

• 方法一：使用replace正则匹配的方法

1. 去除所有空格： str = str.replace(/\s*/g," ")

2. 去除两头空格： str = str.replace(/^\s|\s$/g,"");

3. 去除左空格： str = str.replace( /^\s*/, “”);

4. 去除右空格： str = str.replace(/(\s*$)/g, "");

• 方法二：使用str.trim()方法

1. str.trim()局限性：无法去除中间的空格

2. 同理，str.trimLeft()，str.trimRight()分别用于去除字符串左右空格。

• 方法三：使用jquery，$.trim(str)

1. $.trim(str)局限性：无法去除中间的空格，实例如下：

1.8 js 字符串操作函数

https://www.w3school.com.cn/jsref/jsref_obj_string.asp

字符串的对象属性：constructor(创建此对象的函数引用;length(字符串的长度);prototype(允许您有能力向对像添加属性和方法)

• concat(str1,str2,str3...) -- 将两个或多个字符的文本组合起来，返回也给新的字符串。
• indexOf() -- 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回-1
• charAt(number) -- 返回指定位置的字符。
• lastIndexOf(string) -- 返回字符中一个子串最后一处出现的索引，如果没有匹配项，返回-1。
• match(regexp) -- 检查一个字符串是否匹配一个正则表达式。
• substr(start,length) -- 返回从字符串中抽取从start下标开始的指定数目的字符,第二个参数是长度。
• substring(start,stop) -- 用于提取字符串中介于两个指定下标之间的字符。
• slice(start,end) -- 提取字符串的某个部分，并以新的字符串返回提取的部分。
• replace() -- 用来查找匹配一个正则表达式的字符串，然后使用新的字符串代替匹配的字符串。
• search() -- 执行一个正则表达式匹配查找。如果成功，返回字符串中匹配的索引值。否则返回-1
• split() -- 通过将字符串划分成一个个子串，返回一个字符串数组。
• length -- 返回字符串的长度，长度包含字符的个数。
• toLowerCase() -- 将整个字符串转化成小写。
• toUpperCase() -- 将整个字符串转化成大写。

1.9 数组的操作函数

https://www.w3school.com.cn/jsref/jsref_obj_array.asp

数组的对象属性：constructor(返回创建此对象的数据的引用;length(设置或返回数组中元素的数目);prototype(使您有能力向对像添加属性和方法)

• concat(arr1,arr2,arr3...) -- 连接两个或更多的数组，并返回结果。
• join(separator) -- 把数组的所有元素放入一个字符串并以指定符号连接。参数可选默认是逗号。
• pop() -- 删除并返回数组的最后一个元素。
• push() -- 向数组的末尾添加一个或多个元素，并返回新的长度。
• reverse() -- 颠倒数组中元素的顺序。
• shift() -- 删除并返回数组的第一个元素。
• slice(start,end) -- 从某个已有的数组返回选定的元素。参数end可选，并且不包含该元素。
• sort() -- 对数组的元素进行排序。
• splice(index,howmany,item1...) -- 删除元素，并向数组添加新的元素。
• toSource() -- 返回该对象的源代码。
• toString() -- 将数组转化位字符串，并返回结果之间用逗号间隔。
• toLocaleString() -- 将数组转化为本地数组，并返回结果。
• unshift() -- 向数组的开头添加一个或更多元素，并返回新的长度。
• valueOf() -- 返回数组对象的原始值。该方法通常是在js后台自动调用，并不出现在代码中。