JavaScript学习笔记（一）

最新推荐文章于 2024-05-21 21:29:52 发布

肥猫说

最新推荐文章于 2024-05-21 21:29:52 发布

阅读量118

点赞数

分类专栏： Javascript 文章标签： undefine和null的区别

本文链接：https://blog.csdn.net/qq_39278477/article/details/99674700

版权

Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. JavaScript输出

参考资料：https://www.cnblogs.com/MockingBirdHome/p/3398440.html

JavaScript 没有任何打印或者输出的函数。

1.1 javascript显示数据

JavaScript 可以通过不同的方式来输出数据：

使用**document.write()**方法将内容写到 HTML 文档中。
使用 window.alert() 弹出警告框。
使用innerHTML写入。
使用**console.log()**将内容写到浏览器控制台。

1.1.1 使用document.write()

可以使用document.write()方法将信息直接写到HTML文档中，下面例子，输入系统当前时间：

<!DOCTYPE html>
<html>
	<body>

		<h1>使用document.write()输入内容</h1>
		<p>我的第一个段落。</p>

		<script>
			document.write(Date());
		</script>

	</body>
</html>

注意在：请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write()，整个 HTML 页面内容将被覆盖。

内容被覆盖的例子：

<!DOCTYPE html>
<html>
	<body>

		<h1>要被覆盖</h1>
		<p>点击按钮就会被覆盖</p>
		<button onclick="myFunction()">点我</button>

		<script>
			function myFunction() {
   				document.write(Date());
			}
		</script>

</body>
</html>

1.1.2 使用window.alert()

下面例子：窗口弹出一个运算结果等于11的警告框：

<!DOCTYPE html>
<html>
	<body>
        
		<h1>使用window.alert()显示信息</h1>
		<p>我的第一个段落。</p>
        
		<script>
			window.alert(5 + 6);
		</script>
        
	</body>
</html>

1.1.3 使用innerHTML()

如果要从javascript中访问HTML标签元素，可以使用innerHTML()方法。具体用法为：document.getElementById(“HTML标签元素的id号”).innerHTML()，使用 “id” 属性来唯一标识 HTML 元素，并 innerHTML 来获取或插入元素内容。

下面例子：把id为demo的HTML标签内容该为“修改后的内容”：

<!DOCTYPE html>
<html>
	<body>
        
		<h1>使用innerHTML显示信息</h1>
		<p id="demo">初始内容</p>
        
		<script>
			document.getElementById("demo").innerHTML = "修改后的内容。";
		</script>
        
	</body>
</html>

注意：使用innerHTML()方法写入信息的时候被，写写入的信息会覆盖之前的信息。

1.1.4 使用console.log()

在浏览器的开发者模式中可以查看到用console.log()写入的内容：

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>使用console.log()</title> 
	</head>
	<body>
	
	<h1>我的第一个 Web 页面</h1>
	<p>浏览器开发者模式输出a+b的结果。</p>
        
	<script>
		a = 5;
		b = 6;
		c = a + b;
		console.log(c);
	</script>
	
</body>
</html>

主要是方便调式javascript用的, 在浏览器开发者模式的console中可以看到页面中输出的内容。

2 javacript注释

单行注释：以//开头；
多行注释：以 /* 开始，以 */结束；

如果不能确定浏览器是否支持JavaScript脚本，那么可以使用HTML提供的注释符号进行验证。HTML的注释是以<--开始以-->结束，如果在HTML的<--注释-->中编写javascript脚本，如果浏览器不支持javascript脚本，那么它就会把javascript脚本当作注释的内容处理掉。

使用javascript脚本在页面输出一个字符串内容，将javascript脚本卸载HTML的注释中，如果浏览器支持javascript，那么页面将会输出javascript脚本编写的字符串内容，否则就不会输入这个字符串。

<script>
<!--
document.write("浏览器支持JavaScript脚本!");
//-->
</script>

**注意：**注释行结尾处的 // 是 JavaScript 注释符号。这可以避免 JavaScript 执行 –> 标签。

3 javascript变量

3.1 javascript变量的命名规则

必须以字母开头
也能以 $ 和 _ 符号开头（不推荐这么做）
变量名称对大小写敏感（a和 A 是不同的变量）

3.2 变量的声明

我们使用 var 关键词来声明变量：

var carname;

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x=new Number;
var y=new Boolean;
var cars=new Array;
var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

3.2 javascripts数据类型

**值类型：**字符串（String）、数字（Number）、布尔（Boolean）、对空（null）、未定义（undefine）、Symbol；

**引用数据类型：**对象（Object）、数组（Array）、函数（Function）；

Symbol是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

字符串：字符串可以是引号中的任意文本可以使用单引号或双引号；
数字：JavaScript 只有一种数字类型。数字可以是整数，也可以是小数，同时太大或太小的数可以用科学记数法来表示；
布尔：布尔逻辑值只有true和false两个值；
数组：同java中的类似，创建数组主要有以下几种方式；

//创建名为cars的数组，并给数组内容赋值
var cars=new Array();
cars[0]="zahngsan";
cars[1]="lisi";
cars[2]="wangwu";

var arr1 = new Array('a', 'b', 'c'); //这是一个预定义的数组，在创建时初始化
var arr2 = ['a', 'b', 'c' ];  //同样是在创建时初始化，但是这种创建更为简洁直观
//这两种是创建空的数组
var arr3 = new Array( );
var arr4 = [ ];

就算变量定义的是数组格式，typeof返回的数据类型还是 object。如果要判断该对象是否为数组，可以使用以下两种方法：

//方法一：使用 isArray 方法
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

// 判断是否支持该方法
if (Array.isArray) {
    if(Array.isArray(cars)) {
        document.write("该对象是一个数组。") ;
    }
}

//方法二：使用 instanceof 操作符
if (cars instanceof Array) {
    document.write("该对象是一个数组。") ;
}

对象：对象由花括号分隔。在括号内部，对象的属性以名称和值的形式 (name : value) 来定义。多个属性由逗号分隔；

//创建对象时追加属性和方法
var Person={
    name :"lisa";
    age  ：18;
    sex  :"man"
}
var people = {
    name : 'Tom', 
    age : 21 ,
    eat : function(){  }    
}

//先创建对象再追加属性和方法
var people = new Object();
people.name = 'Tom';   
people.age = 21;  
people.eat = function(){  }

//访问Person对象属性的两种方式
name=Person.name;
name=Person["name"];

undefine：undefine类型只有一个值，即特殊的undefined。在使用var声明变量，但还没有对其进行初始化；

var message;  //message的值为undefined

null：null表示准备用来保存对象，还没有真正保存对象的值。从逻辑角度看，null值表示一个空对象指针。

注意：

一般而言，不存在需要显式地把一个变量设置为undefined值的情况。引入这个值是为了正式区分空对象指针与未经初始化的变量。
如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值。这样一来，只要直接检查null值就可以知道相应的变量是否已经保存了一个对象的引用。
无论在什么情况下都没有必要把一个变量的值显式地设置为undefined，可是同样的规则对null却不适用，换句话说，只要意在保存对象的变量还没有真正保存对象，就应该明确地让该变量保存null值。

undefine和null的区别：

undefined表示变量声明但未初始化时的值，null表示准备用来保存对象，还没有真正保存对象的值。从逻辑角度看，null值表示一个空对象指针。
未初始化定义的值用typeof检测出来是"undefined"(字符串)，而null值用typeof检测出来是"object"（字符串）。

console.log(typeOf undefined); //undefined
console.log(typeOf null);//object

转化为值时不一样：undefined为NaN ，null为0；

console.log(Number(undefined));//NaN
console.log(Number(10+undefined));//NaN
console.log(Number(null));//0
console.log(Number(10+null));//10

undefined===null;//false
undefined==null;//true

javascript会自动将声明是没有进行初始化的变量设为undifined，而null值不能通过javascript来自动赋值，也就是说必须要我们自己手动来给某个变量赋值为null；

3.2.1 javascripts拥有动态数据类型

javascripts拥有动态数据类型，也就是说相同的变量可用作不同的类型；

var x;        //x为undifine
var x=5;      //此时x为数字类型
var x="lisa"  //此时x为字符串类型

肥猫说

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录