JavaScript之ECMAScript

JavaScript简介
- JavaScript是什么
- JavaScript可以做什么
- JavaScript有什么
JavaScript的书写位置
- 内部JavaScript
- 外部JavaScript
- 内联JavaScript
JavaScript注释
- 单行注释
- 块注释
输入输出语法
- 什么是语法
- 输出语法
- 输入语法
字面量
变量
- 声明变量
- 变量赋值
- 变量的本质
- 变量命名规范和规则
- - 规则
  - 规范
let和var的区别
数组
- 声明数组
- 数组取值
- 数组增加元素
- 数组删除元素
- 冒泡排序
数据类型
- 为什么要给数据分类
- 数字型(number)
- 字符串型(String)
- - 字符串的拼接
  - 模板字符串
- 布尔类型(boolean)
- 未定义类型(undefined)
- 空类型(null)
- 数据类型检测
- 类型转换
- - 隐式转换
  - 显示转换
  - - 转换为数字型
    - 转换为字符型
运算符
- 算术运算符
- 赋值运算符
- 一元运算符
- 比较运算符
- 逻辑运算符
- - 逻辑运算符的短路
- 运算符优先级
语句
- 表达式和语句
- 分支语句
- - if语句
  - 三元表达式
  - switch
- 循环语句
- - while语句
  - for循环
函数
- 函数声明
- 带参函数
- 函数返回值
- 变量作用域
- 匿名函数
- 立即执行函数
- 函数传值小技巧
对象
- 对象是什么
- 声明对象
- 对象属性和方法
- - 属性
  - 访问属性
  - 方法
  - 访问方法
- 操作对象
- 遍历对象
- 内置对象
- - Math
  - 随机数公式
- 不同数据类型的存储方式

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)

undefined表示没有赋值
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:代码1breakcase 值2:代码2breakdefault:代码nbreak
}

将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

不同数据类型的存储方式

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

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

JavaScript之ECMAScript相关推荐

浅谈 JavaScript、ECMAScript （ES5、ES6）是什么、相互关系
一.ECMAScript 和 JavaScript 的关系前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. ES6 === ECMAScript6 ...
JavaScript基础(ECMAScript)
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
js 系统教程-01-JavaScript 的历史，JavaScript 与 Java 的关系，JavaScript 与 ECMAScript 的关系，JavaScript的版本
目录目录 JavaScript 语言的历史诞生 JavaScript 与 Java 的关系 JavaScript 与 ECMAScript 的关系 JavaScript的版本原文地址目录导航 ...
前端——javascript基础-ECMAScript
文章目录 JavaScript简介 ECMAScript JavaScript的引入方式 javascript得输出方式: 变量五种基本数据类型运算符数据类型转换 if语句 switch语句 w ...
Javascript组成--ECMAScript，DOM，BOM
ECMAScript 1.JavaScript中的类型转换 2.作用域.作用域链和闭包 3.函数与函数表达式 4.arguments对象 5.call与apply的应用 6.callee与caller ...
javascript组成-ECMAScript、bom、dom
javascript组成 1. javascript组成 1.1 ECMAScript(js的一些语法) 1.2 BOM:browser object model ----浏览器对象模型 bom中包含 ...
详解JavaScript（ECMAScript与DOM）
编译软件:IntelliJ IDEA 2019.2.4 x64 运行环境:Google浏览器目录前言一. 简介二. js的特性三. js的Helloworld 四. js的引入方式 4.1 ...
JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）...
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
ECMAScript，javascript，jscript
ECMAScript是一种由欧洲计算机制造商协会(ECMA)通过ECMA-262标准化的脚本程序设计语言.这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是 ...