首页 > 编程语言 >JavaScript元素

JavaScript元素

时间:2024-04-25 17:23:46浏览次数:12  
标签:JavaScript 变量 元素 数据类型 name var 赋值 常量

JavaScript元素

一. 常量

常量也称之为“字面量”,是固定值,不可改变。看见什么,它就是什么。

常量有下面这几种:

  • 数字常量(数值常量)

  • 字符串常量

  • 布尔常量

  • 自定义常量

1.1数字常量

数字常量非常简单,直接写数字就行,不需要任何其他的符号。既可以是整数,也可以是浮点数。

console.log(100)
console.log(3.14)

1.2 字符串常量

字符串常量就是用单引号或双引号括起来的内容。可以是单词、句子等,一定要加引号。在JS中,只要是单引号或双引号括起来的内容,都是字符串常量。

1.3布尔常量

布尔常量就是表达或者,在JS中用 true 和 false 来表达。

1.4自定义常量

自定义常量是ES6中新增的语法。它的语法格式是这样的:

const 变量名=常量值
const name='tom';
name="jack" //因为name是常量 不能修改 所以这行会报错

小结

我们一般不会直接使用常量,否则会导致代码冗余、不易维护。如果多个地方要用到同一个常量,那就建议事先定义一个变量,用来保存这个常量;然后在需要的地方去引用这个变量就行了。另外,当我们学习了ES6中的 const 之后,还可以使用自定义常量达到目的。

二.变量

变量表示可以改变的数据,一个变量,就是一个用于存放这个数据的容器。我们通过「变量名」获取数据,甚至修改数据。变量还可以用来保存常量。

变量本质上是程序在内存中申请的一块用来存放数据的空间。比如,超市货架的储物格就是变量, 在不同的时间段里,储物格中存储的数据可以不一样。

实际开发中,变量使用得非常频繁,因为这些数据并非固定不变。比如,以下使用场景中的信息都可以用变量存储:

  • 商品信息:价格、库存数量、购买的客单价

  • 歌曲信息:时长、播放进度、歌词内容

  • 用户信息:用户名、年龄、性别、地址

  • 时间和日期

  • App系统设置的配置参数;用户的偏好设置,比如主题、语言等。

  • 微博:用户关注的人、粉丝数量;发布的帖子数量、点赞数。

2.1变量的定义

定义变量是在告诉浏览器,我们需要一块内存空间,相当于生成超市里的储物格。给变量赋值就是往相当于往储物格里塞东西,可能今天上午塞的是面包,下午就换成了蛋糕。

2.1.1变量的定义(ES5)

在 ES6 语法之前,统一使用var关键字来声明一个变量。比如:

var name; // 定义一个名为 name 的变量。name是变量名。

var 是英语“variable”变量的缩写。var的后面要加一个空格,空格后面的紧跟的就是“变量名”。

PS:在 JavaScript 中,永远都是用 var 来定义变量(在 ES6 之前),这和 C、Java 等语言不同。

2.1.2变量的定义(ES6)

在 ES6 语法及之后的版本里,可以使用 constlet关键字来定义一个变量。比如:

const name; // 定义一个常量 定义是必须初始化切不能修改

let age; // 定义一个变量

2.2.变量的赋值

var a = 100; // ES5语法
console.log(a);

const b = 'hello'; // ES6 语法

let c = 'world'; // ES6 语法
c = 'qianguyihao'; // 修改 变量 C 的值

2.2.1初始化

定义一个变量并赋值, 我们称之为变量的初始化

  • 定义变量:var 就是一个关键字,用来定义变量。所谓关键字,就是有特殊功能的单词。

  • 变量名:我们可以给变量起个名字。

  • 变量赋值:等号表示赋值,将等号右边的值,赋给左边的变量。

第一次给变量赋值,称之为“变量的初始化”,这个概念非常重要。第二次给这个变量赋值(也就是修改这个变量的值)就不叫初始化了。

一个变量如果没有进行初始化(只声明,不赋值),那么这个变量中存储的值是undefined,这个知识点必须知道。

变量的初始化,可以有两种形式,如下。

形式1:先定义,在赋值。举例:

var name;
name = 'tom';

形式2:在定义的同时进行初始化。也就是上一小段讲的“合并写法”。举例:

var name = 'tom';

2.2.2修改变量的值

一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。

2.2.3同时定义多个变量并赋值

同时定义多个变量时,只需要写一个 var, 多个变量名之间用英文逗号隔开。举例:

// 同时定义多个变量
var num1, num2;

2、定义多个变量的同时,分别进行初始化。举例:

// 定义多个变量的同时,进行初始化
var num1 = 10, num2 = 20;

如果多个变量的初始化值都是一样的,则可以这样简写:

var num1, num2;
num1 = num2 = 10; // 重点在这一行

console.log(num1); // 10
console.log(num2); // 10

上面的写法和下面的写法是有区别的:(注意看打印结果)

var num1, num2 = 10;

console.log(num1); // undefined
console.log(num2); // 10

变量之间可以相互赋值

var num1, num2;
num1 = 10;
num2 = num1; // 把 num1 的值拷贝一份,赋值给 num2
console.log(num2); // 10

变量如果重复定义

在ES5中,如果用 var 定义了同名变量,那么,后定义的变量,会覆盖先定义的变量。举例:

var name = 'tom';
var name = 'jack'; // 这里会重新定义一个新的变量 name
console.log(name); // jack

变量声明和赋值的几种情况

变量建议先声明,再使用;否则可能会产生意想不到的结果。具体如下。

写法 1、先声明,再赋值:(正常)

var a;
a = 100;
console.log(a); // 打印结果:100

写法 2、只声明,不赋值:(默认值为 undefined)

var a;
console.log(a); // 打印结果:undefined

写法 3、不声明,直接赋值:(正常)

a = 100;
console.log(a); // 打印结果:100

写法3虽然不报错,但并不推荐这么写。变量 a 会被添加到 windows 对象上。它跟写法1是有区别的,等以后学习了「变量提升」的概念就明白了。相比之下,我们更推荐用写法 1。

写法 4、不声明,不赋值,直接使用:(会报错)

console.log(a); // 会报错

补充:写法 1 和写法 2 虽然都正常,但这两种写法是有区别的,

2.3变量的命名

JS是大小敏感的语言。也就是说 A 和 a 是两个变量,并非同一个变量,比如:

var name = 'tom'; //变量1
var NAME = 'jack'; //变量2

在js中变量的命名规则与其他语言一样,主要是一下几点:

  • 只能由字母(A-Z、a-z)、数字(0-9)、下划线(_)、美元符( $ )组成。

  • 不能以数字开头。必须以字母(A-Z、a-z)、下划线(_)或者美元符( $ )开头。变量名中不允许出现空格。尤其注意,变量名中不能出现中划线-,很多人写了多年代码都不知道这一点,让人大跌眼镜。

  • 严格区分大小写(JS 是区分大小写的语言)。

  • 不能使用 JS 语言中保留的「关键字」和「保留字」作为变量名。下一段会讲。

  • 变量名长度不能超过 255 个字符。

  • 汉语可以作为变量名。但是不建议使用,因为 low。

  • 命名要有可读性,方便顾名思义。

  • 建议用驼峰命名法。比如 getElementById、getUserInfo、aaaOrBbbAndCcc

  • 赋值 = 符号的两边建议都加上空格。

三.标识符

在 JS 中所有的可以由我们自主命名的都可以称之为标识符。包括:变量名、函数名、属性名、参数名都是属于标识符。通俗来讲,标识符就是我们写代码时为某些东西起的名字。类似于人出生的时候,起个人名。

标识符的命名规则和变量的命令规则是一样的。关于变量的命名规则,详见上一段。标识符不能使用语言中保留的关键字保留字

四.关键字

被JS赋予了特殊含义的单词。也就是说,关键字是 JS 本身已经使用了的单词,我们不能再用它们充当变量名、函数名等标识符。关键字在开发工具中会显示特殊的高亮颜色。

JS 中的关键字如下:

if、else、switch、break、case、default、for、in、do、while、var、let、const、void、function、continue、return、try、catch、finally、throw、debugger、this、typeof、instanceof、delete、with、export、new、class、extends、super、with、yield、import、static、true、false、null、undefined、NaN

五.保留字

实际上就是预留的“关键字”。它们虽然现在还不是关键字,但是未来可能会成为关键字。同样不能用它们当充当变量名、函数名等标识符。

JS 中的保留字如下:

enum、await、abstract、boolean、byte、char、double、final、float、goto、int、long、native、short、synchronized、transient、volatile、arguments eval Infinity
# 以下关键字只在严格模式中被当成保留字,在ES6中是属于关键字
implements、interface、package、private、protected、public

六.变量的数据类型

6.1数据的分类

一般我们把数据分为静态数据和动态数据

静态数据:

静态数据是指一些永久性的数据。一般是以文件的形式存储在硬盘上,比如文档、照片、视频等文件。

电脑关闭后,静态数据仍然还在。只要不主动删掉数据或者硬盘没损坏,这些数据就一直都在。

动态数据:

动态数据是在程序运行过程中,动态产生的临时数据,这些数据可能随时发生变化。一般存储在内存中。电脑关闭后,这些数据会被清除。

为何不把应用程序的动态数据加载到硬盘中执行呢?这主要是因为,内存的访问速度比硬盘快无数倍。

6.2变量的数据类型

在计算机中,不同的数据所需占用的存储空间不同,为了充分利用存储空间,于是定义了不同的数据类型。而且,不同的数据类型,寓意也不同。我们都知道,无论这个变量是字符串类型,还是数字类型,我们都可以直接用 var 去定义它。JavaScript 是一种「弱类型语言」,或者说是一种「动态语言」,这意味着不需要事先声明变量的具体数据类型,在程序运行过程中,类型会自动被确定。

JS 的变量数据类型,是在程序运行的过程中,根据等号右边的值来确定的。而且,变量的数据类型是可以变化的。一个变量可以在上一秒是字符串类型,下一秒是数字类型

数据类型 
基本数据类型(值类型) String 字符串、Boolean 布尔值、Number 数值、Undefined 未定义、Null 空对象、BigInt 大型数值、Symbol
引用数据类型 Object 对象。

内置对象 Function、Array、Date、RegExp、Error 等都是属于 Object 类型。也就是说,除了那七种基本数据类型之外,其他的,都称之为 Object 类型。

BigInt 和 Symbol 是ES6中新增的类型,我们留到以后再讲。

数据类型之间最大的区别

  • 基本数据类型:参数赋值的时候,传数值。

  • 引用数据类型:参数赋值的时候,传地址。

如下例子:

var a = 23;
var b = a;
a++
console.log(a)  //24
console.log(b)  //23

面的代码中:a 和 b 都是基本数据类型,让 b 等于 a,然后改变 a 的值之后,发现 b 的值并没有被改变

但是在引用数据类型中,就不同了,我们来看一看。

var obj1 = new Object()
obj1.age = 12;
var obj2 = obj1;
obj2.age = 1000;
console.log(obj1.age)   // 1000

上面的代码中:obj1 和 obj2 都是引用数据类型,让 obj2 等于 obj1,然后修改 obj1.name 的值之后,发现 obj2.name 的值也发生了改变

从上面的例子中,可以反映出,基本数据类型和引用数据类型是有区别的。

JS 中,所有的变量都是保存在栈内存中的。

基本数据类型

基本数据类型的值,直接保存在栈内存中。值与值之间是独立存在,修改一个变量不会影响其他的变量。

引用数据类型

对象是保存到堆内存中的。每创建一个新的对象,就会在堆内存中开辟出一个新的空间;而变量保存了对象的内存地址(对象的引用),保存在栈内存当中。如果两个变量保存了同一个对象的引用,当一个通过一个变量修改属性时,另一个也会受到影响。

标签:JavaScript,变量,元素,数据类型,name,var,赋值,常量
From: https://www.cnblogs.com/tianzeng-717/p/18158175

相关文章

  • JavaScript基本数据类型
    JavaScript基本数据类型上述一章我们讲到JS数据类型分为基本数据类型与引用数据类型,这张我们主要讲基本数据类型基本数据类型-String字符串字符串是我们开发中经常使用的一种数据类型,主要是双引号""或者单引号''注意事项单引号与双引号不能混用,必须配对使用同类引......
  • Javascript的数据类型和json数组
    4个数据类型:NumberStringBooleanUndefinedalert(parseInt(k));//如果不是数字会输出NaN,从第一个字符开始输出数字,直到不是数字后返回值。json数组://js中k、v型数据,使用jsonvarperson={name:"张三",//注意里面的元素用,分割。定义的是key是name的value值为张三age......
  • javaScript for-in循环
    for-infor-in循环是专门为循环对象设置的,因为对象没有长度没有顺序,所以不能使用for循环。for-in循环可以循环数组和对象,推荐循环对象的时候使用constobj={name:"LiuQing",age:18,sex:'男'}for(constkeyinobj){consol......
  • javascript 对象方法、实例方法
    在JavaScript中,对象方法和实例方法通常指的是类(构造函数)中的方法。然而,JavaScript并没有像一些其他面向对象编程语言(如Java或C++)那样的类关键字。相反,JavaScript使用构造函数和原型来模拟类的行为。实例方法:实例方法是定义在构造函数原型上的方法,它们可以通过构造函数的实例来调......
  • JavaScript 如何实现一个响应式系统
    JavaScript如何实现一个响应式系统第一阶段目标数据变化重新运行依赖数据的过程第一阶段问题如何知道数据发生了变化如何知道哪些过程依赖了哪些数据第一阶段问题的解决方案我们可用参考现有的响应式系统(vue)vue2是通过Object.defineProperty实现数据变化的监控,详......
  • JavaScript精粹:26个关键字深度解析,编写高质量代码的秘诀!
    JavaScript关键字是一种特殊的标识符,它们在语言中有固定的含义,不能用作变量名或函数名。这些关键字是JavaScript的基础,理解它们是掌握JavaScript的关键。今天,我们将一起探索JavaScript中的26个关键字,了解这些关键字各自独特的含义、特性和使用方法。一、JavaScript关键字是什么......
  • 修改元素样式报错:Cannot set properties of undefined (setting 'visibility')
    1、正常书写代码如下:<divclass="cl"><divid="mask"><spanid="close">X</span></div></div><!--JS代码如下--><script>letclose=document.getElement......
  • 挑战前端基础120题--JavaScript 中如何实现链式调用的函数?
    一.何为链式调用?链式调用是一种简化过程的编码方式,使代码看起来更加简洁~它允许你通过在方法调用之间返回对象本身,从而连续地调用多个方法;比较常见的链式调用:jQuery,Promise等,通过多次书写.或()操作来调用。二.实现的原理?每次执行完成后返回自己/新的自己,这样可以确保后续的......
  • JavaScript注释:单行注释和多行注释详解
    为了提高代码的可读性,JS与CSS一样,也提供了注释功能。JS中的注释主要有两种,分别是单行注释和多行注释。在编程的世界里,注释是那些默默无闻的英雄,它们静静地站在代码的背后,为后来的维护者、为未来的自己,甚至是为那些偶然间翻阅你代码的开发者提供着不可或缺的信息。今天,我们就来深......
  • javascript入门
    目录javascript入门js简介与导入方式导入方式js基本语法变量数据类型条件语句循环语句函数事件DOM操作javascript入门ps:本篇章只介绍js语言最基本的使用,是偏向入门的文档,想要熟练掌握js还是需要多读其他技术文档js简介与导入方式首先javascript与java没有任何关系!Jav......