JavaScript之ECMAScript

JavaScript简介

JavaScript是什么

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

JavaScript可以做什么

• 网页特效(监听用户的一些行为让网页做出对应的反馈)
• 表单验证(针对表单数据的合法性进行判断)
• 数据交互(获取后台数据，渲染到前端)
• 服务端编程(node.js)

JavaScript有什么

JavaScript的书写位置

内部JavaScript

直接写在html文件里，用script标签包裹

script标签写在 </body>标签上面

外部JavaScript

<script src="js文件路径"></script>

内联JavaScript

<button onclick="alert('helloworld')">你好世界</button>

JavaScript注释

单行注释

符号：//

块注释

符号：/* */

输入输出语法

什么是语法

是一种规则，通过规则来和计算机沟通

输出语法

document.write('要输出的内容')

• 向body内输出内容
• 如果输出的内容写的是标签，也会被解析成网页元素

alert('要输出的内容')

• 页面弹出警告对话框

console.log('控制台打印')

• 控制台输出语法，调试常用

输入语法

prompt('提示文本')

字面量

计算机中描述的 事/物

变量

变量是存储数据的容器，是一个盒子

声明变量

let 变量名

• 声明变量用let关键字

变量赋值

let 变量名 = 值

• 可以更改变量值，重新赋值即可

• let不允许多次声明一个变量

• 可以一次声明多个变量，用逗号隔开即可

let age = 18, uname = 'xsd'

变量的本质

内存：计算机存储数据的地方，相当于一个空间

变量：程序在内存中申请的一块用来存放数据的小空间

变量命名规范和规则

规则

• 不能用关键字
• 只能用下滑线，字母，数字，$组成，且数字不能开头
• 字母严格区分大小写

规范

• 取名要有意义
• 遵守小驼峰命名法

let和var的区别

let是为了解决var的一些问题

var声明：

• 可以先使用在声明
• 可以重复声明
• 有变量提升，全局变量，没有块级作用域

声明变量使用let更好

数组

声明数组

let 数组名 = [数据1, 数据2, ..., 数据n]

• 数组按顺序保存，所以每个数据都有自己的编号
• 编号从零开始，编号也叫索引或下标

数组取值

数组名[下标]

例如：

let names = ['小米', '小红', '小龙', '小天']
names[0] // 小米
names[1] // 小红

数组增加元素

数组.push()方法将一个或者多个元素添加到数组的末尾，并返回该数组的新长度

数组.unshift()方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

数组删除元素

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值

数组.shift()方法从数组中删除第一个元素，并返回该元素的值

数组.splice(start, deleteCount)方法

• start：指定修改的开始位置，从零计数
• delete：表示要移除的数组元素的个数，可选的，如果省略则默认从指定的起始位置删除到最后

冒泡排序

let arr = [5, 4, 3, 2, 1]
for(let i = 0;i < arr.length - 1;i++) {
    for(let j = 0;j < arr.length - i - 1;j++) {
        if(arr[j] > arr[j+1]) {
            let temp = arr[j]
            arr[j] = arr[j+1]
            arr[j+1] = temp
        }
    }
}
console.log(arr)

数据类型

为什么要给数据分类

• 更加充分和高效的利用内存
• 也方便了我们的使用

数字型(number)

即我们数学中学习的数字，可以是整数，小数，正数，负数

字符串型(String)

通过单引号，双引号，反引号包裹的数据，单引号和双引号没有本质上的区别，推荐使用单引号

• 单引号和双引号可以嵌套使用，但是不能自己嵌套自己
• 必要时可以使用转义符\，输出我们想要的内容

字符串的拼接

字符串可以使用加号拼接

模板字符串

拼接字符串和变量

document.write('大家好，我叫' + name + '，今年' + age + '岁')

使用模板字符串

document.write(`大家好，我叫${name}，今年${age}岁`)

布尔类型(boolean)

表示肯定或者否定在计算机中对于布尔类型，它有两个值true和false

未定义类型(undefined)

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

空类型(null)

1. undefined表示没有赋值
2. null表示赋值了但是内容为空

把null值作为尚未创建的对象

数据类型检测

通过typeof关键字检测数据类型

let age = 18
let uname = "小米"
let flag = false
let buy
console.log(typeof age) // number
console.log(typeof uname) // string
console.log(typeof flag) // boolean
console.log(typeof buy) // undefined

类型转换

隐式转换

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

+号运算只有有字符串参与运算，则结果为字符串

除了+号以外的算术运算符运算时，结果一定是数字类型，其他类型都会转换成数字类型

• 特别注意的是：+号作为正号时可以转换为Number

显示转换

转换为数字型

• Number(数据)：将数据转换为数字类型，如果字符串里面有非数字，转换失败时结果为NaN，NaN也是数字类型，代表非数字
• parseInt(数据)：将数据转换为整数，不会四舍五入
• parseFloat(数据)：保留小数，会自动过滤掉尾部非数字的内容

console.log(parseFloat('100px')) // 100

转换为字符型

• String(数据)：将数据转换为字符类型

• 变量.toString(进制)：按进制转换数字

运算符

算术运算符

主要包括：加，减，乘，除，取余(求模)

赋值运算符

对变量进行赋值的运算符

• =
• +=：用它来举例

let num = 1
// num = num + 1
num += 1
console.log(num) // 结果是2

• -=，*=，/=，%=

一元运算符

比较运算符

字符串比较是比较字符串对应的ASCI码

• 从左往右依次比较

• 如果第一位一样则比较第二位

• NaN不等于任何值，包括它本身

• 尽量不要比较小数，小数有精度问题

• 不同类型比较会发生隐式转换

逻辑运算符

逻辑运算符的短路

只存在于&&和||中，当满足一定条件则右边不执行

原因：

• 通过左边可以得到整个式子的结果，没有必要在判断右边

有几个值是当false来看的：

• 数字0为假，其他数字为真
• 字符串’'为假，其他字符串为真
• null
• undefined

运算符优先级

语句

表达式和语句

表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果

语句时JavaScript整句或命令，用来做一件事情

分支语句

if语句

单分支：

if (条件) {
    满足条件要执行的代码
}

• 条件为true时执行大括号里面的代码
• 小括号里面的值若不是布尔类型，则会发生隐式转换

双分支：

if (条件) {
    满足条件要执行的代码
}else {
    不满足条件执行的代码
}

多分支：

if (条件1) {
    代码1
}else if (条件2) {
    代码2
}else if (条件3) {
    代码3
}else {
    代码n
}

• 先判断条件1，若满足条件1就执行代码1，其他不执行
• 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
• 若依然不满足继续往下判断，以此类推
• 若所有条件都不满足，则执行else里面的代码

三元表达式

条件 ? 满足条件执行的代码 : 不满足条件执行的代码

true ? 1 : 2

• 如果条件满足则返回前一个结果，不满足则返回后面的结果

switch

switch (数据) {
    case 值1:
        代码1
        break
	case 值2:
        代码2
        break
    default:
        代码n
        break
}

• 将switch里面的数据与case里面的值依次进行比较，如果全等(===)，就执行里面的代码
• 如果所有的值都和数据不全等，则执行default里面的代码
• case有穿透现象，会与break一起使用

循环语句

while语句

while(循环条件) {
    要重复执行的代码(循环体)
}

let i = 1
while(i <= 3) {
    document.write('我会循环3次<br>')
    i++
}

for循环

for(声明记录循环次数的变量; 循环条件; 变化值) {
    循环体
}

函数

函数声明

function 函数名() {
    函数体
}

• 函数声明好后必须要调用才会有效

带参函数

function 函数名(参数列表) {
    函数体
}

function getSum(num1, num2) {
    document.write(num1 + num2)
}
// 函数调用
getSum(1, 2)

函数返回值

用return关键字给函数返回一个值

function getSum(x, y) {
    return x + y
}
// 函数调用
let num = getSum(1, 2)// 也可以放变量
document.write(num)

return里面只能返回一个值，但是可以返回数组或对象

变量作用域

匿名函数

将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式

let fn = function() {
    函数体
}
// 函数调用
// 可以使用形参和实参
fn()

立即执行函数

// 第一种写法
// 同样可以有形参
(function() {})()
// 第二种写法
;(function() {}())

多个立即执行函数之间必须加一个分号结束，所以分号需加前面

函数传值小技巧

function fn(x = 0, y = 0) {
    console.log(x + y)
}
fn(3, 5)

对象

对象是什么

对象(Object)：JavaScript里面的一种数据类型，用于详细描述某一个事物(事物的属性和行为)

声明对象

let obj = {}

对象属性和方法

let obj = {
	属性名: 属性值,
    方法名: 函数
}

属性

• 属性都是成对出现的，包括属性名和值，它们之间用冒号分割
• 多个属性用英文逗号分割
• 属性就是依附在对象上的变量
• 属性名可以使用单引号或双引号包裹，也可以省略

访问属性

点的形式和中括号的形式

let obj = {
    name: 'xsd',
    sex: '女',
    age: 20
}
// let age = obj.age
let age = obj['age'] // 必须加引号

方法

• 方法是由方法名和函数两部分构成，它们之间用分号分割
• 多个方法之间用英文逗号分割
• 方法是依附在对象中的函数
• 方法名可以使用单引号或双引号包裹，也可以省略

访问方法

let obj = {
    name: 'xsd',
    sex: '女',
    age: 20,
    sayHi: function() {
        document.write('hi~~')
    }
}
// 对象名.方法名
// 可以有形参
obj.sayHi()

操作对象

对象的本质是无序的数据集合，操作数据无非增，删，改，查

遍历对象

let obj = {
    uname: 'xsd',
    age: 18,
    sex: '女'
}
for (let k in obj) {
    console.log(k) // 打印属性名
    console.log(obj[k]) // 打印属性值
}

内置对象

Math

• Math是JavaScript提供的一个内置对象

提供了一系列做数学运算的方法

方法有

console.log(Math.random()) // 随机数
console.log(Math.PI) // 圆周率
console.log(Math.ceil(1.3)) //2
console.log(Math.floor(1.3)) // 1
console.log('-----------------')
// round就近取整
console.log(Math.round(1.1)) //1
console.log(Math.round(1.5)) //2
console.log(Math.round(1.9)) //2
console.log(Math.round(-1.1)) //-1
console.log(Math.round(-1.5)) //-1
console.log(Math.round(-1.9)) //-2

随机数公式

// 求得[N,M]的一个随机数公式
let number = Math.floor(Math.random() * (M - N + 1)) + N

不同数据类型的存储方式

栈：由操作系统自动分配释放存放函数的参数值，局部变量的值等，其操作方式类似于数据结构中的栈

堆：存储复杂数据类型，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收