JavaScript 基础随想

0.1 + 0.2 // 0.30000000000000004

let a = 111 // 这只是字面量，不是 number 类型
a.toString() // 使用时候才会转换为对象类型

let a = { name: 'FE' }
let b = a
b.name = 'EF'
console.log(a.name) // EF

// 1.使用typeof判断数据类型
// 基本类型
// 除了null都可以被检测出来
typeof 147 // number
typeof 'Rock' // string
typeof true // boolean
typeof undefined // undefined
typeof Symbol(777) // symbol
// 判断null会返回object
typeof null // object
// 但是要注意一点
null instanceof Object // false
// 引用类型
typeof {} // object
// 其他类型
typeof new Function() // function
typeof new Array() // object
typeof new Date() // object

// 2.使用toString()进行类型检测
const printTypeByToString = val => {
  let regex = /\[object\s(\w+)\]/
  let res = Object.prototype.toString.call(val)
  let newRes = res.replace(regex, (match, p1) => p1.toLocaleLowerCase())
  return newRes
}
// 基本类型
printTypeByToString(147) // number
printTypeByToString('Rock') // string
printTypeByToString(true) // boolean
printTypeByToString(Symbol(777)) // symbol
printTypeByToString(null) // null
printTypeByToString(undefined) // undefined
// 引用类型
printTypeByToString({}) // object
// 其他类型
printTypeByToString([]) // array
printTypeByToString(new Date()) // date
printTypeByToString(new Function()) // function

// 转换结果为false的
Boolean(null)
Boolean(undefined)
Boolean(false)
Boolean(NaN)
Boolean('')
Boolean(0)
Boolean(-0)

// TODO 有待商榷
// 对象会先执行 toPrimitive操作 即valueOf和toString()
// 返回 '[object Object] '
Number({}) // NaN
String({}) // "[object Object]"
Boolean({}) // true

// 对象会先执行 toPrimitive操作 即valueOf和toString()
// 返回一个字符串
// 然后在进行Number
Number([]) // 0
Number([1]) // 0
Number([1, 2]) // NaN

String([]) // ''
String([1]) // '1'
String([1, 2]) // '1,2'
// 除了null,undefined,false,'',NaN,false其他通过Boolean进行转子那个都会返回true
// 所以Boolean一个数组返回true
Boolean([]) // true
Boolean([1]) // true
Boolean([1, 2]) // true

1 + '1' // '11'
2 * '2'[(1, 2)] + // 4
  [1, 2] +
  [2, 1] // '1,22,1'
// [1, 2].toString() -> '1,2'
// [2, 1].toString() -> '2,1'
// '1,2' + '2,1' = '1,22,1'

'a' + +'b' // -> "aNaN"
// 一元操作符
// 因为 + 'b' -> NaN
// 你也许在一些代码中看到过 + '1' -> 1

1 + !1 // 1
1 + !0 // 2

// 为什么 [] == ![] 是true

// 1. 由于！的优先级高先执行右侧即 ![] => !Boolean([]) => !true => false
// 2. [] == false 当一个对象和其他类型比较时先将对象通过 ToPrimitive 操作转换成基本类型在比较
// 什么是ToPrimitive操作呢，其实ToPrimitive操作就是先执行valueOf()方法，如果结果为原始值，则返回此结果；否则，执行toString()方法，如果结果是原始值，则返回此结果；否则，抛出TypeError错误。 所以[].toString => ""
// 3. "" == false 当一个布尔值与其他类型比较先将布尔值转换成数字类型 false => 0
// 4. "" == 0 当一个数字与字符串比较时先将字符串转换成数字类型 Number("") => 0
// 5. 0 == 0 所以[] == ![]

// 为什么 true == "true" 为false

// 1. 存在布尔值时现将布尔值转成数字 Boolean(true) => 1
// 2. 存在数字和字符串的时候将字符串转换成 数字 Number("true") => NaN
// 3. 1 != NaN 所以true == "true" 为false

// 为什么 "[object Object]" == {} 为 true

// 因为{}转换成基本类型会通过toString 返回"[object Object]"

// 获取长度
function getLength() {
  console.log(this.length)
}

function testArg(first, second) {
  // 获取实参的个数
  getLength.call(arguments) // 3
  // 获取形参的个数
  getLength.call(arguments.callee) // 2
}

testArg(1, 2, 3)

// 获取形参的个数
getLength.call(testArg) // 2

function argUseArrFun() {
  // ES6转化数组
  // 1.Array.from
  let args = Array.from(arguments)
  args.forEach(item => console.log(item))
  // 2.解构赋值
  // let args = [...arguments]
  // args.forEach(item => console.log(item))

  // 对类数组对象使用数组方法
  let firstArg = [].shift.call(arguments) // 'Student'
  let isNameExist = [].includes.call(arguments, 'Jack') // true
}
argUseArrFun('Jack', 15, 'Boy', 'Student')

// 构造函数
function People(name, age) {
  this.name = name
  this.age = age
}

// 模拟new操作
function newOwn(consFoo, args) {
  let obj = {}
  obj.__proto__ == consFoo.prototype
  // 以上两步等价于 let obj = Object.create(consFoo.prototype)
  let res = consFoo.apply(obj, args)
  return typeof res === 'object' ? res : obj
}

// 实例化
let people = newOwn(People, ['Jack', 18])

function myInstanceof(leftVaule, rightVaule) {
  // 取右表达式的 prototype 值
  let rightProto = rightVaule.prototype
  // 取左表达式的__proto__值
  leftVaule = leftVaule.__proto__
  while (true) {
    if (leftVaule === null) {
      return false
    }
    if (leftVaule === rightProto) {
      return true
    }
    leftVaule = leftVaule.__proto__
  }
}

var name = 'window name'

function getName() {
  console.log(this.name)
}

var obj = {
  name: 'object name',
  getName: function () {
    console.log(this.name)
  }
}

getName() // window name

obj.getName() // object name

var fun = obj.getName
fun() // window name

fun.call(obj) // object name

// 类型判断
const getValType = val => {
  let str = Object.prototype.toString.call(val)
  let reg = /\[object\s(\w+)\]/
  let res = str.replace(reg, (match, p1) => p1.toLocaleLowerCase())
  return res
}
// 浅拷贝
const shallowCopy = obj => {
  let type = getValType(obj)
  if (type !== 'object' && type !== 'array') return
  let newObj = type === 'object' ? {} : []
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key]
    }
  }
  return newObj
}

// 深拷贝
const deepCopy = obj => {
  let type = getValType(obj)
  if (type !== 'object' && type !== 'array') return
  let newObj = type === 'object' ? {} : []
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = getValType(obj[key]) === 'object' ? deepCopy(obj[key]) : obj[key]
    }
  }
  return newObj
}