【JavaScript】简介、变量、数据类型及其转换、简单数据类型

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

该系列文章是博主学习前端入门课程的笔记，同时也为了方便查阅，有任何错漏或疑问都欢迎在评论区提出。本文内容包含JavaScript的简介、变量、数据类型及其转换、简单数据类型，还有一些拓展知识

思维导图

在这里插入图片描述

第一章 JavaScript简介

1.1 JavaScript是什么

Brendan Eich在1995年花费10天设计出JavaScript，最初命名为LiveScript，与Sun合作之后将其改名为JavaScript

  • JavaScript是运行在客户端的脚本语言(不需要编译，由JS解释器【JS引擎】逐行解释并执行)，是世界上最流行的语言之一
  • 基于Node.js技术，JavaScript也可以进行服务端编程
    在这里插入图片描述

为方便起见，后面将JavaScript简称为JS

1.2 JS的作用

  • 表单动态校验：密码强度检测( JS 产生最初的目的)
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)
  • App(Cordova)
  • 控制硬件-物联网(Ruff)
  • 游戏开发(cocos2d-js)

1.3 HTML/CSS/JS的关系

 
HTML/CSS是标记语言–描述类语言

  • HTML决定网页结构和内容，类比人的身体
  • CSS决定网页的样式，类比人的衣服、妆容

JavaScript是脚本语言–编程类语言

  • 实现业务逻辑和页面控制(功能)，类比人的各种动作

1.4 浏览器如何执行JS

浏览器分为两部分：渲染引擎和JS引擎

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

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

1.5 JS的组成

暂时先理解ECMAScript即可

  1. ECMAScript
    ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。这种语言在万维网上应用广泛，往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。更多细节可以查看：MDN
    在这里插入图片描述
  2. DOM–文档对象模型
    文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
  3. BOM–浏览器对象模型
    BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

1.6 JS引入的三种方式

与CSS一样，JS也有三种引入方式：行内、内嵌、外部

语法示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2.内嵌式的JS -->
    <script>
        alert('稻香');
    </script>
    <!-- 3.外部引入的JS 注意标签中间不能写代码 -->
    <script src="my.js"></script>
</head>
<body>
    <!-- 1.行内式的JS 直接写到元素的内部-->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>
</html>

注意：

  • 行内JS可读性差且引号易错，基本只在单行JS代码时使用
  • 单双引号的使用：在HTML中推荐使用双引号, JS 中推荐使用单引号
  • 引入外部JS文件的标签中间不可以写代码

1.7 JS注释

  • 单行注释：// (快捷键：ctrl + /)
  • 多行注释：/* */ (快捷键：alt + shift + a)

VSCode可以修改快捷键： 设置 - 键盘快捷方式 - 查找原来的快捷键 - 修改为新的快捷键 - 回车确认

1.8 JS输入输出语句

// prompt 输入框
prompt('请输入你的年龄');
// alert 输出警示框,展示给用户的
alert('计算的结果是');
// console 控制台输出，程序员测试用的
console.log('程序员，你好');

prompt和alert会直接在网页出现弹框，console.log输出需要在控制台(F12)查看

第二章 变量

2.1 什么是变量

变量是用于存放数据(“Bob”,true,35)的容器。通过变量名(name,boolean,num)可以获取数据，数据可以被修改。

在这里插入图片描述

本质：变量是程序在内存中申请的一块用来存放数据的空间。

2.2 如何使用变量

分两步：1.声明变量；2.赋值

1. 声明变量

// 1.声明一个叫age的变量
var age;

var(variable)是一个 JS关键字，用来声明变量。使用该关键字声明变量后，计算机会自动为变量分配内存空间

2. 赋值

// 2.给age赋值为18
age = 18;
// 3.输出age
console.log(age);

3. 初始化

声明变量并赋值，称为变量的初始化

// 4.变量的初始化
var myname = '君和';
console.log(myname);

2.3 语法拓展

1. 更新变量

一个变量被重新赋值后，原有的值会被覆盖，变量值以最后一次赋的值为准。

var myname = '君和';
console.log(myname); // 君和
myname = '刘德华';
console.log(myname); // 刘德华

2. 声明多个变量

同时声明多个变量时，只需要写一个var， 多个变量名之间使用英文逗号隔开。

var age = 18, myname = 'pink', sex = '男';

3. 声明变量的特殊情况

  • 只声明不赋值

变量的值为undefined

var email;
console.log(email); // undefined
  • 不声明不赋值

直接使用这种变量会报错

console.log(tel);
  • 不声明直接赋值使用

与声明并赋值的变量值相同，但会变成全局变量，不提倡使用

qq = 110;
console.log(qq); //110,不提倡使用

2.4 命名规范

  • 由字母(A-Z a-z)、数字(0-9)、下划线(_)、美元符号($)组成，但不能以数字开头。如 : usrAge, num01, name
  • 严格区分大小写。var app; 和 var App; 是两个变量
  • 不能是关键字、保留字。例如 : var、 for、while
  • 遵守驼峰命名法。第一个单词的首字母小写，后面单词的首字母需要大写。 myFirstName
  • 命名要有明显的意义，最好使用英文单词，若使用拼音则不要简写

第三章 数据类型

3.1 为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，定义了不同的数据类型。

数据类型定义了可以对数据执行的操作、数据的含义以及存储该类型值的方式(告诉计算机我们打算如何使用数据)

3.2 变量的数据类型

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var num; // 这里num的数据类型是不确定的
num = 11; // num为数字型
// js的变量数据类型在赋值之后才确定
var str = 'pink'; // str为字符串型
// js是动态语言，变量的数据类型是可以变化的
var x = 10; // 数字型
x = '刘德华'; // 字符型

3.3 数据类型分类

JS把数据类型分为两类：

  • 简单数据类型(number,string,boolean,undefined,null)
    简单数据类型及其说明
  • 复杂数据类型(object)

第四章 简单数据类型

4.1 数字型number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

var num = 10; // num为数字型
var PI = 3.14; // PI为数字型

1. 数字型进制

常见的进制有二进制、八进制、十进制、十六进制。在JS中，前面加0表示八进制，前面加0x表示十六进制

// 1.八进制：数字前面加0表示八进制
var num1 = 010;
console.log(num1); // 转化为十进制等于8
var num2 = 012;
console.log(num2); // 10
// 2.十六进制：数字前面加0x表示十六进制
var num3 = 0x9;
console.log(num3); // 9
var num4 = 0xa;
console.log(num4); // 10

2. 数字型的取值范围

// 3.数字型的最大值
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
// 4.数字型的最小值
console.log(Number.MIN_VALUE); // 5e-324

3. 三个特殊值

// 5.无穷大，大于任何数字
console.log(Number.MAX_VALUE * 2); // Infinity
// 6.无穷小，小于任何数值
console.log(-Number.MAX_VALUE * 2); // -Infinity
// 7.非数字，Not a number 表示非数字
console.log('pink老师' - 111); // NaN

4. isNaN

用来判断一个变量是否为非数字的类型，返回的是布尔值。如果是数字返回false；否则返回true

console.log(isNaN(12)); // false
console.log(isNaN('pink老师')); // true

4.2 字符串型

引号(JS中推荐使用单引号)内的任意文本都为字符串

var strMsg = '我爱北京天安门'; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串

1. 单双引号嵌套

用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

var str = '我是一个"高富帅"的程序员';

2. 字符串转义符

表格中是部分转义字符

在这里插入图片描述

语法示例

alert('酷热难耐，火辣的太阳底下，我挺拔的身餐，成为了最为独特的风景。\n我审视四周，这里，是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声:"收破烂啦~"')

效果图
在这里插入图片描述

3. 字符串长度length

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

语法示例

var str = 'my name is andy'; 
console.log(str.length); // 15 空格也占据位置

4. 字符串拼接

多个字符串之间可以使用 + 进行拼接，拼接方式为字符串 + 任何类型数据

语法示例

console.log('沙漠' + '骆驼'); // 沙漠骆驼
console.log('pink' + 18); // pink18
console.log('pink' + true); // pinktrue
console.log(12 + 12); // 24
console.log(12 + '12'); // 1212
var age = 18
console.log('pink老师' + age + '岁');

注意：

  • 字符串与其他类型数据拼接，得到的数据是字符串型
  • 数字型与数字型用+相连，进行的是加法运算
  • 字符串与变量拼接时，变量不需要加引号

4.3 布尔型

布尔型有两个值：true 和 false，其中 true 表示真(对)，而 false 表示假(错)。布尔型和数字型相加的时候，true 的值为1，alse 的值为0。

语法示例

var bool = true;
var bool1 = false;
console.log(bool+1); // 2
console.log(bool1+1); // 1

4.4 undefined和null

如果一个变量声明但未赋值，就是undefined(未定义数据类型)

var str;
console.log(str); // undefined
var variable = undefined;
console.log(variable + 'pink'); // undefinedpink
// undefined转换为数字型变成NaN
console.log(variable + 1); // NaN
console.log(variable + true); // NaN

null表示变量的值为空

var space = null;
console.log(space); // null
console.log(space + 'pink'); // nullpink
console.log(space + 1); // 1
console.log(space + true); // 1

4.5 获取变量数据类型 typeof

typeof 可用来获取检测变量的数据类型

var num = 11;
console.log(typeof num); // number
var str = 'pink';
console.log(typeof str); // string
var bool = true;
console.log(typeof bool); // boolean
var vari = undefined;
console.log(typeof vari); // undefined
var timer = null;
console.log(typeof timer); // object

// prompt获取的数据类型是字符串
var age = prompt('请输入你的年龄：');
console.log(typeof age); // string

4.6 字面量

第五章 数据类型转换

把一种数据类型的变量转换成另外一种数据类型

5.1 转换为字符串

在这里插入图片描述

语法示例

var num = 11;
var str = num.toString();
console.log(typeof str); // string
// 2.String(变量)
console.log(typeof String(num)); // string
// 3.加号拼接
console.log(num + ''); // 11
console.log(typeof (num + '')); // string

三种转换方式，实际开发中更常用第三种加号拼接字符串转换方式， 这种方式也称之为隐式转换

5.2 转换为数字型

在这里插入图片描述

语法示例(在控制台可以根据数据颜色区分数据类型，所以这里没有用typeof)

var age = prompt('请输入你的年龄：');
// 1.parseInt() 可以将数据转换为数字型，得到的是整数(向下取整)
console.log(parseInt(age)); 
console.log(parseInt('3.14')); // 3
console.log(parseInt('3.94')); // 3
console.log(parseInt('121px')); // 121
console.log(parseInt('rem121px')); // NaN

// 2.parseFloat() 可以将数据转换为数字型，得到的是浮点数
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('121px')); // 121
console.log(parseFloat('rem121px')); // NaN

// 3.利用Number()
var str = '123';
console.log(Number(str)); // 123

// 4.利用算式运算 -*/ 隐式转换
console.log('12' - 0); // 12
console.log('123' - '111'); // 12
console.log('123' * 1); // 123

实际开发中更常用parseInt和parseFloat(注意大小写)

5.3 转换为布尔型

代表空、否定的值会被转换为 false，如’'、0、NaN、null、undefined，其余的值都会被转换为true

语法示例

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log('---------------');
console.log(Boolean(123)); // true
console.log(Boolean('  ')); // true
console.log(Boolean('hello world')); // true

第六章 拓展阅读

6.1 解释型语言和编译型语言

1.概述

计算机不能直接理解任何除机器语言以外的语言，所以要把程序语言翻译成机器语言才能执行程序。将程序语言翻译成机器语言的工具，被称为翻译器。

  • 翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
  • 编译器是在代码执行之前进行编译，生成中间代码文件，实现“一次编译，无限运行”(编译得到可执行文件后不需要源代码和编译器即可运行，但不能跨平台运行)
  • 解释器是在运行时进行及时解释，并立即执行，实现“一次编写，到处运行”(源代码可以跨平台运行，但需要依赖解释器)

2. 执行过程

图片出处：https://blog.csdn.net/General_D/article/details/120700024

6.2 标识符、关键字、保留字

1. 标识符

开发人员为变量、属性、函数、参数取的名字。标识符不能是关键字或保留字

2. 关键字

JS事先定义的、有特别意义的标识符

JS中的关键字： break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等

3. 保留字

保留字：实际上就是预留的“关键字”，虽然现在还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或函数名(标识符)。

JS中的保留字： boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile等

注意： 如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将会出现关键字错误

君和-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript基本数据类型和转换
10-20
JavaScript是一种动态类型的语言，这意味着变量在声明时无需指定其数据类型，它们的类型可以在程序运行过程中改变。在JavaScript中，存在两种主要的数据类型：基本数据类型（也称为原始数据类型）和复杂数据类型。 ...
简单介绍JavaScript数据类型之隐式类型转换
01-19
JavaScript的数据类型分为六种，分别为null,undefined,boolean,string,number,object。object是引用类型，其它的五种...本章节单独介绍一下javascript中的隐式数据类型转换，对于它的良好掌握，在实际应用能够简化很多
浅谈JavaScript数据类型及转换
10-24
JavaScript是一种动态类型的编程语言，它的数据类型分为两大类：基本数据类型和引用数据类型。基本数据类型包括Boolean、Number、String、Undefined、Null以及ES6新增的Symbol和BigInt。引用数据类型主要是Object，...
全面了解JavaScript的数据类型转换
01-21
当绝没有弱类型那么随便，也就是说变量在声明时不需要指定数据类型，变量由赋值操作确定数据类型),所以在JavaScript的类型转换中就存在了强类型语言所没有的隐式转换。 1.1 JavaScript中的隐式转换（自动类型转换） ...
Javascript的数据类型转换
03-21
以下是对JavaScript中数据类型转换的详细说明： 1. `parseInt()` 函数：这个函数用于将字符串转化为整型。它会尝试解析字符串，从开头开始找到第一个数字，并将其转换为整数。如果字符串的第一位不是数字，`...
Webkit简介以及工作流程
读心悦
07-10 310
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 186
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 306
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 162
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1268
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
什么是vue的计算属性
weixin_56187723的博客
07-12 204
Vue的计算属性（Computed Properties）是Vue组件中的一个非常强大的功能，它们允许组件基于它们的响应式依赖进行缓存的派生值。只有当相关响应式依赖发生改变时，计算属性才会重新求值。这意味着只要依赖的响应式数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算函数。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 343
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
TS类型声明文件（二）如何在 TS 中导入导出局部类型
weixin_43303603的博客
07-10 238
系列文章之：如何在 TypeScript 中导入导出局部类型
js中scrollIntoView第一次不生效，第二次生效
风如也的博客
07-12 113
方法用于将元素滚动到可视区域。如果在页面加载后立即使用，可能不会生效，因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成，可以在。关键是确保在页面完全加载和渲染之后再调用。
React:useState和useEffect
最新发布
读万卷书 行万里路
07-12 367
最近因为想要开发一个简单的应用才开始接触React。但是并没有系统学习React，所以这篇博客可能会写的不够专业。
逆向案例十一——华强北登录逆向
m0_57265868的博客
07-10 186
发现有三个参数进行了加密，分别是Password,UserName和Deviceld，再登录一次发现最后一个参数是固定的。这个参数没定义，就去页面源码中，找出这个参数。进入后发现折叠的代码，貌似是des(它自己在上面写的），直接复制。我这是格式化后隐藏了。PS：我之前说第三个参数deviceid是固定，其实是错的，它是由这个函数定义的。这是一个获取设备id的函数，每一台设备都不一样，但同一台设备这个参数是固定的。复制代码在pycharm中的js文件中，最后一个参数是加密的密钥。点击登录，找到登录包。
基于JAVA+SpringBoot+Vue+Echarts的充电数据大屏可视化分析
azhou的代码园
07-12 540
随着电动汽车的普及，城市中充电设施的需求日益增长。为了提高充电设施的管理效率和用户体验，本文提出了一个停车场充电桩数据可视化平台的设计与实现。该平台旨在集成、处理并展示来自多个充电桩的实时数据，帮助管理者进行有效监控和决策支持，同时为车主提供便捷、直观的充电信息查询服务。首先，本研究分析了现代停车场充电桩管理的业务需求，确定了平台的主要功能模块，包括管理员登录，数据源excel导入、数据清洗、大屏数据展示、以及不同维度数据分析图表展示等。
关于echarts中提示框中只能是内容的部分更改
b0303的博客
07-09 199
只为解决展示数据框中提示的问题
js-中止请求控制
passworddddddd的博客
07-09 212
然后，将新的AbortController实例与请求的配置信息合并，并发送请求。如果请求被取消，则捕获错误并判断错误码是否为’ERR_CANCELED’，如果不是，则重新抛出错误。它通过传入URL作为参数，从一个Map对象map中获取对应的AbortController实例，并判断其是否已被终止。如果未被终止，则调用abort方法终止请求，并从map中删除该URL对应的AbortController实例。用户第一次修改查询条件并发送请求，在第一次请求回调之前，用户第二次修改了查询条件并发出请求，

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

君和-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值