【JavaScript基础】变量、数据类型、运算符

最新推荐文章于 2024-06-13 10:05:02 发布
最新推荐文章于 2024-06-13 10:05:02 发布
阅读量173 收藏
点赞数 3
分类专栏： 前端开发入门 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zilin_taku/article/details/126049315
版权

文章目录

一、初识JavaScript

1.1 JavaScript历史

  • 布兰登·艾奇( Brendan Eich，1961年~)。
  • 网景公司最初命名为LiveScript，后来在与Sun合作之后将其改名为JavaScript

1.2 JavaScript是什么

  • JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（ Script是脚本的意思)
  • 脚本语言∶不需要编译，运行过程中由js解释器(js引擎)逐行来进行解释并执行
  • 现在也可以基于Node.js技术进行服务器端编程

1.3 浏览器执行JS

浏览器分成两部分∶渲染引擎和JS引擎

  • 渲染引擎∶用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
  • JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

1.4 JS的组成

（1）ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
（2）DOM——文档对象类型：文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
（3）BOM——浏览器对象模型：BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.5 JS书写位置

1、行内式

 <input type="button" value="点我试试" onclick="alert('Hello World')">
  • 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如: onclick
  • 注意单双引号的使用：在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
  • 可读性差，在html中编写JS大量代码时，不方便阅读
  • 引号易错，引号多层嵌套匹配时，非常容易弄混
  • 特殊情况下使用

2、内嵌JS

<script>
    alert("Hello world");
</script>
  • 可以将多行JS代码写到<script>标签中

3、外部JS文件

<script src="./my.js"></script>
  • 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
  • 引用外部JS文件的script标签中间不可以写代码
  • 适合于JS代码量比较大的情况

1.6 JavaScript注释

单行注释：//
多行注释：/. ./

1.7 JavaScript输入输出语句

方法说明
alert(msg)浏览器弹出警示框
console.log(msg)浏览器控制台打印输出信息
prompt(info)浏览器弹出输入框，用户可以输入

1.8 变量

1.8.1 变量的使用

1、声明变量：

var age; //声明一个名称为age的变量

var是一个JS关键字，用来声明变量(varable变量)。使用该关键字声明变量后，计算机会自动为变量分配内存空间
2、赋值
3、变量的初始化：声明一个变量并赋值。
4、同时声明多个变量：
同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

1.8.2 变量命名规范
  • 由字母(A-Z a-z)、数字(0-9)、下划线(_)、美元符号($ )组成，如: usrAge, num01,_name
  • 严格区分大小写。var app;和var App;是两个变量
  • 不能以数字开头。18age 是错误的
  • 不能是关键字、保留字。例如: var、for、while
  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

二、数据类型

2.1 简单数据类型

简单数据类型说明默认值
Number数字型，包含整型值和浮点型值0
Boolean布尔值类型，如true、false ，等价于1和0false
String字符串类型，JS中，字符串都带引号“”
Undefinedvar a;声明了变量a但是没有赋值undefined
Nullvar a = null;声明了变量a为空值null
2.1.1 数字型Number

1、数字型进制:
在JS中八进制前面加0，十六进制前面加0x
2、数字型范围

alert(Number.MAX_VALUE);//1.7976931348623157e+308
alert(Number.MIN_VALUE);//5e-324

3、特殊值

alert(Infinity);//Infinity ，代表无穷大，大于任何数值
alert(-Infinity);//-Infinity ，代表无穷小，小于任何数值NaN ，Not a number，代表一个非数值
alert(NaN);//NaN ，Not a number，代表一个非数值

4、isNaN()

  • 这个方法用来判断非数字，并且返回一个值
  • 如果是数字返回的是 false 如果不是数字返回的是true
2.1.2 字符串型String

1、字符串引号嵌套
JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)
2、字符串转义符

转义符解释说明
\n换行符
\\斜杠\
\'‘单引号
\""双引号
\ttab缩进
\b空格

3、字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。

var str = '字符串的长度。'；
alert(str.length);

4、字符串拼接

  • 多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串
  • 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
2.1.3 布尔型Boolean
  • 布尔类型有两个值: true和false ，其中 true表示真(对)，而false表示假(错)。
  • 布尔型和数字型相加的时候，true的值为1 ，false的值为0。
2.1.4 Undefined 和 Null
  • 一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时，注意结果)
    在这里插入图片描述
  • 一个声明变量给null值，里面存的值为空
    在这里插入图片描述

2.2 获取数据变量类型

  • typeof可用来获取检测变量的数据类型
	var num = 10;
	console.log(typeof num);

2.3 数据类型转换

  • 使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。
2.3.1 转换为字符串
方式说明案例
toString()转成字符串var num = 1;alert(num.toString());
String()强制转换转成字符串var num = 1;alert(String(num));
加号拼接字符串(隐式转换)和字符串拼接的结果都是字符串var num = 1;alert(num + '我是字符串');
2.3.2 转换为数字型
方式说明案例
parseInt(string)函数将string类型转成整数数值型parselnt('10')
parseFloat(string)函数将string类型转成浮点数数值型parseFloat('10.34')
Number()强制转换函数将string类型转成数值型Number('12')
js隐式转换(- * /)利用算术运算隐式转换为数值型'12' - 0
2.3.3 转换为布尔型
方式说明案例
Boolean()函数其它类型转成布尔型Boolean('true');
  • 代表空、否定的值会被转换成false，如：‘’、0、NaN、null、undefined
  • 其余值都会被转换成true

三、运算符

  • 运算符( operator )也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

3.1 算数运算符

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。
运算符：+（加）、-（减）、*（乘）、/（除）、%（取余数）
注意：

  • 由于机器底层问题，浮点数运算存在精度问题
  • 注意算术运算符的优先级，先乘除，后加减，有小括号先算小括号里面的

3.2 递增和递减运算符

如果需要反复给数字变量添加或减去1，可以使用递增(++)和递减(--)运算符来完成。
（1）前置递增运算符

++写在变量的前面
先加1，后返回值

（2）后置递增运算符

++写在变量的后面
先返回值，后加1

3.3 比较运算符

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值( true / false)作为比较运算的结果。

运算符说明
<、>小于号、大于号
<=、>=小于等于号、大于等于号
==判等号（会转型）
!=不等号
=== !==全等、要求值和数据类型都一致

3.4 逻辑运算符

概念∶逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。

逻辑运算符说明案例
&&逻辑与true && false
||逻辑或true || false
!逻辑非! true
3.4.1 短路运算（逻辑中断）

短路运算的原理∶当有多个表达式(值)时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值
（1）逻辑与

  • 语法：表达式1 && 表达式2
  • 如果第一个表达式的值为真，则返回表达式2
  • 如果第一个表达式的值为假，则返回表达式1

（2）逻辑或

  • 语法：表达式1 || 表达式2
  • 如果第一个表达式的值为真，则返回表达式1
  • 如果第一个表达式的值为假，则返回表达式2

3.5 赋值运算符

概念︰用来把数据赋值给变量的运算符。

赋值运算符说明
=直接赋值
+=、-=加、减一个数后再赋值
*=、/=、%=乘、除、取模后再赋值

3.6 运算符优先级

优先级运算符顺序
1小括号（）
2一元运算符++ – !
3算数运算符先* / % 后+ -
4关系运算符> >= < <=
5相等运算符== != === !===
6逻辑运算符先&& 后 ||
7赋值运算符=
8逗号运算符,
zilin_taku
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础语法—基础数据类型简介
01-08
JavaScript基础语法—基础数据类型简介 ****javescript 5种基本数据类型和2种复杂类型**** **首先介绍基础数据类型：** 1：number number分为整数，浮点数，NaN(not a number); 判断变量是不是数字方法 isNaN(); ...
变量、运算符、数据类型及位运算
Qiqi7Seven的博客
07-22 238
变量、运算符、数据类型及位运算随笔作业 随笔 作业
Java数据类型和逻辑运算
Dear_Dreamer_Hu的博客
02-28 301
2.1：数据类型 2.1.1：基本数据类型 1）数值型{整数（byte，short，int，long），浮点数（float，double），字符（char）} 2）非字符型{布尔（boolean）} 2.1.2：引用数据类型{类（class），接口（interface），数组（[]）} 2.2：定义数据类型 ！！注意：用long定义一个整数时，要在数据后面加一个L（如：long a = 1000000L；用float定义一个小数时，要在数据后面加一个f（如：float a = 13.14f）
Js数字型范围，Js能表示的最大和最小值，Number.NEGATIVE_INFINITY 和 -Infinity，Number.POSITIVE_INFINITY和Infinity
Scluis的博客
03-15 2393
Js数字型范围（Js能表示的最大和最小值） 最大值 Number.MAX_VALUE这个值为： 1.7976931348623157e+308，即Js能表示的最大的正数 最小值 Number.MAX_VALUE，这个值为 -1.7976931348623157e+308，即Js能表示的最小的负数 正数的最小值 Number.MIN_VALUE，这个值为：5e-32 无穷大与无穷小 Number.POSITIVE_INFINITY 和 Infinity 都代表无穷大，是一个大于任何数的数值， IEEE 75
Java笔记（一）变量，数据类型，逻辑运算符
zyf2292924179的博客
12-08 190
1.java变量 1.在jvm内存中开辟了一块空间,用来存储数据 2.变量使用前: 1)声明/定义: 类型 + 变量 int a; 2)初始化: 第一次赋值 a = 10; a = 20;//再次赋值 2.类型: 基本数据类型 + 引用数据类型 进制:二进制/十进制/八进制/十六进制 超过10 用小写字母小时 a表示10 f表示15 二进制(符号位):二进制中只能存放数字的0和1 最高位表示符号位: 0表示正数,正1表示负数 原码:符号位0表示正数,正1表示负数,剩下数字位表示数字本身
js基础第二天笔记
weixin_44235471的博客
10-07 271
JavaScript基础第02天 1 - 运算符（操作符） 1.1 运算符的分类 运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。 JavaScript中常用的运算符有： 算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运算符 1.2 算数运算符 算术运算符概述 概念：算术运算使用的符号，用于执行两个变量或值的算术运算。 浮点数的精度问题 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。 var result
JavaScript变量,数据类型,运算符【JavaScript全栈入门教程2】
08-31
JavaScript变量,数据类型,运算符【JavaScript全栈入门教程2】
Javascript常用运算符(Operators)-javascript基础教程
10-30
Javascript常用运算符(Operators)-javascript基础教程 Javascript 中的运算符（Operators）是执行操作的符号，用于对变量、值或表达式进行操作。运算符可以分为多种类型，包括算术运算符、逻辑运算符、赋值运算符等...
JavaScript的概念、声明、变量、运算符以及流程控制语句的介绍
01-08
JavaScript基础一初识JavaScriptJavaScript的概念实现特点JavaScript的声明第一种声明方式第二种声明方式第三种声明方式第四种声明方式JavaScript的变量变量的概念变量存储数据的六种数据类型基本数据类型引用数据...
javascript基础入门.ppt
11-12
JavaScript基础入门 JavaScript是基于对象和事件驱动的解释性语言，其目的就是增强Web客户交互，弥补了HTML的缺陷...* 基本数据类型 —— 变量 * 转义字符 * 表达式 * 运算符 * 控制语句 * JavaScript函数 * 错误处理
java基础学习 --- 第二节 变量、数据类型和运算符
weixin_45502354的博客
03-21 159
java基础学习 — 第二节 变量、数据类型和运算符 一、变量 1.变量就是会发生改变的数据，程序运行时，这些数据以变量的形式被保存到计算机的内存中。如图 2.使用变量的步骤：     声明变量 — 根据数据类型申请存储空间 （开辟存储空间）     赋值 — 将数据赋给变量，在内存中存储数据     使用变量 — 取出数据进行使用 注意： 变量名命名要符号一定规则：
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 305
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1164
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 504
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 764
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
JS-12-es6常用知识-async
最新发布
m0_68467925的博客
06-13 531
关键字async作用：声明一个函数为异步函数，允许函数内部使用await关键字等待 Promise 对象的完成。返回值：异步函数总是返回一个 Promise 对象，无论函数内部是否有显式的return语句。如果没有返回语句，函数会隐式地返回一个已解析（resolved）的 Promise，其值为undefined。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 373
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
Vue CLI 4与项目构建实战指南
06-09 916
Vue CLI的作用和优势Vue CLI（Vue.js Command Line Interface）是官方提供的一个标准工具，用于快速搭建Vue项目架构。标准化开发流程：Vue CLI提供了一套标准的开发流程和项目结构，有助于团队协作和项目维护。快速原型开发：通过Vue CLI可以快速创建项目原型，提高开发效率。丰富的插件生态：Vue CLI拥有丰富的插件，可以轻松集成各种功能，如路由、状态管理、打包优化等。易于定制和扩展：Vue CLI支持对构建配置的深度定制，满足不同项目的需求。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1221
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
在javascript中如何判断一个变量的数据类型
06-08
在 JavaScript 中，可以使用 `typeof` 运算符来判断一个变量的数据类型。这个运算符会返回一个字符串，表示变量的数据类型。常见的数据类型有： - `"undefined"`：表示变量未定义。 - `"boolean"`：表示变量是布尔类型。 - `"number"`：表示变量是数值类型。 - `"string"`：表示变量是字符串类型。 - `"symbol"`：表示变量是 ES6 中新增的 Symbol 类型。 - `"function"`：表示变量是函数类型。 - `"object"`：表示变量是对象类型（包括数组、null 等）。 例如： ```javascript let a = 1; console.log(typeof a); // 输出 "number" let b = "hello"; console.log(typeof b); // 输出 "string" let c = true; console.log(typeof c); // 输出 "boolean" let d = {}; console.log(typeof d); // 输出 "object" let e = null; console.log(typeof e); // 输出 "object" ``` 需要注意的是，`typeof null` 返回的是 `"object"`，这是 JavaScript 的一个历史遗留问题。如果需要判断一个变量是否为 null，可以使用 `===` 运算符，例如 `a === null`。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值