本文详细介绍了JavaScript的基础知识，包括JavaScript的作用、组成、书写位置和注释，深入讲解了变量、数据类型及其转换，以及常见的运算符。JavaScript不仅用于网页交互，还应用于服务端开发、桌面程序、App和物联网。文章通过实例帮助读者理解变量的声明、赋值和命名规范，探讨了数字型、字符串型、布尔型、Undefined和Null等基本数据类型，并介绍了如何检查和转换数据类型。此外，还详细阐述了算术运算符、递增和递减运算符、比较运算符以及逻辑运算符的使用方法，为初学者提供了全面的学习指南。
目录
一、初识JavaScript
1.1、JavaScript的作用
- 表单动态校验（密码强度检测）（js最初的目的）
- 网页特效
- 服务端开发（Node.js）
- 桌面程序（Electron）
- App（Cordova）
- 控制硬件-物联网（Ruff）
- 游戏开发（cocos2d-js）
1.2、js的组成
ECMAScript——ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用泛，往往被称之为JavaScript（网景公司）或JScript（微软公司），但实际上后两者是ECMAScript语言的实现和扩展。ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
DOM——文档对象模型。文档对象模型( Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
BOM——浏览器对象模型。BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
1.3、JS有三种书写位置
1.3.1、行内式：直接写在元素内部
<input type="button" value="按钮" onclick="alert('行内式')">- 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如: onclick。
- 注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号。
- 可读性差，在html中编写JS大量代码时，不方便阅读。
- 引号易错，引号多层嵌套匹配时，非常容易弄混。
- 特殊情况下使用。
1.3.2、内嵌式：直接写在head里
<script>
alert('内嵌式')
</script>1.3.3、外部式：外部创建一个.js的文件，直接写到外部js文件里，然后引入。
<!-- 外部引用 -->
<script src="外部js文件路径"></script>- 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
- 引用外部JS文件的script标签中间不可以写代码
- 适合于JS代码量比较大的情况
1.4、js注释
- 单行注释：// 快捷键：Ctrl + /
- 多行注释：/* */ 快捷键：shift + alt + a
1.5、JavaScript输入输出语句
1.5.1、alert(msg)：浏览器弹出警告
1.5.2、console.log(msg)：浏览器控制台打印出信息
1.5.3、prompt(info)：浏览器弹出输入框，用户可以输入
二、变量
2.1、什么是变量
白话：变量就是一个装东西的盒子。
通俗：变量就是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。
本质：变量是程序在内存中申请的一块用来存放数据的空间。
2.2、变量的使用
2.2.1、声明变量：var 变量名;
- var是一个JS关键字，用来声明变量。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管。
- 变量名是程序员定义的，我们要通过变量名老访问内存中分配的空间。
赋值：把值存入这个变量中
2.2.2、变量的初始化：var 变量名 = 值;
2.3、变量语法扩展
2.3.1、更新变量
一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
2.3.2、同时声明多个变量
同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开
var age =10,name='ls',sex='女';2.3.3、声明变量的特殊情况
- 只声明不赋值，结果为undefined（未定义的）
- 不声明不赋值，直接使用某个变量，结果报错
- 不声明直接赋值，可以使用（不提倡）
2.4、变量的命名规范
- 由字母(A-Z，a-z)、数字(0-9)、下划线(_)、美元符号($ )组成，如: usrAge, num01，_name
- 严格区分大小写。var app;和var App;是两个变量
- 不能以数字开头。18age是错误的
- 不能是关键字、保留字。例如: var、for、while
- 变量名必须有意义。MMD BBD nl→age
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
- 推荐翻译网站︰有道、爱词霸
三、数据类型
3.1、为什么需要数据类型
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
3.2、变量的数据类型
- 变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
- 在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
- JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型
3.3、基本数据类型
| 简单数据类型 | 说明 | 默认值 |
| Number | 数字型，包含整型值和浮点值，如21、0.21 | 0 |
| Boolean | 布尔值类型，如true、false，等价于1和0 | false |
| String | 字符串类型，如"张三"，注意JS里面字符串都带引号 | "" |
| Undefined | var a;声明了变量a，但没有赋值，此时a = undefined | undefined |
| Null | var a = null;声明了变量a为空值 | null |
3.3.1、数字型Number
3.3.1.1、数字型进制
二进制、八进制、十进制、十六进制。在JS中八进制前面加0，十六进制前面加0x。
3.3.1.2数字型范围
- Number.MAX_VALUE（1.7976931348623157e+308）
- Number.MIN_VALUE（5e-324）
3.3.1.3数字型的三个特殊值
- Infinity：代表无穷大，大于任何数值
- -Infinity：代表无穷小，小于任何数值
- NaN，Not a number：代表一个非数值
3.3.2、字符串型String
字符串型可以是引导中的任意文本，其语法为双引号""和单引号''
因为HTML标签里面的属性使用的是双引号，JS这里更推荐使用单引号
3.3.2.1、字符串引号嵌套
JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）
var strMsg = '这是"外单内双"单引号嵌套双引号';
var strMsg = "这是'外双内单'双引号嵌套单引号";
/* 常见错误 */
//var Error1 = '这是错误用法";
//var Error2 = "这是"错误"用法";
3.3.2.2、字符串转义符
类似HTML里面的特殊字符，字符串中也有特殊字符，转义符都是\开头的，我们称之为转义符。
| 转义符 | 解释说明 |
| \n | 换行符，n是newline的意思 |
| \ \ | 斜杠\ |
| \' | ' 单引号 |
| \" | " 双引号 |
| \t | tab缩进 |
| \b | 空格，b是blank的意思 |
3.3.2.3、字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。
var strMsg = "helloWorld";
console.log(str.length);//显示103.3.2.4、字符串拼接
- 多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串
- 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
console.log('字符串的' + '拼接'); //字符串的 字符串的拼接
console.log('年龄是' + 18); // '年龄是18'
console.log('my' + true); // mytrue
console.log(12 + 12); // 24
console.log('12' + 12); // '1212'
console.log('12' + '12'); // '1212'
var age = 18;
console.log('年龄是' + age + '岁'); //年龄是18岁3.3.3、布尔型Boolean
- 布尔类型有两个值: true和false ，其中 true表示真(对)，而false表示假(错)。
- 布尔型和数字型相加的时候，true的值为1 ，false的值为0。
3.3.4、Undefined和Null
- 一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时，注意结果)
- 一个声明变量给null值，里面存的值为空
//如果一个变量声明未赋值，就是undefined未定义数据类型
var str;
console.log(str); // undefined
var variable = undefined;
console.log(variable + '未定义'); //undefined未定义
console.log(variable + 1); //NaN undefined和数字相加最后结果是NaN
//null 空值
var space = null;
console.log(space + '空值'); //null空值
console.log(space + 1); //1 null和数字相加最后结果为原来的数字3.4、获取变量的数据类型
3.4.1、获取检查变量的数据类型
typeof可用来获取检测变量的数据类型
//数字型
var num = 10;
console.log(typeof num); //number
//字符串型
var str = 'lxl';
console.log(typeof str); //string
//布尔值
var flag = true;
console.log(typeof flag); //boolean
//undefined
var vari = undefined
console.log(typeof vari); //undefined
//对象
var space = null;
console.log(typeof space); //object3.4.2、字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
- 数字字面量：1，2，3
- 字符串字面量：'程序猿'，"前端"
- 布尔字面量：true，false
3.5、数据类型的转换
3.5.1、什么是数据类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现三种方式的转换：
- 转换为字符串类型
- 转换为数字类型
- 转换为布尔型
3.5.2、转换为字符串类型
| 方式 | 说明 | 案例 |
| toString() | 转成字符串 | var num=1; alert(num.toString()); |
| String() 强制转换 | 转成字符串 | var num=1; alert(String(num)); |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num=1; alert(num+"字符串"); |
- toString()和String()使用方式不一样。
- 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。
3.5.2、转换为数字类型
| 方式 | 说明 | 案例 |
| parseInt(string) 函数 | 将string类型转换成整数数值型 | parseInt('20') |
| parseFloat(string) 函数 | 将string类型转换成浮点数数值型 | parseFloat('20.24') |
| Number() 强制转换函数 | 将string类型转换为数值型 | Number('20') |
| js隐式转换(- * /) | 利用算数运算隐式转换为数值型 | '20' - 0 |
3.5.3、转换为布尔型
| 方式 | 说明 | 案例 |
| Boolean()函数 | 其他类型转成布尔值 | Boolean('true'); |
- 代表空、否定的值会被转换为false，如' '、0、NaN、null、undefined
- 其余值都会被转换为true
四、JavaScript运算符
4.1、运算符
运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数等功能的符号。
JavaScript中常用运算符有：
- 算术运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
4.2、算术运算符
4.2.1、算术运算符概述
概念：算术运算符使用的符号，用于执行两个变量或值的算术运算。
| 运算符 | 描述 | 实例 |
| + | 加 | 24 + 20 = 44 |
| - | 减 | 24 + 20 = 4 |
| * | 乘 | 24 * 20 = 480 |
| / | 除 | 24 / 20 = 1.2 |
| % | 取余数（取模） | 返回除法的余数9 % 2 = 1 |
4.2.2、浮点数的精度问题
浮点数值的最高精度是17位小数，但在进行算术计算时其精度远远不如整数。
var num = 0.1 + 0.2; //结果不是0.3，而是：0.30000000000000004
console.log(0.07 * 100); //结果不是7，而是：7.000000000000001
console.log(num == 0.3); //结果为false所以：不要直接判断两个浮点数是否相等
4.2.3、表达式和返回值
表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合。
简单理解：是由数字、运算符、变量等组成的式子。
表达式最终都会有一个结果，返回给我们，我们称为返回值。
console.log(1 + 1); //2 就是返回值
//在程序里，右边表达式计算完毕把返回值赋值给左边
var num = 1 + 1;4.3、递增和递减运算符
4.3.1、递增和递减运算符概述
如果需要反复给数字变量添加或减去1，可以使用递增(++)和递减(--)运算符来完成
在JavaScript中，递增(++)和递减(--)既可以放在变量前面，也可以放在变量后面。放在变量前面时我们可以称为前置递增(递减)运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。
注意：递增和递减运算符必须和变量配合使用
4.3.2、递增运算符
4.3.2.1、前置递增运算符
++num前置递增，就是自加1，类似于num = num + 1，但是++num写起来更简单。
注意：先自加1，后返回值
4.3.2.2、后置递增运算符
num++后置递增，就是自加1，类似于num = num + 1，但是num++写起来更简单。
注意：先返回原值，后自加1
4.3.3、递增运算符
4.3.3.1、前置递减运算符
--num前置递减，就是自减1，类似于num = num - 1，但是--num写起来更简单。
注意：先自减1，后返回值
4.3.3.2、后置递减运算符
num--后置递减，就是自减1，类似于num = num - 1，但是num--写起来更简单。
注意：先返回原值，后自减1
4.4、比较运算符
4.4.1、比较运算符概述
概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值( true / false )作为比较运算的结果。
| 运算符名称 | 说明 | 案例 | 结果 |
| < | 小于号 | 1 < 2 | true |
| > | 大于号 | 1 > 2 | false |
| >= | 大于等于号（大于或者等于） | 2 >= 2 | true |
| <= | 小于等于号（小于或者等于） | 3 <= 2 | false |
| == | 判等号（会转型） | 20 == '20' | true |
| != | 不等号 | 20 != 20 | false |
| === !== | 全等 要求值和数据类型都一致 | 20 === '20' | false |
4.5、逻辑运算符
4.5.1、逻辑运算符概述
概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断。
| 逻辑运算符 | 说明 | 案例 |
| && | “逻辑与”，简称“与” and | true && false |
| || | “逻辑或”，简称“或” or | true || false |
| ! | “逻辑非”，简称“非” not | !true |
4.5.2、逻辑与 &&
逻辑与 && 两侧都为都为true，结果才是true，只要一侧为false，结果就为false。
| A && B | B：true | B：false |
| A：true | 结果：true | 结果：false |
| A：false | 结果：false | 结果：false |
4.5.3、逻辑或 ||
逻辑或 || 两侧都为false，结果才是false，只要有一侧为true，结果就是true。
| A || B | B：true | B：false |
| A：true | 结果：true | 结果：true |
| A：false | 结果：true | 结果：false |
4.5.4、逻辑非 !
逻辑非 ! 也叫做取反符，用来取一个布尔值的相反的值。
| 逻辑非 ! | 结果 |
| !true | false |
| !false | true |
4.5.5、短路运算（逻辑中断）
短路运算原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。
4.5.5.1、逻辑与
- 语法：表达式1 && 表达式2
- 如果第一个表达式的值为真，则返回表达式2
- 如果第一个表达式的值为假，则返回表达式1
4.5.5.2、逻辑或
- 语法：表达式1 || 表达式2
- 如果第一个表达式的值为真，则返回表达式1
- 如果第一个表达式的值为假，则返回表达式2
4.6、赋值运算符
4.6.1、赋值运算符概述
概念：用来把数据赋值给变量的运算符。
| 赋值运算符 | 说明 | 案例 |
| = | 直接赋值 | var usrName = '值' |
| +=、-= | 加、减一个数后再赋值 | var age = 10; age+=5; //15 |
| *=、/=、%= | 乘、除、取模后在赋值 | var age = 2; age*5; //10 |
4.7、运算符优先级
| 优先级 | 运算符 | 顺序 |
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ 、-- 、！ |
| 3 | 算数运算符 | 先 *、/ 、% 后 +、- |
| 4 | 关系运算符 | > 、>= 、< 、<= |
| 5 | 相等运算符 | == 、!= 、=== 、!== |
| 6 | 逻辑运算符 | 先 && 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
