JavaScript基础梳理

const str = 'hello'
// 包装成String('hello')
str.toUpperCase() // "HELLO"
// 销毁包装对象
console.log(str) // "hello"

const strWrapper = new String('hello')
typeof strWrapper // "object"
const str = String(strWrapper)
typeof str // "string"

const a = 'hello'
const b = 'hello'
const c = new String('hello')
console.log(a === b) // true
console.log(c === a) // false

const a = '123'
const b = Boolean(a)
console.log(b) // true

const a = '123'
// + 运算符有字符串的时候 会按字符串拼接都转换成字符串处理 否则都转换成数字
const b = a + 1
console.log(b) // '1231'
const c = 1 + true
console.log(c) // 2

let tmp = true
if (true) {
  // 引用未初始化的变量引用错误
  //  console.log(tmp); // ReferenceError
  let tmp // 初始化为undefined
  console.log(tmp) // undefined
  tmp = 123
  console.log(tmp) // 123
}
console.log(tmp) // true
if (true) {
  const func = function () {
    console.log(myVar) // 3
  }
  let myVar = 3
  func()
}

const arr = []
for (var i = 0; i < 3; i++) {
  arr.push(() => i)
}
arr.map((x) => x()) // [3,3,3]  每个变量都指向一个绑定i 所以都为3

const arr = []
// 这里还可以使用IIFE/bind入参/闭包等方案变量问题
for (let i = 0; i < 3; i++) {
  arr.push(() => i)
}
arr.map((x) => x()) // [0,1,2]   每次为let创建一个当前值的绑定 所以为[0,1,2]

// var 声明会覆盖参数
function test(name) {
  console.log(name) // 输出 "Tom"
  var name = 'Jerry' // var 声明会覆盖参数
  console.log(name) // 输出 "Jerry"
}
test('Tom')
//  let/const 不会覆盖参数
function test(name) {
  console.log(name) // 输出 "Tom"
  let name = 'Jerry' // 报错：Identifier 'name' has already been declared
}
test('Tom')

// OK: `y` accesses `x` after it has been declared
function foo(x = 1, y = x) {
  return [x, y]
}
foo() // [1,1]
// 在初始化x=y的时候 y处于TDZ 出现引用错误
function bar(x = y, y = 2) {
  return [x, y]
}
bar() // ReferenceError
const foo = 'outer'
function bar(func = (x) => foo) {
  const foo = 'inner'
  console.log(func()) // outer
}
bar() //  如果在这个例子的外部不存在foo 会引用错误
function noParameter() {
  throw new Error('no parameter')
}
function test(a = noParameter()) {
  return a
} // 使用默认参数来做参数的校验

const { length } = 'aaa'
console.log(length) // 3
const [x, y] = new Set([1, 2])
console.log(x, y) // 1 2
// 解构默认赋值
const { name = 'haha', desc = 'ss', age = 10 } = { name: '', desc: undefined }
// name = ''  desc = 'ss' age = 10

const [, , x, y] = ['a', 'b', 'c', 'd'] // x = 'c'; y = 'd'
const [x, ...y] = [1, 2, 3] // x = 1  y =  [2,3]

const num = [1, 2, 3]
const b = []
b.push(...num) // 扩展符

const arr = []
;({ bar: arr[0] } = { bar: true })
console.log(arr) // [true]

// 不能动态的引入
if (Math.random()) {
  import 'foo' // SyntaxError
}
// 引入的提升
foo()
import { foo } from 'my_module'

// a.js
export let a = 100
export const count = () => {
  a++
}
// b.js
import { a, count } from './a.js'
console.log(a) // 100
count()
console.log(a) // 101
a = 100 // error  a是只读的
// CommonJs是值的复制,相当于修改一个值.

// a.js  CommonJS值拷贝的例子
let a = 100
module.exports = {
  a,
  count: () => {
    a++
  },
}
// b.js
let { a, count } = require('./a.js')
console.log(a) //100
count()
console.log(a) //100
a++ // 相当于对本模块的a变量进行了赋值
console.log(a) // 101
const b = require('./a.js') // 会使用第一次require的结果
console.log(b.a) // 100

// a.js  CommonJs 引用的例子
let a = {
  name: 'haha',
}
module.exports = {
  a,
  setStr: (str) => {
    a.name = str
  },
}
// b.js
let { a, setStr } = require('./a.js')
console.log(a) // { name: 'haha' }
setStr('ss')
console.log(a) // { name: 'ss' }
a.name = 100
console.log(a) // { name: 100 }
const b = require('./a.js') // 仍然使用的是第一次的缓存结果 但是由于引用的设置 导致原来的值被修改了
console.log(b) // { a: { name: 100 }, setStr: function() {} }

    // b.js
    exports.done = false
    let a = require('./a.js')
    console.log('b.js-1', a.done)
    exports.done = true
    console.log('b.js-2', '执行完毕')
    // a.js
    exports.done = false
    let b = require('./b.js')
    console.log('a.js-1', b.done)
    exports.done = true
    console.log('a.js-2', '执行完毕')
    // c.js
    let a = require('./a.js')
    let b = require('./b.js')
    console.log('c.js-1', '执行完毕', a.done, b.done)

    输出:
    node c.js
    b.js-1 false
    b.js-2 执行完毕
    a.js-1 true
    a.js-2 执行完毕
    c.js-1 执行完毕 true true

    // ES6 循环依赖 a.js
    import { bar } from './b.js';
    bar(); // 'bar'
    export function foo() {
        console.log('foo');
    }
    bar(); // 'bar'

    // b.js
    import {foo} from './a.js';
    export function bar() {
       console.log('bar');
    }

    // CommonJs循环依赖  a.js
    const { bar } = require('./b.js');
    module.exports = {
      test: 1,
    }
    // b.js
    const { test } = require('./a.js')
    console.log(test); // undefined

import('module').then((module) => {
  module.default()
  module.namedExport()
})

// Or with async/await
;(async () => {
  const module = await import('module')
  module.default()
  module.namedExport()
})()

    const iterable = {
      [Symbol.iterator]() {
          let step = 0;
          const iterator = {
              // iterators that are iterable
              [Symbol.iterator]() {
                return this;
              }
              next() {
                  if (step <= 2) { step++;}
                  switch (step) {
                      case 1:
                          return { value: 'hello', done: false };
                      case 2:
                          return { value: 'world', done: false };
                      default:
                          // done表示是否到尾
                          return { value: undefined, done: true };
                  }
              }
          };
          return iterator;
      }
    };
    const iterator = iterable[Symbol.iterator]();
    iterator.next();  // {  done: false, value: 'hello' }
    iterator === iterator[Symbol.iterator]() // true
    iterator.next();  // { done: false, value: 'world' }

function* func() {
  const y = yield 1
  yield 2 + y
}
const generator = func()
generator.next() // { value: 1, done: false }
generator.next(100) // { value: 102, done: false }

async function foo() {}
const a = async function () {}
let obj = {
  async foo() {
    return 1
  },
}
const b = async () => {
  return 1
}

async function foo() {
  console.log('async func')
  // await已经是一个微任务
  const ret = await 1
  // const ret = await Promise.resove(1)
  return ret
}
foo().then((value) => {
  console.log(value)
})
console.log('main')
// 上面代码的输出是  async func  main 1

function spawn(genF) {
  return new Promise((resolve, reject) => {
    const itr = genF()
    function step(nextFn) {
      let next
      try {
        next = nextFn()
      } catch (e) {
        return reject(e)
      }
      if (next.done) {
        return resolve(next.value)
      }
      Promise.resolve(next.value).then(
        function (v) {
          step(function () {
            return itr.next(v)
          })
        },
        function (v) {
          step(function () {
            return itr.throw(v)
          })
        }
      )
    }
    step(function () {
      return itr.next(undefined)
    })
  })
}

const myObject = {
  foo: 1,
  get name() {
    return this.name
  },
}
const test = {
  name: 'haha',
}
Reflect.get(myObject, 'name', test) // haha

const obj = {}
Object.defineProperty(obj, 'name', {
  value: '张三',
  writable: true,
  enumerable: true,
  configurable: true,
})
console.log(obj.name) // 张三
console.log(Object.getOwnPropertyDescriptor(obj, 'name'))

const obj = {
  _name: '张三',
}
Object.defineProperty(obj, 'name', {
  get: function () {
    return this._name
  },
  set: function (value) {
    this._name = value
  },
  enumerable: true,
  configurable: true,
})
console.log(obj.name) // 张三

;(function (exports, require, module, __filename, __dirname) {
  // Module code actually lives in here
})

let obj1 = {}
let obj2 = {}

obj1.ref = obj2
obj2.ref = obj1

// 解除引用
obj1 = null
obj2 = null

function MyClass() {
  this.largeData = new Array(1000000).fill('leak')
  window.addEventListener('click', this.handleClick.bind(this))
}

MyClass.prototype.handleClick = function () {
  console.log('Clicked')
}

function lazyLoadImages() {
  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target
        img.src = img.dataset.src // 加载真实图片
        observer.unobserve(img) // 加载后停止观察
      }
    })
  })

  // 观察所有懒加载图片
  document.querySelectorAll('img[data-src]').forEach((img) => {
    imageObserver.observe(img)
  })
}

// 创建观察者
const resizeObserver = new ResizeObserver((entries) => {
  entries.forEach((entry) => {
    const { width, height } = entry.contentRect
    console.log('元素尺寸变化:', width, height)
  })
})
// 开始观察目标元素
const target = document.querySelector('.target')
resizeObserver.observe(target)

// 创建观察者
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // mutation.type: 'attributes' | 'childList' | 'characterData'
    console.log('DOM变化类型:', mutation.type)
    console.log('变化的目标节点:', mutation.target)
  })
})
// 配置观察选项
const config = {
  attributes: true, // 观察属性变化
  childList: true, // 观察子节点变化
  characterData: true, // 观察文本内容变化
  subtree: true, // 观察所有后代节点
}
// 开始观察
const targetNode = document.querySelector('#target')
observer.observe(targetNode, config)

// 创建性能观察器
const observer = new PerformanceObserver((list) => {
  // 获取性能条目
  const entries = list.getEntries()
  entries.forEach((entry) => {
    console.log('性能条目:', {
      name: entry.name,
      entryType: entry.entryType,
      startTime: entry.startTime,
      duration: entry.duration,
    })
  })
})
// 开始观察
observer.observe({
  entryTypes: [
    'resource', // 资源加载
    'navigation', // 页面导航
    'paint', // 绘制时间
    'largest-contentful-paint', // 最大内容绘制
    'first-input', // 首次输入延迟
    'layout-shift', // 累积布局偏移
  ],
})

// 获取原有的滚动高度
const scrollY = window.scrollY
// 禁用背景滚动
document.body.style.position = 'fixed'
document.body.style.top = `-${scrollY}px`
document.body.style.width = '100%'
document.body.style.overflow = 'hidden'