一、JavaScript简介
1.javascript是什么
java: 类似 java 计算机编程语言
script: 脚本
类似 java 计算机编程语言的脚本语言,缩写为 js
2.Java和JavaScript区别
- 静态编译: 将 java 的程序编译生成为一个.class 文件
- 编译型语言(java、c)和解释型语言(js)
- java 静态编译,js 作为脚本动态编译
- java 是强类型语言,js 是弱类型语言
- 周杰 周杰伦
- 雷锋 雷峰塔
3.JavaScript作用
提供了一个和 html 进行动态交互的功能
4.js语法简介(不重要)
js语法名称为:ECMA Script
Ecma国际(前身为欧洲计算机制造商协会,European Computer Manufacturers Association)
ECMA Script 缩写为 ES
常见说法ES5、ES6,后面的数字,代表的是语法版本号
5.JavaScript安装与使用(更不重要)
安装:js 运行只需要一个js运行环境即可,那么最常见的js运行环境是浏览器。所以只需要安装浏览器即可。
使用:
-
在浏览器控制台上直接运行js语言片段
-
在html文件的script标签中
-
使用.js文件书写js代码,然后再html中通过script标签引入代码
二、JavaScript的使用
1.引用
使用.js文件书写js代码,然后再html中通过script标签的src属性引入js代码文件
<script src="./js/test.js"></script>
//src属性是引入外部的js文件
//<head></head>中
//注意:如果是利用src引用了其他的js文件,那么该script标签的内容区不能书写其他的js代码,如果书写!视作无效
<script type="text/JavaScript">
// type引入文件的类型, 默认是指向 text/JavaScript
2.注释语句
//单行注释
/*
多行注释
*/
3.输出语句
console.log 可以输出任何内容到控制台,该语句通常用于调试代码使用!
console.log('hello world!')
4.js在html中的书写位置
常见的位置三个地方
1.head标签中
2.body标签的末尾处
3.html标签中,与body标签同级! 推荐使用这种!
5.js代码的执行顺序
总结为: 以每一句代码为单位!从上往下 !依次执行!
如果因为运算符优先级,则可能改变单行语句的执行顺序!
6.js的基础语法规范
- js严格区分大小写 abc ABC 是两个不同的标识
- 代码的整体是从上往下依次执行!
- 每一行语句的结束标志为; , 但大多时候;是可以省略的!
**注意:**不要某些语句打上分号,某些语句又不打分号! 不要这样!
三、JavaScript中的变量及使用方法
1.变量的定义
变量就是存放数据的一个容器 (盒子)
变量所保存的数据本质是存储在计算机的内存中的! 内存是通过硬件内存条所产生一块虚拟空间!通常称为内存空间!
内存中数据存储的特点:1.读写速度快 2.临时数据的存储 3.内存的存储空间是比较小的
2.声明变量
2.1 var 语法规则
在js中 通过 var 关键字 就可以声明一个变量
var a // 声明变量语法
var num = 100 // 声明变量的同时赋值,变量的初始化
var a, b, c, d //同时声明多个变量 多个变量之间用逗号分隔
// var 关键字可以重复声明相同的变量
2.2 js在ES6前后的变化
js在ES6之前,变量的声明只能通过 var关键字进行声明
js在ES6之后可以采用 let 或者 const 关键字进行变量的声明
2.3 let 语法规则
let a
a = 200
let A = 200 // 变量的初始化
let b, c, d // 同时声明多个变量
// let关键字不能在同一作用域重复声明相同的变量
2.4 const 语法规则
const关键字是用于声明 常量的!
常量:就表示该变量中保存的数据不允许更改!
const num = 200
// 利用赋值运算符 重新修改num的值
num = 300 // Uncaught TypeError: Assignment to constant variable.
如果不赋初值,则是undefined,但是常量不能改变,如若改变,则违背语法,所以要赋初值。
const声明的常量变量,是不允许修改的!
const同样在同一作用域下不允许声明相同的变量
2.5 变量数据的使用和修改
var num // 声明一个变量
num = 200 // 对num变量进行赋值
// 使用num变量中的数据
console.log(num)
console.log(num + 100) // 1.首先读取num的值 200 2. 进行运算 200 + 100 3.输出 300
// 修改变量的值
在js中修改一个变量的值必须通过 '=' 赋值运算符
num + 300 //修改无效
console.log(num) //200
2.6变量(标识符)的命名规则
- 标识符就是表示该环境下,作用域的一些数据!
- 标识符能表示 变量 函数 类 方法 对象 …
js中的标识符命名规范:
1.标识符只能由字母 数字 下划线 以及$符号组成
2.标识符不能以数字进行开头
3.标识符严格区分大小写
4.不能采用关键字或者保留字进行标识符的定义
– 关键字:js语法规范中,提前规定好了一些单词!并且js也赋予其特殊的含有!这些单词称为关键字! 比如 if else break for var let const…
– 保留字:js语法规范中,以前收录了一些单词!但目前这些单词未真正的投入使用,测试阶段!并没有任何的含义! 这些单词称为保留字
注意:以上4条就是js标识符命名规范的硬性准则!
5.标识符如果由多个单词构成!应遵循 ‘小驼峰命名法’ : blackcolor ==> blackColor
6.标识符的命名应该遵循 ‘见名知义’ : name ,age ,sex 不要取这些名字: a1 b2 abc …
四、JavaScript中的数据类型
1.数据类型
**数据类型:**js 中对不同种类数据的一个类型分类
**数据:**数据就是对现实事物的一种抽象表达!
**程序:**利用程序代码去解决实际的问题!处理数据!
对于事物的不同表达,数据的类型是有划分的!在 js 中数据是明确具备类型的!
2.mdn 为数据类型一共定义了 8 种:
7种原始类型
- undefined
- Boolean
- Number
- String
- BigInt
- Symbol
- null
- Object (对象类型,在 js 中使用构造函数所创建的对象!都属于 Object 对象类型)
口诀: 四基两空双一
四基: Number、String、 Boolean 、 BigInt
两空: undefined 、 null
双一: 一个符号 Symbol 一个对象 Object
3.数据按照参数传递方式分类
数据按照参数的传递方式,可以分为 值传递类型
和 引用传递类型
3.1值类型
Boolean 布尔型
console.log(true)
console.log(false)
Number 数字型
console.log(100)
console.log(1.1)
console.log(3.14)
console.log(0)
console.log(Number.MAX_SAFE_INTEGER)
//如果超过 Number.MAX_SAFE_INTEGER 值则应采用 BigInt类型来描述数据
注意:
1.''和"" 符号所表示的字符串本质上没有任何的区别,只是书写形式不同,但是应该注意配对原则
2.`` 改符号所表示的内容其数据格式也是为 字符串类型,不同之处在于两点
1.该方式允许跨行书写
2.该方式支持变量嵌套
console.log('hello
world') //hello world
console.log(`hello
wolrd`) //hello 换行 world
// 需求1: 打印一句话: 你好,张三!
// 张三存储在变量中
var name = '小米'
var age = 20
// +号的字符拼接作用 利用+可以进行字符的拼接!
console.log('你好,' + name)
// 需求2: 你好,我是张三,今年18岁了!
console.log('你好,我是' + name + '今年' + age + '岁了!')
console.log(`你好,我是${name},今年${age}岁了!`)
// `` 变量嵌套的语法 ${标识符名}
String 字符串
console.log('hello world!')
console.log('hello world!')
console.log(`hello world!`)
console.log('你好 世界!')
BigInt 长整数
// 创建BigInt的两种方式
// 方式一:数值n 表示该数据为BigInt
console.log(100n)
// 方式二: 使用全局函数 BigInt() 创建
var num = BigInt(300)
3.2引用类型
Object 对象类型
js中的对象类型有哪些?
所以数据只要通过构造器 constructor() 所构造的数据都视作Object对象类型!
数组、函数、json对象(花括号对象)…js中万物皆对象!
// 创建了一个数组对象
var arr = [1, 2, 3, 4, 5]
// 创建一个 json对象 (花括号对象)
var obj = {
name: '张三',
age: 18,
}
// 创建一个函数
function add() {
console.log('add...')
}
// null
var res = null
// null也是一种对象类型
json对象
// json对象的创建利用{}进行创建
// json对象中数据的存储采用键值对的方式, key:value ,其中key的数据类型必须是字符串,value可以是任何的合法数据类型!
// json对象中多个属性值使用逗号分隔
// 大多数时候,js允许省略key的引号或者双引号,省略的前提是属性名的命名符合标识符的命名规则
var person = {
name: '张三',
age: 18,
sayHello: function () {
console.log('你好!')
},
'black@color': 'red'
}
console.log(person)
1. 属性值的读取操作
//方式一:通过.语法 语法规则: 对象.属性 可以把.理解为语文上'的'
//方式二:通过[属性名]
// 获取person对象的name值 点语法
console.log(person.name)
console.log(person.age)
// 读取对象中不存在的属性
console.log(person.xxx) // undefined 读取对象中不存在的属性时其返回数据为 undefined
// [] 语法规则 对象[属性名]
console.log(person['black@color'])
2.添加属性 利用赋值运算符,为一个不存在的属性进行赋值!就是在为该对象添加一个新的属性并且赋值!
console.log(person.xxxx)//未定时,运行结果undefined
person.xxxx = '我是xxxx属性值'
console.log(person.xxxx)//我是xxxx属性值
console.log(person)
//age: 18
//black@color: "red"
//name: "张三"
//sayHello: ƒ ()
//xxxx: "我是xxxx属性值"
person['xxxx'] = '我是xxx数据'
console.log(person)
//{name: '张三', age: 18, black@color: 'red', xxxx: '我是xxx数据', sayHello: ƒ}
3.修改属性值 利用赋值运算符
person.age = 300
console.log(person)
//age: 300
//black@color: "red"
//name: "张三"
//sayHello: ƒ ()
4.对象类型中不允许存在两个同名属性!后一个会覆盖前面的属性值!
注意:以上这些操作,适用于任何的Obeject数据类型!
json对象的序列化和反序列化
序列化:将一个合法的json对象,转换为一段标准的json格式的数据!
// 序列化 利用js提供的JSON对象上的方法进行操作 JSON.StringIfy
console.log(obj,typeof obj)
//对obj对象进行序列化操作
//JSON.stringify(arg) arg:json对象
var res = JSON.stringify(obj)
console.log(res,typeof res)
反序列化:将一段标准的json格式的数据,字符串转化为一个合法的json对象!
// 反序列化 利用js提供的JSON对象上的方法进行操作 JSON.parse()
// JSON.parse(arg) arg ==> json数据
var newobj = JSON.parse(res)
console.log(newobj , typeof newobj)
console.log(newobj.name,newobj.age)
newobj.age = 20
json数据的作用是方便数据的传输!json数据是一种轻量的js数据格式!该数据不仅仅用于前端!后端!也会使用!嵌入式!
json对象的数据格式 JSON数据
json(JavaScript Object Notation, JS 对象简谱) : 轻量化js数据结构
为什么使用json对象,作用是什么?json 对象主要用于存储数据,有着简洁的数据结构,正由于这样的特点,json 对象常用于网络信息传输中,传递数据
Symbol 符号类型
Symbol符号类型的出现是为了解决花括号对象中,属性同名的问题!
因为symbol所表示的值是唯一的!不可能出现相同的情况!
// 创建一个Symbol值 利用 全局函数 Symbol()
var sym1 = Symbol('400')
var sym2 = Symbol('400')
console.log(sym1 === sym2)//结果为false
null 类型 特殊的一种引用类型
3.3undefined 未定义
undefined 是一个单独的类型,用于给已经定义的变量设置的初始值
该类型的值有且仅有一个 undefined
// undefined用于表示未赋值变量的状态!
var num
console.log(num)// undefined
num = 200
console.log(num)//200
3.4null 空引用
null 值的是空引用,是 js 的一个原始数据类型,用来指代引用类型数据的空值
null类型,是一种特殊的引用类型,
null类型的值有且只有一个 null
null是一个特殊的Object对象类型 typeof检测的返回值是 Object
null类型通常用于指向一个不存在的对象空间! 表示为'空'
切断变量的引用链!释放空间,也可以使用null
var obj = null
3.5值类型和引用类型数据的区别
值类型:变量中直接存贮值本身
引用类型:变量中存储的是引用地址,而值是存在引用地址所指向的内存中的某个对应位置
这两者的区别体现在哪里?体现在内存中存储的方式不同!
//值类型
var num = 100
console.log(num) // 100
num = 300
console.log(num) // 300
var num = 100
var num2 = num
num = 300
console.log(num2) // 100
//创建一个花括号对象,{}
//花括号对象中具备,属性和方法,以键值对的形式进行存储表示!
// ‘=’赋值运算符,运算顺序是从右往左!
//将赋值号右边表达式的值赋值给左边的变量
var person = {
name: '张三',
age: 18,
}
var p2 = person
// 访问 p2 对象
console.log(p2) // {name:张三,age:18}
// 修改p2的age属性
p2.age = 20
console.log(p2) // {name:张三,age:20}
console.log(person) // {name:张三,age:20}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FAQ2aB0X-1675681459207)(C:\Users\28894\Desktop\221203-h5\JavaScript\day01\值存储&引用存储.png)]
3.6检测数据类型
利用js所提供一个运算符 typeof 类型检测
语法: typeof 数据
typeof 运算后的数据属性什么数据类型? typeof 的返回值是字符串类型!
var res1 = typeof 100
var res2 = typeof 'hello world!'
var res3 = typeof {}
var res4 = typeof true
// res1 res2 res3 res4 所存储的数据是什么类型?字符串、
console.log(typeof res1,typeof res2,typeof res3 , typeof res4)//string string string string
4.数据类型的转换
数据的类型转换:将某个数据的类型通过某种方式转换为另一种数据类型! 比如: number ==》 string
数据转换通过方式不同可以分为:强制转换、隐式转换
强制转换:人为的通过手段去改变一个数据的类型
隐式转换:没有人为的参与,是程序解析自动进行转换
强制转换
Number()函数
该函数可以将其他的数据类型强制转换为Number类型的数据
总结:NaN表示该类型无法找到对应的Number值与之匹配!Symbol类型无法被转换为Number
实际的开发中,常常将 string Boolean 转换为 Number
// String ==> Number
console.log(Number('123'), typeof Number('123'))//123 'number'
console.log(Number('abc'), typeof Number('abc'))//NaN 'number'
console.log(Number('你好'), typeof Number('你好'))//NaN 'number'
console.log(Number('123a'), typeof Number('123a'))//NaN 'number'
console.log(Number('3.14'), typeof Number('3.14'))//3.14 'number'
console.log(Number('-100'), typeof Number('-100'))//-100 'number'
// NaN是一种特殊的number值,该值表示无法正确转换时的替代!其类型也是Number not a number
// Boolean ==> Number
console.log(Number(true), typeof Number(true))//1 'number'
console.log(Number(false), typeof Number(false))//0 'number'
// BigInt ==> Number
console.log(Number(100n), typeof Number(100n))//100 'number'
// Null ==> Number
console.log(Number(null), typeof Number(null))//0 'number'
// Undefined ==> Number
console.log(Number(undefined), typeof Number(undefined))//NaN 'number'
// Symbol ==> Number
console.log(Number(Symbol('100')), typeof Number(Symbol('100')))// 无法转换
// Object ==> Number
console.log(Number({}), typeof Number({}))//NaN 'number'
补充除了Number()函数可以强制转换其他数据为Number类型外,还有两种手段
全局函数: parseInt() parseFloat()
parseInt() 转成Number型的整数值
// parseInt() 将其他数据类型转换为number的整数值
console.log(parseInt('100'), typeof parseInt('100'))
console.log(parseInt('123a'), typeof parseInt('123a')) // 123
console.log(parseInt('3.14'), typeof parseInt('3.14')) // 3
console.log(parseInt('123.11a'), typeof parseInt('123.11a'))//123
parseFloat()转成Number型的浮点数
// parseFloat() 将其他数据类型转换为number的浮点数
console.log(parseFloat('100'), typeof parseFloat('100'))//100 'number'
console.log(parseFloat(200), typeof parseFloat(200))//200 'number'
console.log(parseFloat('3.14'), typeof parseFloat('3.14'))//3.14 'number'3.14 'number'
console.log(parseFloat('123a'), typeof parseFloat('123a'))//123 'number'
console.log(parseFloat('123.11a'), typeof parseFloat('123.11a'))//123.11 'number'
String()函数
该函数是将其他类型强制转换为字符串类型
// Number ==> String
console.log(String(100), typeof String(100))//100 string
console.log(String(3.14), typeof String(3.14))//3.14 string
console.log(String(-200), typeof String(-200))//-200 string
// BigInt ==> String
console.log(String(200n), typeof String(200n))//200 string
// Boolean ==> String
console.log(String(true), typeof String(true)) //true string
//true ==> 'true'
console.log(String(false), typeof String(false))//false string
// null ==> String
console.log(String(null), typeof String(null))//null string
// undefinde ==> String
console.log(String(undefined), typeof String(undefined))//undefined string
// Symbol ==> String
console.log(String(Symbol('adbcdddf')), typeof String(Symbol('adbcdddf')))//Symbol(adbcdddf) string
// Object ==> String
console.log(String({}), typeof String({}))//[object Object] string
// '[object Object]' json对象转为字符串后,值固定为 '[object Object]'
console.log(String([1, 2, 3]), typeof String([1, 2, 3]))//1,2,3 string
Boolean()函数
该函数是将其他类型强制转换为布尔类型
总结:js中的假值,假值就是通过强制转换或者隐式转换该数据为布尔类型后,其结果为false的数据称为假值!
js中的假值: false 、 0 、 -0 、 +0 、 null 、 undefined 、 ''
// Number ==》 Boolean
// Number类型转换为Boolean时,除0,+0,-0,以外的值都转换为true
console.log(Boolean(100), typeof Boolean(100))//true 'boolean'
console.log(Boolean(-100), typeof Boolean(-100))//true 'boolean'
console.log(Boolean(3.14), typeof Boolean(3.14))//true 'boolean'
console.log(Boolean(0), typeof Boolean(0))//false 'boolean'
console.log(Boolean(-0), typeof Boolean(-0))//false 'boolean'
console.log(Boolean(+0), typeof Boolean(+0))//false 'boolean'
// String ==》 Boolean
// 字符串类型在转换为布尔值时除 空字符''外的其他字符串都转换为true
console.log(Boolean('100'), typeof Boolean('100'))//true 'boolean'
console.log(Boolean('abc'), typeof Boolean('abc'))//true 'boolean'
console.log(Boolean('3.14'), typeof Boolean('3.14'))//true 'boolean'
console.log(Boolean('你好'), typeof Boolean('你好'))//true 'boolean'
console.log(Boolean(' '), typeof Boolean(' '))//true 'boolean'
console.log(Boolean(''), typeof Boolean(''))//false 'boolean'
// BigInt ==》 Boolean
console.log(Boolean(100n), typeof Boolean(100n))//true 'boolean'
console.log(Boolean(-100n), typeof Boolean(-100n))//true 'boolean'
console.log(Boolean(0n), typeof Boolean(0n))//false 'boolean'
// null ==》 Boolean
console.log(Boolean(null), typeof Boolean(null)) //false 'boolean'
// undefined ==> Boolean
console.log(Boolean(undefined), typeof Boolean(undefined)) // false 'boolean'
// Symbol ==> Boolean
console.log(Boolean(Symbol(100)), typeof Boolean(Symbol(100)))//true 'boolean'
// Object ==> Boolean
console.log(Boolean({}), typeof Boolean({}))//true 'boolean'
console.log(Boolean({ name: 'zhagnsan' }), typeof Boolean({ name: 'zhangsan' }))//true 'boolean'
null、undefined无强制
五、JavaScript的运算符
运算符的作用,利用各种运算符,对已有数据进行运算然后得到新的数据!
1.js中的运算符分类:
- 算术运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
- 三元运算符
- 单目运算符
2.算数运算符
- 算术运算符: + 、 - 、 * 、 / 、%(模运算,取余)、**(幂运算)
- 算数运算符主要用于两个number数据的计算!
- 如果算术运算符一侧数据类型不为number则js将进行隐式转换!转换为numnber类型然后进行运算!
+法运算
注意:如果+号的一侧数据类型为字符串类型,则+号就自动变成字符的拼接运算
console.log(5 + 5)
console.log(5 + true) // 5 + true 等价于 5 + Number(true)=6
console.log(100 + {}) // 100 + '[object Object]' = 100[object Object]
console.log(100 + null)//100
console.log(100 + undefined) // 100 + Number(undefined) ==> 100 + NaN = NaN
-法运算
console.log(100 - 20)//80
console.log(-20 - 30)//-50
console.log(20 - {})//NaN
console.log(20 - null)//20
console.log(20 - undefined)//NaN
*法运算
console.log(5 * 5)//25
console.log(5 * {})//NaN
console.log(5 * null)//0
/法运算
是数学意义上的除法运算!
console.log(6 / 2)//3
console.log(7 / 3)//2.33333
% 模运算,取余运算
// 5 % 3 ==》 商1 余2 结果:2
console.log(100 % 10)//0
console.log(7 % 3)//1
** 幂运算
console.log(5 ** 3)//125
3.赋值运算符
‘=’ 强调赋值运算符,不是数学意义上的等于符号!它是赋值运算!
运算流程: 将赋值运算符的右侧表达式的结果,赋值给左边的变量! 从右往左
let num = 30 // 将30赋值给左侧的 num变量
// 注意:赋值运算符可以改变变量或者对象属性的具体值!
表达式
表达式:表达式是js语句的最小单位!
表达式是可以通过计算得到一个确定的值!类似的式子就可以称为表达式!
比如: 5+5 算术表达式 、300 > 200 比较表达式 、 Number(‘123’) 函数表达式 、 200 常量表达式 、 num 变量表达式!
4.复合运算符
复合赋值运算符:该运算符是 赋值运算符 与 算数运算符的结合书写!
注意:复合赋值运算符也具备赋值运算的功能!
+= 、 -= 、 /= 、 %= 、 * * = 、* =
let num = 30
// num = num + 30
num += 30 // 等价于 num = num + 30
num -= 20
num /= 2
num *= 5
num %= 10
num **= 7
5.比较运算符
用于对两个数据进行数据的比较,其比较结果为布尔值!true 或 false
js中的比较运算符: > 、< 、 >= 、<=、 ==、 =、 != 、!
// >
console.log(100 > 1) // true
console.log(100 > 200) // false
console.log(100 > '300') //false 隐式转换 等价于 100 > Number('300')
console.log('a' > 'b') // false 字符的ASCII码 a==>97 b==>98
// <
console.log(100 < 50 - 20)//false
// >=
console.log(100 >= 100)//true
// <=
console.log(100 <= 200 - 100)//true
// == 等于,注意这才是js的等于!
// 双等于,特点是,进行比较时如果两侧的数据类型不一致!首先进行隐式转换!
console.log(100 == 100)//true
console.log(100 == '100') // true 隐式转换 100 == Number('100') ==> 100 == 100 ==> true
// === 全等于,三等,
// 全等的特点是,只会比较数据的值,如果数据的类型都不同!直接返回false!
// 1. 先检测两边的类型是否一致 如果不一致则直接返回 false
// 2. 进行值的比较,查看是否相等
console.log(100 === 100)//true
console.log(100 === '100')//false
console.log({} === {}) //false
//注意:引用数据类型进行比较时,比较的是地址值!
// != 不等于
// 不等于,特点,如果两侧数据类型不同还是会进行隐式转换!
console.log(100 != 100) //false
console.log(100 != '100') // false
// !== 不全等 特点,不会进行隐式转换,只要!==的两边数据类型不同直接返回! true
console.log(100 !== 100) // false
console.log(100 !== '100') // true
// 建议:以后如果遇到需要比较两个值是否相等的情况下,请采用三等!尽量不要采用双等!
6.逻辑运算符
逻辑运算符:用于对两个逻辑值的运算!
js中的逻辑运算符: &&(与) ||(或) !(非,取反)
逻辑运算表达式的返回结果是什么类型?结果:可以是任何数据类型!
6.1 && 与运算
运算语法: 表达式1 && 表达式2 如果&&运算两侧的数据类型不是布尔类型,则先进行隐式转换! Boolean()
与运算口诀: 全真为真,一假即假
console.log(false && false) // false
console.log(true && false) // false
console.log(true && true) // true
console.log(false && false && true) // false
console.log(100 > 200 && 200 < 300) // false && true ==> false
console.log(100 && true) // Boolean(100) && true true && true
console.log(false && '')//false
console.log(100 && 200) // Boolean(100) && Boolean(200) true && true ==> true 200
注意:js中的逻辑与和逻辑或都是属于短路与,短路或!
短路与:
特点在运算时,从左往右计算,如果碰到其中一个表达式的值为false,那么后续的表达式将不再进行计算!并且返回当前表达式的原始值作为整个与运算的结果!
如果从左往右计算,都没有遇到false,那么将最后一个表达式的原始值作为整个与运算的结果!
var num = 100
console.log(100 < 30 && (num += 10))//false
console.log(num) //100
console.log(0 && true) //Boolean(0) ==》 false 0 原始值
console.log('' && true)//空,没有值
console.log(null && true)//null
console.log(undefined && true)//undefined
console.log(true && true && true && '')//空,没有值
6.2逻辑或(短路或)
运算语法: 表达式1 || 表达式2 如果||运算两侧的数据类型不是布尔类型,则先进行隐式转换! Boolean()
或运算口诀: 全假为假,一真即真
console.log(false || false) // false
console.log(false || true) // true
console.log(true || true) // true
短路或的运算特点
特点在运算时,从左往右计算,如果碰到其中一个表达式的值为,true,那么后续的表达式将不再进行计算!并且返回当前表达式的原始值作为整个或运算的结果!
如果从左往右计算,都没有遇到true,那么将最后一个表达式的原始值作为整个或运算的结果!
console.log(100 || false) // 100
console.log({} || false) // {}
console.log([] || false) // []
console.log(true || false) // true
console.log(false || false || false || [])//[]
6.3!取反运算 非运算
口诀: 真变假,假变真
console.log(!false)//true
console.log(!true)//false
7.自增(++)自减(–)运算
- 自增运算: 前自增、后自增 , 运算符都是 ++ 只是++的位置不同
- 自减运算: 前自减、后自减 , 运算符都是 – 只是–的位置不同
自增,自减运算规则: 将变量自身的值取出来+1或-1,然后重新赋值给变量!
前自增(自减)和后自增(自减)的区别:
- 前自增(自减),是先将数据进行+1(-1),然后再参与其他的运算
- 后自增(自减),是先利用原始数据参与其他的运算,然后再进行+1(-1)操作
let num = 50
console.log(++num + 50) // 101
console.log(num)//51
let num = 50
console.log(num++ + 50) // 100
console.log(num)//51
// 注意:表达式一旦计算完毕!值已经确定!则表达式的结果不能更改!
练习
// 需求1:
var a = 10
var b = 10
var c = 10
a = b++ // a = 10 b = b+ 1 ==> b = 11
c = --a // a = a -1 c = 9 ==> c = 9 , a = 9
b = ++a // b = 10 ==> a=10 , b=10 ,c=9
a = c-- // a = 9 , c = 8 , b = 10
console.log(a, b, c)
// 请分别计算出a,b,c的值
// -----------------------------------------
// 需求2:
var x = 4 // x = 4 +1 = 5 +1 = 6
var y = x++ + ++x + x * 10 // 4 + 6 + 6*10
console.log(x, y)
// 计算出x,y的值
// -----------------------------------------
// 案例一
var a = 1
var b = ++a + ++a // 2 + 3 b = 5
console.log(b, a) // 5,3
var a = 1
var c = a++ + a++ // 1 + 2 a=3
console.log(c, a)
var a = 1
var d = a++ + ++a // 1 + 3
console.log(d, a)
var a = 1
var e = ++a + a++ // 2 + 2 a =3
console.log(e, a)
// -------------------------------------------
var a = 5
console.log(a, a * --a) // 5 , 5 * 4
// -------------------------------------------
var a = 5
console.log(a, a * --a) // 5 , 5 * 4
// -------------------------------------------
var a = 5
console.log(a, --a * a++) // 5 , 4 * 4
console.log(a)
8.条件运算符(三目运算符)
三目:操作数,为3
双目*
单目 ! 、 typeof …单目运算的操作数只有一个!
语法规则: 表达式?结果1:结果2
运算流程: 计算表达式结果,如果表达式为真,则将结果1的数据进行返回,否则返回结果2的数据
let res = 100 > 50 ? 100 : 200//100
let num = false ? 10 + 1 : 20 + 1//21
9.逗号运算和括号运算
逗号运算符,始终将最后一个,号表达式的值最后整个逗号表达式的运算结果
let a, b, c
let res = (1, 2, 3, 4)
console.log(res)//4
小括号()
js中利用()可以改变运算符的优先级!以及将一些表达式看作为一个整体进行计算!
9.运算符的优先级
参考: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
六、流程控制语句
流程控制语句
- js的代码如果没有人为的干预,那么js的执行顺序为从上往下,顺序执行!
- 作用:流程控制语句后,可以对js的代码执行顺序进行干预,完成更复杂的程序逻辑!
js中的三大流程控制结构:
- 顺序结构 选择结构 循环结构
- 顺序结构: 整体代码的解析执行是按照从上往下!的规律进行执行!也是最基础的控制结构
- 选择结构: 为代码的执行提供可能的路径!影响代码的走向!
- 循环结构: 重复的执行某一段代码!
6.1选择结构
js中的选择结构控制语句:
- if 单分支
- if…else 双分支
- if…else…if 多分支
- switch 条件多分支
if 语句
语法:
if (表达式) {
代码段
}
执行流程,判断if后表达式的值!如果为true,则执行{}中的代码段!false则不执行{}中的代码段,直接回到程序的主路径
let age = 17
if (age >= 18) {
console.log('恭喜你成年了!')
}
console.log('end___')
if…else 语句 双分支
语法:
if (表达式) {
代码段1
} else {
代码段2
}
执行流程,判断if后表达式的值!如果为true,则执行代码段1的内容,如果为false,则执行代码段2中的内容!,最终回到主路径!
let age = 18
if (age >= 18) {
console.log('恭喜成年,可以上网!')
} else {
console.log('抱歉,未成年!滚')
}
console.log('end——————')
// 练习1: 随机从键盘上输入一个数值,判读奇偶!
// js的输入语句,浏览器提供的一个api 全局函数
let num = prompt('请输入数字:')
if (num % 2 == 0) {
console.log('偶数')
} else {
console.log('奇数')
}
// 练习2: 随机输入一个年份,判断平润年
// 能被4整除但不能被100整除或者能被400整除 闰年
let year = prompt('输入一个年份:')
if ((year % 4 === 0 && year % 100 != 0) || year % 400 === 0) {
console.log('闰年')
} else {
console.log('平年')
}
if…else的嵌套(多分支)
语法:
if(表达式){
路径1
}else if(表达式){
路径2
} else {
路径3
}
总结: if…else的嵌套配对原则:
- else不允许单独存在!
- else必须和if进行配对
- else与if配对的原则是,找距离else最近的未配对的if进行配对!
// 练习1:随机从键盘上输入一个学生的成绩判断其等级!
// >=90 优秀 >=80 良好 >=70 一般 >=60 及格 60以下 不及格
let num = Number(prompt('请输入一个学生成绩:'))
console.log(typeof num)
//prompt返回的数据类型为 string
//num是什么数据类型? 90 80 70 60 59
if (num >= 90) {
console.log('优秀')
} else if (num >= 80) {
console.log('良好')
} else if (num >= 70) {
console.log('一般')
} else if (num >= 60) {
console.log('及格')
} else {
console.log('不及格')
}
console.log('end___')
------------------------------------------------------------
switch语句 条件分支语句
语法:
switch (表达式) {
case '值':
语句块
case '值':
语句块
case '值':
语句块
....
default:
不满足其他case分支时,进行default!
}
switch执行流程,计算表达式的值,然后与{}中case进行匹配!匹配一旦成功则从对应的case段落开始执行,一直到{}的末尾!
switch在执行的过程中如果没有被break语句进行打断则一直执行到语句末尾结束!如果遇到break打断则马上退出switch语句,执行主路径的内容!
注意: switch语句的匹配是基于三等来匹配! 类型和值相等!
let res = prompt('请输入一个字符:')
switch (res) {
case 'A':
console.log('我是A')
break
case 'B':
console.log('我是B')
break
default:
console.log('没有任何case匹配')
}
console.log('end——————')
6.2循环结构
循环:重复的执行一段相同的代码
js中提供了以下几个循环语句: while语句 do…while语句 for语句
while循环
while循环
语法:
while (表达式) {
循环体
}
执行流程,首先判断表达式的true或者false,如果为true则执行循环体的代码,否则结束while循环
如果判断为true则执行循环体的代码,当循环体代码执行完毕时,再次判断表达式的真假!重复以上操作!直到表达式为false,退出while语句
while循环的注意事项:
- 必须设置循环控制变量
- 必须为循环控制变量赋初始值
- 每一次的循环体结束前应该更新循环控制变量
while循环实现
1.设置循环控制变量
2.设置初始值
3. 更新循环控制变量
//练习1: 求1-100的和 利用while循环!
let num = 1
let sum = 0 // 求和变量 sum 保存每次+的结果
while (num <= 100) {
sum = sum + num
num++
}
console.log(sum)
--------------------------------------
//练习2: 求1-100的偶数和
let num = 1
let sum = 0
while (num <= 100) {
if (num % 2 === 0) {
sum += num
}
num++
}
console.log(sum)
//练习3: 从键盘上输入一个整数,求该数各位之和
//如:758 ==》 7+5+8=20 | 1234 ==》 1+2+3+4 = 10
//难点: 你不知道用户输入的数值位数!
758 ==》 7 5 8
758 ==》 8
75 ==》 5
7 ==》 7
758
758%10 == 8
parsInt(758/10) == 75
75
75%10 == 5
parsInt(75/10) == 7
7
7%10 == 7
parsInt(7/10) == 0
------------------------
let num = Number(prompt('请输入一个大于0的正整数:'))
let sum = 0
while (num != 0) {
sum = (num % 10) + sum
num = parseInt(num / 10)
}
console.log(sum)
do…while循环语句
语法:
do {
循环体
}while(表达式)
do...while循环的注意事项:
1.必须设置循环控制变量
2.必须为循环控制变量赋初始值
3.每一次的循环体结束前应该更新循环控制变量
执行流程,do...while循环,一开始先进行一次循环体代码的执行!然后进行表达式的判断!
如果为true 则继续执行循环体内容,重复操作!
如果为false 则结束do...while循环
let count = 1
do {
console.log('hello world!')
count++
} while (count <= 5)
console.log('end——————')
do…while 和 while 的区别
如果do…while和while执行相同的代码逻辑!do…while至少比while多一次循环!
for 循环
语法:
for(语句1;语句2;语句3){
循环体
}
执行流程:
for循环执行开始,先执行语句1,然后执行语句2,进行判断!
根据语句2的判读结果,true or false
如果为true,则执行循环体的内容,循环体内容执行完毕,跳到语句3并执行语句3的内容,语句3执行完毕后,又回到语句2再次进行判断!
直到语句2的结果为false,才会结束for循环
// 练习1: 利用for循环 求 1-100的偶数和
for (var sum = 0, i = 1; i <= 100; i++) {
if (i % 2 === 0) {
sum += i
}
}
console.log(sum)
// let 具备块级作用域
// var 不具备块级作用域
循环的嵌套
循环的嵌套,就是指多个循环语句进行嵌套使用!常见的 双重循环 , 三重循环!(在实际应用中基本上不会超过三重循环!)
双重循环, while和for while和while for和for while和do while…
for (var day = 1; day <= 5; day++) {
console.log(`今天是周${day}`)
for (var count = 1; count <= 8; count++) {
console.log(`这是今天的第${count}节课`)
}
}console.log('放假拉!.....')
-----------------------------------
// 练习1:打印矩形 利用双重循环
// *****
// *****
// *****
// *****
// 方法一: 利用 document.write()
for (var row = 1; row <= 4; row++) {
for (var col = 1; col <= 4; col++) {
document.write('*')
}
document.write('<br>')
}
document.write() 浏览器中dom对象上方法!
// 方法二: console.log()
let str = ''
for (var row = 1; row <= 5; row++) {
for (var col = 1; col <= 5; col++) {
str += '*'
}
// 转义字符: 换行 '\n' 斜线 '\\' 水平制表符 '\t' tab键
str += '\n'
console.log(str)
console.log('')
str = ''
}
---------------------------------------------
// 练习2:利用* 打印直角三角形 document.write()浏览器中dom对象上方法!,console.log()
*
**
***
****
*****
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= i; j++) {
document.write('*')
}
document.write('<br>')
}
console.log() // 它就是一个api 利用它 实现 输出日志到控制台! 浏览器提供的!
continue 和 break关键字
两个关键字可以使得循环提前结束
- break关键字
- 特点:直接结束当前包含break的循环语句!进入下一个步骤!
- continue关键字
- 特点:该关键字也可以结束循环,但是它只是结束该循环的本次内容!后续的循环继续执行!
for (let num = 1; num <= 10; num++) {
if (num === 3) {
break
}
console.log(num)
}//1 2
for (let num = 1; num <= 10; num++) {
if (num === 3) {
continue
}
console.log(num)
}//1 2 4 5 6 7 8 9 10
七、API
7.1什么是API
- API 是 Application Programming Interface 的缩写,翻译过来就是 “应用程序编程接口”
- API 是提供一些用于编程工具,对于 js 来说,API 可以是某框架提供的变量或函数,也可以是网络上的一个可访问的 url 地址,称为网络接口
- API 既然是编程工具,那么其作用是通过调用 API 来实现一个功能,例如:排序,查询,添加数据等操作
- 由于 JS API 数量众多,课程中将每日介绍一些常用的 API
7.2AIP调试(alert、confirm、prompt)
alert 弹窗提示
浏览器提供的 api 弹窗提示,alert 它会阻塞页面的渲染和执行
alert('请问????')
console.log('3333')
confirm 确认模态
弹出框 浏览器提供的 还具备返回值
let res = confirm('确定还是取消??')
console.log(res)
prompt 输入模态
result = prompt('请输入姓名')
console.log(result)
alert(result)
7.3获取文档元素并修改其属性
浏览器为程序员提供了一个接口!该接口可以访问页面中的所有元素节点!
该接口是一个对象!浏览器提供! document
document是对象,那么对应的对象上是存在 属性或者方法的!
利用document身上的方法可以获取到页面中的元素
1.document.querySelector()
- 方法中的参数:是字符串类型,css的合法选择器
- css的选择器书写: .box div #01 div>span div span …
- 该方法的返回值是符合css选择器下的第一个页面元素对象
2.document.querySelectorAll()
- 方法中的参数:是字符串类型,css的合法选择器
- css的选择器书写: .box div #01 div>span div span …
- 该方法的返回值是符合css选择器的所有页面元素对象,不管元素有多少个始终以 NodeList,伪数组的形式返回
3.document.getElementById()
通过元素的id属性值进行获取!
4.document.getElementsByClassName()
通过元素的class属性值进行获取! 以 HTMLCollection 伪数组形式返回
5.document.getElementsByTagName()
通过元素的标签名进行获取! div span p h1…
7.4通过元素对象获取和修改元素的属性
// 获取 div 元素
let div = document.getElementById('div01')
// 注意页面的元素都是对象类型,那么对象身上是具备属性和方法的!
console.log(div, typeof div)
// 通过api 查看 当前页面元素的所有属性!dir
console.dir(div)
// 页面是对象
console.log(div.title)
console.log(div.id)
// 注意:利用点语法或者[]是可以获取元素对象上所有已知或未知属性的值!除了class属性的值不能正常获取!
// 通过 class ==》 className来获取元素的class值
console.log(div.className)
console.log(div['id'])
// 修改页面元素的属性值
div.title = 'xxxxxxxxxxxxxxxxxxx'
div.className = 'box2'
7.5元素对象的标签属性
<div class="box">
<span>我是div的儿子</span>
<span>xxxxxx</span>
123456
</div>
// 元素对象身上具备已知的属性 未知的属性!
console.dir(box)
// innerHTML 和 innerText
console.log(box.innerHTML)
/*
<span>我是div的儿子</span>
*/
console.log(box.innerText) // 我是div的儿子
-----------------------------------
// innerHTML是用于更改元素的标签体的内容,合法的字符会被浏览器自动解析为标签!
// innerText是用于更改元素的文本信息,该文本信息是不会被浏览器当作标签来正常解析的
---------------------------
// innerHTML
box.innerHTML = '<span>我是div的儿子</span>'
// innerText
box.innerText = '<span>我是div的儿子</span>'
7.6通过简单的点击事件修改元素的标签体内容
let box = document.querySelector('.box')
let btn = document.querySelector('button')
// 为btn元素绑定一个点击事件
// 事件就是某个事情被触发了! 比如: 下雨 ==》 打伞 下课 ==》 吃饭 点击事件
// addEventListener(事件类型,事件处理函数)
btn.addEventListener('click', function () {
// console.log('我被点击了....')
// 当btn被点击时,修改box元素的标签体内容!
box.innerHTML = '我是被修改后的内容!'
})
7.7js获取页面元素的样式属性值
函数 | 作用 | 用法 | 注意 |
---|---|---|---|
elment.style | 获取元素的样式对象! | console.log(box.style, typeof box.style) | 利用element.style这种方式只能用于获取元素的 style属性中设置的样式值 |
利用样式对象 去获取 当前元素的属性值! | console.log(box.style.backgroundColor) | 样式属性名是-连接的,则采用小驼峰方式获取! | |
getComputedStyle(elment) | 全局函数 返回 对象 | let res = getComputedStyle(box) console.log(res.width) | 去获取当前元素正在应用的样式属性值 |
style属性的方式 和 getComputedStyle(elment)区别
- style属性的方式只能去获取元素自身的style属性所设置的样式值
- getComputedStyle(elment) 获取元素正在应用的样式属性值!
- style属性是可读 可写 而 getComputedStyle(elment)是只读的不能重新赋值
7.8元素的自定义属性【标签属性】(js-day13)
标签元素,是具备属性的!标签属性
在html中大部分使用的都是,官方预定义的属性!比如: id title class src…
在实际的开发中,需要用到一些,自定义的属性!
自定义属性:
作用:保存数据! 临时保存到页面中,浏览器中!
自定义属性的相关操作:
创建:
- 直接在元素的开始标签中,书写自定义的属性名以及赋值操作
- 利用data-* 形式创建自定义属性
操作名 | 操作方法 |
---|---|
读取官方的元素属性值 | console.log(box.className) console.log(box.id) |
读取自定义的元素属性值 | 自定义属性的值,不能通过点语法进行获取,需要使用元素对象的方法进行获取! |
console.log(box.getAttribute(‘add’)) | |
console.log(box.getAttribute(‘data-reduce’)) | |
console.log(box.getAttribute(‘class’)) | |
修改、设置一个元素的自定义属性 | 利用setAttribute会将数据,隐式的转换为string类型 |
box.setAttribute(‘add’, true) | |
box.setAttribute(‘class’, ‘boxxxxx’) | |
box.setAttribute(‘data-reduce’, ‘700’) | |
利用setAttribute为元素添加新的自定义属性 | box.setAttribute(‘mydata’, 100) |
特别的data-属性的读取方式 | console.log(box.dataset.reduce) |
console.log(box.dataset.reduce) | |
7.9classList数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
.box1 {
background-color: pink;
}
.box2 {
font-size: 50px;
}
.box1box2 {
background-color: yellow;
}
</style>
</head>
<body>
<div>div元素</div>
<button>还原</button>
<button>变色</button>
<button>增大字体</button>
<script>
// 动态的改变box元素样式
let box = document.querySelector('div')
// 拿到三个按钮
let btns = document.querySelectorAll('button')
console.log(box.classList)
// 为按钮绑定事件
btns[0].addEventListener('click', () => {
// box.className = ''
// classList 当前元素的样式类列表
box.classList.remove('box1')
box.classList.remove('box2')
})
btns[1].addEventListener('click', () => {
// box.className = 'box1'
box.classList.add('box1')
})
btns[2].addEventListener('click', () => {
// box.className += ' box2'
box.classList.add('box2')
})
</script>
</body>
</html>
7.10elment元素offset&client系列的属性(js-day15)
offset属性
offset系列的属性 5个 获取当前元素的相关的偏移数据
属性 | 作用 |
---|---|
offsetParent | 默认情况下,元素是相对于 body元素进行偏移的! |
offsetParent 指向的是距离当前元素最近的并且开启了定位的祖先元素!如果没有任何的元素符合这一条件那么,offsetParent默认指向body元素 | |
offsetTop | 当前元素的顶部距离offsetParent元素的距离 返回值是 number类型 |
offsetLeft | 当前元素的左侧部分距离offsetParent元素的距离 返回值是 number 类型 |
offsetWidth | 当前元素的可见框的 宽度大小 width + padding*2+ border *2 |
offsetHeight | 当前元素的可见框的 高度大小 height + padding *2 border *2 |
client属性
client系列属性 4个 当前元素自身的一些数据值
属性 | 作用 |
---|---|
clientTop | 当前元素的顶部边框大小 number类型 |
clientLeft | 当前元素的左侧边框大小 number类型 |
clientWidth | 当前元素的除border属性外的可见框宽度大小 width + padding |
clientHeight | 当前元素的除border属性外的可见框高度大小 height + padding |
案例一、点击元素更换背景色
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
#div01 {
background-color: yellow;
}
</style>
<body>
<div class="box" id="div01"></div>
</body>
<script>
let box = document.querySelector('.box')
box.addEventListener('click', function () {
// box.style.backgroundColor = 'pink'
// box.style.width = '500px'
})
</script>
案例二、表格行变色
<style>
table td {
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
<script>
// 需求: 点击每行该行变色
// 1.获取所有的tr元素
let trs = document.querySelectorAll('tr')
// 2.遍历trs伪数组, 为每一个tr绑定点击事件
// for (let i = 0; i < trs.length; i++) {
// trs[i].addEventListener('click', function () {
// // console.log(666)
// // 排他思想: tr==>3个tr 被点击的始终在同一时刻只要一个tr
// // 排除现在被点击的tr以外的所有tr都设置 write
// // 再一次的遍历 trs
// for (let i = 0; i < trs.length; i++) {
// // if (trs[i] === this) {
// // // 被点击的改行tr 进行 背景色变换
// // this.style.backgroundColor = 'red'
// // } else {
// // // 不是当前点击的tr
// // trs[i].style.backgroundColor = 'white'
// // }
// trs[i].style.backgroundColor = 'white'
// }
// this.style.backgroundColor = 'red'
// })
// }
// 标记思想:利用标记,记住上一次被标记为红色的tr,当下一次点击时,之间对他进行重置即可!无需操作其他的tr
// let index = '' // index 用于标记使用
// for (let i = 0; i < trs.length; i++) {
// trs[i].addEventListener('click', function () {
// if (index !== '') {
// trs[index].style.backgroundColor = 'white'
// }
// // console.log(666)
// this.style.backgroundColor = 'red'
// // 标记,当前这个tr的下标
// index = i
// console.log('当前被标记的元素是' + index)
// })
// }
</script>
案例三、表格列变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table td {
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
<script>
// 1. 获取所有的td 得到 tds
let tds = document.querySelectorAll('td')
// 2. 获得当前表格的列数
let col = document.querySelector('tr').querySelectorAll('td').length
// 3. 为每一个td绑定事件
// 循环遍历绑定
for (let i = 0; i < tds.length; i++) {
tds[i].addEventListener('click', function () {
// console.log(666)
// 进行排他操作
let temp = i % col
for (let j = 0; j < tds.length; j++) {
if (j % col === temp) {
tds[j].style.backgroundColor = 'red'
} else {
tds[j].style.backgroundColor = ''
}
}
})
}
</script>
</html>
八、数组
数组
是存储一组数据的一个容器!是属于Object类型
数组中可以同时存储不同类型的数据!只要是合法的js数据即可!多个数据之间使用**‘,’** 分隔!
数据中的每个数据可以称为 元素!数组的存储是有序存储的!利用元素的下标值进行访问!
1. 创建一个数组
// 方式一: 利用直接量进行创建, [] 推荐使用!
let arr = ['a', 'b', true, 100]
console.log(arr, typeof arr)
// 方式二: 利用构造函数 new Array()
let arr = new Array(100, 200, 'HELLO', true)
console.log(arr, typeof arr)
2. 获取数组中对应元素的值, 利用元素的下标!注意下标值是从 0 开始的!
// 语法: 数组[下标值]
let arr = [100, 'a', 'b', true]
console.log(arr[0])
console.log(arr[1])
console.log(arr[4]) // 如果超过下标范围,则返回undefined
如何判断一个变量是否为数组!
利用js提供的api 通过 构造函数对象 Array的静态方法 isArray() 进行判断
// 空数组
let arr = []
console.log(Array.isArray(arr)) // isArray方法只会返回 true 或者 false
// 修改数组中对应元素的值 利用 赋值运算
let arr = [100, 200, 300, 'hello']
console.log(arr)
arr[0] = 500
console.log(arr)
// 思考:以下代码
let arr1 = [100, 200, 300, 'hello']
let arr2 = arr1
console.log(arr1, arr2) // [100,200,300,'hello'] [100,200,300,'hello']
arr1[2] = 800
console.log(arr1) // [100,200,800,'hello']
console.log(arr2) // [100,200,800,'hello']
// 数组是引用数据类型!数组的赋值本质上是地址值的赋值!所以利用地址值可以改变对应的数据!
8.1数组的常见操作
操作名 | 方法 | 代码示例 | 注意项 |
---|---|---|---|
创建 | 1.利用直接量进行创建, [],推荐 | let arr = [‘a’, ‘b’, true, 100] | |
2.利用构造函数 new Array() | let arr = new Array(100, 200, ‘HELLO’, true) | ||
获取数组中对应元素的值 | 利用元素的下标! | console.log(arr[0]) 数组[下标值] | 下标值是从 0 开始!超过下标范围,则返回undefined |
判断一个变量是否为数组 | 通过 构造函数对象 Array的静态方法 isArray() 进行判断 | console.log(Array.isArray(arr)) | isArray方法只会返回 true 或者 false |
修改数组中对应元素的值 | 赋值运算 | let arr = [100, 200, 300, ‘hello’] arr[0] = 500 | 数组是引用数据类型!利用地址值可以改变对应的数据! |
获取数组的长度 | length属性 数组的下标值范围:0 — (arr.length-1) | console.log(arr.length) | 返回当前数组的长度 元素的个数。 |
添加元素到数组的末尾 | push方法 | arr.push(‘world!’) | |
删除数组末尾的元素 | pop方法 | let res = arr.pop() console.log(res, arr) | pop方法具备返回值,返回的就是被移除的末尾元素 |
添加元素到数组的头部 | unshift方法 | arr.unshift(‘xxxx’) | 原数组上操作数据! 无返回值 |
删除数组头部的元素 | shift方法 | let res = arr.shift() | 原数组上操作数据! 有返回值,被删除的元素 |
在数组的任意位置实现,元素的添加,修改,删除 | splice方法 | splice(x,y,args…) x : 确定在数组的那个位置进行操作 y : 是确实从对应位置开始删除的元素个数 args: 用于更新的新元素列表 | 在原数组上操作数据! 有返回值,返回值默认是一个空数组,如果有其他被删除的元素统一添加到该数组中 |
连接多个数组( 浅拷贝) | concat方法 | let arr3 = arr1.concat(arr2) let arr3 = arr1.concat([]) //浅拷贝 let arr3 = arr1 //深拷贝 | 连接多个数组,并返回连接后的新数组,没有操作原数组! |
通过指定的字符进行连接 | join方法 | let arr = [100, 200, 300, ‘hello’, true] let str = arr.join(‘&*(&*&(’) | 将数组中的各元素分散通过指定的字符进行连接,返回一个字符串数据! |
判断一个元素是否存在于当前数组中 | includes | let arr = [100, 200, ‘hello’] let res = arr.includes(100) | 判断一个元素是否存在于当前数组中,存在则返回 true 不存在返回 false |
判断元素是否存在 | indexOf() 从左往右依次进行匹配! | let res = arr.indexOf(‘a’) | 如果存在则返回第一个匹配的元素值的下标! 如果不存在则返回 -1 |
lastindexOf() 从右往左进行匹配 | let res = arr.lastIndexOf(‘a’) | 如果存在则返回第一个匹配的元素值的下标! 如果不存在则返回 -1 | |
数组的切片,获取数组的子数组 | slice(开始下标,结束下标) 左闭右开的区间 | let arr = [100, 200, 300, ‘a’, ‘b’] let res = arr.slice(2, 3) // 0 1 | 返回值,一个子数组! |
所有的数组实例对象,都来自于Array构造函数! 所以所有的数组实例对象都具备相同的操作方法和属性 | |||
注意以上的方法或者属性全都是数组的实例对象才能使用的! |
在数组的任意位置实现,元素的添加,修改,删除! splice方法 在原数组上操作数据!
// 有返回值,返回值默认是一个空数组,如果有其他被删除的元素统一添加到该数组中
splice(x,y,args...)
// x : 确定在数组的那个位置进行操作
// y : 是确实从对应位置开始删除的元素个数
// args: 用于更新的新元素列表
let arr = [100, 200, 300, 'hello', true]
// 需求,我想在1索引的位置,删除2个元素,并用 新的元素进行替换
arr.splice(1, 2, 'x', 'y', 'z')
console.log(arr)
// 需求,我想在2索引的位置,删除1个元素,没有新元素替换
arr.splice(2, 1)
console.log(arr)
// 需求,我想替换索引3位置元素的值,更新
arr.splice(3, 1, 'world!')
console.log(arr)
// 需求,我想在索引0的位置,添加两个新元素
let res = arr.splice(0, 0, 'x', 'y', 'z')
console.log(arr, res)
8.2多维数组
多维数组就是由多个数组进行嵌套表示!所形成的一个多维的数组形式!
二维数组
// let arr = [
// [100, 200],
// [300, 400],
// [500, 600],
// ]
// console.log(arr[0]) // [100,200]
// console.log(arr[1]) // [300,400]
// console.log(arr[2]) // [500,600]
// console.log(arr[0][0])
8.3遍历数组
遍历: 就是去一个容器中,将该容器中的所有元素,访问一遍! 这种行为叫做遍历!
利用for循环来进行遍历 最传统的方式
8.4对数组进行冒泡排序
冒泡排序:元素两两之间进行比较,根据大小的判断交换位置!最终实现数组的排序 双重循环
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr.length - i; j++) {
if (arr[j] > arr[j + 1]) {
let temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
console.log(arr)
选择排序:
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i] < arr[j]) {
let temp = arr[i]
arr[i] = arr[j]
arr[j] = temp
}
}
}
console.log(arr)
8.5对数组进行倒置操作
// 倒置操作: ['a','b','c','d'] ==> ['d','c','b','a']
let arr = ['a', 'b', 'c', 'd']
// 方式一: 利用一个空数组
let arr2 = []
let len = arr.length
for (let i = 0; i < len; i++) {
arr2.push(arr.pop())
}
console.log(arr2)
// 方式二: 长度一半 首尾交换
let temp
for (let i = 0; i < parseInt(arr.length / 2); i++) {
temp = arr[i]
arr[i] = arr[arr.length - 1 - i]
arr[arr.length - 1 - i] = temp
}
console.log(arr)
// 方式三:
let arr2 = []
for (let i = arr.length - 1; i >= 0; i--) {
console.log(arr[i])
arr2.push(arr[i])
}
console.log(arr2)
8.6对数组进行去重操作
['a','b','c','a','y','b'] ==> ['a','b','c','y']
let arr = ['a', 'b', 'c', 'a', 'y', 'b'] // ['a','b','c','y','b']
// 方式一:利用空数组
let arr2 = []
for (let i = 0; i < arr.length; i++) {
if (!arr2.includes(arr[i])) {
arr2.push(arr[i])
}
}
console.log(arr2)
// 方式二:利用 lastindexOf() splice()
let index
for (let i = 0; i < arr.length; i++) {
index = arr.lastIndexOf(arr[i]) //index = 3
while (index != i) {
arr.splice(index, 1)
index = arr.lastIndexOf(arr[i])
}
}
console.log(arr)
九、文档树
div的名称,从不同的角度看待,其名字是不同的
- 从html文档,编码中! div ==> 标签
- 从dom对象中,角度上, div ==> elment 元素对象
- 从文档树看, div ==> 元素节点
文档树
- 浏览器会将html文档中的标签,解析并准换为文档树
- 文档树是一个树形结构!html根标签,最外层的节点!其余的标签(节点)都是挂载于根节点上!
- 文档树中,由很多的节点类型!不只元素节点(标签节点)! 除了元素节点之外,还存在 一些其他的节点类型! 注释节点 文本节点 …
- 注意:学习的重点以及操作是在元素节点!
- 对元素节点的 操作: 创建 增 删 查 改
9.1节点操作
操作名 | 操作函数 | 代码示例 | 注意项 |
---|---|---|---|
创建 | document.createElement() | let mydiv = document.createElement(‘div’) | 添加一个元素节点到已存在的节点中时,前提是 已经创建了对应的元素节点; |
参数要求, 数据类型 为 字符串 该字符串表示标签的名字! | |||
被创建出来的元素节点,它是不存在于文档树中! 需要把它插入或者添加到文档树中! | |||
添加&插入( 挂载操作) | 添加节点 利用节点进行添加 , 把新创建的元素节点添加到具体的某个元素节点的内部!作为该元素节点的子节点! | ||
appendChild(elment) | document.body.appendChild(mydiv) | 该方法只会将元素添加到当前元素节点的末尾! | |
insertBefore(新节点元素,旧节点元素) | document.body.insertBefore(mydiv, box) | 插入新的元素节点 到指定旧节点元素的前面 | |
document.body.insertBefore(mydiv, null) | 如果insertBefore的第二个参数为 null 则将新元素节点添加到该父节点的末尾 等价于 appendChild | ||
替换 | replaceChild(newnode,oldnode) | ul.replaceChild(newli, oldli) | |
ul.replaceChildren(newli1) | 利用指定的新元素,去替换当前父元素下所有的子元素 ,,指定的新元素个数不限! | ||
删除 | firstli.remove() | // 元素自我删除 | |
ul.removeChild(firstli) | 利用父节点进行删除指定的子元素节点 | ||
查询 | let res = firstli.parentNode // 节点 console.log(firstli.parentElement === res) | 通过元素节点的属性查询自己的父元素节点 | |
console.log(ul.children) | 通过父元素查询它的所有子元素节点 ,,,元素的属性 children 属性返回的是一个 伪数组 | ||
通过动态指定class改变元素的样式 | |||
挂载
// 创建一个 div 元素
let mydiv = document.createElement('div')
// 在挂载前 初始化 元素节点
mydiv.id = 'div01'
mydiv.className = 'box'
mydiv.innerHTML = '我是div元素'
// 挂载操作
// 添加节点 利用节点进行添加 , 把新创建的元素节点添加到具体的某个元素节点的内部!作为该元素节点的子节点!
// 获取body元素 document.body
// 方式一: appendChild(elment)
// 特点:该方法只会将元素添加到当前元素节点的末尾!
// 在挂载后 初始化 元素节点
document.body.appendChild(mydiv)
mydiv.id = 'div01'
mydiv.className = 'box'
mydiv.innerHTML = '我是div元素'
// 方式二: insertBefore(新节点元素,旧节点元素)
// 特点: 插入新的元素节点 到指定旧节点元素的前面
let box = document.querySelector('.box')
document.body.insertBefore(mydiv, box)
// 如果insertBefore的第二个参数为 null 则将新元素节点添加到该父节点的末尾 等价于 appendChild
document.body.insertBefore(mydiv, null)
替换
// 需求:创建一个新的li元素把旧的li元素给替换掉!
// 1.创建一个新的li元素
let newli = document.createElement('li')
// let newli2 = document.createElement('li')
// let newli3 = document.createElement('li')
// let newli4 = document.createElement('li')
// let newli5 = document.createElement('li')
// newli.innerHTML = '新的li'
// 2.获取即将被替换的旧元素
// let oldli = document.querySelector('.first-li')
// 3.获取父节点,由父节点来完成替换操作! ul
let ul = document.querySelector('ul')
// 进行替换操作
// replaceChild(newnode,oldnode)
// ul.replaceChild(newli, oldli)
// 利用指定的新元素,去替换当前父元素下所有的子元素
// 指定的新元素个数不限!
ul.replaceChildren(newli1)
通过动态指定class改变元素的样式
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
color: red;
}
</style>
<body>
<div>我是div元素</div>
<button>改变</button>
<button>移除</button>
</body>
<script>
let div = document.querySelector('div')
let btns = document.querySelectorAll('button')
btns[0].addEventListener('click', function () {
// console.log(666)
// div.style.width = '300px'
// div.style.color = 'red'
// div.style.backgroundColor = 'yellow'
div.className = 'box'
})
btns[1].addEventListener('click', function () {
// console.log(666)
// div.style.width = '300px'
// div.style.color = 'red'
// div.style.backgroundColor = 'yellow'
div.className = ''
})
</script>
十、函数
函数:一段被封装好的可重复使用的代码段!并且可以实现某种功能!
js中的函数,函数在js中在不同的环境下对其的叫法是不同!
函数的其他称呼:
- 方法
- 回调函数(callback)
- 构造函数
- 自执行函数(IIFE)
- 匿名函数
- 箭头函数 (lamda表达式)
- 无参函数
- 有参函数
- 比较函数 (主要用于对数据之间的比较,返回结果)
- 事件函数
10.1函数的声明创建
js中可以通过关键字 function进行函数的声明创建
语法结构
1.声明创建一个函数
- function 函数名(形参列表){
- 函数体
- }
注意:函数的声明,在声明时,函数体内部的代码是不会执行的!
function sayHello() {
console.log('hello world!')
} sayHello()
// 声明并创建
function fun() {}
// 创建函数
let res = function () {}
let obj = {
// 创建一个函数 函数表达式
fun: function () {},
}
2.调用函数\执行函数
语法: 函数名()
注意:函数名 + () 才能执行对应的函数!
10.2函数表达式
函数表达式 : 函数也是一种数据类型!引用数据类型!Object ==> typeof 检测出来 Function
注意:函数是一种数据,该数据是存储在堆空间中的!
function say() {
console.log(666)
}
console.log(say)//ƒ say() {console.log(666)}
let myfun = say
console.log(myfun === say)//true
myfun()//666
say()//666
// 匿名函数,函数表达式
let fun = function () {
console.log(666)
}
10.3函数称呼表
函数名 | 特点 | 注意项 |
---|---|---|
无参函数 | 不具备形参列表 !不需要额外的参数传入! | |
有参函数 | 函数在定义时,明确指定了形参列表!后续的函数执行中也需要外部的数据! | 函数调用时,实参与形参一 一对应! |
方法 | 方法的本质其实也是一个函数,只不过该函数是作为某个对象的属性存储的! | |
匿名函数,函数表达式 | ||
回调函数 | 函数最终通过某种手段执行了,但是不是你让它执行的!这种就是回调函数! | |
IIFE 自执行函数 | ||
箭头函数( lamda表达式) | ||
无参函数、有参函数、方法、回调函数、IIFE 自执行函数
无参函数
function sayHello() {
console.log('hello world!')
}
sayHello()
---------------------------------
有参函数
// 注意: a ,b 就是形参变量 (形式参数)
function add(a, b) {
console.log(a + b)
}
// 调用函数
// 200,300 就是 实参 实际参数!一一对应关系
add(200, 300)
---------------------------------
方法
let person = {
name: '张三',
age: 18,
sayHello: function () {
console.log('你好我是张三!')
},
}
console.log(person)
// 调用方法 方法名()
person.sayHello()
----------------------------------
回调函数
function fun(callback) {
for (let i = 0; i < 10; i++) {
if (i === 5) {
callback()
break
}
}
}
// fun函数 需要传入一个 函数(回调函数)作为参数
fun(function () {
console.log('哈哈我执行了,你不知道吧!')
})
let btn = document.querySelector('button')
btn.addEventListener('click', function () {
console.log('66666')
})
----------------------------------
IIFE 自执行函数
;(function () {
console.log(666)
})()
箭头函数
与function函数的不同
-
创建方式不同 不需要function关键字进行声明修饰!
箭头函数的创建 语法
(形参列表)=>{
函数体
}
-
箭头函数,通常不能像function函数那样,直接进行声明然后利用函数名进行调用
-
箭头函数通常是依附于某个变量或者某个对象上的属性
-
箭头函数中不具备自己的this关键字
箭头函数的书写小知识:
第一个: 当形参个数有且只有一个时,()是可以省略的
第二个: 当函数体内部只有 一条语句时, {} 是可以省略的
2.1 作为某个变量的值,保存箭头函数
let fun = () => {
console.log(666)
}
fun()
2.2 作为某个对象的方法
let obj = {
say: () => {
console.log('say...')
},
}
obj.say()
2.3 作为一个callback进行 函数的传递使用
btn.addEventLisener('click', () => {})
function fun() {}
;() => {}
;(() => {
console.log(666)
})()
========================================================
3. 箭头函数中不具备自己的this关键字
箭头函数的书写小知识:
;() => {
console.log(6666)
}
第一个: 当形参个数有且只有一个时,()是可以省略的
let fun = num => {
console.log('fun....', num)
}
fun(50)
第二个: 当函数体内部只有 一条语句时, {} 是可以省略的
let fun = num => console.log('fun....', num)
fun(5000000)
第二个: 当函数体内部只有 一条语句时, {} 是可以省略的
let fun = num => num+200
let fun = (num)=>{
return num+200
}
let res = fun(100)
console.log(res)
10.4函数的返回值
函数的返回值,大部分函数都是具备返回值!
返回值代表的是该函数执行后,对数据的处理结果! 然后利用 return语句 进行返回!外部可以使用函数的返回值!
如果函数,没有return语句,默认该函数的返回值是 undefined
注意: return语句的特点
1.return语句后可以是任何合法的js数据类型!
2.return语句具有中断函数的功能,函数的执行过程中如果碰到return 那么直接结束该函数的执行!
10.5函数的值传递和引用传递
值传递:内部函数的数据操作不会影响外部传入的数据!
引用传递:实参和形参的改变会相互影响!
值传递,内部函数的数据操作不会影响外部传入的数据!
let num = 100
function change(mynum) {
mynum += 10
}
change(num)
console.log(num)//100
---------------------------------------------
引用传递,实参和形参的改变会相互影响!
let obj = {
num: 100,
}
function change(myobj) {
myobj.num += 100
}
// 调用 函数 change
change(obj)
console.log(obj.num)//200
10.6函数的封装
技术 技巧
技术: 每一个知识点的学习和掌握 for语句 定时器 while循环 if 闭包 多敲!多练!多问!多思考!
技巧: 编程的思想 思维!代码的冗余问题!高内聚,低耦合原则! 经验的积累!项目的累积!错误叠加!
高内聚: 代码语句不是零散,散落!而是高度集中的! 函数封装!
低耦合: 耦合功能快之间是否连接的特别缜密!低耦合就是要求你不要连接的特别缜密!
编程高手,菜鸟的区别?
看你的代码 if switch 出现的频率!
案例演示
封装加法
// 将某段重复执行的代码,利用函数进行封装!方便后续的使用!
// 需求: 求两个数的和
let num1 = Number(prompt('请输入第一个数:'))
let num2 = Number(prompt('请输入第一个数:'))
let sum = num1 + num2
alert(sum)
// 把以上的代码封装成一个函数
function add() {
let num1 = Number(prompt('请输入第一个数:'))
let num2 = Number(prompt('请输入第一个数:'))
let sum = num1 + num2
alert(sum)
}
add()
封装一个求任意圆面积的函数
function getArea() {
let r = Number(prompt('请输入一个圆的半径:'))
let area = r ** 2 * 3.14
return area
}
alert(getArea())
// 注意:
// 1.封装时尽可能的不要将代码段写在函数外!然后再移植到函数内!应该直接将该函数的内容,写在函数体内!
// 2.函数命名规范!函数是为了实现某种功能!应该给使用它的人清晰的表达!见名知义!
// 3.函数内部所使用的数据,大部分都是通过函数调用时传入的参数!
function getArea(r) {
return r ** 2 * 3.14
}
let res = getArea(5)
console.log(res)
十一、作用域
作用域:
指变量或者函数的作用范围!
js中目前存在三种作用域:
- 全局作用域 es6之前 在函数外的区域,整个 script 脚本区域 所在区
- 函数作用域 es6之前 函数体内部声明的变量或者函数,具备函数作用域
- 块级作用域 {} es6之后才有 块级作用域 //块级作用域的变量 只能通过 let 或者 const 进行声明 才会存在块级作用域
作用域链:
- 通过作用域的链式关系,进行查找对应的 变量 和 函数。
- 如果沿着作用域链一直寻找,直到在全局作用域下都没有找到对应的变量或者函数 就会报错!
- 注意:作用域链的查找规则是 从内到外!查找!
预解析:
js代码在真正的执行前,会先进行一个操作!该操作称为 预解析!
预解析主要涉及两个内容:当前作用域下的var变量 和 function 函数进行提升! 函数的提升优于变量的提升
暂时性死区(let、const)
let 的变量不具备提升操作
console.log(num) // Cannot access 'num' before initialization
let num = 200
console.log(num) // num is not defined
let 和 const 所修饰的变量不具备提升操作!但是存在一个’暂时性死区’
var 、 let 、const 三者的区别
名称 | 变量提升操作 | 块级作用域 | 函数声明 |
---|---|---|---|
var | 存在 | 不具备 | 可以在同一作用域重复声明同名的变量或者函数 |
let | 不存在 | 具备 | 存在暂时性死区,不允许在同一作用域声明同名的变量和函数 |
const | 不存在 | 具备 | 存在暂时性死区,不允许在同一作用域声明同名的变量和函数,const声明的同时必须赋值! |
十二、BOM对象
BOM (浏览器对象)对象 ==> 代表整个浏览器
浏览器环境中,为js提供了两个对象!这两个对象是浏览器提供的,也称为宿主对象!
DOM (文档对象) ===》 文档树
window.html
BOM下的具体的对象!
- window对象 BOM的核心对象 windonw指向的是 浏览器的窗口!
- windo对象除了指向浏览器窗口,它还代表着js在浏览器环境下的全局对象!也称为顶层对象!
window作为顶层对象,它的作用!在全局环境下所声明的全局var变量或者函数都是作为window对象的属性存在!
let和const所声明的变量 不能作为window对象的属性存在!
location.html
location 代表浏览器地址栏
文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Location
名称 | 代码 | 注意点 |
---|---|---|
跳转网页 | location.href = ‘https://www.baidu.com’ | |
跳转网页 | location.replace(‘https://www.bilibili.com’) | 跳转网页不计入历史,更新地址栏,不计入历史操作 |
刷新页面 | location.reload() | |
地址栏参数 | location.search console.log(location.search, location) | ?后的数据 key=value 键值对的形式 |
history.html
history 浏览器浏览记录(历史记录)
文档:https://developer.mozilla.org/zh-CN/docs/Web/API/History
名称 | 代码 |
---|---|
前进 | history.forward() |
后退 | history.back() |
跳转到指定位置 | history.go(delta) |
history.go(1) 等价于 history.forward() | |
history.go(-1) 等价于 history.back() |
navigator.html
navigator 用于查看设备信息,查询当前浏览器的信息、版本、名称等
文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator
console.log(navigator)
demo.html
localStorage.html
数据持久化到浏览器中,关闭窗口或浏览器,都不会消失 以键值对的形式
注意项 | 示例 |
---|---|
设置数据, key 和 value 数据类型必须是字符串类型 | localStorage.setItem(‘name’, ‘张三’) |
设置数据 [] | localStorage[‘age’] = 18 |
读取数据 | console.log(localStorage.getItem(‘name’)) |
console.log(localStorage[‘age’]) |
sessionStorage.html
将数据临时性的存储到 浏览器中! 以键值对的形式 ! 窗口关闭 数据就消失
注意项 | 示例 |
---|---|
设置数据, key 和 value 数据类型必须是字符串类型 | sessionStorage.setItem(‘name’, ‘张三’) |
设置数据 [] | sessionStorage[‘age’] = 18 |
读取数据 | console.log( sessionStorage.getItem(‘name’)) |
console.log( sessionStorage[‘age’]) |