了解作用域
作用: 生效, 可以使用
域: 范围
一个东西可以生效的范围
什么东西 ? 变量(变量名, 函数名)
其实就是一个变量可以生效的范围
作用域分类
1. 全局作用域
一个 html 页面就是一个全局作用域
打开页面的时候, 作用域就生成了, 直到关闭页面为止
2. 局部作用域(私有作用域)
只有函数生成私有作用域
每一个函数就是一个私有作用域
作用域的上下级关系
全局作用域最大, 所有的私有作用域都是再全局作用域下面的
函数生成的私有作用域, 函数写在那个作用域里面
就是哪个作用域的子级
这个位置就是全局作用域
function fn() {
// 这个位置就是 全局作用域的一个叫做 fn 的子级作用域
function fun() {
// 这个位置就是 全局下的 fn 私有作用域下的 fun 私有作用域
}
}
作用域的三大规则
1. 变量定义规则
2. 变量使用规则
3. 变量赋值规则
清晰什么是 定义 / 使用 / 赋值 概念(熟读并背诵全文)
1. 定义
有 var 关键字
或者 function 函数名() {}
var num // 定义变量
function fn() {} // 定义变量
2. 使用
就是当你需要拿到一个变量的值去使用的时候
console.log(num) // 我要使用 num 的值去打印出来
1 + num // 我要使用 num 的值去和 1 进行运算
var abc = num // 我要使用 num 的值赋值给 abc
3. 赋值
给一个变量进行赋值的操作
num = 100 // 要把 100 这个值赋给 num 这个变量
num = function () {} // 要把 函数 这个值赋给 num 这个变量
***********************************
explanatory start 变量定义规则(熟读并背诵全文)
***********************************
当你在定义一个变量的时候
你把这个变量定义在哪个作用域里面
就只有这个作用域及其后代作用域可以使用
当前作用域的所有祖先级作用域不能使用
***********************************
explanatory end 变量定义规则(熟读并背诵全文)
**********************************
// 全局作用域里面的变量 a
// var a = 100
// function fn() {
// var b = 200 // fn 私有作用域里面的变量 b
// function fun() {
// var c = 300 // fun 私有作用域里面的变量 c
// }
// }
***********************************
explanatory start 变量的使用规则(熟读并背诵全文)
***********************************
当你需要使用一个变量的时候
首先, 在自己作用域内部查找, 如果有, 就直接使用, 停止查找
如果没有, 就去上一级作用域查找, 有就使用, 停止查找
如果还没有, 就再去上一级作用域查找, 有就使用, 停止查找
直到全局作用域都没有, 那么就报错 "变量 is not defined"
***********************************
explanatory end 变量的使用规则(熟读并背诵全文)
**********************************
// var a = 100
// function fn() {
// var a = 'fn 里面的'
// var b = 200
// function fun() {
// var a = ‘fun 里面的 a 变量’
// var b = ‘fun 里面的’
// var c = 300
// console.log(d) // 得到的是 fn 作用域里面的 b 变量的值
// }
// fun()
// }
// fn()
***********************************
explanatory start 变量赋值规则(熟读并背诵全文)
***********************************
当你需要给一个变量赋值的时候
先在自己作用域内部查找, 如果有, 就给自己作用域内部的变量赋值
如果没有, 就向上一级查找, 如果有就给父级的变量赋值
如果还没有, 就继续向上查找
直到全局作用域都没有, 那么就把这个变量定义为全局变量, 再进行赋值
***********************************
explanatory end 变量赋值规则(熟读并背诵全文)
***********************************
var a = 100 // 全局 a 变量
function fn() {
// var a = 200 // fn 私有变量 a
a = ‘后来赋值操作’
console.log(a)
}
fn() // 因为 fn 函数的执行, 给全局变量 a 从新进行了赋值操作
console.log(a)
作用域小案例
// var a = b = 10 // 这里代码执行完, 全局两个变量, 一个 a 一个 b
// console.log(a)
// console.log(b)
代码解析
var a = b = 10
实际上是三个部分
1. var a
2. a = b
3. b = 10
等于号(赋值) 的规则是从右往左
1. 预解析
var a
2. 代码执行的时候
b = 10 // 标准的变量赋值操作, 根据变量赋值规则, 会把 b 定义成全局变量再赋值
a = b
console.log(a)
console.log(b)
// var a = b
// b = 20
// a = 10
// console.log(a)
// console.log(b)
代码执行过程
1. 预解析
var a
在浏览器里面声明了一个 a 变量可以使用
2. 代码执行
b = 20 // 对于变量 b 来说是变量的赋值
a = b // 对于变量 b 来说, 是变量的使用, 报错了, 后面就没有代码了
function fn() {
a = 100 // 这个 fn 里面没有定义过 a 变量, 这个只是一个单纯的赋值操作
console.log(a)
}
fn()
console.log(a)
页面交互小案例
页面上有两个文本框
分别让用户输入数字
有一个 button 按钮
点击的时候计算两个数字的和, 填充到第三个文本框里面
1. 要给 button 按钮添加一个点击行为
当点击的时候要做一些事情
2. 在点击的函数里面
当点击的时候再去获取两个文本框的内容
只要 JS 从页面文本框里面获取内容, 那么一定是 string
prompt 获取到的是 string
input 获取到的也是 string
3. 在点击的函数里面
计算两个数字的和
把结果填充到第三个文本框里面
// 1. 给 btn 添加一个点击行为
// 当你点击哪个 button 按钮的时候执行 andHandler 函数
btn.onclick = andHandler
function andHandler() {
// 2. 拿到两个文本框 first 和 second 的输入内容
// 获取文本框的内容就是获取文本框 的 value
// first 表示这个文本框
// . 表示 的
// value 就是元素的 value 属性, 也就用用户输入的内容
// 一个文本框 的 用户输入内容
var a = first.value - 0
var b = second.value - 0
// 3-1. 计算结果
var res = a + b
// 3-2. 把结果填充到第三个文本框里面
// 第三个文本框 的 value 值为 res
result.value = res
}
对象数据类型
对象(object): 是我们的复杂数据类型的一种
对象就是在内存中开辟一个空间, 在里面存放一些数据
如何创建一个空的对象
1. 字面量形式创建对象
var obj = {}
2. 内置构造函数创建对象
var obj = new Object()
两种创建方式的区别
1. 字面量创建
可以在创建的时候直接存放一些数据放在对象空间内
也可以后期再使用代码向里面添加或删除
直接再 {} 里面书写
你要起的名字 : 你要存储的值
如果你要写多个, 那么以 逗号(,) 分隔
2. 内置构造函数
目前只能再后期使用代码的形式向里面添加
// 创建了一个空的对象, 对象空间起名为 obj
// var obj = {}
// console.log(obj)
// 内置构造函数创建空对象
// var obj2 = new Object()
// console.log(obj2)
// 直接创建一个有成员的对象
var obj = {
a: 100,
b: true
}
console.log(obj)
操作对象
就是对对象空间内部的数据进行增删改查
增: 向对象空间里面存储一个数据
语法: 对象名.你自己起的名字 = 你要存储的值
删: 删除对象空间里面的某一个数据
语法: delete 对象名.你要删除的数据的名字
改: 修改对象空间里面的某一个数据
语法: 对象名.你要修改的名字 = 你要修改的值
查: 获取对象空间里面某一个数据
语法: 对象名.你要查询的数据的名字
找不到的时候, 就是 undefined
// 0. 创建一个空对象
var obj = {}
// 1. 向对象里面添加一个数据
obj.a = 100
obj.b = 200
console.log(obj) // 打印 obj 的 a 成员的值
// 2. 删除对象里面的某一个数据
delete obj.a
console.log(obj) // 打印 obj 的 a 成员的值
// 3. 修改对象里面某一个数据
// 和创建的语法一摸一样
// 对象空间内本身存在这个名字就是修改
// 对象空间内本身不存在这个名字就是创建
obj.b = 500
// 4. 查询对象里面的某一个数据
// console.log(obj.b)
console.log(obj)
例子: 有一个书架子叫做 obj
1. JS 从入门到放弃 - 100
3. Java 从入门到放弃 - 300
4. 治疗颈椎病 - 20000
5. 怎样活下去 - 100000
当你去找 C++ 从入门到放弃, 就能得到 200
你把 这个数 扔了
你再去找 C++ 从入门到放弃, 只是找不到, 但是书架子不会塌了
对象的操作语法
1. 复习一下对象
什么是对象 ?
是一个复杂数据类型, 专门用来存储数据的
会给每一个存储的数据起一个名字
创建对象的方式
字面量创建
var obj = {}
内置构造函数创建
var obj = new Object()
操作对象的语法(点语法)
增: 对象名.你要增加的名字 = 你要增加的值
删: delete 对象.你要删除的名字
改: 对象名.你要修改的名字 = 你要修改的值(原先有就是修改, 原先没有就是增加)
查: 对象名.你要查询的名字
操作对象的语法(数组关联语法)
增: 对象名[‘你要添加的名字’] = 你要添加的值
删: delete 对象名[‘你要删除的名字’]
改: 对象名[‘你要修改的名字’] = 你要修改的值
查: 对象名[‘你要查询的名字’]
两种操作语法
使用的结果没有区别, 互相可以混合着使用
只是为了实现一个需求的两种语法
// var obj = {}
// // 1. 增加
// obj.a = 100
// obj.age = 18
// obj.gender = ‘男’
// obj[‘name’] = ‘Jack’
// // 2. 删除
// delete obj.age
// delete obj[“a”]
// // 3. 修改
// // obj.a = 200
// obj[‘gender’] = ‘女’
// // 4. 查询
// console.log(obj.gender)
// console.log(obj[‘name’])
// console.log(obj)
// 对象存储数据
var obj = {}
obj[‘name’] = ‘Jack’ // 字符串
obj.sex = true // 布尔类型
obj.age = 18 // 数值类型
obj.fn = function () { // 函数类型
console.log(‘我是存储再 obj 里面的 fn 函数’)
}
// 使用的时候
console.log(obj.name)
console.log(obj.age)
console.log(obj.sex)
// 执行函数, 就是要执行 obj 空间里面的 函数
// obj 的 fn 执行
obj.fn()
递归函数(了解)
递归: 就是一个函数的高级使用方式 - 自己调用自己
本质:
1. 自己调用自己
2. 递进去归回来
递归函数:
就是一个函数自己调用自己, 把一个有规律的问题
转换成自己和自己的前一步
注意: 一定要设计一个尽头, 不能一直递进去
写递归: 先写停的条件
递归使用:
90% ~ 95% 递归能做的事情循环也能
推荐使用循环, 不推荐使用递归
慎用!!!慎用!!!慎用!!!
// 死递归
// function fn() {
// console.log(‘fn 函数执行了一下’)
// // 自己调用自己
// // fn() // 打开变成死递归了
// }
// fn()
// 递归求阶乘 4
function fn(n) {
// 当 数字 === 1 的时候, 结束我们递进来的过程
// 开始准备归回去
if (n === 1) {
return 1
}
// 吧每一个数字的阶乘转换为求 数字 * 数字-1 的阶乘
return n * fn(n - 1)
}
var res = fn(4)
console.log(res)
斐波那契 数列
数列: 1 1 2 3 5 8 13 21 34 55 …
第一个和第二个永远是 1
第三个数字开始, 是前两个数字的和
使用递归来计算
比如: 我要求 数列的 第 6 位是什么 ? 8
求 fn(6) -> 求 fn(5) + fn(4)
fn(5)
fn(4)
fn(3)
fn(2)
fn(1)
fn(2)
fn(3)
fn(2)
fn(1)
fn(4)
fn(3)
fn(2)
fn(1)
fn(2)
停的条件: 当 n === 1 或者 n === 2 的时候
当你要求 第一位 或者 第二位 的时候
停掉开始归回去, 直接返回 1
function fn(n) {
// n 表示我要求的是这个数列的 第几位 数字
// 1. 先写停的条件
if (n === 1 || n === 2) {
// 表示要得到前两位, 一定是 1
return 1
}
// 2. 写一个递归进去的条件
return fn(n - 1) + fn(n - 2)
}
var res = fn(6) // 8
console.log(res)
var res2 = fn(10)
console.log(res2)
递归复习
递归: 一个函数自己调用自己, 递进去归回来
求阶乘: 4!
4 * 3!
3 * 2!
2 * 1!
因为 n 的阶乘就是 从 n * … * 1
所以当 n 到达 1 的时候, 就不要再继续向下了
因为 1! 就是 1
所以当 n 到达 1 的时候, 直接返回 1
只要没有到达 1, 那么就返回 n * (n-1)!
准备一个求阶乘的函数
function fn(n) {} // n 传递是几, 就是就 几 的阶乘
24 -> 求 4!
4 * 6 -> 4 * 3!
3 * 2 -> 3 * 2!
2 * 1 -> 2 * 1!
fn(1) -> return 1
// 准备一个函数, 接收一个参数, 参数是几就是求几的阶乘
// function fn(n) {
// // 当 n === 1 的时候, 表示求 1 的阶乘, 那么我们直接返回 1
// if (n === 1) {
// return 1
// }
// // 当 n !== 1 的时候, 把 n! 变成 n * (n-1)!
// return n * fn(n - 1)
// }
// var res = fn(4)
// console.log(res)
递归求 斐波那契 数列
数列: 1 1 2 3 5 8 13 21 34 55 …
第一位和第二位一定 1
第三位开始每一位都是前两位的 和
当你需要求 第六位 是什么的时候
转换成求 第五位 + 第四位
求第五位 -> 求第四位 + 第三位
…
求第三位 -> 求第二位 + 第一位
1 1
当我们求数里第 n 位是什么的时候
一层一层的递归进去
当 n === 1 或者 n === 2 的时候, 直接返回 1, 因为前两位都是 1
当 n !== 1 也 n !== 2 的时候, 求 n-1 一位 + n-2 一位
// 准备一个函数, 接收一个参数, 参数是几就表示你要求第几位的数是多少
function fn(n) {
// n 是几, 就要得到第几位是什么数字
// 写停的条件
if (n === 1 || n === 2) {
// 当你要求第一位和第二位的时候, 我直接给你 1
return 1
}
// 否则, 你既不是求 第一位, 也不是求 第二位
// 那么就返回 n-1 位 + n-2 位
return fn(n - 1) + fn(n - 2)
}
var res = fn(10)
console.log(res)
fn(4) 2 + 1 = 3
fn(3) 得到结果 1 + 1 = 2
fn(2) 1
fn(1) 1
fn(2) 得到结果 1
数组数据类型
数组:
就是一个存储数据的空间, 里面会把你存储进去的所有数据
按照顺序依次排好, 每一个数据给一个编号(索引/下标)
编号从 0 开始
数组的创建方式:
1. 字面量创建
var arr = []
2. 内置构造函数创建
var arr = new Array()
创建数组的时候, 两种方式的使用
1. 字面量
创建空数组: var arr = []
创建一个带有数据的数组: var arr = [数据1, 数据2, 数据3, 数据4, …]
2. 内置构造函数
创建空数组: var arr = new Array()
创建一个包含 多个 内容的数组: var arr = new Array(数据1, 数据2, 数据3, …)
创建一个包含 一个 内容的数组: var arr = new Array(数据1但不能是数字)
创建一个 指定长度 没有内容的数组: var arr = new Array(数字表示长度)
总结: 当你使用内置构造函数这个方法创建数组的时候
如果不传递参数, 那么就是空数组
如果传递一个参数
是一个数字的话, 那么表示数组的长度
不是一个数字的话, 那么表示数组里面的一个数据
如果传递多个参数
每一个参数都表示数组里面的一个数据
// 创建带有数据的数组
// 1. 字面量
// var arr = [100, 200, true, ‘hello world’, function () {}]
// console.log(arr)
// 2. 内置构造函数创建一个有多个数据的数组
// var arr = new Array(300, 400, false, ‘你好 世界’)
// console.log(arr)
// 2. 内置构造函数创建一个只有一个数据的数组
var arr = new Array(‘nihao’)
console.log(arr)
// 2. 内置构造函数创建一个指定长度的数组
var arr2 = new Array(20)
console.log(arr2)
// 创建空数组
// 1. 字面量创建数字
// var arr = []
// console.log(arr)
// 2. 内置构造函数创建数组
// var arr = new Array()
// console.log(arr)
数组的索引和length
索引:
就是数组里面每一个数据的 “编号”
从 0 开始递增
也是一个读写的属性
读: 获取第 n 位的数据是什么
如果数组有第 n 位, 那么就是第 n 位的数据
如果数组没有第 n 位, 那么就是 undefined
写: 写如数组第 n 位是什么数据
如果数组有第 n 位, 那么就是把第 n 位的数据修改一下
如果没有第 n 位, 就是加一个第 n 位
length:
表示数组的长度, 也就是数组里面有多少个数据
是一个动态的属性, 可以读, 也可设置
读: 获取到数组的长度
写: 设置数组的长度
如果比原先还小, 那么后面的就算是删除了
如果比原先还大, 那么多出来的就都是 空(empty)
// length 的读写
// var arr = [‘hello’, ‘world’, ‘你好’, ‘世界’]
// console.log(arr.length) // 读数组的长度
// // arr.length = 2 // 把数组的 length 改变成 2
// arr.length = 100 // 把数组的 length 改变成 100
// console.log(arr)
// 索引的 读写
var arr = [‘hello’, ‘world’, ‘你好’, ‘世界’]
// console.log(arr[0]) // 获取数组中索引为 0 的数据
// console.log(arr[100]) // 获取数组中索引为 0 的数据
arr[1] = ‘后来换的’ // 把 arr 数组的索引 1 位置数据写成 ‘后来换的’
arr[100] = ‘新来的’ // 把 arr 数组的索引 100 位置数据写成 ‘新来的’
console.log(arr)
数据类型之间的存储区别
基本数据类型 和 复杂数据类型 之间存储上有什么区别
数据类型
基本数据类型
Number
String
Boolean
Undefined
Null
复杂数据类型
Function 函数
Object 对象
Array 数组
内存空间
我们所有的数据都是存储再内存空间中的
浏览器的内存空间被分为了两个部分
1. 栈内存
2. 堆内存
都是用来存储数据的
数据存储
1. 基本数据类型就是直接存储在 栈内存 里面的
2. 复杂数据类型
数据存储在 堆内存 里面, 会有一个空间地址
地址存储在 栈内存 里面的变量身上
// 基本数据类型, 存储在栈里面
var n1 = 100
var s1 = ‘abc’
var b1 = true
// 复杂数据类型, 数据在堆里面, 地址在栈里面
var obj = {
name: ‘Jack’,
age: 18,
gender: ‘男’
}
var arr = [10, 20, 30]
function fn() {
console.log(123)
}
数据类型之间的赋值区别
基本数据类型 和 复杂数据类型 赋值的时候的区别
1. 基本赋值
把一个变量的值赋值给另外一个变量
基本数据类型赋值之后, 两个变量没有关系了
复杂数据类型赋值之后, 两个变量操作同一个空间
一个修改空间里面的数据
另一个跟着修改
2. 函数的形参和实参的交互
函数的形参: 就是定义在函数内部的私有变量
函数的实参: 就是在调用的时候给形参赋值的
实参给形参赋值, 和基本变量赋值的规则是一摸一样的
// 函数实参赋值复杂数据类型
var obj = { name: ‘Jack’ }
function fn(o) {
o.name = ‘Rose’
console.log(o.name) // Rose
}
fn(obj) // 把 obj 存储的内容赋值给了形参 o
// 这里 obj 存储的就是一个指向空间的地址
// 赋值给 o 的也是一个指向空间的地址
// 赋值以后, 全局变量 obj 和函数内部形参 o 指向的是同一个空间
console.log(obj.name) // Rose
// 函数实参赋值基本数据类型
// var n = 100
// function fn(a) {
// a = 200
// console.log(a) // 200
// }
// fn(n) // 把变量 n 的值赋值给了函数的形参 a
// console.log(n) // 100
// 复杂数据类型的赋值
// var obj = { name: ‘Jack’ }
// var obj2 = obj // 把 obj 存储的内容赋值给了 obj2 这个变量
// obj2.name = ‘Rose’
// console.log(obj.name) // Rose
// console.log(obj2.name) // Rose
// 基本数据类型的赋值
// var a = 10
// var b = a // 把变量 a 的值赋值给变量 b
// b = 20
// console.log(a) // 10
// console.log(b) // 20
for 和 for … in 循环
for 循环
因为数组的索引是 0 ~ n 排列
for 循环也可以得到一组 0 ~ n 的数字
for 循环就可以循环遍历数组
for … in 循环
语法: for (var key in 对象) { 重复执行的代码 }
key 是你自己起的一个变量名
在每一次执行的时候, 分别是对象中每一个成员的 “名字”
in 在 … 里
对象 就是你要遍历的对象
{} 是重复执行的代码
会根据对象中有多少个成员执行多少回
注意: for … in 循环也能遍历数组, 只是我们一般不这样用
// for … in 循环
var obj = {
a: 100,
name: ‘Jack’,
age: 18,
b: 200,
c: 500
}
// for … in 循环遍历对象
// 表示我要遍历的是 obj 这个对象
for (var key in obj) {
// obj 这个对象有多少个成员, 这里的代码就执行多少回
// console.log(‘我执行了’ + ’ — ’ + key)
// 利用这个 key 来遍历对象中的每一个成员
// obj[‘你要查询的名字’]
console.log(key + ’ 成员的值是 : ’ + obj[key])
// 在这个循环里面
// 第一次的时候 key 就是 ‘a’
// 第二次的时候 key 就是 ‘name’
// 第三次的时候 key 就是 ‘age’
// 第四次的时候 key 就是 ‘b’
// 第五次的时候 key 就是 ‘c’
}
// for 循环遍历数组
// var arr = [‘hello’, ‘world’, ‘你好’, ‘世界’]
// // 遍历数组
// // 我需要的索引 0 1 2 3
// // 数组的 length === 4
// for (var i = 0; i < arr.length; i++) {
// // i 得到的就是 0 1 2 3
// console.log(arr[i])
// // 当 i === 0 的时候, 就是 arr[0]
// // 当 i === 1 的时候, 就是 arr[1]
// }
数组的常用方法
专门用来操作数组的方法
1. push() 方法
作用: 向数组的后面追加数据
语法: 数组.push(你要追加的数据1, 你要追加的数据2, …)
返回值: 追加完毕数据以后, 数组的长度
2. pop() 方法
作用: 删除数组的最后一个数据
语法: 数组.pop()
返回值: 被删除的那个数据
3. unshift() 方法
作用: 向数组的最前面添加数据
语法: 数组.unshift(你要添加的数据1, 你要添加的数据2, …)
返回值: 添加完毕数据以后, 数组的长度
4. shift() 方法
作用: 删除数组的最前面一个数据
语法: 数组.shift()
返回值: 被删除的那个数据
5. reverse() 方法
作用: 是反转数组
语法: 数组.reverse()
返回值: 反转后的数组
6. sort() 方法
作用: 给数组进行排序
语法:
1. 数组.sort() -> 按照一位一位来看进行排序的
2. 数组.sort(function (a, b) { return a - b }) -> 按照从小到大升序排列
数组.sort(function (a, b) { return b - a }) -> 按照从大到小降序排列
返回值: 排序好的数组
7. splice() 方法
作用:
1. 截取数组
2. 截取数组以后, 在截取位置替换新的内容
语法:
1. 数组.splice(从哪个索引开始, 截取多少个)
2. 数组.splice(从那个索引开始, 截取多少个数据, 你要填充的数据1, 你要填充的数据2, …)
从哪个索引开始截取, 从哪个索引开填充
返回值: 被截取出来的内容(返回值一定是一个数组)
不管你截取多少个数据, 返回的数组里面就有多少个被截取出来的数据
如果你一个都不删除, 返回的就是一个空数组
8. slice() 方法
作用: 在不改变(影响)原始数组的基础上, 从数组里面提取出一段内容
语法:
1. 数组.slice(从哪一个索引开始, 到哪一个索引结束) - 包前不包后
2. 数组.slice(从哪一个索引开始, 负整数) - 包前不包后
负整数 等价于 (数组的length + 负整数)
返回值: 你提取出来的数据(一定是一个数组)
如果你有提取数据, 那么数组里面就是你提取的数据
如果你没有提取数据, 那么数组里面就是空数组
9. concat() 方法
作用: 解释把多个数组连接在一起, 变成一个新的数组, 不影响原始数组
语法: 数组.concat(你要连接的数据或者数组1, 你要连接的数据或者数组2, …)
返回值: 把所有的参数都连接到第一个数组身上, 返回一个连接好的新数组
10. join() 方法
作用: 是把数组里面的每一个数据组合起来, 变成一个字符串
语法: 数组.join(‘你要连接每一个数据的连接内容’)
参数: 如果你不传递参数, 默认使用 逗号(,) 进行连接
返回值: 一定是一个字符串
就是用你提供的连接内容来连起来以后的字符串
// var arr = [‘hello’, ‘world’, ‘你好’, ‘世界’]
// 1. push()
// var res = arr.push(100, 200, true)
// console.log(‘返回值是 : ’ + res) // 看一下返回值
// console.log(arr) // 看一下我这个数组
// 2. pop()
// var res = arr.pop()
// console.log(‘返回值是 : ’ + res) // 看一下返回值
// console.log(arr) // 看一下我这个数组
// 3. unshift()
// var res = arr.unshift(100, 200, false)
// console.log(‘返回值是 : ’ + res) // 看一下返回值
// console.log(arr) // 看一下我这个数组
// 4. shift()
// var res = arr.shift()
// console.log(‘返回值是 : ’ + res) // 看一下返回值
// console.log(arr) // 看一下我这个数组
// 5. reverse()
// var res = arr.reverse()
// console.log(‘返回值是 : ’ , res) // 看一下返回值
// console.log(arr) // 看一下我这个数组
// var arr = [1, 5, 2, 8, 11, 22, 13, 54, 32, 7, 6, 21, 9]
// 6. sort()
// var res = arr.sort()
// console.log(res)
// console.log(arr)
// var res = arr.sort(function (a, b) { return a - b })
// console.log(res)
// console.log(arr)
// var res = arr.sort(function (a, b) { return b - a })
// console.log(res)
// console.log(arr)
// var arr = [‘hello’, ‘world’, ‘你好’, ‘世界’]
// 7. splice()
// var res = arr.splice(2, 0)
// console.log(res) // 看一下返回值
// console.log(arr) // 看一下原数组
// var res = arr.splice(1, 1, ‘新来的’, ‘新来的2’, ‘新来的3’)
// console.log(res) // 看一下返回值
// console.log(arr) // 看一下原数组
// var res = arr.splice(1, 2, ‘新来的’, ‘新来的2’, ‘新来的3’)
// console.log(res) // 看一下返回值
// console.log(arr) // 看一下原数组
// var res = arr.splice(1, 0, ‘新来的’, ‘新来的2’, ‘新来的3’)
// console.log(res) // 看一下返回值
// console.log(arr) // 看一下原数组
// var arr = [‘hello’, ‘world’, ‘你好’, ‘世界’]
// // 8. slice()
// var res = arr.slice(1, 3) // 表示从索引 1 开始, 到索引 2 结束(不包含索引2)
// console.log(res)
// console.log(arr)
// var res = arr.slice(1, -1) // 表示从索引 1 开始, 到索引 3 结束(不包含索引3)
// // 写的是 -1 等价于 4 + -1 === 3
// // 和你写 arr.slice(1, 3) 是一摸一样的
// console.log(res)
// console.log(arr)
// var arr = [‘hello’, ‘world’, ‘你好’, ‘世界’]
// 9. concat()
// var res = arr.concat([1, 2, 3], [4, 5, 6], true, false, 100, 200)
// console.log(res) // 看一下返回值
// console.log(arr) // 看一下原数组
// 10. join()
var arr = [‘hello’, ‘world’, ‘你好’, ‘世界’]
var res = arr.join(’ — ‘)
console.log(res) // 看一下返回值
console.log(arr) // 看一下原始数组
冒泡排序 - 是我们若干排序算法中的一种, 最基础的一种
解决一个技术问题
数组中两个成员的交换位置 - 交换两个变量 - 利用第三个变量
思路:
先循环一遍, 让每一个数字和后一个数字进行比较
如果前一个比后一个大, 那么两个数字交换位置, 否则不动
循环完毕得到的一个结果, 就是最大的数字放到了数组的最后一位
循环一次能把最大的放在最后面
一模一样的代码重复执行第二遍的时候, 就把到数第二大的放在了到数第二的位置
一模一样的代码重复执行第三遍的时候, 就把到数第三大的放在了到数第三的位置
一模一样的代码只要重复执行八次, 那么就能把 八个 相对大的数字放在后面
前面剩下的哪一个不用比, 也肯定是最小的, 就是 length - 1 遍
口诀:
双层 for 循环, 一层减 1 次
里层再减外层变量
用里层变量交换变量
双层for循环, 一层减一次
里层减外层, 变量相交换
var arr = [5, 3, 7, 2, 1, 4, 6, 9, 8] // => [1, 2, 3, 4, 5, 6, 7, 8, 9]
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
var tmp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = tmp
}
}
}
console.log(arr)
// for (var j = 0; j < arr.length - 1; j++) { // 外层循环表示执行多少遍
// // 循环遍历数组
// for (var i = 0; i < arr.length - 1; i++) {
// // arr[i] 就是数组中当前的这一个数据
// // arr[i + 1] 就是每次的后一个数据
// if (arr[i] > arr[i + 1]) {
// var tmp = arr[i]
// arr[i] = arr[i + 1]
// arr[i + 1] = tmp
// }
// }
// }
在循环中 i 分别 === 0 1 2 3 4 5 6 7 8
在循环中 i+1 分别 === 1 2 3 4 5 6 7 8 9
当 i === 0 的时候, arr[0] > arr[1]
当 i === 1 的时候, arr[1] > arr[2]
当 i === 2 的时候, arr[2] > arr[3]
当 i === 3 的时候, arr[3] > arr[4]
当 i === 4 的时候, arr[4] > arr[5]
当 i === 5 的时候, arr[5] > arr[6]
当 i === 6 的时候, arr[6] > arr[7]
当 i === 7 的时候, arr[7] > arr[8]
当 i === 8 的时候, arr[8] > arr[9] => arr[8] > undefined
// for (var j = 0; j < arr.length - 1; j++) { // 外层循环表示执行多少遍
// // 循环遍历数组
// for (var i = 0; i < arr.length - 1 - j; i++) {
// // arr[i] 就是数组中当前的这一个数据
// // arr[i + 1] 就是每次的后一个数据
// if (arr[i] > arr[i + 1]) {
// var tmp = arr[i]
// arr[i] = arr[i + 1]
// arr[i + 1] = tmp
// }
// }
// }
两层循环
j === 0 的时候, i 分别 === 0 1 2 3 4 5 6 7
当 i === 0 的时候, arr[0] > arr[1]
当 i === 1 的时候, arr[1] > arr[2]
当 i === 2 的时候, arr[2] > arr[3]
当 i === 3 的时候, arr[3] > arr[4]
当 i === 4 的时候, arr[4] > arr[5]
当 i === 5 的时候, arr[5] > arr[6]
当 i === 6 的时候, arr[6] > arr[7]
当 i === 7 的时候, arr[7] > arr[8]
[3, 5, 2, 1, 4, 6, 7, 8, 9]
i 的循环结束了
j === 1 的时候, i 分别 === 0 1 2 3 4 5 6 7
当 i === 0 的时候, arr[0] > arr[1]
当 i === 1 的时候, arr[1] > arr[2]
当 i === 2 的时候, arr[2] > arr[3]
当 i === 3 的时候, arr[3] > arr[4]
当 i === 4 的时候, arr[4] > arr[5]
当 i === 5 的时候, arr[5] > arr[6]
当 i === 6 的时候, arr[6] > arr[7]
当 i === 7 的时候, arr[7] > arr[8] 去掉
j === 2 的是偶, i 分别 === 0 1 2 3 4 5 6 7
当 i === 0 的时候, arr[0] > arr[1]
当 i === 1 的时候, arr[1] > arr[2]
当 i === 2 的时候, arr[2] > arr[3]
当 i === 3 的时候, arr[3] > arr[4]
当 i === 4 的时候, arr[4] > arr[5]
当 i === 5 的时候, arr[5] > arr[6]
当 i === 6 的时候, arr[6] > arr[7] 去掉
当 i === 7 的时候, arr[7] > arr[8] 去掉
当 j === 1 的时候在多去掉 1 次
当 j === 2 的时候在多去掉 2 次
当 j === 3 的时候再多去掉 3 次
j === 几, 就再现在的基础上再次去掉多少次
// console.log(arr)
// // 交换数组的 [0] 和 [1] 数据
// // 借助第三个变量
// var tmp = arr[0]
// arr[0] = arr[1]
// arr[1] = tmp
// console.log(arr)
冒泡排序
交换变量
循环遍历一次数组, 每次都让数组的前一个和后一个进行比较
只要前面比后面大, 那么就交换变量
循环一次以后, 最大的数字一定再最后面
var arr = [9, 5, 3, 7, 2, 1, 4, 6, 8]
// 1. 循环遍历数组
for (var i = 0; i < arr.length; i++) {
// 2. 数组当前这一个和后一个进行比较
if (arr[i] > arr[i + 1]) {
// 3. 交换两个数字的位置
var tmp = arr[i]
arr[i] = arr[i + 1]
arr[i + 1] = tmp
}
}
console.log(arr)
选择排序
也是排序基础算法的一种
假设索引 0 是最大的
循环一次数组, 找到最大的那个数字的索引
让最大的数字的索引 和 我假设的最大的索引交换位置
var arr = [5, 3, 7, 2, 1, 4, 6, 9, 8]
假设索引 0 是最大的数字
遍历数组的时候发现最大的数字索引 7
那么我就让 0 和 7 位置的数字交换
循环第二次, 不需要关索引 0 的数字了
假设 索引 1 是最大的数字
遍历数组的时候找到比 索引 1 还要大的数字
那么就让这个更大的数字和索引1交换位置
两遍以后, 前两个一定是对的, 那么我这段代码一共执行多少遍能排好
var arr = [5, 3, 7, 2, 1, 4, 6, 9, 8]
// 循环表示我要把我交换的那段代码重复执行多少遍
for (var j = 1; j < arr.length; j++) {
// j 分别得到的就是 1 2 3 4 5 6 7 8
// j 是几就表示第几遍
// 1. 假设
var maxIndex = j - 1
// 2. 循环遍历数组
for (var i = j; i < arr.length; i++) {
if (arr[i] > arr[maxIndex]) {
maxIndex = i
}
}
// 3. 交换变量
// 让数组里面 maxIndex 位置的数字和数组里面 j - 1 位置的数字进行交换
var tmp = arr[j - 1]
arr[j - 1] = arr[maxIndex]
arr[maxIndex] = tmp
}
console.log(arr)
// 思路建设
// 1. 假设最大的数字的索引是 0
// var maxIndex = 0
// 2. 循环遍历数组
// for (var i = 1; i < arr.length; i++) {
// // i 得到的就是 1 2 3 4 5 6 7 8
// // 3. 判断后面的数字是不是比我假设的这一位索引的数字大
// if (arr[i] > arr[maxIndex]) {
// // 4. 让 maxIndex = 这个比较大的数字的索引
// maxIndex = i
// }
// }
// 循环结束以后, maxIndex 就是数组里面最大的那个数字的索引
// console.log(maxIndex)
// 一开始我假设的是索引 0 最大, 现在找到的是索引 7 最大
// 应该让 索引0 和 索引7 的位置交换一下
// 5. 交换位置
// var tmp = arr[0]
// arr[0] = arr[maxIndex]
// arr[maxIndex] = tmp
// 1. 假设最大的数字的索引是 1
// var maxIndex = 1
// 2. 循环遍历数组
// for (var i = 2; i < arr.length; i++) {
// // i 得到的就是 1 2 3 4 5 6 7 8
// // 3. 判断后面的数字是不是比我假设的这一位索引的数字大
// if (arr[i] > arr[maxIndex]) {
// // 4. 让 maxIndex = 这个比较大的数字的索引
// maxIndex = i
// }
// }
// 循环结束以后, maxIndex 就是数组里面最大的那个数字的索引
// console.log(maxIndex)
// 一开始我假设的是索引 0 最大, 现在找到的是索引 7 最大
// 应该让 索引0 和 索引7 的位置交换一下
// 5. 交换位置
// var tmp = arr[1]
// arr[1] = arr[maxIndex]
// arr[maxIndex] = tmp
// console.log(arr)
我们确定好了 重复的代码执行 8 遍
第 n 遍 假设索引 循环开始 和谁交换
1 0 1 0
2 1 2 1
3 2 3 2
4 3 4 3
5 4 5 4
6 5 6 5
7 6 7 6
8 7 8 7
j j - 1 j j - 1
ES5 的严格模式（了解）
因为我们的 JS 是一个相对松散的代码格式
写的时候就没有很多要求
严格模式: 书写代码有严格的代码要求
目前: 基本上没有人开发使用严格模式
开启严格模式
如果你不设置, 那么默认是使用正常模式进行开发
如果你想设置, 那么你就再作用域的做开始, 写一个字符串 ‘use strict’
表示 JS 代码需要再严格模式下书写, 如果不遵守就报错
严格模式的要求
1. 定义变量必须有 var 关键字
2. 我们书写 八进制 数字的时候, 不能以 0 开头, 必须以 0o 开头
3. 定义函数, 必须写在代码的开始, 不能写在 if 或者 for 或者 … 之中
4. 不允许函数定义两个相同的形参
‘use strict’ // 有这个字符串就是开启严格模式, 没有就是正常模式
// 4. 不允许函数定义两个相同的形参
// 非严格模式下 : 可以定义两个一样的形参
// 严格模式下 : 不允许两个一样的形参出现
function fn(a, a) {
console.log(a) // 其实这里就是对 a 形参进行了两次赋值, 10 就没有了
}
fn(10, 20)
// 3. 定义函数必须写在代码的一开始
// 非严格模式下 : 函数可以定义在 if 语句里面
// 严格模式下 : 函数不可以定义再 if 语句里面
// var num = 100
// if (true) {
// function fn() {
// console.log(‘我是 if 条件里面定义的 fn 函数’)
// }
// }
// fn()
// console.log(num)
// 2. 书写 八进制 数字必须以 0o 开头
// 非严格模式下 : 010 表示 八进制 的 10 转换成 十进制 就是 8
// 严格模式下 : 010 报错
// 严格模式下 : 0o10 表示 八进制 的 10 转换成 十进制 就是 8
// var n1 = 0o10
// console.log(n1)
// 1. 定义变量必须有 var 关键字
// 非严格模式下 : 直接给变量赋值, 因为变量的赋值规则, 会默认吧这个 num 定义为全局变量
// 严格模式下 : 如果没有定义变量, 直接给变量进行赋值, 那么直接报错
// num = 100
// console.log(num)
ES5 的数组常用方法(掌握)
1. indexOf() 方法
作用: 查找数组中有没有某一个数据(按照索引正序查找 0 1 2 3 …)
语法:
数组.indexOf(要查找的数据)
数组.idnexOf(要查找的数据, 从哪一个索引开始)
第二个参数不写默认是 0
返回值: 是一个数字
如果有你要查找的数据, 那么返回的是第一个找到的数据的索引
如果没有你要查找的数据, 那么返回的是 -1
2. lastIndexOf() 方法
作用: 查找数组中有没有某一个数据(按照索引倒叙查找 9 8 7 6 …)
语法:
数组.lastIndexOf(你要查找的数据)
数组.lastIndexOf(你要查找的数据, 从哪一个索引开始)
返回值: 是一个数字
如果找到你要查找的数据了, 那么就返回第一个找到的数据的索引
如果没有找到你要查找的数据, 那么就返回 -1
3. forEach() 方法
作用: 就是用来循环遍历数组的, 等价于 for 循环遍历数组的地位
语法:
数组.forEach(function (item, index, arr) {})
返回值: 没有
4. map() 方法
作用: 映射一个数组, 把原始数组里面的每一个数据映射倒新数组里面返回
语法:
数组.map(function (item, index, arr) {})
返回值: 就是一个新的数组
里面的每一项始从原始数组中映射过来的
5. filter() 方法
作用: 把原始数组里面满足条件的数据过滤出来, 放在一个新数组里面
语法:
数组.filter(function (item, index, arr) {})
返回值: 就是一个新的数组
里面的每一项都是从原先数组中过滤出来的
6. every() 方法
作用: 就是判断数组里面是不是 每一个 都是符合条件的
语法:
数组.every(function (item, index, arr) {})
返回值: 是一个布尔值
如果数组里面所有的数据都是满足条件的, 那么返回 true
只要数组里面有任意一个不满足条件, 那么返回 false
7. some() 方法
作用: 就是判断数组里面是不是 某一个 是符合条件的
语法:
数组.some(function (item, index, arr) {})
返回值: 是一个布尔值
如果数组里面有任何一个是满足条件的, 那么返回 true
只有数组里面所有的都不满足条件的时候, 返回 false
// var arr = [‘hello’, ‘world’, ‘你好’, ‘世界’, ‘world’]
// 1. indexOf()
// 表示我要再 arr 这个数组里面查找有没有 ‘world’ 这个数据
// var res = arr.indexOf(‘world’)
// console.log(res)
// 表示我要再 arr 这个数组里面从 索引 2 开始向右查找, 看看有没有 ‘world’
// var res = arr.indexOf(‘world’, 2)
// console.log(res)
// 2. lastIndexOf()
// 表示从数组的最后开始向前查找, 看看有没有 ‘world’
// var res = arr.lastIndexOf(‘world’)
// console.log(res)
// 表示从索引 3 开始向前查找, 看看数组里面有没有 ‘world’ 这个数据
// var res = arr.lastIndexOf(‘world’, 3)
// console.log(res)
// var arr = [‘hello’, ‘world’, ‘你好’, ‘世界’]
// 3. forEach()
// 目前, 数组里面有 4 个成员, 那么这个 function () {} 就执行 4 次
// arr.forEach(function (item, index, arr) {
// // 这个函数, 会根据数组中有多少成员, 就执行多少回
// // 第一个形参 item : 数组里面的每一项
// // 第二个形参 index : 每一项的索引
// // 第三个形参 arr : 表示原始数组
// console.log(‘索引 ’ + index + ’ 是’ + ’ — ’ + item)
// console.log(arr)
// console.log(‘函数执行一次完毕’)
// })
上面的注释 :
函数第一次执行的时候
item === ‘hello’
index === 0
函数第二次执行的时候
item === ‘world’
index === 1
// var arr = [10, 100, 1000]
// // 4. map()
// var res = arr.map(function (item, index) {
// // 这个函数会根据数组中有多少成员执行多少回
// console.log(item, index)
// // 映射到新数组里面
// return item * 1.3
// })
// console.log(res)
// console.log(arr)
解释上面代码执行过程
map 函数的底层封装
先准备一个空数组 []
开始循环 arr 这个原始数组
第一次的时候, item === 10
return item * 1.3
他就把第一次 return 的结果放在新数组里面 [13]
第二次的时候, item === 100
return item * 1.3
他就把第二次 return 的结果放在新数组的后面 [13, 130]
第三次的时候, item === 1000
return item * 1.3
他就把第三次 return 的结果放在新数组的后面 [13, 130, 1300]
到这里 循环结束, 提前准备好的数组变成了 [13, 130, 1300]
map 方法把这个数组返回
// var arr = [3, 4, 5, 6]
// // 5. filter()
// var res = arr.filter(function (item, index) {
// // 这个函数回根据 arr 数组有多少项执行多少回
// console.log(item, index)
// // 按照你的条件来过滤数组
// return item < 5
// })
// console.log(res)
解释上面代码执行过程
filter 的底层封装
先准备一个空数组 []
函数第一次执行的时候 item === 3
return item > 4
如果这一次 return 出来的是一个 true, 那么就把这一项放在新数组里面
如果这一次 return 出来的是一个 false, 那么就不放进新数组, 继续下一次 []
函数第二次执行的时候 item === 4
return item > 4
如果这二次 return 出来的是一个 true, 那么就把这一项放在新数组里面
如果这二次 return 出来的是一个 false, 那么就不放进新数组, 继续下一次 []
函数第三次执行的时候 item === 5
return item > 4
如果这三次 return 出来的是一个 true, 那么就把这一项放在新数组里面
如果这三次 return 出来的是一个 false, 那么就不放进新数组, 继续下一次 [5]
函数第四次执行的时候 item === 6
return item > 4
如果这四次 return 出来的是一个 true, 那么就把这一项放在新数组里面
如果这四次 return 出来的是一个 false, 那么就不放进新数组, 继续下一次 [5, 6]
到此, 循环结束, 准备好的数组变成了 [5, 6]
filter 方法把 这个数组返回给你
// var arr = [10, 20, 30, 40]
// // 6. every()
// var res = arr.every(function (item, index) {
// // 这个位置的函数回根据 arr 数组有多少成员执行多少回
// // item : 表示每一项
// // index : 表示索引
// console.log(item, index)
// // 书写你的判断条件
// return item > 0
// })
// console.log(res)
上面代码执行步骤解析
every 方法的底层封装
先准备了一个变量值是 true
函数第一次执行, item === 10
return item > 0
如果 return 出来的是一个 true, 那么循环继续, 什么也不做
如果 return 出来是一个 false, 那么把准备好的变量变成 false, 停止循环直接结束
函数第二次执行, item === 20
return item > 0
如果 return 出来的是一个 true, 那么循环继续, 什么也不做
如果 return 出来是一个 false, 那么把准备好的变量变成 false, 停止循环直接结束
函数第三次执行, item === 30
return item > 0
如果 return 出来的是一个 true, 那么循环继续, 什么也不做
如果 return 出来是一个 false, 那么把准备好的变量变成 false, 停止循环直接结束
函数第四次执行, item === 50
return item > 0
如果 return 出来的是一个 true, 那么循环继续, 什么也不做
如果 return 出来是一个 false, 那么把准备好的变量变成 false, 停止循环直接结束
循环结束以后, 准备的变量依旧是 true, 表示你数组里面的每一个数据都满足条件
直接 every 方法返回 true
循环结束以后, 准备的变量变成了 false, 表示你数组里面至少有一个是不满足条件
直接 every 方法返回 false
// var arr = [10, 20, 30, 40]
// // 7. some()
// var res = arr.some(function (item, index) {
// // 这个函数回根据 arr 数组里面的成员数量执行多少次
// console.log(item, index)
// // 写一个你要判断的条件
// return item > 40
// })
// console.log(res)
上面代码执行解析
some 方法的底层封装
先准备一个变量, 赋值为 false
函数第一次执行, item === 10
return item > 40
如果 return 的是一个 false, 那么什么也不做, 循环继续
如果 return 的是一个 true, 那么直接结束循环, 把提前准备好的变量赋值为 true
函数第二次执行, item === 20
return item > 40
如果 return 的是一个 false, 那么什么也不做, 循环继续
如果 return 的是一个 true, 那么直接结束循环, 把提前准备好的变量赋值为 true
函数第三次执行, item === 30
return item > 40
如果 return 的是一个 false, 那么什么也不做, 循环继续
如果 return 的是一个 true, 那么直接结束循环, 把提前准备好的变量赋值为 true
函数第四次执行, item === 40
return item > 40
如果 return 的是一个 false, 那么什么也不做, 循环继续
如果 return 的是一个 true, 那么直接结束循环, 把提前准备好的变量赋值为 true
循环结束的时候, 如果准备好的变量依旧是 false
表示数组里面每一个都不满足条件
some 方法直接返回 false
循环结束的时候, 如果准备好的变量变成了 true
表示数组里面至少有一个满足条件了
some 方法直接返回 true
创建字符串的方法(了解)
1. 字面量方式创建
var str = ‘hello world’
也有 索引 也有 length 只是不能直接看到
2. 内置构造函数创建
var str = new String(‘hello world’)
有 length 有 索引, 可以直接看到
说明一下
两种方式创建出来的内容虽然长得不一样
但是使用的时候都是一模一样的
知道:
字符串也是按照从左到右的顺序, 按照索引进行排列的
字符串也有一个 length 属性, 表示字符串的长度
每一个空格都占一个位置
字符串的索引, 可以用来获取字符串里面的某一个字符
只读属性, 只能获取, 不能设置
字符串的 length 属性, 可以用来获取字符串的长度
获取长度和中英文没有关系, 就是看你写了多少个字符
只读属性, 只能获取, 不能设置
// 字符串的 length 属性
// var str = ‘你好 世界’
// // 通过 length 属性获取该字符串的长度
// console.log(str.length)
// // 通过 length 设置该字符串的长度
// str.length = 100
// console.log(str)
// 字符串的索引
// var str = ‘hello world’
// // 通过索引获取字符串中某一个字符
// console.log(str[6])
// // 不能通过索引设置字符串中的某一个字符
// str[6] = ‘K’
// console.log(str)
// // 1. 字面量创建
// var str = ‘hello world’
// console.log(str)
// // 2. 内置构造函数创建
// var str2 = new String(‘你好 世界’)
// console.log(str2)
字符传的 ASCII 码
读做: as key 的发音
我们的每一个 符号, 字母, 数字 再计算机存储的时候都不是直接存储的
是把每一个 符号, 字母, 数字 给一个编号, 再计算机存储的是这个编号
我们关这个编号叫做 ASCII 码
为了使用各个国家的文字使用, 有了 unicode 编码
后来为了 web 开发, 有了一种 8 位的 unicode 编码, 叫做 UTF-8
还有一种 16 位的 unicode 编码, 叫做 UTF-16
不同的编码字符集里面, 每一个文字的编号不一样
你按照一个字符集写好的内容, 一旦换一个字符集就是看不懂的东西
比如 再 UTF-8 的格式下, 不 字存储的是 10235
当你到了 GBK 里面, 不 字存储的是 6776, 10235 存储的是另一个文字
字符串的常用方法
都是用来操作字符串的
所有的方法都不改变原始字符串
所有的操作都是以返回值的形式给结果
1. charAt()
解释一下名字
char: 字符, 表示一个字符
at: 在哪
作用: 根据索引找到对应的字符返回
语法:
字符串.charAt(索引)
返回值: 对应索引位置的字符
如果有对应索引, 那么得到的就是对应索引位置的字符
如果没有对应索引, 那么得到的是 空字符串
2. charCodeAt()
作用: 根据索引找到对应的字符, 返回字符的编码
语法:
字符串.charCodeAt(索引)
返回值: 对应索引位置的字符编码 UTF-8 编码
3. substr()
作用: 从字符串里面提取出一些内容
语法:
字符串.substr(开始的索引, 多少个)
第二个参数不写, 默认是按照到字符串末尾计算
返回值: 一个新的字符串
从原先字符串里面提取出来的内容
4. substring()
作用: 从字符串里面提取出一些内容
语法:
字符串.substring(开始索引, 结束索引) - 包前不包后
第二个参数不写, 默认到末尾
返回值: 一个新的字符串
从原先字符串里面提取出来的内容
5. toLowerCase()
作用: 把字符串里面所有的大写字母转换成小写字母
语法:
字符串.toLowerCase()
返回值: 就是转换好的字符串
6. toUpperCase()
作用: 把字符串里面所有的小写字母转换成大写字母
语法:
字符串.toUpperCase()
返回值: 就是转换好的字符串
7. split()
作用: 按照你的需求, 切割字符串
语法:
字符串.split(‘你要切割的字符’)
参数你写什么就按照什么给你切割
参数你要是写一个字符串里面没有的字符, 那么给你切割出一个整个的
参数要是不写, 也是切割一个整个的
参数你要是写一个 空字符串(’’), 会一位一位给你切割
返回值: 是一个 数组
按照你的规则切割好每一部分, 都放到数组里面
接下来的方法, 只是和数组方法重名, 但是是两个数据的方法
8. slice()
作用: 从字符串里面提取一部分数据
语法:
字符串.slice(开始索引, 结束索引) - 包前不包后
字符串.slice(开始索引, 负整数)
当你写负整数的时候, 表示 字符串.length + 负整数
返回值: 一个字符串
从原始字符串里面提取出来的一部分
9. concat()
作用: 拼接字符串
语法:
字符串.concat(要拼接的字符串1, 要拼接的字符串2, …)
返回值:
一个拼接好的字符串
作用和 加号(+) 是一模一样的
10. indexOf()
作用: 通过字符, 查找到对应的索引返回
语法:
字符串.indexOf(你要查找的字符)
字符串.indexOf(你要查找的字符, 从那个索引开始查找)
返回值: 一个数字
如果有这个字符, 那么就返回找到的第一个字符位置的索引
如果没有这个字符, 那么就返回 -1
11. lastIndexOf()
作用: 通过字符, 查找到对应的索引返回, 从后往前查找
语法:
字符串.lastIndexOf(你要查找的字符)
字符串.lastIndexOf(你要查找的字符, 开始的索引)
返回值: 一个数字
如果有这个字符, 那么就返回找到的第一个字符位置的索引
如果没有这个字符, 那么就返回 -1
// 1. charAt()
// var str = ‘hello world’
// var res = str.charAt(8)
// console.log(res)
// 2. charCodeAt()
// var str = ‘你好 世界’
// // res 获取的是 你 这个汉字的编码
// var res = str.charCodeAt(1)
// console.log(res)
// 3. substr()
// var str = ‘hello world’
// // 从索引 1 开始, 向后数 7 个, 提取出来
// var res = str.substr(1, 7)
// console.log(res)
// 4. substring()
// var str2 = ‘hello world’
// // 从索引 1 开始, 到索引 7, 不包含索引 7
// var res2 = str2.substring(1, 7)
// console.log(res2)
// 5. toLowerCase()
// var str = ‘ABCDEFGHIJKLMN’
// var res = str.toLowerCase()
// console.log(res)
// 6. toUpperCase()
// var str2 = ‘opqrstuvwxyz’
// var res2 = str2.toUpperCase()
// console.log(res2)
// 7. split()
// var str = ‘2020-05-20’
// // 用 - 把字符串分开, 每一段都作为一个数据放在数组里面
// var res = str.split(’-’)
// console.log(res)
// 8. slice()
// var str = ‘abcdefghijklmn’
// 提取 str 字符串中索引 1 到索引 10 的字符, 不包含索引 10
// var res = str.slice(1, 10)
// 你写 -3 等价于 str.length + -3 === 11
// var res = str.slice(1, -3)
// var res = str.slice(1, 11)
// console.log(res)
// 9. concat()
// var str = ‘hello world’
// var res = str.concat(’ 你好 世界’)
// console.log(res)
// 10. indexOf()
// var str = ‘hello world’
// // 当你找一个多个字母的字符的时候, 会找到匹配的第一个字母的位置返回
// var res = str.indexOf(‘world’)
// console.log(res)
// 11. lastIndexOf()
// var str = ‘hello world’
// var res = str.lastIndexOf(‘l’)
// console.log(res)
操作数字的属性和方法
对数字进行操作
JS 里面有一个内置对象叫做 Math
他里面保存了很多操作数字的方法和属性
1. Math.random()
作用: 给你生成一个随机数 0 ~ 1, 包含 0 不包含 1
语法: Math.random()
返回值: 就是一个随机数字, 0 ~ 1 之间, 包含 0 不包含 1
2. Math.round()
作用: 对一个数字进行 四舍五入 取整
语法: Math.round(你要取整的数字)
返回值: 就是取整好的数字
3. Math.ceil()
作用: 对一个数字进行 向上 取整
语法: Math.ceil(你要取整的数字)
返回值: 就是取整好的数字
4. Math.floor()
作用: 对一个数字进行 向下 取整
语法: Math.floor(你要取整的数字)
返回值: 就是取整好的数字
5. Math.abs()
作用: 对一个数字取 绝对值
语法: Math.abs(你要取绝对值的数字)
返回值: 就是取好绝对值的数字
6. Math.pow()
作用: 对一个数字进行 幂 运算
语法: Math.pow(一个数字, 的几次方)
返回值: 一个数字取幂后的结果
7. Math.sqrt()
作用: 对一个数字进行开算术平方根, 开二次算术平方根(只能开二次算术平方根)
语法: Math.sqrt(你要开平方的数字)
返回值: 一个开好平方根的数字
8. Math.max()
作用: 选出若干个数字里面最大的那一个
语法: Math.max(数字1, 数字2, 数字3, …)
返回值: 若干个实参中最大的那个数字
9. Math.min()
作用: 选出若干个数字里面最小的那一个
语法: Math.min(数字1, 数字2, 数字3, …)
返回值: 若干个实参中最小的那个数字
10. Math.PI
注意: 是一个属性, 不是方法, 使用不需要括号
作用: 给你一个近似于 Π(pai) 的值
// 1. random()
// var n1 = Math.random()
// console.log(n1)
// 2. round()
// var n2 = Math.round(10.49) // 10
// console.log(n2)
// 3. ceil()
// 向上取整就是不管小数点是几都进位
// var n3 = Math.ceil(-10.1) // -11 -9 -10
// console.log(n3)
// 4. floor()
// var n4 = Math.floor(10.999)
// console.log(n4)
// 5. abs()
// var n5 = Math.abs(-20) // 20
// console.log(n5)
// 6. pow()
// var n6 = Math.pow(2, 10) // 1024
// console.log(n6)
// 7. sqrt()
// 求 4 的算数平方根
// var n7 = Math.sqrt(4)
// console.log(n7)
// 8. max()
// var n8 = Math.max(10, 20, 50, -100, -30, 99, 72)
// console.log(n8)
9. min()
// var n9 = Math.min(10, 20, 50, -100, -30, 99, 72)
// console.log(n9)
// 10. PI
// var n10 = Math.PI
// console.log(n10)
范围内的随机整数
10 ~ 20 的随机整数
1. 0 ~ 10 的随机整数
整数, Math.round() Math.ceil() Math.floor()
因为我们的 Math.random() 是 0 ~ 1 之间的随机小数
直接使用 Math.random() * 10
取值范围: 0 ~ 1
0 * 10 === 0
0.999 * 10 === 9.99
取整: Math.round()
0 ~ 0.499 得到 0
0.5 ~ 1.499 得到 1
8.5 ~ 9.499 得到 9
9.5 ~ 10 得到 10
取整: Math.floor()
0 ~ 0.999 得到 0
1 ~ 1.999 得到 1
8 ~ 8.999 得到 8
9 ~ 9.999 得到 9
换一个想法, 得到小数的时候, 不要 0 ~ 10 之间的
我取得 0 ~ 11 之间的小数
取整: Math.floor()
0 ~ 0.999 得到 0
1 ~ 1.999 得到 1
9 ~ 9.999 得到 9
10 ~ 10.999 得到 10
2. 两个数字范围之间的随机整数
0 ~ 10 的随机整数 + 10 得到的结果取值范围是多少 10 ~ 20 差值 10
0 ~ 10 的随机整数 + 20 得到的结果取值范围是多少 20 ~ 30 差值 10
0 ~ 30 的随机整数 + 10 得到的结果取值范围是多少 10 ~ 40 差值 30
两个整数的之间的随机整数
0 ~ 两个数字差值之间的随机整数 + 相对比较小的那个数字
求 x ~ y 的随机整数, 假设 x 小, y 大
0 ~ (y - x) 之间的随机整数 + x
取 0 ~ 10 之间的随机整数 Math.random() * (10 + 1)
取 0 ~ 20 之间的随机整数 Math.random() * (20 + 1)
取 0 ~ 30 之间的随机整数 Math.random() * (30 + 1)
取 0 ~ (y - x) 之间的随机整数 Math.random() * (y - x + 1)
把这个功能封装成一个函数
1. 准备一个函数, 接收两个参数
2. 计算出两个数字之间的随机数
3. 把这个随机数字返回
// 封装函数
// 1. 准备一个函数, 接收两个参数
function fn(x, y) {
// 2. 计算出两个数字之间的随机数
// 2-1. 先要确定 x 和 y 相对大的和相对小的数字
var max = Math.max(x, y)
var min = Math.min(x, y)
// 2-2. 利用这个大数字和小数字取出随机整数
var n = Math.floor(Math.random() * (max - min + 1) + min)
// 3. 把这个随机数字返回
return n
}
// 使用的时候
// res 得到的就是 10 ~ 20 之间的一个随机整数
var res = fn(30, 20)
console.log(res)
// x ~ y 之间的随机整数
// var x = 10
// var y = 20
// // 1. 计算出差值 + 1
// var n1 = y - x + 1
// // 2. 计算出 0 ~ cha 的随机整数 + 相对小的那个数字
// var n2 = Math.random() * n1 + x
// // 3. 向下取整
// var n3 = Math.floor(n2)
// console.log(n3)
// 0 ~ x 的随机整数
// 取得一个随机小数
// var n1 = Math.random()
// 把这个数字 * 11
// var n2 = n1 * 11
// 使用 floor 方法取整
// var n3 = Math.floor(n2)
// var n = Math.floor(Math.random() * (10 + 1))
// console.log(n)
转换进制
1. toString()
作用: 把一个十进制数字转换成其他进制的数字
语法: 你要转换的数字.toString(转换成几进制)
参数的取值范围 2 ~ 36
返回值: 是一个字符串, 转换好进制的结果
2. parseInt()
作用: 把其他进制的数字转换成十进制的数字
语法: parseInt(你要转换的数字, 你的数字是几进制)
返回值: 是一个数字, 就是转换好的十进制数字
// 1. toString()
// var n1 = 35
// // 把 n1 这个数字转换成 三十六进制, 以字符串的形式给你
// var res = n1.toString(36) // ‘z’
// console.log(res)
// 2. parseInt()
var n1 = ‘z’
// 把 n1 的值当作一个 三十六进制 的数字, 转换成 十进制 数字
var res = parseInt(‘z’, 36) // 35
console.log(res)
保留小数的方法
1. toFixed()
作用: 给一个数字保留指定位的小数
语法: 数字.toFixed(你要保留几位小数)
返回值: 一个字符串, 就是保留好小数的数字
如果这个数字本身就没有那么多小数, 那么用 0 补齐
说明
你保留 n 位小数, 看 n + 1 位是几就进行四舍五入保留
// 1. toFixed()
var n1 = 10.123456789
var res = n1.toFixed(4)
console.log(res)
创建时间对象
时间对象是一个 复杂数据类型
1. 内置构造函数创建时间对象
语法: var time = new Date()
返回值: 就是你电脑上的当前时间 (包含时区)
通过传递不同的参数获取到一个指定时间节点的时间对象
1. 传递数字
至少传递两个数字(传递一个数字得到的是格林威治时间)
第一个数字: 表示年
第二个数字: 表示月(0 表示 1 月, 11 表示 12 月)
第三个数字: 表示日(1 表示 1 号, 31 表示 31 号)
第四个数字: 表示小时(0 表示 0 点, 23 表示 23 点)
第五个数字: 表示分钟(0 表示 0 分, 59 表示 59 分)
第六个数字: 表示秒钟(0 表示 0 秒, 59 表示 59 秒)
第七个数字: 表示毫秒(0 表示 0 毫秒, 999 表示 999 毫秒)
2. 传递字符串
一个字符串表示所有内容
‘YYYY-MM-DD HH:mm:ss’
只设置年月日, 可以一起设置
年月日之间可以用 - 连接, 也可以用 / 连接
注意: 传递字符串的时候
1 就表示 1 月, 12 表示 12 月
// 1. 创建时间对象
// var time = new Date()
// console.log(time)
// 创建指定时间节点的时间对象
// 1. 传递数字
// 2018 年 1 月, 剩下的时间都按照默认值走
// var time = new Date(2018, 0)
// console.log(time)
// 2018 年 1 月 2 号, 剩下的时间都按照默认值走
// var time = new Date(2018, 0, 2)
// console.log(time)
// 2018 年 1 月 2 号 15 点, 剩下的时间都按照默认值走
// var time = new Date(2018, 0, 2, 15)
// console.log(time)
// 2018 年 1 月 2 号 15 点 55 分, 剩下的时间都按照默认值走
// var time = new Date(2018, 0, 2, 15, 55)
// console.log(time)
// 2018 年 1 月 2 号 15 点 55 分 55 秒, 剩下的时间都按照默认值走
// var time = new Date(2018, 0, 2, 15, 55, 55)
// console.log(time)
// 2018 年 1 月 2 号 15 点 55 分 55 秒 666 毫秒, 剩下的时间都按照默认值走
// var time = new Date(2100, 0, 2, 15, 55, 55, 666)
// console.log(time)
// 2. 传递字符串
// var time = new Date(‘2018-1-22’)
// console.log(time)
// var time = new Date(‘2018/1/22’)
// console.log(time)
// var time = new Date(‘2018/1/22 15:22:32’)
// console.log(time)
获取时间对象内数据的方法
就是从时间对象里面获取到某些信息
1. getFullYear()
作用: 获取时间对象里面的 年份信息
语法: 时间对象.getFullYear()
返回值: 就是该时间对象里面的 年份信息, 是一个 number 类型
2. getMonth()
作用: 获取时间对象里面的 月份信息(0 表示 1 月, 11 表示 12 月)
语法: 时间对象.getMonth()
返回值: 就是该时间对象里面的 月份信息, 是一个 number 类型
3. getDate()
作用: 获取时间对象里面的 日期信息
语法: 时间对象.getDate()
返回值: 就是该时间对象里面的 日期信息, 是一个 number 类型
4. getHours()
作用: 获取时间对象里面的 小时信息
语法: 时间对象.getHours()
返回值: 就是该时间对象里面的 小时信息, 是一个 number 类型
5. getMinutes()
作用: 获取时间对象里面的 分钟信息
语法: 时间对象.getMinutes()
返回值: 就是该时间对象里面的 分钟信息, 是一个 number 类型
6. getSeconds()
作用: 获取时间对象里面的 秒钟信息
语法: 时间对象.getSeconds()
返回值: 就是该时间对象里面的 秒钟信息, 是一个 number 类型
7. getDay()
作用: 获取时间对象里面的 周几信息(1 表示周一, 0 表示周日)
语法: 时间对象.getDay()
返回值: 就是该时间对象里面的 周几信息, 是一个 number 类型
8. getTime()
作用: 获取时间对象里面的 时间戳
语法: 时间对象.getTime()
返回值: 就是该时间对象里面的 时间戳, 是一个 number 类型
时间戳:
我们计算机有一个计算机元年时间
叫做格林威治时间(1970 年 1 月 1 号, 0 点 0 分 0 秒)
时间戳, 就是从 格林威治时间 到 指定时间的 总毫秒数
var time = new Date()
console.log(time)
// 1. 获取年
var year = time.getFullYear()
console.log(year)
// 2. 获取月
var month = time.getMonth()
console.log(month)
// 3. 获取日
var date = time.getDate()
console.log(date)
// 4. 获取时
var hours = time.getHours()
console.log(hours)
// 5. 获取分
var minutes = time.getMinutes()
console.log(minutes)
// 6. 获取秒
var seconds = time.getSeconds()
console.log(seconds)
// 7. 获取周几
var week = time.getDay()
console.log(week)
// 8. 获取时间戳
var ms = time.getTime()
console.log(ms)
设置时间对象的指定内容
我单独只设置时间对象里面的某一个信息
1. setFullYear()
作用: 设置时间对象的年份信息
语法: 时间对象.setFullYear(你要设置的年份)
2. setMonth()
作用: 设置时间对象的月份信息(0 表示 1 月, 11 表示 12 月)
语法: 时间对象.setMonth(你要设置的月份)
3. setDate()
作用: 设置时间对象的日期信息
语法: 时间对象.setDate(你要设置的日期)
4. setHours()
作用: 设置时间对象的小时信息
语法: 时间对象.setHours(你要设置的小时)
5. setMinutes()
作用: 设置时间对象的分钟信息
语法: 时间对象.setMinutes(你要设置的分钟)
6. setSeconds()
作用: 设置时间对象的秒钟信息
语法: 时间对象.setSeconds(你要设置的秒钟)
7. setTime()
作用: 通过时间戳直接设置一个时间对象
语法: 时间对象.setTime(时间戳)
var time = new Date()
// 1. 设置年
// time.setFullYear(2018)
// // 2. 设置月
// time.setMonth(0)
// // 3. 设置日期
// time.setDate(10)
// // 4. 设置小时
// time.setHours(12)
// // 5. 设置分钟
// time.setMinutes(12)
// // 6. 设置秒钟
// time.setSeconds(12)
// console.log(time)
// 7. 设置时间戳
time.setTime(1515557532561)
// 1515557532561
console.log(time)
获取时间差
1. 获取 时间节点A 到 格林威治的毫秒数
2. 获取 时间节点B 到 格林威治的毫秒数
3. 两个时间节点的毫秒数相减, 得到两个时间节点之间相差的毫秒数
因为相减的时候, 我不确定谁大谁小
所以我最好是随便减一个, 取绝对值
4. 通过相差的毫秒数换算出是 多少天多少小时多少分钟多少秒
4-1. 换算天数
总的秒数 / 一天的秒数 得到的就是 多少天(小数)
我们只需要整天数, 不够整天的按照小时算
Math.floor() 取整一下
4-2. 换算小时
总的秒数 % 一天的秒数 剩下的就是不够一天的秒数
用剩下的秒数 / 一小时的秒数 得到的就是 多少小时(小数)
我门只需要整小时数, 不够一个小时的按照分钟取计算
Math.floor() 取整一下
4-3. 换算分钟
总的秒数 % 一小时的秒数 剩下的就是不够一小时的秒数
用剩下的秒数 / 一分钟的秒数 得到的就是多少分钟(小数)
我们只需要整分钟数, 不够一分钟的按照秒钟计算
Math.floor() 取整一下
4-4. 换算秒钟
总的秒数 % 一分钟的秒数 剩下的就是不够一分钟的秒数
// 0. 准备两个时间节点
// 2020 年 5 月 22 号 16 点 50 分 32 秒
var time1 = new Date(‘2020-5-22 16:50:32’)
// 当前的时间节点
var time2 = new Date()
// 计算从现在到明天晚上下课还有多少时间
// 1. 获取 time1 的时间戳
var t1 = time1.getTime()
// 2. 获取 time2 的时间戳
var t2 = time2.getTime()
// 3. 获取两个毫秒数之间的差值(直接计算到秒)
var diff = Math.floor(Math.abs(t1 - t2) / 1000)
// 4. 通过 diff 换算
// 4-1. 换算天
var day = Math.floor( diff / (60 * 60 * 24) )
// 4-2. 换算小时
var hours = Math.floor( diff % (60 * 60 * 24) / (60 * 60) )
// 4-3. 换算分钟
var minutes = Math.floor( diff % (60 * 60) / 60 )
// 4-4. 换算秒钟
var seconds = diff % 60
console.log(day, hours, minutes, seconds)
封装一个计算时间差的函数
1. 准备一个函数, 接收两个参数, 就是两个时间节点
2. 计算两个时间节点之间相差的 天数 小时数 分钟数 秒数
我们计算时间差的思路
2-1. 计算出两个时间节点之间相差的秒数
3. 把计算结果返回
因为我要返回四个数据
我们的一个 return 只能返回一个数据
两种:
放到数组里面 [1, 6, 58, 56]
可以实现效果, 但是对于每一个数据没有指向性的说明
放到对象里面 { day: 1, hours: 6, minutes: 58, seconds: 56 }
可以实现效果, 并且对于每一个数据都有明确的指向性
// 1. 准备一个计算两个时间之间时间差的函数
function timeDiff(time1, time2) {
// 两个参数表示两个时间节点
// 2. 计算两个时间节点之间的差值(天, 小时, 分钟, 秒钟)
// 2-1. 计算两个时间节点之间相差的秒数
var diff = Math.floor(Math.abs(time1.getTime() - time2.getTime()) / 1000)
// 2-2. 通过 diff 换算两个时间节点之间相差的天, 小时, 分钟, 秒钟
var day = Math.floor( diff / (60 * 60 * 24) )
var hours = Math.floor( diff % (60 * 60 * 24) / (60 * 60) )
var minutes = Math.floor( diff % (60 * 60) / 60 )
var seconds = diff % 60
// 3. 返回一个对象, 里面包含所有信息
// 3-1. 创建一个对象
var obj = {}
// 3-2. 向对象里面添加成员
obj.day = day // 把 day 变量的值赋值给了 obj 的 day 成员
obj.hours = hours
obj.minutes = minutes
obj.seconds = seconds
// 3-3. 把这个对象返回
return obj
}
// 使用 timeDiff 函数计算两个时间节点之间的时间差
var time1 = new Date(‘2020-5-22 16:50:33’)
var time2 = new Date()
var res = timeDiff(time1, time2)
console.log(‘距离出去浪还有 ’ + res.day + ’ 天 ’ + res.hours + ’ 小时 ’ + res.minutes + ’ 分钟 ’ + res.seconds + ’ 秒!_’)
// 时间是没有样式的
// 当你把这个数字渲染到页面的 span 标签里面
// 给 spen 标签一个样式
BOM(Browser Object Model) 浏览器对象模型
就是一套操作浏览器的属性和方法
BOM 的核心就是 window(窗口)
我们所有和 BOM 相关的属性和方法都是 window.xxx
window.xxx 可以省略 window. 不写
window 就是 js 里面的全局
我一个页面里面所有的内容都包含在全局内
// 定义了一个全局变量 a 值是 100
var a = 100
console.log(window)
获取浏览器窗口尺寸
在 window 下有两个属性, 表示的是浏览器 可视窗口 的大小
1. window.innerWidth
获取的是浏览器可视窗口的宽度(包含滚动条位置)
2. window.innerHeight
获取的是浏览器可视窗口的高度(包含滚动条位置)
特别说明:
mac 的 safari 浏览器, 滚动条是隐形的
innerWidth 和 innerHeight 就是不包含滚动条的尺寸
console.log(‘浏览器的可视窗口宽度 : ’ + window.innerWidth)
console.log(‘浏览器的可视窗口高度 : ’ + window.innerHeight)
浏览器的弹出层
1. window.alert() 提示框
弹出一个提示框, 只有一个确定按钮
没有返回值
小括号里面就是提示用户的文本内容
2. window.confirm() 询问框
弹出一个询问框, 有确定和取消两个按钮
返回值是一个 布尔值
如果用户点击的是确定, 返回的是 true
如果用户点击的是取消, 返回的是 false
3. window.prompt() 输入框
弹出一个输入框, 有确定和取消两个按钮, 还有一个输入的文本框
返回值: 用户输入的内容
如果用户点击取消, 那么返回 null
如果用户点击确定, 那么返回的就是文本框里面的内容
如果写了内容, 就是写的内容
如果没写内容, 就是空字符串(’’)
三个弹出层的共同特点
当他们弹出来以后, 后面的所有 js 代码都先暂停
知道用户操作为止
会打断代码的继续执行
// 1. 提示框
var res = window.alert(‘hello world’)
console.log(res)
// 2. 询问框
// var res = window.confirm(‘你是不是爱我!’)
// console.log(res)
// 3. 输入框
// var res = window.prompt(‘请输入一段文本’)
// console.log(res)
console.log(‘后续代码’)
浏览器的地址信息
再 window 下有一个成员叫做 location
是一个对象, 里面保存着一些地址栏相关的属性和方法
1. window.location.href 属性
是一个读写的属性
读: 获取当前页面的地址栏信息(中文会默认以编码的形式显示)
写: 设置当前页面的地址栏, 也就是跳转页面(本页面跳转)
window.location.href = ‘你要跳转的地址’
2. window.location.reload() 方法
是一个方法
作用: 重新加载当前页面(刷新)
语法: window.location.reload()
这个代码一旦执行, 就会刷新当前页面
注意: 这个代码千万不能写在一个打开页面就能执行的位置
可以把他写在事件里面, 在你需要的时候执行
// 1. 获取当前地址栏的信息
// var href = window.location.href
// // file:///E:/NZ-2006/DAY09/03_%E4%BB%A3%E7%A0%81/06_%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%9C%B0%E5%9D%80%E4%BF%A1%E6%81%AF.html
// console.log('当前地址 : ’ + href)
// 2. 设置当前地址栏地址
// 下面代码一旦执行, 就会跳转到百度首页
// 为了方便看到效果, 加再点击事件里面
// window.location.href = ‘https://www.baidu.com’
// 当我点击 button 按钮的时候会跳转到百度首页
// btn.onclick = handler
// function handler() {
// window.location.href = ‘https://www.baidu.com’
// }
// reload()
// 打开页面就会执行这段代码, 就会重新加载页面
// window.location.reload()
// 把重新加载这个事情放在一个事件里面
// 每次点击按钮的时候就会重新加载页面
btn2.onclick = function () {
window.location.reload()
}
浏览器的历史记录
再 window 下有一个成员叫做 history
里面记录了操作历史记录的属性和方法
1. window.history.back()
返回上一层历史记录
前提: 你要从某一个页面跳转过来
等价于我们浏览器上面的回退按钮
2. window.history.forward()
前进到下一层历史记录
前提: 你要从某一个页面回退回来才有
等价于我们浏览器上面的前进按钮
3. window.history.go()
可以前进, 可以后退, 可以刷新
需要一个参数, 是一个数字
window.history.go(数字)
正整数: 前进
零: 刷新当前页面
负整数: 后退
// 依托再事件里面执行 go(0)
btn.onclick = function () {
// 刷新当前页面
window.history.go(0)
}
浏览器的版本信息(了解)
再 window 下有一个成员叫做 navigator
他里面保存的都是浏览器的版本以及型号的相关信息
1. window.navigator.userAgent 属性
保存的是浏览器的型号及版本信息
2. window.navigator.appVersion 属性
保存的是浏览器的版本信息
3. window.navigator.appName 属性
所有的浏览器都是统一的名称(IE低版本除外)
保存的是 Netscape 这个名字(网景)
4. window.navigator.platform 属性
保存的是该浏览器安装的操作系统
// 1. userAgent
var userAgent = window.navigator.userAgent
console.log(userAgent)
// 2. appVersion
var version = window.navigator.appVersion
console.log(version)
// 3. appName
var name = window.navigator.appName
console.log(name)
// 4. platform
var platform = window.navigator.platform
console.log(platform)
开启一个新的标签页
关闭当前标签页
浏览器标签页操作
开启一个新的标签页, 关闭当前标签页
1. window.open()
作用: 再当前浏览器开启一个新的标签页
语法: window.open(你要再新标签页显示的地址)
2. window.close()
作用: 关闭当前标签页
语法: window.close()
// open()
btn.onclick = function () {
window.open(‘https://www.baidu.com’)
}
// close()
btn2.onclick = function () {
window.close()
}
浏览器的常见事件
由浏览器的行为来触发的事件
1. window.onload 事件
会在浏览器所有资源加载完毕后触发
所有资源(标签, css, js, 图片, 视频, 音频, …)
2. window.onresize 事件
会在浏览器窗口尺寸改变的时候触发
3. window.onscroll 事件
会在浏览器的滚动条滚动的时候触发
// 这个函数会在当前页面所有资源加载完毕后触发
// window.onload = function () {
// // 当这里的代码执行的时候, 页面所有的资源加载完毕了
// console.log(‘所有资源加载完毕’)
// }
// 这个函数会在当前页面窗口尺寸改变的时候触发
// window.onresize = function () {
// // 当这里的代码执行的时候, 浏览器窗口尺寸一定改变了
// // 改变多少不一定, 只要变就触发
// // console.log(‘窗口尺寸改变了’)
// // 随着窗口尺寸的改变, 每次获取当前的窗口尺寸, 打印再控制台
// console.log('浏览器的可视窗口宽度 : ’ + window.innerWidth)
// console.log('浏览器的可视窗口高度 : ’ + window.innerHeight)
// }
// 这个函数会在当前页面的滚动条滚动的时候触发
window.onscroll = function () {
// 当这里的代码执行的时候, 表示浏览器的滚动条移动了
// 方向不管, 滚动多少也不管, 只要动就触发
console.log(‘滚动条滚动了’)
}
浏览器卷去的尺寸
document: 文档
documentElement: 表示的时 html 标签
body: 表示的时 body 标签
scroll: 滚动
top: 上
浏览器卷去的高度
1. document.documentElement.scrollTop 属性
=> 文档 的 html 元素 的 上方滚动距离
=> 有 DOCTYPE 标签的时候能拿到值
2. document.body.scrollTop 属性
=> 文档 的 body 元素 的 上方滚动距离
=> 没有 DOCTYPE 标签的时候能拿到值
有一个兼容写法
document.documentElement.scrollTop || document.body.scrollTop
浏览器卷去的宽度
1. document.documentElement.scrollLeft 属性
=> 有 DOCTYPE 标签的时候能拿到值
2. document.body.scrollLeft 属性
=> 没有 DOCTYPE 标签的时候能拿到值
有一个兼容的写法
document.documentElement.scrollLeft || document.body.scrollLeft
// 浏览器卷去的宽度
// 再浏览器滚动的事件里面获取
window.onscroll = function () {
// 有 DOCTYPE 标签的时候使用这个
// var leftD = document.documentElement.scrollLeft
// console.log(leftD)
// 没有 DOCTYPE 标签的时候使用这个
// var leftD = document.body.scrollLeft
// console.log(leftD)
// 兼容写法
// if (document.documentElement.scrollLeft) {
// var leftD = document.documentElement.scrollLeft
// } else {
// var leftD = document.body.scrollLeft
// }
var leftD = document.documentElement.scrollLeft || document.body.scrollLeft
console.log(leftD)
}
// 浏览器卷去的高度
// 不再页面打开就能执行的位置书写
// 因为只能执行一回
// var topD = document.documentElement.scrollTop
// console.log(topD)
// 需要再浏览器滚动事件里面执行
// 随着浏览器的滚动, 随时获取卷去的高度
// window.onscroll = function () {
// // 由 DOCTYPE 标签的时候, 使用这个
// // var topD = document.documentElement.scrollTop
// // console.log(topD)
// // 没有 DOCTYPE 标签的时候, 使用这个
// // var topD = document.body.scrollTop
// // console.log(topD)
// // 兼容的写法
// var topD = document.documentElement.scrollTop || document.body.scrollTop
// console.log(topD)
// }
* {
margin: 0;
padding: 0;
}
body {
width: 2000px;
height: 2000px;
}
div {
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: skyblue;
font-size: 40px;
position: fixed;
top: -80px;
left: 0;
transition: top .5s linear;
}
小案例 - 顶部通栏显示隐藏
思路:
有一个 div 盒子
1. 给浏览器绑定一个滚动事件
我们要在滚动事件里面去获取卷去的高度
2. 随时获取卷去的高度
3. 判断卷去的高度(你自己定义个数字, 暂定 300)
卷去的高度超过 300, div 显示, display: flex;
卷去的高度不到 300, div 隐藏, display: none;
技术问题: 怎么操作元素的样式
元素.style.display = ‘none’ 就是把元素的 display 样式设置为 none
元素.style.display = ‘flex’ 就是把元素的 display 样式设置为 flex
// 1. 给浏览器绑定一个滚动事件
// 函数会随着浏览器的滚动而触发
window.onscroll = function () {
// 2. 获取卷去的高度
var topD = document.documentElement.scrollTop || document.body.scrollTop
console.log(topD)
// 3. 判断 topD 是不是大于 300
if (topD > 300) {
// div 该显示了
topNav.style.top = ‘0’
} else {
// div 该隐藏了
topNav.style.top = ‘-80px’
}
}
- {
margin: 0;
padding: 0;
}
body {
width: 2000px;
height: 2000px;
}
button {
width: 50px;
height: 50px;
background-color: skyblue;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
position: fixed;
right: 30px;
bottom: 50px;
}
^
浏览器滚动到
通过一个方法, 指定浏览器的卷去的高度和宽度- window.scrollTo()
作用: 设置浏览器卷去的位置
语法:- window.scrollTo(左侧的距离, 上侧的距离)
必须写两个参数, 写一个就报错
不需要单位, 直接是数字就行
瞬间到达指定位置 - window.scrollTo({
top: 数字, // 表示上方的距离
left: 数字, // 表示左侧的距离
behavior: ‘istant’, // 默认, istant(瞬间), 可以写 smooth(平滑)
})
behavior: 行为, 行为模式
istant: 瞬间
smooth: 平滑
// 依托再事件里面执行
goTop.onclick = function () {
// 点击回到顶部按钮的时候触发
// 点击的时候, 左边回到 0, 上边回到 0
// window.scrollTo(100, 50)
// 方法二:
window.scrollTo({
left: 200,
top: 100,
behavior: ‘smooth’, // 表示平滑的滚动
})
}
定时器
- window.scrollTo(左侧的距离, 上侧的距离)
- setTimeout(): 延时定时器 / 炸弹定时器
作用: 再你指定时间以后, 执行一次就没有后续了
语法: setTimeout(函数, 时间)
函数: 会在时间达到的时候执行
时间: 是一个数字, 单位是毫秒ms - setInterval(): 间隔定时器
作用: 每间隔指定时间以后, 执行一次代码, 循环往复没有尽头
语法: setInterval(函数, 时间)
函数: 每间隔指定时间就执行一回
时间: 是一个数字, 单位是毫秒ms
// 页面打开的时候给你打印一个时间
console.log(new Date())
// 1. setTimeout()
// setTimeout(function () {
// // 这个函数会在 2000ms 以后执行
// console.log(‘我执行了’)
// console.log(new Date())
// }, 2000)
// 2. setInterval()
setInterval(function () {
// 这个函数每间隔 2000ms 就执行一次
console.log(‘我执行了’)
console.log(new Date())
}, 2000)
定时器的返回值
不分定时器种类, 只表示你是页面中的第几个定时器
是一个数字 number 类型
作用: 将来用来关闭定时器使用的
// timer1 接收的就是 setTimeout 的返回值
var timer1 = setTimeout(function () {
console.log(‘setTimeout’)
}, 1000)
// timer2 接收的就是 setInterval 的返回值
var timer2 = setInterval(function () {
console.log(‘setInterval’)
}, 1000)
console.log(timer1)
console.log(timer2)
关闭定时器
关闭定时器 - clearTimeout()
作用: 关闭定时器
语法: clearTimeout(你要关闭的定时器返回值) - clearInterval()
作用: 关闭定时器
语法: clearInterval(你要关闭的定时器返回值)
说明:
关闭定时器是不分种类的, 可以互相关闭
claerTimeout 能关闭 setTimeout 也能关闭 setInterval
clearInterval 能关闭 setTimeout 也能关闭 setInterval
// 1. 开启一个定时器
var timer1 = setTimeout(function () {
console.log(‘setTimeout 执行了’)
}, 3000)
var timer2 = setInterval(function () {
console.log(‘setInterval 执行了’)
}, 1000)
// 关闭定时器
// 为了方便看到效果, 依托再点击事件上
btn.onclick = function () {
// 关闭 定时器
clearTimeout(1)
// 关闭第二个定时器
clearInterval(2)
}
异步执行代码: 当代码执行到异步的时候, 先暂时不执行, 继续向后
直到所有的同步代码都执行完毕以后, 再回来执行这个异步代码
同步执行代码: 按照代码从上到下的顺序执行
我们 JS 里面大部分都是同步代码
定时器是一个异步执行的代码**
结论:
当出现定时器的时候
先执行定时器外面的代码
后执行定时器里面的代码
// console.log(‘start’)
// setTimeout(function () {
// console.log(‘定时器执行了’)
// }, 1000)
// console.log(‘end’)
// console.log(‘start’)
// 异步代码会在同步结束后再执行
// 但是现在因为下面的死循环, 同步代码不会执行完毕
// 这个异步代码永远不会执行出来
// setTimeout(function () {
// console.log(‘定时器执行了’) // 会不会被打印出来
// }, 0)
// for (var i = 0; i < 2; i–) {}
- window.scrollTo()
- {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
div {
width: 150px;
height: 70px;
border: 1px solid #333;
position: fixed;
bottom: 0;
right: 0;
background-color: skyblue;
}
一号
3. 文本节点: 一个换行 + 四个空格 4. 元素节点: 二号 5. 文本节点: 一个换行 + 四个空格 6. 注释节点: < !-- 注释 -- > 7. 文本节点: 一个换行 + 四个空格 + hello world + 一个换行 + 两个空格 DOM树就是由各种各样的节点组成的 根节点: Document(文档), 用来承载所有节点的, 组成一个页面 根元素节点: html 标签, 页面上最大的元素节点, 页面上最大的标签 普通元素节点: body / head / div / ul / li / script / ... 文本节点: 写在页面上的文本内容, 有可能被任何元素节点包裹 属性节点: 写在每一个标签上的每一个属性, 必须要依赖于元素存在 注释节点: 单独书写的一个节点, 表示注释内容, 不显示在页面上 节点操作: 对这些节点进行增删改查 获取节点的操作 获取某一个元素节点的相关节点 下面的所有语法都是 元素.xxx 1. childNodes 属性 作用: 获取到一个元素节点下所有的 **子节点** 语法: 元素.childNodes 得到: 是一个伪数组, 里面是所有的子节点 2. children 属性 作用: 获取到一个元素节点下所有的 **子元素节点** 语法: 元素.children 得到: 是一个伪数组, 里面是多有的子元素节点 3. firstChild 属性 作用: 获取到一个元素节点下的第一个 **子节点** 语法: 元素.firstChild 得到: 一个节点(有可能是任何节点) 4. firstElementChild 属性 作用: 获取到一个元素节点下的第一个 **子元素节点** 语法: 元素.firstElementChild 得到: 一个元素节点 5. lastChild 属性 作用: 获取到一个元素节点下的最后一个 **子节点** 语法: 元素.lastChild 得到: 一个节点(有可能是任何节点) 6. lastElementChild 属性 作用: 获取到一个元素节点下的最后一个 **子元素节点** 语法: 元素.lastElementChild 得到: 一个元素节点 7. previousSibling 属性 作用: 获取到一个元素节点的上一个 **兄弟节点**(上一个哥哥节点) 语法: 元素.previousSibling 得到: 一个节点(有可能是任何节点) 8. previousElementSibling 属性 作用: 获取到一个元素节点的上一个 **兄弟元素节点**(上一个哥哥元素) 语法: 元素.previousElementSibling 得到: 一个元素节点 9. nextSibling 属性 作用: 获取到一个元素节点的下一个 **兄弟节点**(下一个弟弟节点) 语法: 元素.nextSibling 得到: 一个节点(有可能是任何节点) 10. nextElementSibling 属性 作用: 获取到一个元素节点的下一个 **兄弟元素节点**(下一个弟弟元素) 语法: 元素.nextElementSibling 得到: 一个元素节点 11. parentNode 属性 作用: 获取到一个元素节点的 **父节点** 一般来说, 我们能作为父子关系的, 父亲一般就是元素节点 有特殊的, 但是很少, 比如 document 就可以作为父节点, 但是不是元素节点 语法: 元素.parentNode 得到: 一个节点(有可能是元素节点, 也有可能是根节点) 12. parentElement 属性 作用: 获取到一个元素的 **父元素节点** 语法: 元素.parentElement 得到: 一个元素节点 13. attributes 属性 作用: 获取一个元素的所有 **属性节点** 因为属性节点不作为独立节点存在, 必须依赖元素节点存在 所以他不和任何内容出现父子关系 语法: 元素.attributes // 0. 获取元素 var div = document.querySelector('div') // 1. childNodes // 获取 div 这个元素下的所有 **子节点** // console.log(div.childNodes) // 2. children // 获取 div 这个元素下的所有 **子元素节点** // console.log(div.children) // 3. firstChild // 获取 div 这个元素下的第一个 **子节点** // console.log(div.firstChild) // 4. firstElementChild // 获取 div 这个元素下的第一个 **子元素节点** // console.log(div.firstElementChild) // 5. lastChild // 获取 div 这个元素下的最后一个 **子节点** // console.log(div.lastChild) // 6. lastElementChild // 获取 div 这个元素下的最后一个 **子元素节点** // console.log(div.lastElementChild) // 7. previousSibling // 获取 div 这个元素的上一个 **兄弟节点** // console.log(div.previousSibling) // 8. previousElementSibling // 获取 div 这个元素的上一个 **兄弟元素节点** // console.log(div.previousElementSibling) // 9. nextSibling // 获取 div 这个元素的下一个 **兄弟节点** // console.log(div.nextSibling) // 10. nextElementSibling // 获取 div 这个元素的下一个 **兄弟元素节点** // console.log(div.nextElementSibling) // 11. parentNode // 获取 div 这个元素的 **父节点** // console.log(div.parentNode.parentNode.parentNode) // document // 12. parentElement // 获取 div 这个元素的 **父元素节点** // console.log(div.parentElement.parentElement.parentElement) // null // html 是最大的元素节点, 他没有 父元素 只有 父节点 // div // div 的 父节点 是 body // div 的 父节点 的 父节点 是 html // div 的 父节点 的 父节点 的 父节点 是 document // 13. attributes // 获取 div 这个元素的所有 **属性节点** console.log(div.attributes)
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
