SSF0SSF0
首页
前端
  • Node
  • Go
  • C#
  • MySql
  • Bash
  • Git
  • Docker
  • VuePress
  • CI/CD
  • 服务器
  • 网站
  • 学习资料
  • 软件
Timeline
Github
标签
分类
首页
前端
  • Node
  • Go
  • C#
  • MySql
  • Bash
  • Git
  • Docker
  • VuePress
  • CI/CD
  • 服务器
  • 网站
  • 学习资料
  • 软件
Timeline
Github
标签
分类
  • HTML

    • html1
    • html2
  • CSS

    • Flex 布局常见问题与解决方案
  • JavaScript

    • 数据类型及引用问题
    • 处理 Blob 类型文件下载问题总结
    • localStorage 与 sessionStorage 区别
    • JavaScript 中的 script 标签问题详解
    • JavaScript 中的`this`指向问题详解
    • SessionStorage踩坑记录:它真的能"只设置一次"吗?
    • 动态加载 JS 脚本方法对比
    • 浏览器页面关闭场景下的数据上报
  • es6

    • Promise
    • es6 模块导出方式全解析
  • Vue2

    • created VS mounted 发起异步请求
    • vue2-2
  • Vue3

    • Vite + Vue3 修改 element-plus 源码
    • Vue v-if 与 v-show
    • Vue3 ref 获取组件
    • Vue3 路由传参
    • 父子组件与组件里 Hooks 加载顺序
    • 第三方组件传入参数TS提示
    • Vue3 Props 在 Hooks 中的响应性处理
    • Vue Router 的两种历史模式及部署配置详解
    • 在Vue 3项目中顺利集成Tailwind CSS的完整指南
    • Vue 3 深度选择器:deep()完全指南
  • Electron

    • 快速构建 electron + vue3 项目
  • TS

    • TS 泛型
    • 记录模板使用断言的问题
    • type 与 interface
  • WebPack

    • Webpack 介绍
  • Vite

    • Vite CLI 常见命令
    • vite 与 webpack 比较
  • 项目工程

    • 前端代码风格
    • Vue3 项目规范
    • npm 镜像问题
    • 包管理工具
    • 使用 engines 限制开发环境依赖
    • 打包与shell交互指定模式
    • 使用 pnpm 构建 Monorepo 实战指南
    • pnpm 修改依赖源码打包报错
  • 记录一下小程序
  • 控制浏览器正确保存网站账号密码的技巧

数据类型及引用问题

数据类型

  • 基本数据类型:string、number、boolean、null、undefined、symbol

  • 引用数据类型:object、array、function

区别示例

console.log(typeof null) // object
console.log(typeof []) // object
console.log(typeof {}) // object
console.log(typeof function () {}) // function

console.log(null instanceof Object) // false
console.log([] instanceof Object) // true
console.log({} instanceof Object) // true
console.log(function () {} instanceof Object) // true
// 基本数据类型复制
let a = 1
let b = a
a = 2
console.log(b) // 1

// 引用数据类型复制
let obj1 = { a: 1 }
let obj2 = obj1
obj1.a = 2
console.log(obj2) // { a: 2 }

数据类型的判断

  • typeof:可以判断基本数据类型,除了 null 和 array 都返回 object

  • instanceof:可以判断引用数据类型,返回布尔值

  • Object.prototype.toString.call():可以判断所有数据类型,返回字符串

类型区别

  • null 和 undefined 是基本数据类型,null 表示空对象,undefined 表示未定义

  • array 和 object 都是引用数据类型,array 是特殊的对象,object 是泛指

  • function 是引用数据类型,function 是特殊的对象

  • NaN 是 number 类型,表示非数字

问题记录

示例 1

const arr = ["a", "b", "c"]
for (let index = 0; index < arr.length; index++) {
  let element = arr[index] // 修改 element 不会影响 arr[index] 的值
  element = "bc"
}
console.log(arr) // ["a", "b", "c"]
  • arr[index] 返回的是字符串 "a", "b", 或 "c",这些都是基本数据类型。

  • 当你将 arr[index] 赋值给 element 时,element 得到的是字符串的值,而不是对数组中元素的引用。

  • 修改 element 不会改变 arr 中的值,因为 element 是一个独立的变量,保存的是字符串的副本。

  • 基本数据类型(如字符串、数字、布尔值等)在赋值时是按值传递的,而不是按引用传递的。因此,修改 element 不会影响原数组。

示例 2

const arr = [{ a: 1 }, { a: 2 }, { a: 3 }]
for (let index = 0; index < arr.length; index++) {
  let element = arr[index]
  element.a = 3 // 修改 element.a 会影响 arr[index].a 的值
  element = { a: 4 } // 重新赋值 element,不会影响 arr[index]
}
console.log(arr) // [{ a: 3 }, { a: 3 }, { a: 3 }]
  1. element.a = 3;

    • element 和 arr[index] 引用的是同一个对象。

    • 修改 element.a 实际上是在修改 arr[index].a,因为它们指向同一个对象。

  2. element = { a: 4 };

    • 这里,element 被赋予了一个新的对象 { a: 4 }。

    • 这只是改变了 element 的引用,并没有改变 arr[index] 的引用。

    • arr[index] 仍然指向原来的对象。

最后更新时间:
贡献者: 何风顺
下一页
处理 Blob 类型文件下载问题总结