29 篇博文 含有标签「javascript」

const add = new Proxy(
    { value: 0 },
    {
        get(target, key, receiver) {
      // 对象 => 原始，会先调用对象的 Symbol.toPrimitive 方法
            if (key === Symbol.toPrimitive) {
                return () => Reflect.get(target, 'value')
            }
            target.value += Number(key)
      // 支持链式读取，所以返回这个 proxy 本身
            return receiver
        }
    }
)

console.log(add[1][2][3] + 4) // 10

function getRandom(min, max) {
  return Math.floor(Math.random() * (max + 1 - min) + min)
}

function substring(start, end) {
    end = end || 默认值
}

function foo(a, b = 2, c = 3) {
    console.log(a, b, c)
}
foo() // undefined 2 3
foo(1, null, undefined) // 1 null 3
// 传递的顺序是一一对应的，不会跳跃传递

function mixArgs(a, b = 2) {
    console.log(arguments)
    console.log(arguments.length)
    console.log(a === arguments[0])
    console.log(b === arguments[1])
    a = 'alpha'
    b = 'beta'
    console.log(arguments.length)
    console.log(a === arguments[0])
    console.log(b === arguments[1])e
}
mixArgs(1)

function foo(a, b = 2, c) { }
console.log(foo.length) // 1

let n = 1
function getValue() {
    return n++
}
function foo(a, b = getValue()) {
    console.log(a, b)
    console.log('n:', n)
}
foo(1, 10) // 1 10 n:1 不需要默认值，不会去调用默认值表达式
foo(1) // 1 1 n:2
foo(1, 10) // 1 10 n还是2
foo(1) // 1 2 n:3
foo(1) // 1 3 n:4

function getValue(v) {
    return v * 2
}
function foo(a, b = getValue(a)) {
    console.log(a, b)
}
foo(1) // 1 2
foo(2) // 2 4

function bar(a = getValue(b), b) {
    console.log(a, b)
}
bar(undefined, 1) // error
bar(undefined, 2) // error

const box = document.querySelectorAll(".box")[0];
let left = 0;
function boxMoving() {
  if (left > 200) {
    clearInterval(timer);
  } else {
    left++;
    box.style.left = left + "px";
  }
}
let timer = setInterval(boxMoving, 1000 / 120); // 120Hz

const box = document.querySelectorAll(".box")[0];
let left = 0;
function boxMoving() {
    if (left > 200) {
        cancelAnimationFrame(timer);
    } else {
        left++;
        box.style.left = left + "px";
        // 请求动画帧，即屏幕刷新的时候再次执行
        requestAnimationFrame(boxMoving);
    }
}
let timer = requestAnimationFrame(boxMoving);

Function.prototype.myBind = function (ctx, ...args) {
  const func = this
  return function (...restArgs) {
    if (new.target) {
      return new func(...args, ...restArgs)
    } else {
      return func.apply(ctx, [...args, ...restArgs])
    }
  }
}

function originFunc(a, b, c, d) {
  console.log('fun 执行了')
  console.log('args', a, b, c, d)
  console.log('this', this)
}

const boundFunc = originFunc.myBind('boundThis', 1, 2)
console.log(new boundFunc(3, 4))

Function.prototype.myCall = function (ctx, ...args) {
  const func = this
  // 处理新的 this 为对象
  // Object 会将基本类型的数据转为对应的包装类实例
  ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx)
  
  // 将原函数作为 ctx 的一个属性
  // 通过对象方法调用，从而改变原函数的 this 指向（为新 ctx）
  ctx._func = func
  ctx._func(...args)
}

Function.prototype.myCall = function (ctx, ...args) {
  const func = this
  ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx)
  
  const key = Symbol()
  Object.defineProperty(ctx, key, {
    value: func,
    enumerable: false
  })
  ctx[key](...args)
}

function originFunc(a, b) {
  console.log('args', a, b)
  console.log('this', this)
}

originFunc.myCall('boundedThis', 1, 2)
console.log('==========')
originFunc.call('boundedThis', 1, 2)

const t = new TaskPro()
t.addTask(async (next) => {
    console.log(1, 'start')
    await next()
    console.log(1, 'end')
})
t.addTask(() => {
    console.log(2)
})
t.addTask(() => {
    console.log(3)
})
t.run() // 1 start, 2, 3, 1 end

class TaskPro {
  #taskList = [] // 任务队列
  #isRunning = false // 标识是否正在执行
  
  // 添加一个任务到任务队列
  addTask(task) {
    this.#taskList.push(task)
  }
  
  // 执行任务队列
  async run() {
    // 防止多次重复执行 run
    if (this.#isRunning) {
      return
    }
    this.#isRunning = true
    // ...
  }
}

class TaskPro {
  // ...
  #currentTaskIndex = 0 // 记录当前执行任务的下标

  async run() {
    // ...
    this.#runTask()
  }
  
  async #runTask() {
    // 边界情况，收尾工作
    if (this.#currentTaskIndex >= this.#taskList.length) {
      this.#isRunning = false
      this.#currentTaskIndex = 0
      this.#taskList = []
      return 
    }
    // 根据当前执行任务的下标取出任务
    const task = this.#taskList[this.#currentTaskIndex]
    // 执行任务
    await task()
  }
}

class TaskPro {
  // ...
  async #runTask() {
    // ...
    // 由于我们在使用中是直接调用的 next，导致 next 函数中用到的 this 为 {}
    // 所以使用 bind 绑定好 this 再传到 task 中
    await task(this.#next.bind(this))
  }
  
  // 下标加1，继续执行任务
  async #next() {
    this.#currentTaskIndex++
    await this.#runTask()
  }
}

class TaskPro {
  // ...
  async #runTask() {
    // ...
    // 记录执行任务之前的 index
    const i = this.#currentTaskIndex
    await task(this.#next.bind(this))
    // 与 await task 之后的下标对比，如果没改变，说明用户没有手动调用 next
    if (this.#currentTaskIndex === i) {
      // 默认执行 next
      await this.#next()
    }
  }
}

class TaskPro {
  #taskList = []
  #isRunning = false
  #currentTaskIndex = 0
  addTask(task) {
    this.#taskList.push(task)
  }
  async run() {
    if (this.#isRunning) {
      return
    }
    this.#isRunning = true
    await this.#runTask()
  }
  async #runTask() {
    if (this.#currentTaskIndex >= this.#taskList.length) {
      this.#isRunning = false
      this.#currentTaskIndex = 0
      this.#taskList = []
      return 
    }
    const task = this.#taskList[this.#currentTaskIndex]
    const i = this.#currentTaskIndex
    await task(this.#next.bind(this))
    if (this.#currentTaskIndex === i) {
      await this.#next()
    }
  }
  async #next() {
    this.#currentTaskIndex++
    await this.#runTask()
  }
}

const t = new TaskPro()

t.addTask(async (next) => {
  console.log(1, 'start')
    await next()
    console.log(1, 'end')
})
t.addTask(async (next) => {
  console.log(2, 'start')
  await next()
  console.log(2, 'end')
})
t.addTask(() => {
  console.log(3)
})
t.run()

const b = JSON.parse(JSON.stringify(a))

if(v instanceof Object) {
// ...
} else {
    return v
}

if(v instanceof Object) {
  let result = undefined
  // ...
  // 对内部自有属性进行递归拷贝
  for(let key in v){
    if(v.hasOwnProperty(key)){
      result[key] = deepClone(v[key])
    }
  }
  return result
} else {
  return v
}

let result = undefined

// Array
if(v instanceof Array) {
  result = new Array()
// Function
} else if(v instanceof Function){
  // 普通函数
  if(v.prototype) {
    result = function(){ return v.apply(this, arguments)}
  // 箭头函数
  } else {
    result = (...args) => { return v.call(undefined, ...args)}
  }
// Date
} else if(v instanceof Date) {
  // Date的数据减0会转为时间戳，再利用这个时间戳构造新的Date
  result = new Date(v - 0)
// RegExp
} else if(v instanceof RegExp) {
  result = new RegExp(v.source, v.flags)
// Plain Object
} else {
  result = new Object()
}

// 利用Map对每一次拷贝做记录
const cache = new Map()
const deepClone = (v) => {
  if(v instanceof Object) {
    // 如果发现自引用(key 对象存在)，直接返回 v
    if(cache.get(v)){ return cache.get(v)}
    // ...
    // 将拷贝的值与结果存入map
    cache.set(v, result)
    // ...
  } else {
    return v
  }
}

// 利用Map对每一次拷贝做记录
const cache = new Map()
const deepClone = (v) => {
  if(v instanceof Object) {// object
    // 如果发现自引用(key对象存在)，直接返回v
    if(cache.get(v)){ return cache.get(v)}
    let result = undefined
    if(v instanceof Array) {// object-Array
      result = new Array()
    } else if(v instanceof Function){// object-Function
      if(v.prototype) {// 普通函数(都有prototype属性)
        result = function(){ return v.apply(this, arguments)}
      } else {// 箭头函数
        result = (...args) => { return v.call(undefined, ...args)}
      }
    } else if(v instanceof Date) {// object-Date
      // Date的数据减0会转为时间戳，再利用这个时间戳构造新的Date
      result = new Date(v - 0)
    } else if(v instanceof RegExp) {// object-RegExp
      result = new RegExp(v.source, v.flags)
    } else { // object-Object
      result = new Object()
    }
    // 将拷贝的值与结果存入map
    cache.set(v, result)
    // 对内部自有属性进行递归拷贝
    for(let key in v){
      if(v.hasOwnProperty(key)){
        result[key] = deepClone(v[key])
      }
    }
    return result
  } else {// 基本数据类型
    return v
  }
}
// 测试用例
const a = { 
  number:1, bool:false, str: 'hi', empty1: undefined, empty2: null, 
  array: [
    {name: 'frank', age: 18},
    {name: 'jacky', age: 19}
  ],
  date: new Date(2000,0,1,20,30,0),
  regex: /\.(j|t)sx/i,
  obj: { name:'frank', age: 18},
  f1: (a, b) => a + b,
  f2: function(a, b) { return a + b }
}
// 自引用
a.self = a

const b = deepClone(a)

b.self === b // true
b.self = 'hi'
a.self !== 'hi' //true

// 在 oUploader 中获取到 files 数组，并取出第一项，命名为 file
const { files: [file] } = oUploader
// 结构取出上传文件的信息
const { name, size, type } = file

while (uploadedSize < size) {
  const fileChunk = file.slice(uploadedSize, uploadedSize + CHUNK_SIZE);
}

function createFormData({ name, fileName, type, size, uploadedSize, chunk }) {
  const postData = new FormData();
  postData.append("name", name);
  postData.append("fileName", fileName);
  postData.append("type", type);
  postData.append("size", size);
  postData.append("uploadedSize", uploadedSize);
  postData.append("chunk", chunk);
  return postData;
}

const formData = createFormData({
  name,
  fileName,
  type,
  size,
  uploadedSize,
  chunk: fileChunk,
});

// axios发送请求
try {
  response = await axios.post(API, formData);
} catch (error) {
  oInfo.innerHTML = INFO["UPLOAD_FAILED"] + error.message;
  return;
}

const { name, fileName, uploadedSize } = req.body;
const { chunk } = req.files;

if (uploadedSize !== "0") {
  // 注意是字符串0
  if (!existsSync(filePath)) {
    res.send({
      code: 1002,
      msg: "No file exists",
    });
    return;
  }
  // append数据到文件，结束本次上传
  appendFileSync(filePath, chunk.data);
  res.send({
    code: 200,
    msg: "chunk appended",
    // 将服务器静态数据文件路径发送给前端
    video_url: "http://localhost:8000/" + filename,
  });
  return;
}

writeFileSync(filePath, chunk.data);
res.send({ code: 200, msg: "file created" });

// 请求体数据处理中间件
const bodyParser = require("body-parser");
const uploader = require("express-fileupload");
// extname是获取文件后缀名的
const { extname, resolve } = require("path");
// existsSync检查文件是否存在; appendFileSync同步添加数据
const { existsSync, appendFileSync, writeFileSync } = require("fs");
// 解析并返回的请求体对象配置为任意类型
app.use(bodyParser.urlencoded({ extended: true }));
// 解析json格式的请求体
app.use(bodyParser.json());
// 请求体中上传数据的处理，返回的数据在req.files中
app.use(uploader());
// 指定静态文件url
app.use("/", express.static("upload_tem"));
// 跨域处理
app.all("*", (_, res, next) => {
  res.header("Access-Control-Allow-origin", "*");
  res.header("Access-Control-Allow-methods", "POST,GET");
  next();
});

0.1 + 0.2 === 0.3 // false
0.5 - 0.4 === 0.1 // false
0.5 - 0.25 === 0.25 // true

// 十转二
const num = 314
num.toString(2)
// 二转十
parseInt('100111010', 2)

const obj = {}
obj.a = 1
// 相当于
Reflect.set(obj, 'a', 1)

const obj = {
    a: 1,
    b: 2, 
    get c(){
        return this.a + this.b
    }
}

const proxy = new Proxy(obj, {
    get(target, key) {
        console.log('read', key)
        // return target[key] // read c
    return Reflect.get(target, key, proxy) // read c read a read b
    }
})

proxy.c

var a = { n: 1 }
var b = a
a.x = a = { n: 2 }
console.log(a.x)
console.log(b.x)

Reflect.ownKeys(obj).length === 0

typeof 1                        // number
typeof true                 // boolean
typeof 'str'                // string
typeof Symbol('')       // symbol
typeof undefined        // undefined
typeof 1n                       // bigint
typeof function(){} // function

typeof []                       // object 
typeof {}                       // object
typeof null                 // object

[] instanceof Array                     // true
function(){} instanceof Function    // true
{} instanceof Object                        // true

1 instanceof Number                             // false
true instanceof Boolean                     // false 
'str' instanceof String                 // false  

var toString = Object.prototype.toString
toString.call(1)                      //[object Number]
toString.call(true)                   //[object Boolean]
toString.call('str')                    //[object String]
toString.call([])                     //[object Array]
toString.call({})                     //[object Object]
toString.call(function(){})           //[object Function]
toString.call(undefined)              //[object Undefined]
toString.call(null)                   //[object Null]
toString.call(2n)                                           //[object BigInt]

const debounce = (func, time) => {
  let timer = null
  return function () {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, arguments)
    }, time)
  }
}

debounceBtn.addEventListener('click', debounce(onDebounceBtnClick, 3000))