JS变量常量数据类型运算符 | 前端笔记（七）

前端学习记录之路

已于 2023-04-30 12:50:32 修改

阅读量53

点赞数

文章标签：前端 javascript html

于 2023-04-06 22:22:36 首次发布

本文链接：https://blog.csdn.net/weixin_55901142/article/details/130000874

版权

三、JavaScript部分

（一）JS基础

1.介绍

（1）组成

JavaScript包括ECMAScript和Web APIs，Web APIs包括DOM（页面文档对象模型）和BOM（浏览器对象模型）。

（2）书写位置

1.内部

通过 script 标签包裹 JS 代码放在HTML文件中</body>的上面。

<body>
  <script>
    alert('嗨，欢迎来传智播学习前端技术！')
  </script>
</body>

2.外部

将 JS 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入。

<body>
  <script src="demo.js"></script>
</body>

（3）注释

单行：// （ctrl + /）

多行：/* */（shift+alt+a)

（4）输入和输出

1.输出

(1)document.wirte('要输出的内容') ：向body输出（可以直接在里面放html标签，会起效果）

(2) alert('要输出的内容')：警示对话框

(3)console.log('要输出的内容')：控制台打印

2.输入

prompt('输入您的姓名:')

2.变量数组常量

（1）变量声明

语法：let 变量名

let age

（2）变量赋值

let age = 18

备注：

1.变量不允许重复声明

2.允许同时声明多个变量并赋值

let age =18
let age =19(错)

let age =18, uname='pink'

（3）变量命名规则

只能是字母、数字、下划线、$，且不能数字开头。
字母区分大小写。
关键字或保留字不允许使用。
尽量驼峰命名法（userName）。

（4）数组基本使用

语法：let 数组名 = [数据1，数据2，...]

访问数组某个值：数组名[索引值(下标)]

备注：索引号从0开始。

let classes = ['小明', '小刚', '小红', '小丽', '小米']
console.log(classes[0])

备注：数组长度为数组名.length，数组长度=索引号+1

（5）常量

概念：使用 const 声明的变量称为“常量“。

const PI = 3.14
console.log(PI)

备注：常量不允许重新赋值,声明的时候必须赋值（初始化）。

3.数据类型

（1）数字类型Number

所有数字，包括整数、小数、正数、负数。

备注：NaN（not a number）代表一个计算错误a是一个不正确的或者未定义的数学操作得到的结果，任何对NaN的操作都返回NaN，NaN+2也是NaN。

（2）字符串类型string

通过单引号（ ’ ’ ）、双引号（ " " ）或反引号（``)包裹的数据都叫字符串。

备注：

1.'123’也是字符串类型，可以使用转义符 \，输出单引号或双引号，\'即可输出'。

2.字符串拼接：+实现拼接，'pink' + '老师'，'我今年'+age+'岁了'

3.模板字符串：

`大家好，我叫${uname}， 我今年贵庚${age}岁了`

（3）布尔类型boolean

两个固定的值 true 和 false。

 let isCool = true

（4）未定义类型undefined和空类型null

只声明变量，不赋值的情况下，变量的默认值为 undefined。

let num
console.log(num)
let obj = null
console.log(obj)

备注：

console.log(undefined + 1)  // NaN
console.log(null + 1)       // 1

（5）检测数据类型

typeof X 或者 typeof (X)

（6）类型转换

问题：prompt（）或者单选框复选框取过来的默认是字符串类型。

1.隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

+号两边只要有一个是字符串，都会把另外一个转成字符串，除了+以外的算术运算符都会把数据转成数字类型。

'pink' + 1   //pink1
2 + '2'      // 22
2 - '2'      // 0 
+'123'       // 转换为数字型

2.显示转换

（1）转换为数字型

1.Number(数据)

let num = Number(prompt('输入年薪'))
或者let num = +prompt('输入年薪')

2.parseInt(数据)：只保留整数

3.parseFloat(数据)：可以保留小数

parseInt('12px')        //12
parseFloat('12.34px')   //12.34
parseFloat('abc12.94px') //12.94

4.运算符

（1）算术运算符

乘：*，除：/ , 取余数（取模）：%

（2）赋值运算符

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

num += 1相当于num = num + 1，不能直接num+1

（3）自增/自减运算符

符号	作用	说明
++	自增	变量自身的值加1，例如: x++
–	自减	变量自身的值减1，例如: x–

1.前置自增：++i

2.后置自增：i++

备注：

1.前置自增和后置自增单独使用没有区别。

前置自增：先自加再使用

后置自增：先使用再自加（等运算输出后再加）

let i = 1
console.log(++i + 1)     //3

let i = 1
console.log(i++ + 1)     //2

（4）比较运算符

运算符	作用
>=	左边是否大于或等于右边
===	左右两边是否类型和值都相等（一般都用这个）
==	左右两边值是否相等
!=	左右值不相等
!==	左右两边是否不全等

备注：比较运算符有隐式转换，把’2’转换为2，双等号只判断值。

console.log(2 == '2')             // true
console.log(undefined === null)   // true
console.log(NaN === NaN)          // false （NaN不等于任何人，包括他自己）

备注：ASCII值：A-Z为65到90，a-z为97-122。

console.log('a' < 'b')    // true
console.log('aa' < 'ab')  // true
console.log('aa' < 'aac') // true

（5）逻辑运算符

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边有一个假的结果为假	一假则假
\|\|	逻辑或	或者	符号两边有一个真的结果为真	一真则真
!	逻辑非	取反	true变false false变true	真变假，假变真