【JavaScript】JavaScript基础一

JavaScript 简介

Javascript 是什么

是一种运行在客户端(浏览器)的编程语言，实现人机交互效果

JavaScript 应用场景

网页特效(事件监听)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台数据，渲染到前端)
服务端编程(node.js)

JavaScript 组成

JavaScript：

ECMScript(JavaScript 语言基础)
- js 基础核心语法知识
  - 变量
  - 分支语句
  - 循环语句
  - 对象
WebAPIs
- DOM(文档对象模型)
- BOM(浏览器对象模型)

JavaScript 书写位置

行内 JavaScript
内部 JavaScript
外部 JavaScript(通过 src 属性引入，中间无需写代码，否则会被忽略)

内部 JavaScript 放在<body></body>标签最下方

浏览器按照代码在文件中顺序加载html

放在其他位置，可能会由于HTML未加载而失败

JavaScript 注释和结束符

注释

单行注释：// (ctrl + /)
多行注释：/* */ (alt + shift + a)

结束符

作用： ;，代表语句结束
实际情况：可写可不写
现状：更多人主张省略结束符
约定：风格统一，按照团队要求

JavaScript 输入输出语法和字面量

文档输出内容

1

document.write('我是div标签')

页面弹出警告

1

alert('hello world')

控制台输出内容

1

console.log('hello world')

输入语句

1

prompt('请输入您的年龄')

字面量

就是常量的意思：

数字字面量
字符串字面量
数组字面量
对象字面量

JavaScript 变量

变量是什么

计算机存储数据的容器

变量的作用

存储数据

变量的声明与赋值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// 声明变量
let age
// 变量赋值
age = 18
// 声明多个变量，不提倡，可读性不好
let name = 'xixi',
  number = 20
// 打印变量的值
console.log(age)
// 变量声明的同时赋值，叫做变量的初始化
let name = 'cengdong'

注意事项：

变量不能重复声明
多个变量同时声明中间使用逗号隔开

交换两个变量的值

定义临时变量

1
2
3
4
5
6


let number1 = 10
let number2 = 20
let tmp
tmp = number1
number1 = number2
number2 = tmp

变量的本质与命名规则

变量的本质就是程序在内存中申请的一块存储数据的空间

变量命名规则：

只能包含字母``数字``$和下划线
不能以数字开头
不能用关键字
大小写敏感

变量命名规范：

见名知意
小驼峰命名法：userName

let 与 var 的区别

var 声明：

可以先使用再声明(不合理)
可以重复声明(不合理)
变量提升、全局变量、没有块级作用域

变量声明优先使用 const，如果发现变量需要修改，再使用 let 替换 数组和对象等引用数据类型使用 const 声明

数组

数组的声明与初始化

数组可以存储任意数据类型

1

let arr = [1, 2, 3]

数组相关术语：

索引(从零开始)
元素
长度(arr.length)

常量

常量声明：const

1
2


const COUNT = 100
console.log(COUNT)

注意事项：

声明的时候必须赋值
不允许重新赋值

数据类型

JavaScript 数据类型

基本数据类型
- number
- string
- boolean
- undefined
- null
引用数据类型
- object

获取一个变量的数据类型：typeof()函数或者typeof x运算符

数字类型与算数运算符

所有的数字都是数字型
数字间有很多操作：
- +加
- -减
- *乘
- /除
- %取余

算数运算符有优先级，按照优先级先后顺序进行运算

优先级口诀：先乘除后加减，有小括号先算小括号

数字类型特殊的值：NaN(运算错误时)

NaN 是粘性的，任何对 NaN 的操作都会返回 NaN

字符串类型

通过单引号、双引号、反引号包裹的数据都叫字符串

单引号与双引号本质没有区别，推荐使用单引号

字符串拼接

通过+进行字符串拼接

口诀：数字相加，字符拼接

模版字符串

使用场景：拼接字符串与变量

语法：

反引号包裹
内容拼接变量时，使用${}包裹

boolean&undefined&null

boolean

boolean 类型数据有两种值：

true
false

可以与数字型进行运算，false 为 0，true 为 1

undefined

只声明，不赋值的情况下，变量的默认值为 undefined
一般很少直接给变量赋值为 undefined

null

代表无、空、未知的特殊值

null 和 undefined 的区别：

undefined 表示没有赋值
null 表示赋值了，但是内容为空
计算时有区别，null 可表示为 0

变量类型转换

类型转换有两种：

数据类型转换就是把一种数据类型的变量转换为我们需要的数据类型

隐式转换(自动类型转换)
显示转换(强制类型转换)

隐式转换

任何数据和字符串相加结果都是字符串
除了+的其他运算符(比较运算符也会)，会把数字的字符串转换为 number 类型
+号作为正号解析可以转换为数字型
null 类型参与运算
boolean 类型数据参与运算或者逻辑判断

显示转换

转换为数字型

转换为数字型：Number()，转换失败时为NaN
只保留整数：parseInt()
保留小数：parseFloat()

1
2
3
4
5
6


console.log(Number('1.1'))
console.log(Number('abc'))
console.log(parseInt('1.2'))
console.log(parseInt('1.2px'))
console.log(parseFloat('1.2px'))
console.log(parseFloat('abc1.2px'))

转换为字符串型

String()
toString()

区别：

String()可以转换所有数据类型，toString()不能转换 null、undefined
toString 可以传参，表示以多少进制的格式输出结果；String 方法传参无效

转换为 boolean 类型

通过 Boolean()函数可以将其他类型数据转换为 boolean 类型

数字型：除了 0 为 false，其他所有数字型都是 true
字符串：除了空字符串为 false，其他所有字符串都是 true
null：false
undefined：false
NaN：false

注意事项：NaN == undefined为 true，NaN === undefined为 false