JavaScript基础知识(一)

喜溯

已于 2023-06-21 18:31:43 修改

阅读量108

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-02-22 22:04:44 首次发布

本文链接：https://blog.csdn.net/qq_56845026/article/details/129171292

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

起源

JavaScrit诞生于1995年，它的出现主要是用于处理网页中的前端验证。
所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。

【减轻服务器的负载】

JavaScript的功能不限于前端验证，动画效果…

在这里插入图片描述

JS的HelloWorld

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			alert("HelloJavaScript！")
			document.write("通过document向body添加的内容。")
			console.log("控制台输出！")
		</script>	
	</head>
	<body>
	</body>
</html>

JS的编写位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/script_base.js">
			alert("內部js！无效！")
		</script>
		<script type="text/javascript">
			// alert("內部js！")
		</script>	
	</head>
	
	<body>
		<!-- 虽然可以将js代码写到标签的属性onclick中，但是他们属于结构和行为耦合，不方便维护，不推荐使用 -->
		
		<button type="button" onclick="alert('点我干嘛~~~')">点击弹窗</button>
		
		<!-- 可以将js代码写在超链接的href属性中，点击超链接时会执行js代码 -->
		<a href="javascript:alert('a标签中的js!')">点我一下试试</a>
		<a href="javascript:;">点我没用啊</a>
		
	</body>
</html>

JS的基本语法

JS的单行注释// 多行注释/**/
JS中严格区分大小写
JS中每一条语句以分号(;)结尾

--如果不写分号，浏览器会自动添加，但是会消耗一些系统资源。而且有时候，浏览器会加错分号，所以在开发中必须写。
JS中会忽略多个空格和换行，所有我们可以利用空格和换行对代码进行格式

字面量和变量

字面量：都是一些不可改变的值，如1,2,3,4，但是一般不会直接使用字面量

变量：变量可以用来保存字面量，值可以更改，开发中多使用。

【通过变量对字面量进行描述】

**声明变量：**var a ;若未赋值使用则默认值组织undefined

否则报错：Uncaught ReferenceError: a is not defined

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

命名规则如下：①可以含有字母、数字、$、_

②不能以数字开头；

③不能是ES中的关键字或保留字

④建议使用驼峰命名法，首字母小写，每个单词开头字母大写，其余字母小写。【规范】

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

eg: var 锄禾日当午=119；实际上不会如此使用。

在这里插入图片描述

其他不建议使用的标识符

在这里插入图片描述

数据类型

数据类型指的就是字面量的类型，JS中共有6中数据类型。

String 字符串 var str=“hello”; 必须要有引号（单/双），否则可能会是某一个变量的名。嵌套，使用双单混合使用。
- 硬要使用两个双引号，使用\作为转义字符
```
\"表示"     \'表示'     \n表示换行   \\表示\   \\\\表示\\
```
Number 数值在JS中所有的数值都是Number类型，包括整数和浮点数(小数)

区别数字123和字符串123,可以使用typeof 来检查一个变量的类型

var a=123;

var b="123";

console.log(typeof a);   --->number

console.log(typeof b);    --->string

JS中可以表示的数字的最大值：Number.MAX_VALUE=1.7976931348623157e+308

Number.MAX_VALUE * Number.MAX_VALUE = Infinity（正无穷）

-Number.MAX_VALUE * Number.MAX_VALUE = -Infinity（负无穷）

如果使用Number表示的数字超过了最大值，则会返回一个Infinity（正无穷）可以直接使用 a=Infinity,使用typeof infinity返回number

Number.MIN_VALUE = 5e-324; 表示0以上的最小值

NaN:是一个特殊的数字 Not A Number 使用typeof NaN返回number

var str="a"*"a";
console.log(str);---》NaN

在JS中整数的运算基本可保证精确，

如果使用JS进行浮点运算，可能得到一个不精确的结果。如下

var str=0.1+0.2;

alert(str);
	
0.30000000000000004

所有语言都存在此类问题，但是有其对应的解决方法，JS未设置，所以千万不要使用JS进行对精确度要求表较高的运算。

尤其有关于钱的计算，最好放在服务器计算

attention

Boolean 布尔值做逻辑判断

使用typeof 检查一个布尔值时返回boolean
Null 空值

Null类型的值只有一个，就是null,专门用来表示一个为空的对象

使用typeof 检查一个null值时返回Object

Undefined 未定义值唯一：undefined

声明变量，但是并不给变量赋值时，变量的值就是undefined

使用typeof 检查一个undefined值时返回undefined。

Object 对象

【前五种是基本数据类型，Object是引用数据类型】

强制类型转换

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

🙉

将其他类型的转换为String

方式一：

调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回。null和undefined不支持，没有此方法。

	var str=10;
	str.toString();
	alert(typeof str);    --->number

	var str=10;
	str=str.toString();
	alert(typeof str);    --->string

var str=true;
str=str.toString();
console.log(typeof str);

方式二：

调用String()函数，并将被转换的数据作为参数传递给函数。

	var str=null;
	str=String(str);
	console.log(typeof str);  --->string

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

对于null和undefined直接将其转换为"null" 、 “undefined”

🙉将其他数据类型转换为Number

方式一：使用Number()函数

字符串–》数字
- 如果是纯数字的字符串，则直接将其转换为数字
- 如果字符串中有非数字内容，则转换为NaN。
- 如果是一个空串或者是一个全是空格的字符，则转换为0.

var str="a11";
str=Number(str);
console.log(typeof str);   -->Number
console.log(str);   --->NaN

布尔—》数字 TRUE 转成 1 FALSE 转成 0
undefined --》数字 NaN
null --》数字 0

方式二：这种方式专门用来对付字符串。如将“100px“提取其中的数据

parseInt():将一个字符串中的有效的整数内容取出来，然后转换为Number，只能是数字开头。

var str="11p";
str=parseInt(str);
console.log(str);  11

不读的情况：a123 —》NaN

注意：123a445da----123 123.111—>123

parseFloat():含小数

【对于非String使用parseInt()或parseFloat()，它会先将其转换为String，然后操作】

var a=true;
alert(parseFloat(a));   --》NaN   等价于parseFloat("true");

其他进制的数字

在js中，如果需要表示16进制的数字，则需要以0x开头

表示8进制的数字，则需要以0开头

如果要表示2进制的数字，则需要以0b开头，但不是所有的浏览器都支持

var a="070";
a=parseInt(a)
alert(a);

在IE8中是56，其他的浏览器中是70.

解决方案：可以在parseInt()中那个传递第二个参数，来指定数字的进制。

var a="070";
a=parseInt(a,10);
alert(a);

🙉转换为Boolean

将其他的数据类型转换为Boolean，调用Boolean()函数来转换

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

【注意：typeof 是一个运算符，可以用来获得一个值的类型，它会将该值的类型以字符串的形式返回。】

	var a=190;
	var result = typeof a;
	console.log(result);   -->number
	console.log(typeof result);   -->string

相当于result=“number”

方式二：（隐式类型转换）

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

var a="hello"；
a=!!a;	//true

算数运算符

当对非Number类型的值进行运算时，会将这些值转换为Number然后再运算；任何值跟NaN做运算都的NaN（字符串做拼串处理）。

+:可以用来拼串。

任何值和字符串做加法运算，都会转换为字符串再做拼串。

利用这个特点，我们只需要为任意的数据卡类型+一个"" 即可将其转换为String。这是一种隐式的类型转换，由浏览器自动完成。实际上它也是调用的String()函数。

var str=1+2+"3";	//33""
var str="3"+2+1;	//"321"
alert(str);

var a=190;
a=1+false;  //1
a=1+true;	//2
a=1+null;	//1
a=1+NaN;	//NaN

-：注意

	var str=10-"1";
	alert(str);

	var str=2*undefined;	//NaN  <--- 2*NaN

/:不会做整除 %：取模

任何值做- * /运算时都会自动转换为Number。利用这一特点做隐式的类型转换，可以通过为一个值 -0 *1 /1 来将其转换为Number。原理和Number()函数一样。

一元运算符

只需要一个操作数

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

-：负号（符号取反）对于非Number类型的值，它会将其先转换为Number，然后再运算。

var a=true;
a=-a;
alert(a);	//-1

【一元运算符的+的优先级高于二元的+】

var a=true;
	a=1+ +"2"+3;
	alert(a);	//6

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

逻辑运算符

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

与运算

【如果第一个值为true，则返回后边的–》短路现象

如果第一个值为false,则返回第一个值。

】

true && true [与运算：如果两个值都为true,则返回后边的]

var a=true;
a=1&&2;
alert(a);	//2

	var a=true;
	a=2&&1;
	alert(a);	//1

[与运算：如果两个值中有false,则返回靠前的false—》短路现象]

	//false    &&	true
	var a=true;
	a=0&&1;		//0
	a=1&&0;		//0
	
	//false && false
	a=NaN&&0;	//NaN
	a=0&&NaN;	//0
	alert(a);

或运算

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

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

赋值运算

+= -= *= /= %=

关系运算符

关系成立返回true，不成立返回false。

非数值的情况:

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

任何值和NaN做比较都是false

alert(1>true);		//false
alert(1>=true);		//true
alert(1>null);		//true
alert(1>"0");		//true
alert(1>"hello");	//falsse  相当于1>NaN
alert(1>NaN);		//false
alert(true>false);	//true

如果符号两侧的值都是字符串，比较的是字符串的编码。

问题引入：为什么会这样呢？

alert("1"<"5");		//true
alert("11"<"5");	//true

解释：

	//比较两个字符串时，比较的是字符串的字符编码
	alert("a"<"b");		//true
	
	//比较字符编码时是一位一位进行比较
	// 如果两位一样，则比较下一位，所以借用它来对英文排序
	alert("abc"<"bcd");		//true
	alert("abc"<"acb");		//true
	
	//比较中文是没有意义
	alert("戒">"我");		//true  0625>0624
	
	//问题：如果比较的两个字符串型的数字，可能会得不到不可以预期的结果。
	alert("1111111"<"5");		//true
	// 应该将所有的数据进行转换
	alert("124"<+5);		//false

Unicode编码表

在JS中的使用方式：在字符串中使用转义字符输入Unicode编码。 “\u2620”。

在网页中的使用方式：&#编码，此处的编码需要的是十进制。

$#9760;

☠

相等运算符

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

使用==来做相等运算
- 如果两个值的类型不同，则会自动进行类型转换，将其转换为相同的类型，大多数情况会都转换为Number类型

在这里插入图片描述

🙉undefined衍生自null，所以这两个值做相等判断时，会返回true。

🙉NaN不喝任何值相等，包括它本身。

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

var b=NaN;

alert(isNaN(b));  -->true

不相等：

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

全等和不全等：

在这里插入图片描述

条件运算符

比较三者中的最大值

在这里插入图片描述

运算符的优先级

越在上面优先级越高，优先级一样，从左往右计算。不清楚优先级可以通过（）改变优先级

在这里插入图片描述

代码块

在这里插入图片描述

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

if语句

prompt()可以弹出一个输入框，该函数需要一个字符串作为参数，作为提示框的提示文字。

var age=prompt("请输入你的年龄：");

【注意：prompt函数的返回值是String类型，+prompt()–>返回Number类型】

switch语句

它比较用的是全等

方式一：

在这里插入图片描述

方式二：

在这里插入图片描述

【true与score>=60的返回值作比较】

while循环

document是在网页中写东西，因此需要用网页中的换行。

在这里插入图片描述

for循环

for(; ; ) {} 死循环

break和continue

不能单独在if中使用break。

默认情况下，break只会跳出最近的循环，若想跳出最外层的循环可以给循环命名。

hello:
	for(var i=0;i<5;i++){
		console.log("@外层循环："+i);
		for(var j=0;j<5;j++){
			break hello;
			console.log("内层循环："+j);
		}
	}

测试代码效率

console.time(“计时器的名字”) 可以用来开启一个计时器。这个字符串将会作为计时器的标识。

console.timeEnd(timer)用来停止一个计时器，需要一个计时器的名字作为参数。

Math.sqrt(i);对i开方

喜溯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础知识(一)

JavaScript基础知识(一)
复制链接

扫一扫

专栏目录

JavaScript基础知识(一)

文章目录

起源

JS的HelloWorld

JS的编写位置

JS的基本语法

字面量和变量

数据类型

强制类型转换

其他进制的数字

算数运算符

一元运算符

逻辑运算符

赋值运算

关系运算符

Unicode编码表

☠

相等运算符

条件运算符

运算符的优先级

代码块

if语句

switch语句

while循环

for循环

break和continue

测试代码效率