JavaScript基础笔记（原创，持续更新）

最新推荐文章于 2024-04-21 14:29:57 发布

Agnesma

最新推荐文章于 2024-04-21 14:29:57 发布

阅读量567

点赞数 1

分类专栏： JavaScript基础笔记文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_45675857/article/details/108482065

版权

JavaScript基础笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript基础笔记

JavaScript基础

8.13 更新

JavaScript三大组成部分：ECMAScrip、 DOM（文档对象）、 BOM（浏览器对象）

8.14 更新

JS内容输出方法

控制浏览器弹出一个警告框：alert
让计算机在页面中输出一个内容：document.write();可以向body中输出一个内容
向控制台输出一段内容：console.log();

JS编写位置

编写到标签的onclick属性中，点击按钮时js代码才会执行（虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用）
写在超链接href属性中，点击超链接时，会执行js代码
写到script标签中
编写到外部js文件中，通过script标签引入（可以在不同页面中同时引用，也可以利用到浏览器的缓存机制中，推荐使用）

注：script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写浏览器也会忽略，如果需要则需要创建新的script标签。

JS基本语法

单行注释，多行注释
JS中严格区分大小写
JS中每一条语句以分号结尾（如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，有时还会加错分号，因此分号是必须的）
JS中会忽略多个空格和换行，所以编写时可以使用空格和换行对代码进行格式化

字面量和变量

字面量：都是一些不可改变的值，可以直接使用，但是一般不会直接使用字面量（比如：1 2 3 4 “hello” true)

变量：可以用来保存字面量，而且变量的值，可以任意改变，可以对字面量进行描述

变量的使用：

声明变量（在JS中使用var关键字来声明一个变量）
为变量赋值（声明和赋值可以同时进行）

标识符

概念：在JS中所有可以由自主命名的都可以成为标识符

例如：变量名、函数名、属性名都属于标志符

命名规则：

标识符中可以含有字母、数字、下划线(_)、美元符号($)
标识符不能以数字开头
标识符不能是ES中的关键字或保留字（比如：var等）
标识符一般采用驼峰命名法（规范）

注：JS底层保存标识符采用Unicode编码（UTF-8），理论上，所有UTF-8中含有的内容都可以作为标识符

数据类型

概念：指字面量的类型

在JS中一共有六种数据类型（String、Number、Boolean、Null、Undefined、Object）
其中String、Number、Boolean、Null、Undefined属于基本数据类型，Object属于引用，数据类型

字符串String

在JS中字符串需要使用引号引起来
使用双引号或单引号都可以，但是不要混着用
引号不能嵌套，双引号不能放双引号，单引号不能放单引号
在字符串中可以使用\作为转义字符，当表示一些特殊符号时可以使用\进行转义（\“表示”、\‘表示’、\n表示换行、\t制表符）

数值类型Number

在JS中所有的数值都是Number类型，包括整数和浮点数（小数）
可以使用typeof来检查一个变量的类型（语法：typeof 变量）
Number.MAX_VALUE可以表示数字的最大值1.7976931348623157e+308（如果Number表示的数字超过最大值，则会返回一个Infinity表示正无穷）
Number.MIN_VALUE大于0的最小值5e-324
NaN：Not a Number是一个特殊的数值
JS整数的运算基本可以保证精确，如果使用JS进行浮点数运算，可能得到一个不精确的结果（千万不要使用JS进行精确度要求比较高的数值运算）

布尔值Boolean

true or false表示逻辑判断真假

空值和未定义Null and Undefined

Null专门用来表示空对象，因此typeof检查Null值会返回Object

当声明一个变量却为赋值是为Undefined，使用typeof检查Undefined值会返回Undefined

强制类型转换

概念：将一个数据类型转换为其他数据类型

类型转换：将其他数据类型转换为String、Number、Boolean

转换方式

将其他数据类型转换为String

方式一：调用被转换数据类型的toString()方法

该方法不回影响到原变量，它会将转换的结果返回，需要赋值给新变量并输出（或者直接转换后的结果重新赋值给，原变量）；注意⚠️:null和undefined这两个值，没有toString()方法，如果调用他们的toString()方法会报错。
方式二：调用String()函数，并将被转换的数据作为参数传递给函数

使用String()函数做强制类型转换，对于Number和Boolean实际上就是调用toString()方法但是对于Null和Undefined就不会调用toString()方法，它会将null直接转换为"null"，将undefined直接转换为"undefined"

将其他数据类型转化为Number

方式一：使用Number()函数
- 字符串–>数字
  
  如果是纯数字的字符串，则直接将其转换成数字
  
  如果字符串中有非数字内容，则转换成NaN
  
  如果字符串是空串或者是一个全是空格的字符串，则转换成0
- 布尔–>数字
  
  true转成1，false转成0
- Null–>数字 0
- Undefined–>数字 NaN
方式二：这种方式专门用来对付字符串
- parseInt() ：把一个字符串转换成另一个整数，可以将一个字符串中的有效整数内容取出，转换为Number
- parseFloat()：把一个字符串转换成一个浮点数，作用和parseInt()类似，不同的是它可以获得有效的小数
注：如果对非String使用parseInt()或parseFloat()它会先将其转换为String，然后再操作

将其他数据类型转化为Boolean

使用Boolean()函数

数字–>布尔，除了0和NaN，其余都是true
字符串–>布尔，除了空串，其余都是true
null和undefined都会转换为false
对象也会转换为true

隐式类型转换

为任意的数据类型做两次非运算，将其转换为布尔值

其他进制的数字

在JS中，如果需要表示16进制的数字，需要以0x开头；如果需要表示8进制的数字，则需要以0开头；如果要表示2进制数字，则需要以0b开头，但不是所有的浏览器都支持。

注：“070”这种数字有些浏览器会当作8进制解析有些会当作10进制解析，为解决统一进制，在parseInt() 中传递一个第二个参数，来指定数字的进制。

运算符

概念：通过运算符可以对一个或者多个值进行运算，并获取运算结果（比如：typeof就是一个运算符，可以获得一个值的类型，它会将该值的类型以字符串的形式返回 var a=123;var result =typeof a;这里result是String类型）

算数运算符(不会改变原变量的值，除非赋值给原变量）：+ - * / %

当对非Number类型的值进行运算时，会将这些值转换为Number然后在运算；
任何值和NaN做运算都得NaN；
如果对两个字符串进行加法运算，则会做拼串，即会将两个字符串拼接成一个字符串，并返回；
任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串操作；
隐式类型转换（由浏览器自动完成，实际上它是调用String()函数）：利用任意数据类型+""的方法将任意数据类型转换为String；
运算顺序从左到右；
任何值做 - * /运算都会自动转换成Number（可利用这个特点做隐式类型转换，通过为一个值-0 *1 /1来将其转换成Number，原理和Number()函数一样，使用起来更加简单（加法不行，因为会转换成字符串）;

一元运算符（只需要一个操作数，如：typeof）

+：正号，不会对数字产生任何影响

-：负号，负号可以对数字进行符号的取反

对于非Number类型，会先转换为Number类型然后运算，可以对一个其他的数据类型使用+，来将其转换为Number，它的原理和Number()函数一样，但更简单（eg：var result=1+“2”+3，result=“123”;var result=1++“2”+3，result=6）

自增自减

自增++

通过自增可以使变量在自身的基础上增加1；

对于一个变量自增以后，原变量的值会立即自增1；

自增分为两种：后++（a++）和前++（++a），无论是a++还是++a，都会立即使原变量的值自增1，不同的是a++和++a的值不同，a++的值等于原变量的值（自增前的值），++a的值等于等于原变量的新值（自增后的值）；
自减–

通过自减可以使变量在自身的基础上减去1

自减分成两种：后–（a–）和前–（--a），无论是a–还是–a都会立即使原变量的值自减1，不同的是a–和--a的值不同，a–是变量的原值（自减前的值），–a是变量的新值（自减以后的值）

逻辑运算符

概念：JS中提供三种逻辑运算符

8.15更新

！：非，可以对一个值进行非运算，对一个布尔值进行取反操作；如果对一个值进行两次取反，值不会变化；对非布尔值进行取反，会先转化成布尔值后取反，利用该特点将其他数据类型转换成布尔值类型，可以为一个任意数据类型取两次反，将其转换成布尔值，原理与Boolean()函数一样。

&&：与，可以对符号两侧的值进行与运算并返回结果；运算规则：如果两个值都是true则返回true，只要有一个false就返回false；JS中的“与”属于短路与，如果第一个值为false，则不会看第二个值。

｜｜：或，可以对符号两侧的值进行或运算并返回结果；两个值中只要有一个true，就返回true，如果两个值都为false，才返回false；JS中的“或”属于短路或，如果第一个值为true，则不会看第二个值。

&&，｜｜对于非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，并且返回原值

与运算：如果第一个值为true，则必然返回第二个值；如果第一个值为false，则直接返回第一个值。

或运算：如果第一个值为true，则直接返回第一个值；如果第一个值为false，则直接返回第二个值。

赋值运算符

=：将符号右侧的值赋值给符号左侧的变量

+=：a += 5等价于a = a + 5

-=：a -= 5等价于a = a - 5

*=：a *= 5等价于a = a * 5

/=：a /= 5等价于a = a / 5

%=：a %= 5等价于a = a % 5

关系运算符

概念：通过关系远算符可以比较两个值之间的大小关系，如果关系成立返回true，如果关系不成立则返回false。

>、>=、<、<=

非数值的情况：对于非数值进行比较，会将其转换成数字然后再比较；任何值和NaN做比较都是false；如果符号两侧的值都是字符串时，不会将其转换成数字比较，而是笔记哦啊字符串中字符串的Unicode编码；比较字符编码时是一位一位进行比较，如果两位一样则比较下一位，可以借用它来对英文进行排序，比较中文没有意义；如果比较的两个字符串型的数字可能会得到不可预期的结果（注意⚠️：在比较两个字符串型的数字是，一定一定一定要转型，比如用户输入购物车的数字就为字符串型比较时需要转型）。