js知识点

最新推荐文章于 2024-08-14 10:08:54 发布

dear_little_deer

最新推荐文章于 2024-08-14 10:08:54 发布

阅读量438

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/dear_little_deer/article/details/128906702

版权

一、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 + padding2+ 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’])