JavaScript基础1之变量的var、const、let和数据类型的原始类型、对象类型、内存空间、拷贝

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量877 收藏 11
点赞数 13
分类专栏： 前端 JavaScript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/136407924
版权

JavaScript基础

变量

ECMAScript变量：松散类型的 =>变量可以保存任何类型的数据
声明变量：var、const、let
var可以随意使用
const let是ES6新增的，es6以及更晚的版本使用

var关键字

var name;

定义了名为name的变量 如果不赋值，则默认为undefined

var name="张三"
name =10

var声明的作用域

var 定义一个变量会成为包含它的函数的局部变量
函数调用之后，其内部的局部变量随机被销毁

  • 案例一：
function test(){
    var name="张三"
}
test()
console.log(name)

请添加图片描述
以上代码，报错

  • 案例二：
function test(){
	name2="张三"
}
test()
console.log(name2)

请添加图片描述

去掉了var操作符，name2 变成了一个全局变量
全局变量很难维护，容易被篡改

var 定义多个变量

var name="张三",
    age=18,
    sex="男";

console.log(name,age,sex)

请添加图片描述

变量提升

function foo(){
    console.log(age)
    var age=18
}

foo()

请添加图片描述
结果是undefined，没有报错，由于变量提升导致的
上述代码等价于：

function foo(){
    var age;
    console.log(age)
    age=18
}

foo()

请添加图片描述
声明的变量会自动提升到函数作用域顶部

function foo(){
    var age=10
    var age=20
    var age=30
    console.log(age)
}

foo()

请添加图片描述
反复多次使用var声明同一个变量，后面的会覆盖前面的

let关键字

let 声明的作用域是块作用域，var 声明的范围是函数作用域
块作用域是函数作用域的子集，适用于var的作用域的限制，同样也限制于let

if(true){
    var name="张三"
    console.log(name)
}
console.log(name)

请添加图片描述

if(true){
    let  name="张三"
    console.log(name)
}
console.log(name)

请添加图片描述

let age=10
let age=20

console.log(age)

请添加图片描述
let 不允许同一个块作用域对同一个变量重复声明

暂时性死区

let声明的变量不会在作用域中被提升

function test(){
    // let之前的部分都叫做暂时性死区
    console.log(age)
    let  age=18
}
test()

请添加图片描述

let不是Windows的属性

let 在全局作用域定义的变量不会成为windows对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Title</title>
</head>
<body>
<script>
    var name="张三"
    let age="李四"
    console.log(window)
</script>
</body>
</html>

请添加图片描述
请添加图片描述
let是块作用域

for(let i=0;i<5;i++){
}
console.log("i",i)

请添加图片描述

for(var j=0;j<5;j++){
}

console.log("j",j)

请添加图片描述

for(var i=0;i<5;i++){
    setTimeout(()=>{
        console.log(i)
    },0)
}

请添加图片描述

for(let i=0;i<5;i++){
    setTimeout(()=>{
        console.log(i)
    },0)
}

请添加图片描述
循环退出的时候，我们的var定义的i每次改变的都是外层的变量的值，setTimeout为0也有400毫秒的延时，所以先执行完累加，然后执行循环；在用let设置时候，是块作用域，只对块作用域有效，只取块里的i

const关键字

const行为和let基本一致
区别：

  • 用const声明的变量必须进行初始化
  • 修改const声明的变量会报错
    const也不允许重复声明变量

错误的表示：

const name="张三"
name="李四"

console.log(name)

请添加图片描述

const age=10
const age=20

console.log(age)

请添加图片描述
const声明的作用域也是块

const name="张三"
if(true){
    const name="李四"
}
console.log(name)

请添加图片描述

数据类型

7种数据类型

  • 原始类型
  • 对象类型

原始类型

  • null
  • undefined
  • Boolean:true\false
  • Number:整数或者浮点数、Infinity,-Infinity,NaN
  • String:一串表示文本值的字符序列
  • Symbol:唯一且不可改变的数据类型
  • BigInt

对象类型

  • Object：Array,Function

内存空间

栈内存 和 堆内存

基本数据类型存储在栈中
栈内存：

var a=1;
var b=2;
var c=3;

请添加图片描述
引用数据类型存储在堆中

var obj1={name:"印客"}
var obj2 ={age:18}
var obj3 function (){}
var obj4=[1,2,3,4,5]

请添加图片描述

拷贝

拷贝原始类型

var name="张三"
var name1=name
name1="李四"
console.log(name)

请添加图片描述
请添加图片描述

拷贝引用数据类型

var obj={name:"张三"}
var obj1=obj
obj1.name="李四"
console.log(obj)

请添加图片描述
请添加图片描述

比较

两个变量比较，不同类型的变量表现不同
对于原始数据，直接比较他们的值，如果相等则为true

对于引用类型，比较时候会比较他们的引用地址，虽然他们在堆中存储的对象具有相同属性，但是他们被存储在了不同的空间

var name="张三"
var name1="张三"
console.log(name===name1)

var obj={name:"张三"}
var obj1={name:"张三"}
console.log(obj===obj1)

在这里插入图片描述

在这里插入图片描述

VillanelleS
关注
  • 13
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中var同时声明多个变量时的原理是什么？
qq_31749421的博客
02-12 9440
1.只声明一个的情况 &lt;script&gt; function show(){ var a=b=c=d=5; } show(); alert(a);//弹a时报错（not defined），而b、c、d都能弹出5 &lt;/script&gt; 因为赋值是从右向左结合： var a=b=c=d=5; 等价于 var a=(b=(c=(d=...
原生javascript 学习之js变量全面了解
11-28
变量的声明通常使用`var`关键字，但也有其他如`let`和`const`在ES6中引入。显示声明变量可以防止未声明直接赋值导致的错误，避免了变量的隐式全局化。一个良好的编程习惯是先声明变量，再进行读写操作，并且在赋值后...
jq var用逗号隔开表示定义多个变量或者函数
lmp5023的博客
08-30 1671
function startTime(arr, obj) { var today = new Date(), def = { onlyOneDayTempHtml: 'HH:MM:SS', dayTempHtml: '还有DD天' }, obj = $.extend({}, def, obj)...
JS变量之赋值1
weixin_30300523的博客
10-20 164
<script> function show(){ var a=b=c=d=5; } show(); alert(a);//弹a时报错（not defined），而b、c、d都能弹出5 </script> <script> function show(){ var...
自学golang【3.1定义变量】使用var关键字定义变量，使用var()集中定义变量，省略int等关键字以及省略var关键字,用冒号：替代定义
立志冲海大
01-13 1076
目录 一，基础知识 1.使用var关键字定义变量 2.一行定义多个变量 3.在赋初值时省略int等关键字定义多个变量 4.省略int等关键字以及省略var关键字,用冒号：替代定义 5.定义包内部变量（可以想象成为c语言的全局变量），是在函数外部定义的 6.使用var()集中定义变量 二，代码部分 三，运行输出 一，基础知识 1.使用var关键字定义变量 func v2() { var a int //定义整形变量a var s string
使用var、let、const声明变量
.
04-05 1921
一、使用var声明变量1、使用方法通过var关键字可以一次声明一个变量或者多个变量，同时可以为声明的变量赋初始值。但是变量的声明和初始值并不是在同一时间执行的,在执行初始值之前这些声明的变量的值为undefined。'use strict'; var x = 12, y = x;2、声明变量与非声明变量区别变量声明定义的时候无论出现在代码的什么位置，都会在执行代码之前，将声明的变量添加到当前
ES6变量声明与赋值：值传递、浅拷贝与深拷贝详解
02-24
本文首先介绍ES6中常用的三种变量声明方式，然后讨论了JavaScript按值传递的特性以及多种的赋值方式，最后介绍了复合类型拷贝的技巧。在JavaScript中，基本的变量声明可以用var方式；JavaScript允许省略var，直接对...
JavaScript对象共6页.pdf.zip
10-29
在JavaScript中，变量可以用来存储各种数据，包括基本类型（如数字、字符串、布尔值、null和undefined）和引用类型（如对象）。变量声明使用var、let或const关键字。其中，对象就是一种引用类型，它们是可变的键值对...
深入理解var声明变量
前端精髓
06-24 9136
ECMAScript的变量是松散类型的，所谓松散类型就是可以用来保存任何类型的数据。换句话说，每个变量仅仅是一个用于保存值的占位符而已。
go example 3: Variables
conglanjun的博客
01-26 132
符号是声明变量和初始化变量缩写，例如，var f string="apple"可以简写成 f:="apple"。变量的声明不需要一个初始化的默认值，0值。例如，初始化int变量不需要赋值0。var声明一个或多个变量，可以一次定义多个变量。初始化的变量，go会推断其类型。
Golang 定义变量
华龙在飞翔
07-21 1180
Golang 定义变量 Golang的变量可以由字母数字和下划线组成，但是首字符不能为数字。 Golang是静态类型语言，变量必须声明类型。定义变量使用 var 关键字。 变量小知识 在Golang当中如果只是声明了变量，但是并没有使用这个变量的话，会提示一个declared and not used的错误。但是如果定义的全局变量并没有使用的话，是不会提示这个错误的。 变量的首字母如果为大写则表示这个变量为公有变量，小写为私有变量。 定义变量 Golang定义变量有三种写法: 第一种：使用 var 关键字给
用Var定义一个变量时放置位置的执行情况
HelloCode的博客
03-03 806
//2019.3.3 没有最好的程序，只有更好的程序！ 因为浏览器执行的顺序原因，如果将有些个var定义的变量放在函数外面，则页面加载完成后就会得到输入框最初的内容（即可能为空值）。因此必须放在函数内部,每次执行函数时都会重新获取当前的值。例子如下： ...
js中定义变量加var和不加var的区别
热门推荐
生存不忘生活
09-01 1万+
这个问题其实我在面试的时候有被问到过，当时我记得我回答的很模糊，面试官看到我好像不太清楚，又问我是不是可以不加var定义变量。。。正好昨天做项目的时候想到这个问题，觉得这种细节上的问题才是拉开差距的。js中定义变量有两种情况：（注意在方法外不加var定义变量需对其进行赋值，否则出现xx  is not defined）1.都加var，在方法内则是局部变量，在方法外则是全局变量。2.在方法内,加va...
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 792
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1108
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 578
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 1084
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 377
【代码】博客前端项目学习day03——框架页。
Java基础：数据类型与变量示例
在第二章Java语言基础中，主要探讨了Java编程的基础要素，包括数据类型。本节内容围绕"简单数据类型的例子"展开，通过两个具体的Java代码示例来深入理解： 1. DataType.java (p25 例2.1)：这部分介绍了Java语言中的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值