JavaScript基础学习（1）

最新推荐文章于 2022-03-01 23:41:03 发布

易文Ev

最新推荐文章于 2022-03-01 23:41:03 发布

阅读量131

点赞数

文章标签： js

本文链接：https://blog.csdn.net/m0_51766302/article/details/114991472

版权

java script基本概念

概念：解释型预言程序执行之前，不需要对代码进行编译，在运行时边解析边执行的语言

作用：

HTML提供网页上显示的内容
CSS美化网页（样式）
JavaScript控制网页行为

书写格式：

1.行内样式：写在标签内部
2.内嵌样式（内联样式）：写在一对head标签中
3.外链样式：写在一个单独的.js文件中，再导入进来

tips：

不推荐直接将Javascript代码书写到标签内部
默认情况下浏览器会从上至下解析网页，所以如果JavaScript写道一对head标签中，并且需要通过JavaScript代码操作界面上的元素，那么就不能直接书写JavaScript代码，否则无效
如果想将JavaScript代码写到一对head标签中，并且需要在JavaScript代码中操作界面上的元素，那么必须加上window.οnlοad=function（）{操作界面元素的JavaScript}
window.onload的含义：等到界面上所有的内容都加载完毕，再执行大括号中的代码
由于默认情况下浏览器会从上至下的解析网页，所以如果想通过JavaScript操作界面上的元素只需要等到元素被加载解析之后操作即可，所以还可以将JavaScript代码写在body结束标签之前
如果通过外链式导入.js文件，并且需要再.js文件中操作界面的元素，那么如果时head标签中导入的，必须在.js文件中加上 window.onload，如果是在body结束标签前面导入的，那么不用添加window.onload
如果需要在一对script标签中编写JavaScript代码，那么就不能同时通过script标签再导入其他的.js文件，否则书写的JavaScript代码无效

常见输出方式

1.通过弹窗的形式来输出

alert（需要输出的内容）//弹出一个警告框
confirm（需要输出的内容）
prompt（需要输出的内容）
tips：
1.如果需要输出的内容不是数字，那么必须通过单引号或者双引号括起来
2.在JavaScript中是严格区分大小写的
3.在编写JavaScript代码的时候，一定要记住每一句代码后面都需要添加一个分号，并且必须是英文的分号
4.当不写分号程序也能运行时，不是因为不需要分号，而是浏览器自动添加了分号，浏览器自动添加会消耗一定性能，并且有可能会添加错误

2.通过网页内容区域的形式来输出

document.write（需要输出的内容）
tips：
1.如果需要输出的不是数字，那么必须通过单引号或者双引号括起来

3.通过开发者工具控制台的形式来输出

console.log（需要输出的内容);//普通输出
console.warn(需要输出的内容);//警告输出
console.error(需要输出的内容);//错误输出
如果需要输出的不是数字，那么必须通过单引号或者双引号括起来

JavaScript基础

作用；

alert（需要输出的内容）;//弹出一个警告框
document.write（）;//向body中输出一个内容
console.log（）;//想控制台输出一个内容

1.可以将JavaScript代码编写到标签的onclick属性当中，点击按钮时，JavaScript代码才会执行
虽然可以写在标签的属性中，但属于结构与行为耦合，不方便维护，不推荐使用

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

<a href="javascript:;">...</a>
点超链接无反应，通过js实现一些功能

3.可以将js代码写道script标签中
4.可以将js代码编写到外部js文件中，然后通过script标签引入

写在外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制（推荐）
script标签一旦用于引入外部文件，就不能再编写代码，即使编写了浏览器也会忽略，如果需要则可以再创建一个新的script标签用于编写内部代码

/* */：js注释，多行注释
注释中的内容不会被执行，但是可以在源代码中查看
//…单行注释，//后为注释内容，养成编写注释的习惯

js会自动忽略多个空格和换行，可利用空格和换行对代码进行格式化

字面量和变量

字面量：都是一些不可改变的值，都可以直接使用，但一般都不会直接使用字面量

变量：用于保存字面量，且变量的值可以任意改变，变量更加方便使用，所以在开发中都通过变量去保存一个字面量，很少直接使用字面量

1.声明变量：

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

2.为变量赋值

var a；
a=    ；

同时声明和赋值

var a=         ；

可以通过变量对字面量进行描述

标识符

标识符：在js中，所有由我们自主命名的都可称为标识符
如：变量名，函数名，属性名

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

标识符中可以含有字母数字下划线美元符
标识符不能以数字开头
标识符不能是js中的关键字或保留字
标识符一般都采用驼峰命名法（直观）
首字母小写，每个单词开头字母大写，其余小写
js底层保存标识符时实际上采用的Unicode编码，所以理论上UTF-8含有的内容都可以作为标识符

数据类型

数据类型：字面量类型
在js中一共有6种数据类型：String：字符串；Number：数值；Boolean：布尔值；Null：空值；Undefined：未定义；Object：对象；

其中String,Number,Boolean,Null,Undefined属于基本数据类型，Object属于引用数据类型

String字符串：在js中字符串需要使用引号括起来，使用双引号或者单引号均可，但是不能混合使用，引号不能嵌套双引号中不能再嵌套一个双引号，单引号中也不能放单引号

在字符串中可以使用\作为转义字符，当表示一些特殊符号时可以使用\进行转义

‘’ 表示’’
’ 表示‘
\n表示换行
\t制表符
\表示\

在js中所有的数值都是Number类型，包括整数和浮点数，可以使用一个运算符typeof来检查一个变量的类型语法

检查字符串时，会返回String
检查数值时，会返回Number

js中可以表示的数字的最大值 Number.MAX_VALUE;
如果使用Number表示的数字超过了最大值，则会返回一个Infinity（正无穷）-Infinity（负无穷）
使用typeof检查Infinity也会返回Number
在js中整数的运算基本可以保证精确，浮点运算可能得到一个不精确的结果

千万不要使用js进行精确度较高的运算

Boolean布尔值
布尔值只有两个

true：真
false：假

主要用于逻辑判断
使用typeof检查布尔值时，会返回Boolean

Null
Null类型的值只有一个就是null
null值专门用来表示一个为空的对象
使用typeof检查null值时，会返回object

Undefined
Undefined类型的值只有一个：undefined
当声明一个变量，但并不是给变量赋值的它的值就是undefined
用typeof检查undefined也会返回undefined

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

强制类型转换

强制类型转换：指将一个数据类型强制转换成其他的数据类型
类型转换主要是指将其他的数据类型转换为String，Number，Boolean

1.将其他数据类型转化为String

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

a=a.toString()

该方法不会影响到原变量，会将转换结果返回
注意：null和undefined没有toString。如果调用会报错

方式二：调用String（）函数，并将被转换的数据作为参数传递给函数

a=String(a)

使用String（）函数做强制转换时，对于Number和Boolean实际上就是调用toString方法（没区别），但对null和undefined就不会调用toString（），而是将null直接转换为“null”，将undefined直接转换为“undefined”

2.将其他数据类型转换为Number

方式一：使用Number（）函数
a=Number(a);

如果是纯数字的字符串，则直接将其转化为数字
如果字符串中有非数字的内容

布尔值转成数字
true转成1；false转成0
null转成数字0；
undefined 转成数字NaN

转换方式：（专门用于字符串）

parseInt（）把一个字符串转换成一个整数
可将一个字符串中的有效的整数内容取出来
parseFloat（）把一个字符串转换成一个整数
parseInt（）和parseFloat（）作用类似，parseFloat（）可以获得有效的小数
如果对非String’使用parseInt（）或parseFloat（）会先转化为String，然后操作。

其他进制的数字

在js中，如果需要表示16进制的数字，则需要以0x开头
如果需要表示8进制的数字，则需要以0开头
像070这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析
如果要表示二进制数字，则需要0b开头，但不是所有的浏览器都支持
可以在parseInt（）中传递一个第二个参数，来指定数字的进制

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

使用Boolean（）函数

数字转布尔：除了0和NaN其余的都是true
字符串转布尔：字符串除了空串都是true
null转换成布尔：false
undefined转布尔：false
对象转布尔：true

算数运算符（操作符）

通过运算符可以对一个或多个值进行运算，并获取运算结果
例如：typeof是一个运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回

算术运算符：+ - * / %

当对非number类型的值进行运算时，会将这些值转换为Number然后运算
任何数和NaN运算结果都是NaN
如果对两个字符串进行加法操作，会做拼串操作，将两个字符串拼接成一个字符串，并返回
任何的值和字符串做加法运算都会先转换成字符串，再做拼串的操作
可以利用这一特点，来将一个任意的数据类型转换为String，只需要为任意的数据类型加一个“”即可转换为String
这是一个隐式的类型转换，由浏览器自动完成，也是调用String（）函数
任何值做减乘除运算时，都会自动转换成Number
可以通过为一个值减0/乘1/除1来将其转换为Number
原理和Number（）函数一样，使用起来更加简单
%取模运算（取余数）

一元运算符

只需要一个操作数

“+”正号，正好不会对数字产生任何影响
“-”负号，负号可以对数字取反
对于非Number类型的值，会先将其转换成Number，然后再运算
可以对其他的数据类型使用+，来将其转换成Number，原理和Number函数一样

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

对于一个变量自增以后，原变量的值会立即增加1
a++ ：使a自增1
自增分为两种：
a++（后++）：值等于原变量的值（自增前的值）
++a（前++）：值等于原变量的新值（自增后的值）
无论是哪种副都会使原变量的值自增1，不同的是a++和++a的值不同
自减：通过自减可以使变量在自身的基础上减1
自减分为两种：
a–：值等于原变量的值（自减前的值）
–a：值等于原变量的新值（自减后的值）
无论那种都会使原变量的值自减1，不同的是a–和--a的值不同

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

！非
可以用来对一个值进行非运算，所谓非运算就是值对一个布尔值进行取反操作
如果对一个值进行两次取反，它不会变化
如果对非布尔值进行运算，则会有其转换为布尔值，然后再取反，利用该特点来将一个其他的数据类型转换为布尔值，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean函数一样
&& 与
可以对符号两侧的额值进行运算并返回结果
如果两个值都是true，则返回true
只要有一个false，就返回false
js中的与属于短路的“与”如果第一个值为false，则不会看第二个值
|| 或
对付两侧的值进行或运算并返回结果
两个都是false会返回false
只有一个true，就会返回true
第一个值为true，则不会检查第二个值

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

与运算：

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

或运算：

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

赋值运算值

=
可以将符号右侧的值赋值给符号左侧的变量
+=
a+=5等价于a=a+5
-+ *= /= 同理

关系运算符
通过关系运算符可以比较两个值的大小关系
如果关系成立它会返回true，如果关系不成立则返回false

大于号
判断符号左侧的值是否大于右侧的，如果关系成立，返回true
如果关系不成立，则返回false
= 大于等于
判断符号左侧的值是否大于等于右侧的
<= 小于等于
非数值的情况：对于非数值进行比较时
比较两个字符串时，比较的是字符串的字符编码
比较字符编码时是一位一位进行比较
如果两位一样则比较下一位，所以借用它的英文排序，比较中文没有意义
如果比较两个字符串型的数字，可能不会得到预期的结果，
注意：比较两个字符串型的数字时一定一定要转型

Unicode编码表
在字符串中使用转义字符输入Unicode编码：\u四位编码
在网页中使用Unicode编码：&#编码；（需要的编码是十进制）

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

使用==来做相等运算
当使用==来比较两个值时，如果值的类型不同，就会自动进行类型转换，使其转换为相同的类型，然后再比较
特殊 console.log(null==0);//false
undefined衍生自null，所以两个值做相等判断时，会返回true
NaN不和任何值相等，包括本身
可以通过isNaN（）函数来判断一个值是否是NaN
如果该值是NaN，则返回true，否则返回false

不相等：
作用：用来判断两个值是否不相等，如不相等则返回true，否则返回false