JavaScript基础-01数据类型、变量、函数

玄德公笔记

已于 2022-11-18 23:58:49 修改

阅读量1.1k

点赞数

分类专栏： # JavaScript基础文章标签： javascript 数据类型逻辑运算变量函数

于 2022-04-29 23:25:28 首次发布

本文链接：https://blog.csdn.net/xingzuo_1840/article/details/123549713

版权

JavaScript基础专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1. 从一个脚本开始

点击按钮执行JavaScript脚本，并输出。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>

<p>谜面：小鸟归巢</p>
<button onclick="myFunction()">查看答案</button>
<p id="aaa"></p>
<script>
function myFunction(){
	var name="关羽";
	document.getElementById("aaa").innerHTML=name;
}
</script>

</body>
</html>

效果

点击“查看答案”显示出谜底

在这里插入图片描述

2. 数据类型

注意：JavaScript 拥有动态类型！

2.1 字串型（string）

定义字串

var name="LiuBei"

用位置索引访问字串

var character = name[3];

输出 B

字串长度

语法

变量.length

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>hello world</title> 
</head>
<body>

<script>
var txt = "Hello World!";
document.write("<p>" + txt.length + "</p>");
</script>

</body>
</html>

2.2 数字型（number）

2.2.1 定义和赋值

只有一种数字类型，可以是小数也可以是整数

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

用科学技术法表示

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

2.2.2 算数运算

下表已知：y=5

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取余	x=y%2	1	5
++	自增	x=++y	6	6
++	自增	x=y++	5	6
–	自减	x=–y	4	4
–	自减	x=y–	5	4

2.2.3 赋值运算

+=、-+、*=、/=、%=、=

2.2.4 字串数字混合计算

x=5+5; //10
y="5"+5; //10
z="Hello"+5; //Hello5

2.3.5 比较运算

下表已知： x=10 和 y=5

运算符| 描述| 比较| 返回值|
|:-😐:-😐:-😐:-😐:-😐
|== |等于 |x8 |false |
|= |绝对等于（值和类型均相等）| x===“5” |false|
|!= |不等于 |x!=8| true|
|!== |不绝对等于（值和类型有一个不相等，或两个都不相等） |x!==“5” |true|
|> |大于 |x>8| false
|< |小于 |x<8 |true
|>= |大于或等于| x>=8 |false
|<= |小于或等于| x<=8 |true

2.3.6 逻辑运算

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

2.3 布尔值（boolean）

var x=true;
var y=false;

2.4 常用对象（object）

Array、Date、null 属性都显示 object

typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object

2.4.1 一般对象（Object）

定义对象

var person={
name : "关羽",
age  : 20,
email   :  "guanyu@xishu.com"
};

访问对象属性

name=person.name;
name=person["name"];

对象方法

定义对象方法

var person={
	name : "关羽",
    age  : 20,
    email   :  "guanyu@xishu.com",
	fullInfo : function(){
		return this.name + " " + this.age + " " + this.email
	}
}

使用

fullInfo =person.fullInfo();

2.4.2 数组（Array）

var name=new Array();
name[0]="刘备";
name[1]="关羽";
name[2]="张飞";

或

var name=new Array("刘备","关羽","张飞");

或

var name=["刘备","关羽","张飞"];

2.4.5 Data

Date()      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

函数	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

2.4.4 null

null的数据类型为 object

2.5 undefined

未定义变量的数据类型为 undefined

3. 变量

3.1 基本使用

声明变量

var name;

注意：

没有赋值时，值为 undefined
赋值后，若重新声明变量，变量值不变

赋值

name = "关羽"

给未定义的变量赋值

可以被 delete 删除（var 定义的不可被删除）

delete var1;

3.2 变量类型

3.2.1 获取变量（数据）类型

使用

typeof "John"                 // 返回 string 
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>

<p> typeof 操作符返回变量、对象、函数、表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
    typeof "john" + "<br>" +
    typeof 3.14 + "<br>" +
    typeof NaN + "<br>" +
    typeof false + "<br>" +
    typeof [1,2,3,4] + "<br>" +
    typeof {name:'john', age:34} + "<br>" +
    typeof new Date() + "<br>" +
    typeof function () {} + "<br>" +
    typeof myCar + "<br>" +
    typeof null;
</script>

</body>
</html>

3.2.2 声明变量类型

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

JavaScript 拥有动态类型。但如果不定义，有的时候系统会"误会"。

3.3 Undefined 和 Null

Undefined
表示变量不含有值。
该变量类型为 Undefined
Null和Undefined的区别

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

3.4 变量的类型转换

4. 函数

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>hello world</title> 
</head>
<body>

<p id="demo"></p>
<script>
//定义函数
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3); //引用函数
</script>

</body>
</html>

效果

玄德公笔记

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript基础-01数据类型、变量、函数

1. 从一个脚本开始2. 数据类型2.1 字串型（string）2.2 数字型（number）定义和赋值算数运算赋值运算字串数字混合计算比较运算逻辑运算2.3 布尔值（boolean）2.4 常用对象（object）一般对象（Object）数组（Array）Datanull2.5 undefined3. 变量3.1 基本使用3.2 变量类型获取变量（数据）类型声明变量类型3.3 Undefined 和 Null3.4 变量的类型转换4. 函数......
复制链接

扫一扫