一些JavaScript的基础题(1)

return arr.indexOf(item) === index

})

console.log(res)

//使用reduce

let res = arr.reduce((pre, cur) => {

return pre.includes(cur) ? pre : […pre, cur]

}, [])

console.log(res)

使用该两种方法也和上面的方法一样，不能去掉引用数据类型。

我们再来看一下如何去除引用类型的重复值

利用对象的hasOwnProperty方法进行判断对象上是否含有该属性，如果含有则过滤掉，不含有则返回新数组中

let obj = {}

let res = arr.filter(item => {

if (obj.hasOwnProperty(typeof item + item)) {

return false

} else {

obj[typeof item + item] = true

return true

}

})

console.log(res)

这次可以看到成功的将引用数据类型也去掉了。

除了以上这几种方法，还有一些循环遍历的方法也是类似的

类数组变成数组

类数组是具有length属性，但不具有数组原型上的方法。 比如说arguments，DOM操作返回的结果就是类数组。那么如何将类数组变成数组呢

• Array.from(document.querySelectorAll('div'))

• Array.prototype.slice.call(document.querySelectorAll('div'))

• [...document.querySelectorAll('div')]

数据类型检测

typeof 1 // number

typeof ‘1’ // string

typeof undefined // undefined

typeof true // boolean

typeof Symbol() // symbol

上面的几种类型都能正确的检测，但是引用数据类型除了函数都会显示为object，而且对于 typeof null 也是 object 这是历史遗留下的bug，因为怕影响到一些现有的web项目，所以一直没有修复这个bug。

当检测引用数据类型的时候，用instanceof比较好，它会基于原型链进行查询，如果查询结果在原型链中，就会返回true。

Object.prototype.toString.call（检测数据类型最佳方案）

调用Object原型上的toString()方法，并且通过call改变this指向。返回字符串 ，我们看看八种数据类型分别返回的结果

function checkType(param) {

return Object.prototype.toString.call(param)

}

console.log(checkType(123)) //[object Number]

console.log(checkType(“123”)) //[object String]

console.log(checkType(true)) //[object Boolean]

console.log(checkType({ a: 123 })) //[object Object]

console.log(checkType(() => {})) //[object Function]

console.log(Symbol(1)) //Symbol(1)

console.log(null) //null

console.log(undefined) //undefined

我们再对上述函数进行一下处理

function checkType(param) {

return Object.prototype.toString.call(param).slice(8, -1).toLowerCase()

}

console.log(checkType(1)) // number

Object.is和===的区别

Object.is在严格等于上的基础修复了一些特殊情况下的错误，比如NaN 不等于 NaN

function is(x, y){

if(x === y){

// 1/+0 = +Infinity 1/-0 = -Infinity 这两个是不相等的

// 当 x和y都等于0的时候，就对x/0和y/0做判断

return x !== 0 || y !== 0 || x / 0 === y / 0

}

}

和=的区别和隐式数据类型转化

===是严格相等，左右两边不仅值要相等，类型也要相等，例如'1'===1的结果是false，因为左边是string，右边是number。

==只要值相等就会返回true，而且使用==时会发生隐式类型转化， 在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算 。

• 转成string类型：+ 字符串连接符如 1 + "1" = "11"

• 转成number类型： ++、–(自增自减运算符) + 、-、*、/、%(加减乘除取余算术运算符) >、 <、 >=、 <=、 ==、 !=、 =、 ! (关系运算符)

let i = “1”

console.log(++i) // 2

• 转成boolean类型 : !(逻辑非运算符取反操作)，使用Boolean转化除了下面这八种情况得到false以外，其它的情况都转为true 。0、-0、NaN、undefined、null、“”(空字符串)、false、document.all()

• 如果其中一方为Object，且另一方为String、Number或者Symbol，会将Object转换成字符串，再进行比较

例子:

//字符串连接符

console.log(1 + ‘true’)// +是字符串连接符, String(1) + ‘true’，打印出’1true’

//算术运算符

console.log(1 + true) // +是算术运算符,true被Number(true)->1,打印出2

console.log(1 + undefined) // 1 + Number(undefined) -> 1 + NaN, 打印NaN

console.log(1 + null) // 1 + Number(null) -> 1 + 0,打印出1

//关系运算符

// 一边数字一边字符串,Number(“2”)

// 2 > 5,打印false

console.log(“2” > 5)

// 两边字符串,调用"2".charCodeAt() -> 50

// “5”.charAtCode()-> 53, 打印false

console.log(“2” > “5”)

//多个字符串从左往右匹配,也是调用charCodeAt方法进行比较

//比较"a".charCodeAt() < “b”.charCodeAt(),打印false

console.log(“abc” > “b”)

// 左边第一个"a"和右边第一个"a"的unicode编码相等

// 继续比较两边第二个字符, “b” > “a”,打印true

console.log(“abc” > “aaa”)

//无视上述规则自成体系

console.log(NaN == NaN) // NaN和任何数据比较都是 false

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

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

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

console.log(undefined === null) //false

对于复杂的数据类型，比如对象和数组

对象和数组和字符串类型比较：先使用valueOf() 取得原始值，如果原始值不是number类型，则用toString()方法转成字符串类型valueOf -> toString

//发生了a.valueOf().toString()的转化，打印true

console.log([1,2] == “1,2”)

// 发生了a.valueOf().toString()的转化，打印true

let a = {}

console.log(a == “[object Object]”)

对象转原始类型，会调用内置的[ToPrimitive]函数，对于该函数而言，其逻辑如下：

• 如果有设置Symbol.toPrimitive()方法，会优先调用并返回数据

• 调用valueOf()，如果转换为原始类型，则返回

• 调用toString()，如果转换为原始类型，则返回

• 如果没有返回原始类型，则报错

让我们来看俩个例子👇

let obj = {

value: 3,

valueOf() {

return 4

},

toString() {

return 5

},

Symbol.toPrimitive {

return 6

},

}

console.log(obj + 1) //打印7

让 if(a ==1 && a == 2 && a == 3)成立

let a = {

value: 0,

valueOf() {

return ++a.value

},

}

// 每次调用这个a对象的时候都会在0的基础上加1，调用3次后就变成了3

console.log(a == 1 && a == 2 && a == 3) //true

如果是数组和对象与number类型比较，先用valueOf取得原始值，原始值不是number类型则调用toString，然后再将字符串类型用Number转成数字类型，调用顺序valueOf() -> toString() -> Number()

空数组的toString()方法会得到空字符串，而空对象的toString()方法会得到字符串[object Object]

//发生了这样的转化：Number([].valueOf().toString())，打印true

console.log([] == 0)

//逻辑非运算符优先级大于关系运算符

//空数组转布尔得到true，然后取反得到false

//false = 0 ，打印true

console.log(![] == 0)

//左边：{}.valueOf().toString()得到”[object Object]“,Number(”[object Object]“)->NaN

//右边：!{}得到false ,Number(false) -> 0

//两边不相等，打印false

console.log({} == !{})

//左边：[].valueOf().toString()得到空字符串

//右边：![] 得到false

// Number(“”) = Number(false) 两边都为0

//打印true

console.log([] == ![])

//因为引用数据类型存储在堆中的地址，左边和右边分别属于两块不同的空间

//他们地址不相同，所以两边不相等

//下面两种情况都打印false

console.log([] == [])

console.log({} == {})

记录遇到的一个另一个相关问题

下面这三个的打印结果

//typof null返回的是object

console.log(typeof null)

//从右往左看，先看右边的typeof null整体，返回object之后

//再将整体看成typeof object

//打印结果为string,原因是typeof null返回的是object字符串

console.log(typeof typeof null)

//到这里也是从右往左看，相当于typeof string

//结果打印是string

console.log(typeof typeof typeof null)

实现一个instanceof

function myInstanceof(left,right) {

if(typeof left !== ‘object’ || left === null) return false

//获取原型

let proto = Object.getPrototypeOf(left)

while(true){

//如果原型为null，则已经到了原型链顶端，判断结束

if(proto === null) return false

//左边的原型等于右边的原型，则返回结果

if(proto === right.prototype) return true

//否则就继续向上获取原型

proto = Object.getPrototypeOf(proto)

}

}

实现继承

ES5中实现继承

//实现一下继承

function Parent() {

this.name = “大人”

this.hairColor = “黑色”

}

function Child() {

Parent.call(this)

this.name = “小孩”

}

Child.prototype = Object.create(Parent.prototype)

//将丢失的构造函数给添加回来

Child.prototype.constructor = Child

let c1 = new Child()

console.log(c1.name, c1.hairColor) //小孩，黑色

console.log(Object.getPrototypeOf(c1))

console.log(c1.constructor) //Child构造函数

let p1 = new Parent()

console.log(p1.name, p1.hairColor) //大人，黑色

console.log(Object.getPrototypeOf(p1))

console.log(p1.constructor) //Parent构造函数

ES6中实现继承

// ES6的继承

class Parent {

constructor() {

this.name = “大人”

this.hairColor = “黑色”

}

}

class Child extends Parent {

constructor() {

super() //调用父级的方法和属性

this.name = “小孩”

}

}

let c = new Child()

console.log(c.name, c.hairColor) //小孩 黑色

let p = new Parent()

console.log(p.name, p.hairColor) //大人 黑色

如何在ES5环境下实现const

此处需要用到Object.defineProperty(Obj,prop,desc)这个API

function _const (key, value) {

const desc = {

value,

writable:false

}

Object.defineProperty(window,key,desc)

}

_const(‘obj’,{a:1}) //定义obj

obj = {} //重新赋值不生效

手写Call

//手写call

let obj = {

msg: “我叫王大锤”,

}

function foo() {

console.log(this.msg)

}

// foo.call(obj)

//调用call的原理就跟这里一样，将函数挂载到对象上，然后在对象中执行这个函数

// obj.foo = foo

// obj.foo()

Function.prototype.myCall = function (thisArg, …args) {

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。