盐析白兔

这个屌丝很懒，什么也没留下！

热门标签

web前端JavaScript笔记——(1)基础知识

作者：盐析白兔 | 2024-04-24 15:58:07

踩

JavaScript遵循ES标准（ECMAScript)

一个完整的JavaScript实现包含了三个部分（ECMAScript\DOM\BOM)

浏览器中的第一行JS代码

<head>

/*控制浏览器弹出一个警告框*/

alert(“弹出窗口”);

document.write(“在浏览器中的网页上显示出来，可以向body中输出一个内容”);

console.log(“在控制台上显示出来”);

</script>

</head>

JS代码的位置

写在标签里

属于结构和行为耦合，不方便维护，不推荐使用

也可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码

写在外部的js文件中，引入到文件里

将JS代码编写到script标签中

alert(“我是script标签中的代码”);

</script>

Js代码可以写在head里也可以写在body的标签里面，最好写在外部的js文件里面

js的语法

注释(注释里的内容不会被执行）

单行注释//

多行注释/**/

严格区分大小写
Js中的每一条语句可以以分号;结尾-

如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以在开发中分号必须写分号

JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

字面量和变量

1.字面量

都是一些不可改变的值

比如:1 2 345

字面量都是可以直接使用，但是我们一般都不会直接使用字面量

2.变量

变量可以用来保存字面量，而且变量的值是可以任意改变的

变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量,而很少直接使用字面量

//声明变量

//在js中使用var关键字来声明一个变量

var a;

//为变量赋值

a = 123;

a = 456;

//声明和赋值同时进行

var b = 789;

在JS中可以先声明再赋值,也可以声明和赋值同时进行.

标识符

在JS中所有的可以由我们自主命名的都可以称为是标识符。例如:变量名、函数名、属性名都属于标识符

命名一个标识符时需要遵守如下的规则:

1.标识符中可以含有字母、数字、_、$(美元符号)

2.标识符不能以数字开头

3.标识符不能是ES中的关键字或保留字

4.标识符一般都采用驼峰命名法

- 首字母小写，每个单词的开头字母大写，其余字母小写 helloWorld xxxYyyZzz

JS底层保存标识符时实际上是采用的Unicode编码，所以理论上讲，所有的utf-8中含有的内容都可以作为标识符

数据类型

在js中一共有六种数据类型（数据类型指的是字面量的类型）

String 字符串

Number 数值

Boolean 布尔值

Null 空值

Undefined 未定义

Object对象

string字符串注意事项：

在JS中字符串需要使用引号引起来

使用双引号或单引号都可以，但是不要混着用

引号不能嵌套，双引号不能放双引号，单引号不能放单引号

var str=’hello’;

str=’我说：”今天天气真不错”’；

转义字符

\” 表示” \n表示换行

\’表示’ \t表示制表符

将其他数据类型转换为String类型（两种方法）

1.toString()方法，但是注意null和undefined这两个值没有toString()方法，如果调用会报错

该方法不会影响到原变量，它会将转换的结果返回

a=123;

String(a);

console.log(typeof a); //number

console.log(a); //123

2.调用String（）函数，并将被转换的数据作为参数传递给函数。

使用String（）做强制类型转换时，

对于Number和Boolean实际上就是调用的toString()方法

但是对于null和undefined，就不会调用toString()方法

它会将 null 直接转换为“null"将 undefined 直接转换为“undefined".

类型转换主要指，将其他的数据类型，转换为

String Number Boolean

强制类型转化number

字符串

纯数字的字符串，直接转换为数字

如果字符串中有非数字的内容，则转换为NaN(Not a Number)

如果字符串是一个空串或者是一个全是空格的字符串，就转换为0

Boolean值转换为数字number

true---->1

false---->0

Null----->0

undefined---->数字NaN

转换方式二:

- 这种方式专门用来对付字符串

- parseInt()把一个字符串转换为一个整数

//可以在parseInt()中传递一个第二个参数，来指定数字的进制a = parseInt(a,10);

- parseFloat() 把一个字符串转换为一个浮点数

parseFloat()作用和parseInt()类似，不同的是它可以获得有效的小数

parseInt()可以将一个字符串中的有效的整数内容取出来，然后转换为Number

a=”123a456px”;

a=parseInt(a); //a=parseInt(a)会把整数部分摘出来

console.log(typeof a); //number

console.log(a); //123

a=”b123a45px” 无法转换为整数

a=”123.456px”;

a=parseFloat(a);

console.log(typeof a); //number

console.log(a); //123.456

如果对非String使用parseInt()或parseFloat()

它会先将其转换为String然后再操作

其他进制的数字

十六进制数字以0x开头

八进制数字以0开头

二进制数字以0b开头

二进制只在火狐浏览器和Chrom浏览器中支持

转换为boolean

将其他的数据类型转换为Boolean

使用Boolean()函数

- 数字---> 布尔

- 除了0和NaN,其他都是true

- 字符串 ---> 布尔

- 除了空串，其他都是true

- null和undefined都会转换为false

- 对象也会转换为true

一元运算符

一元运算符，只需要一个操作数

+正号

- 正号不会对数字产生任何影响

-负号

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

- 对于非Number类型的值，它会将先转换为Number，然后再运算。

- 可以对一个其他的数据类型使用+,来将其转换为number它的原理和Number()函数一样

算数运算符

当对非Number类型的值进行运算时，会将这些值转换为Number然后再运算

任何值和NaN做运算都得NaN

+（加号）可以对两个值进行加法运算，并将结果返回

如果对两个字符串进行加法运算，则会做拼串，会将两个字符串拼接为一个字符串，并返回。

任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作。

-（减号)可以对两个值进行减法运算，并将结果返回

*(乘号）可以对两个值进行乘法运算

/（除号）可以对两个值进行除法运算

% 取运算(取余数)

任何值和NaN做运算都会变为NaN。

可以用+0.*1 /1将一个非Number型的数字转变为Number 型。原理和Number函数一样，用起来更加简单。

任何值做- * /运算时都会自动转换为Number

自增和自减

自增 ++

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

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

自增分成两种:后++(a++) 和前++(++a)

无论是a++ 还是 ++a，都会立即使原变量的值自增1

不同的是a++ 和++a的值不同

a++的值等于原变量的值(自增前的值)

++a的值等于新值 (自增后的值)

自减 --

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

自减分成两种:后--(a-- ) 和前--(--a)

无论是a-- 还是--a 都会立即使原变量的值自减1

不同的是a-- 和--a的值不同

a-- 是变量的原值 (自减前的值)

--a 是变量的新值 (自减以后的值)

19逻辑运算符（&&与 ||或！非）

&& 与

&&可以对符号两侧的值进行与运算并返回结果

运算规则

- 两个值中只要有一个值为false就返回false

只有两个值都为true时，才会返回true

- JS中的“与”属于短路的与，

如果第一个值为false，则不会看第二个值

|| 或

可以对符号两侧的值进行或运算并返回结果

运算规则:

- 两个值中只要有一个true，，就返回true

- 如果两个值都为false，才返回false

- JS中的“或”属于短路的或如果第一个值为true，则不会检查第二个值

JS中为我们提供了三种逻辑运算符

非！

- !可以用来对一个值进行非运算

所谓非运算就是值对一个布尔值进行取反操作，true变false，false变true

- 如果对一个值进行两次取反，它不会变化

- 如果对非布尔值进行取反，则会将其转换为布尔值，然后再取反

- 所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值可以为一个任意数据类型取两次反，来将其转换为布尔值，

- 原理和Boolean()函数一样

var b=10;

b=!!b; //用两个取反将Number型转换为了boolean类型

20非布尔值的与或运算（需要记忆）

对于非布尔值进行与或运算时，

会先将其转换为布尔值，然后再运算，并且返回原值

与运算:

- 如果第一个值为true，则必然返回第二个值

如果第一个值为false，则直接返回第一个值

或运算

- 如果第一个值为true，则直接返回第一个值

- 如果第一个值为false，则返回第二个值

赋值运算符(共有6个）

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

22关系运算符

通过关系运算符可以比较两个值之间的大小关系，

如果关系成立它会返回true，如果关系不成立则返回false

有 >大于号 >=大于等于号 < 小于号 <= 小于等于号

任何值和NaN做任何比较都是false

非数值的情况

- 对于非数值进行比较时，会将其转换为数字然后在比较

- 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较

- 而会分别比较字符串中字符的Unicode编码

比较两个字符串时，比较的是字符串的字符编码//console.log("a"<"b");//true

//比较字符编码时是一位一位进行比较//如果两位一样，则比较下一位，所以借用它来对英文进行排序

23unicode编码

在字符串中使用转义字符输入Unicode编码 \u四位编码

在网页中使用Unicode编码

&#编码; 这里的编码需要的是10进制，也是四位数字

24相等运算符（== 、!= 、 ===、!==)

相等运算符用来比较两个值是否相等，如果相等会返回true，否则返回false

使用 == 来做相等运算

当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较

undefined 衍生自 null

所以这两个值做相等判断时，会返回true

NaN不和任何值相等，包括他本身

可以通过isNaN()函数来判断一个值是否是NaN

不相等用米判断两个值是否不相等，如果不相等返回true，否则返回false

使用!= 来做不相等运算

- 不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false

全等（===）用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换如果两个值的类型不同，直接返回false

不全等（！==）用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换如果两个值的类型不同，直接返回true

条件运算符也叫三元运算符

语法:

条件表达式?语句1:语句2;

执行的流程:

条件运算符在执行时，首先对条件表达式进行求值，

如果该值为true，则执行语句1，并返回执行结果如果该值为false，则执行语句2，并返回执行结果

26运算符的优先级

就和数学中一样，在JS中运算符也有优

比如: 先乘除后加减

在JS中有一个运算符优先级的表，*

在表中越靠上优先级越高，优先级越高越优先计算，

必如果优先级一样，则从左往右计算。

- 但是这个表我们并不需要记忆，如果遇到优先级不清楚

可以使用()来改变优先级

&的优先级高于|，&&的优先级高于||

代码块

在JS中可以使用[来为语句进行分组，同一个[中的语句我们称为是一组语句它们要么都执行，要么都不执行，一个{}中的语句我们也称为叫一个代码块在代码块的后边就不用再编写;了

{ 代码 }

JS中的代码块，只具有分组的的作用，没有其他的用途。代码块内容的内容，在外部是完全可见的。

if语句

语句的分类（条件判断语句，条件分支语句，循环语句）

条仟判断语:

使用条件判断语句可以在执行某个语句之前进行判断，

如果条件成立才会执行语句，条件不成立则语句不执行

if语句

语法一:

if(条件表达式)

语句

if语句在执行时，会先对条件表达式进行求值判断

如果条件表达式的值为true，则执行if后的语句，

如果条件表达式的值为false，则不会执行if后的语句。

f语句只能控制紧随其后的那个语句，

如果希望if语句可以控制多条语句，

可以将这些语句统一放到代码块中if语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句

语法二：

if(条件表达式){

语句......

}else{

语句....

}

语法三:

if...else if,..else

当该语句执行时，会从上到下依次对条件表达式进行判断

如果值为true，则执行当前语句。

如果值为false，则继续向下判断

如果所有的条件都不满足，则执行最后一个else后的代码块

该语句中，只会有一个代码块被执行，一旦代码块执行就不会执行别的条件对应的语句了

js练习

prompt()可以弹出一个提示框，该提示框中会带有一个文本框，

用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数

该字符串将会作为提示框的提示文字

*用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容

var score=prompt(“请输入小明的期末成绩”);

prompt()函数的返回值是String类型的

var num1=+prompt(“请输入第一个数：”);

switch...case..语句

在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较如果比较结果为true，则从当前case处开始执行代码。

当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字,这样可以确保只会执行当前case后的语句，而不会执行其他的case如果比较结果为false，则继续向下比较

如果所有的比较结果都为false，则只执行default后的语句

switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择

switch(num){

case 1:

console.log(‘一’);

break; //使用break可以退出switch语句

case 2:

console.log(‘二’);

break; //使用break可以退出switch语句

default:

console.log(‘san’);

break; //使用break可以退出switch语句

}

While循环

while(true){

alert(n++);

break;

}

语法:

while(条件表达式){

语句...

while语句在执行时

先对条件表达式进行求值判断，如果值为true，则执行循环体，

循环体执行完毕以后，继续对表达式进行判断如果为true，则继续执行循环体，以此类推如果值为false，则终止循环

//像这种将条件表达式写死为true的循环，叫做死循环

//该循环不会停止，除非浏览器关闭，死循环在开发中慎用

//可以使用break，来终止循环

while(true){

alert(n++);

break;

}

创建一个循环，往往需要三个步骤

1.创初始化一个变量

2.在循环中设置一个条件表达式

3.定义一个更新表达式，每次更新初始化变量

do...while循环

语法:

do{

语句...

}while(条件表达式)

执行流程:

do...while语句在执行时，会先执行循环体，循环体执行完毕以后，在对while后的条件表达式进行判断,如果结果为true，则继续执行循环体，执行完毕继续判断以此类推如果结果为false，则终止循环

实际上这两个语句功能类似，不同的是while是先判断后执行而do...while会先执行后判断，do...while可以保证循环体至少执行一次,而while不能

在for循环中，为我们提供了专门的位置用来放三个表达式:

1.初始化表达式

2.条件表达式

3.更新表达式

for循环的语法:

for(1初始化表达式;2条件表达式;4更新表达式){

3语句...

}

for循环的执行流程:

1执行初始化表达式，初始化变量

2执行条件表达式，判断是否执行循环。如果为true，则执行循环,如果为false，终止循环

4执行更新表达式，更新表达式执行完毕继续重复2

for循环中的三个部分都可以省略，也可以写在外部

如果在for循环中不写任何的表达式，只写两个；

此时循环是一个死循环会一直执行下去，慎用

for(;;)

{

alert("hello");

}

//测试如下的程序的性能

//在程序执行前，开启计时器

//console.time("计时器的名字")可以用来开启一个计时器//它需要一个字符串作为参数，这个字符串将会作为计时器的标识console.time("test");

continue和break计时器

break关键字可以用来退出switch或循环语句

不能在if语句中使用break和continue.

break关键字，会立即终止离他最近的那个循环语句

label:循环语句

使用break语句时，可以在break后跟着一个label

这样break将会结束指定的循环，而不是最近的

continue关键字可以用来跳过当次循环同样continue也是默认只会对离他最近的循环循环起作用

break可以跳出全部的循环

console.time("test");开启一个计时器

console.timeEnd("test");

用来停止一个计时器，需要一个计时器的名字作为参数。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/480277