JavaScript(一)：基础介绍、变量、数据类型与运算符

最新推荐文章于 2022-06-07 14:31:52 发布

算云烟

最新推荐文章于 2022-06-07 14:31:52 发布

阅读量160

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zxcbnm7089/article/details/110413992

版权

JavaScript 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、概述

1.什么是JavaScipt

JavaScript简称为JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行

Web前端三层：

结构层 HTML 定义页面的结构
样式层 CSS 定义页面的样式
行为层 JavaScript 用来实现交互，提升用户体验

2. JavaScript作用

在客户端动态的操作页面
在客户端做数据的校验
在客户端发送异步请求

二、基本用法

1.在HTML文件中引入js代码

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		alert("Hello World !");
		console.log("Hello World !");
		document.write("Hello World !");
	</script>
</head>

Js中常见输出信息的三种方式：

alert() 弹出警告框
console.log()输出到浏览器的控制台
document.write() 输出到页面

2. 转义符

由于字符串中经常会有一些特殊字符，比如换行、引号等，为了让字符能够正常显示，此时需要使用转义符

常用转义符：

\n 换行
\t 缩进
\"双引号
\'单引号

/**
 * 转义符
 */ 
// 反斜杠表示转义
console.log("Hello\nWorld"); 
// 输出的信息既可以放到双引号中，也可以放到单引号中
console.log('Hello\tWorld'); 
console.log("这是一个@邮箱符号");
console.log("这是一个\"双引号");
console.log('这是一个\'单引号');
// 双引号中可以直接写单引号，单引号也可以直接写双引号
console.log('这是一个"双引号');
console.log("这是一个'单引号");
// 在页面中换行必须使用<br>标签
document.write("JS<br>开发");

3. 注释

两种：

单行注释

以 //开始，以行末结束
多行注释

多行注释以/*开始，以*/ 结束

// 这是单行注释

/**
 * 此处是注释
 * 不会被执行
 * 多行注释可以同时让多行代码不生效
 */

4. 语法约定

编码规范：

区分大小写
代码缩进
建议每行只写一条语句，语句结束以分号结尾
如果不以分号结尾，则以行末作为语句的结束
代码执行顺序：从上往下，从左往右

5. 引用方式

引用JavaScript有三种方式：

内联方式

在页面中使用script标签，在script标签的标签体中编写js代码

script标签可以放在页面的任意位置，一般放在head中
```
<script type="text/javascript">
	js代码 
</script>
```

行内方式

在普通标签中编写js代码，一般需要结合事件属性，如onclick、onmouseover等

<input type="button" value="点我" onclick="alert('Hello')"/>
<!-- 使用超链接的href属性执行js时，必须添加javascript前缀 -->
<a href="javascript:alert('World')">我是超链接</a>

外部方式

使用单独的.js文件定义，然后在页面中使用script标签引入外部脚本文件
```
<script type="text/javascript" src="js文件的路径"></script>
```
- 注：如果某个script标签用于引入外部js文件，则该script标签的标签体中不能再写js代码

三、变量

1.变量

在程序运行过程中其值可以改变的量，是一个数据存储空间的表示，即给内存空间起别名

将数值通过变量进行存储，以便程序随时使用，通俗点来说，变量就是用来存储数据的;

JavaScript是弱变量类型的语言，声明变量只需要使用var关键字

语法：var 变量名=变量值;

2.命名规则

规则：

只能由数字，英文字母，下划线以及$符号组成，但不能以数字开头
不能使用javascript中的关键字
区分大小写
通常第一个单词首字母小写，其他单词首字母大写

规范：
驼峰命名法

第一个单词首字母小写，其他单词首字母大写，如变量名、方法名、函数名等
帕斯卡命名法

所有单词首字母大写，如类型名称、构造函数名称等

3.字面量

字面量（直接量）表示如何表达这个值，一般除去表达式外，给变量赋值时等号右边都可以认为是字面量。

简单来说就是字面上就能明白代码含义。

分类：

字符串字面量(string literal )，如var name=“tom”;
数组字面量(array literal)，如var array=[12,32];
对象字面量(object literal)，如var stu={name:”tom”,age:20}
函数字面量(function literal)

4.变量定义示例

// 定义变量的同时为变量赋值
var name = "tom"
// 再次为变量重新赋值
name = "jack";

// 定义（声明）变量
var sex;
// 为变量赋值
sex = "男";

// 同时声明多个变量
var num1,num2=5,num3=2;

// 等价于如下代码
var a=b=c=5;
// var a=5; 
// b=5;
// c=5;

四、数据类型

1.概述

变量中存储的是什么样的数据，那么这个变量就是什么样类型。

2.数据类型

类型	说明
string	存储一串字符,用双引号或单引号括起来
number	表示整数或浮点数
boolean	表示真假, true或false
undefined	变量被声明了，但未被赋值
null	空

3.判断数据类型

使用typeof判断数据类型

用法：typeof(变量) 或 typeof 变量

返回值：string、number、boolean、undefined、object

/**
 *  不同类型的数据
 */
var name = "小明"; // string
var age = 18; // number
var height = 180.5; // number
var isMarried = false; // boolean，取值只能为true或false
var sex; // undefined
var hobby = null; // null
var array = new Array(13,25,38); // 定义一个数组
var date = new Date();

// 使用typeof判断数据的类型
// 如果数据是null、数组、对象等，typeof都会返回object
console.log(name,typeof(name),typeof name);
console.log(age,typeof age);
console.log(height,typeof height);
console.log(isMarried,typeof isMarried);
console.log(sex,typeof sex);
console.log(hobby,typeof hobby);
console.log(array,typeof array);
console.log(date,typeof date);

五、运算符

1. 算术运算符

1.1 用法

运算符	含义
+	加
-	减
*	乘
/	除
%	取余，求模
**	次方
++	自增，对原值加1
–	自减，对原值减1

前缀自增自减和后缀自增自减的区别：

前缀自增自减

先进行自增或自减运算，然后再执行表达式
后缀自增自减

先执行表达式，然后再进行自增或自减运算

1.2 NaN

含义：Not a Number 表示非数字，其自身是number类型

作用：用来表示数值的一种不正常的状态，一般在计算出错时会出现

使用isNaN()检查参数是否为非数字

如果是非数字，则返回true
如果不是非数字（即是数字），则返回false

1.3 Math对象

执行常见的算数任务，用法：Math.方法名(参数)

常用方法：

方法	说明
Math.abs(a)	得到a的绝对值
Math.pow(a,b)	得到a的b次方
Math.round(a)	四舍五入
Math.ceil(a)	向上取整
Math.floor(a)	向下取整
Math.random()	产生随机数，范围[0.0,1.0)
Math.max(a,b…)	返回最大值
Math.min(a,b…)	返回最小值
Math.PI	返回圆周率π的值，不能加小括号

2. 关系运算符

也称为比较运算符，用来做比较运算，比较的结果是boolean类型

运算符	含义
>	大于
<	小于
>=	大于等于
<=	小于等于
==	等于：只判断数据的内容，不判断数据的类型
===	全等于：既判断内容，也判断类型
!=	不等于：只判断数据的内容，如果内容一样，则返回false
!==	不全等：如果内容或类型两者中有一个不一样，则返回true，否则返回false

3. 赋值运算符

运算符	含义
=	简单赋值
+=	加法赋值
-=	减法赋值
*=	乘法赋值
/=	除法赋值
%=	求模赋值

4. 逻辑运算符

运算符	含义
&&	逻辑与，并且
\|\|	逻辑或，或者
!	逻辑非，取反

逻辑中断，也称为短路运算：

|| 如果第一个为真就返回第一个表达式，否则返回第二个表达式
&& 如果第一个为假就返回第一个表达式，否则返回第二个表达式

/**
 *  && 逻辑与，并且
 */
var a = 5;
var b = 3;
var c = a >= b && a*2 < b*3+1;
var c = 5>1 && 2<9;
var c = false && false;

/**
 *  || 逻辑或，或者
 */
var c = false || true;
var c = a >= b || a*2 < b*3+1;
console.log(c); 

/**
 *  ! 逻辑非，取反
 */
var d = true;
console.log(!d); 
console.log( !(a>=b) );

5. 条件运算符

也称为三目运算符，语法：条件 ? 表达式1 : 表达式2

当条件为true时执行表达式1，当条件为false时执行表达式2

/**
 *  条件运算符，也称为三目运算符
 *  语法： 条件 ? 表达式1 : 表达式2
 */
var a = Number(prompt('请输入a的值：'));
var b = Number(prompt('请输入b的值：'));
var c = a>b ? a : b; // 将a、b中较大的值赋给c
console.log(c);

6. 运算符优先级

从高到低的顺序：

小括号( )
一元运算：自增++、自减–、非!
乘*、除/、取余%
加+、减-
关系运算：>、<、>=、<=
相等运算： ==、!=
逻辑与&&
逻辑或||
赋值运算：=、+=等

注：当运算符较多时，建议使用()小括号控制运算的顺序

7.数据类型转换

强制类型转换，也称为显式转换

7.1 转换为number

三种方式：

使用Number()

如果内容可以转换成数字，则返回对应的数字（整数或小数）

如果内容不可以转换成数字，则返回NaN

如果内容为空字符串或null，则返回0

如果内容为boolean，则true返回1，false返回0（boolean值在内存中就是以数字来存储，true为1，false为0）
使用parseInt()

将内容转换成整数（直接去掉小数）

会从第一个字符开始解析，直到遇到非数字符号停止，并返回已解析的部分数值
使用parseFloat()

将内容转换成小数

使用Number

/**
 *  强制转换为number
 */
var a = '12';
// 如果内容可以转换成数字，则返回对应的数字（整数或小数）
a = Number(a);
a = Number('12.5');

// 如果内容不可以转换成数字，则返回NaN
a = Number('hello');

// 如果内容为空字符串或null，则返回0
a = Number('');
a = Number(null);

// 在内存中boolean类型以数字来存储，true对应的1，false对应的是0
a = Number(false);

使用parseInt()

console.log(parseInt('12'));

// 返回整数，不会四舍五入
console.log(parseInt('12.5'));

console.log(parseInt('hello')); // NaN
console.log(parseInt('hello123')); // NaN

// 123，按字符逐个解析
console.log(parseInt('123hello456'));

// NaN
console.log(Number('123hello456'));

使用parseFloat()

// 返回小数
console.log(parseFloat('12.5'));

7.2 转换为string

三种方式：

拼接空字符串

""+要转换的内容
```
var b = true;
b = '' + b;
```
使用String()

将要转换的内容放在String后的小括号中
```
b = String(b);
```
使用toString()

直接调用变量的toString()方法
```
b = b.toString();
```

7.3 转换为boolean

两种方式：

使用Boolean()

false、0、空字符串、Undefined、null、NaN会被转换成false

其它的都会被转成true
```
var c =  'hello';
c = Boolean(c);
```
使用!!转换
```
c = !!c;
console.log(c,typeof c);
```

7.4 自动类型转换

也称为隐式转换

自动转换为number的两种方式：

在参与-、*、/、%等运算时会自动转换为number
```
var d = '5';
// 发生自动类型转换
d = 5*1
```
直接在要转换的内容前添加+
```
d = +d
console.log(d,typeof d)
```

算云烟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(一)：基础介绍、变量、数据类型与运算符

一、概述1.什么是JavaScipt JavaScript简称为JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行 Web前端三层：结构层 HTML 定义页面的结构样式层 CSS 定义页面的样式行为层 JavaScript 用来实现交互，提升用户体验2. JavaScript作用在客户端动态的操作页面在客户端做数据的校验在客户端发送异步请求二、基本用法1.在HTML文件中引入js代码<head> <meta charset
复制链接

扫一扫