一、JavaScript的组成：
1、ECMAScript：JavaScript的基本语法
2、BOM：浏览器对象模型（操作浏览器）—- 核心对象 window
3、DOM：文档对象模型（操作html文档）—- 核心对象document
二、ECMAScript
1、ECMAScript5：脚步语言。不需要独立的编译器，通过浏览器加载运行。实现用户和页面的交互
2、ECMAScript6：是JavaScript的下一代语法标准，于2015年6月发布。是JavaScript正式成为企业级的开发语言
3、ECMAScript和JavaScript的关系：
ECMAScript是一个语法规范，JavaScript是该语法规范的实现
三、ES6的语法
1、let 和const
（1）let：用来声明块级变量。var声明的变量会出现作用域的提升（会出现变量的污染）
（2）const：声明的常量必须要初始化
（3）const声明的对象：常对象
a、可以修改对象的属性值，但是不能修改对象本身
b、冻结对象：不能修改对象的属性。使用Object.freeze(对象名)
c、冻结嵌套的对象
const obj = {name:'李四',age:'25',family:{father:'李世民',mother:'长孙皇后'}}
// 冻结单层对象：
// Object.freeze(obj)//冻结对象obj，只能冻结单层
// Object.family.father = '李建成'
// console.log(obj)
//冻结多层嵌套对象
//定义一个冻结函数
function fun(obj){//fun函数的参数是对象obj
//1、冻结第一层对象，参数为需要冻结对象
Object.freeze(obj);
//2、使用for in循环遍历需要冻结对象的属性
for(let key in obj){//将obj对象中的值全部赋予变量key
//2.1用hasOwnProperty方法来判断对象是否包含给定的属性。typeof用来判断数据类型
if(obj.hasOwnProperty(key) && typeof(obj) === 'object'){
fun(obj[key])//递归调用fun函数
}
}
}
fun(obj);//调用对象
obj.family.father = '李建成'//修改对象中的二级属性值
console.log(obj)四、ES6的新特性
1、临时死区：用let和const声明的变量，放在‘临时死区’，使用let声明的变量、const声明的常量的作用域不会被提升
2、解构赋值：Rest运算符：”…”
（1）当迭代器使用：会按顺序遍历容器中的元素
let arr = [11,22,33]
function fun(x,y,z){
console.log(x,y,z)
}
fun(...arr) //'...'运算符的作用是一个迭代器：依次遍历数组中的元素（2）替代函数的内置属性arguments
function fun(...a){
console.log(a)
}
let arr = [11,22,33]
fun(arr)//[11,22,33]（3）通过解构赋值可以简化变量的赋值
let [a,b,c] = [11,22,33]
console.log(a)//11（4）通过”…”把特定的元素放在变量里
let [a,...arr] = [11,22,33] //将11赋给a,将22,33赋给arr,arr就是一个数组
console.log(a)//11
console.log(arr)//22,33（5）通过解构来交换变量的值
let a = 10;
let b = 20; //必须要以分号结尾
[a,b] = [b,a]
console.log(a,b)//20,103、对象的解构
（1）将对象的属性解构出来赋给变量
let obj = {
id:1001,
userName:'关羽',
sex:'男'
}
let { id,userName,sex } = obj //变量名必须和对象的属性名相同
console.log('编号：',id)
console.log('用户名：',userName)
console.log('性别：',sex)（2）解构多层对象
let obj = {
id:1001,
userName:'关羽',
sex:'男',
score:{
html: 98,
css:95,
js: 85
}
}
let { id,userName,sex,score:{html,css,js} } = obj //变量名必须和对象的属性名相同
console.log('编号：',id)
console.log('用户名：',userName)
console.log('性别：',sex)
console.log('css的成绩：',css)（3）在解构时可以给变量取别名
let obj = {
id:1001,
userName:'关羽',
sex:'男',
score:{
html: 98,
css:95,
js: 85
}
}
let { id:userId,userName:name,sex} = obj //userId是id的别名,name是userName的别名
console.log('编号：',userId)//1001
console.log('用户名：',name) //关羽
console.log('性别：',sex)//男4、模板字符串：使用反引号``和${ 变量名 } 将字符串常量和变量写在一个串里。就不需要使用’+’进行字符串的拼接
5、Symbol类型
（1）ES5的数据类型：number、string、boolean、bigint、null、undefined、object
（2）ES6新增的Symbol：表示一个唯一的值
a、直接创建：let 变量名 = Symbol
b、间接创建：传字符串 let 变量名 = Symbol（字符串)
6、Set集合：是一种数据结构，里面不能存放重复的值。可以用于数组去重、字符串去重
（1）创建方式：
a、使用new运算符：let 变量 = new Set()
b、通过数组来创建：let 变量名 = new Set( [1,2,3,5,6] ) ,去除重复的元素
let s1 = new Set() //创建一个空集合
console.log(s1)//{size: 0}
let arr = [1,2,3,2,0,3,5]
let s2 = new Set(arr)
console.log(s2)//{1, 2, 3, 0, 5}（2）常用的方法：
a、add(val)：向集合中添加元素
b、delete(val)：删除集合中的元素。删除成功返回true，删除失败返回false
c、has(val)：判断val在集合中是否存在，若存在返回true，不存在返回false
d、clear()：清空集合，没有返回中
e、values()：获取的是集合中所有value
f、keys()：获取集合中的key
强调：Set集合也是key-value格式，它的key和value是相同的
（3）属性：size 存放的是集合中元素的个数
（4）遍历方法：
a、for … of
let arr = [1,2,3,2,0,3,5]
let s2 = new Set(arr)
console.log(s2)//{1, 2, 3, 0, 5}
for(let i of s2.keys()){
console.log(i)//1
//2
//3
//0
//5
}b、forEach
let arr = [1,2,3,2,0,3,5]
let s2 = new Set(arr)
console.log(s2)//{1, 2, 3, 0, 5}
s2.forEach(function(value,key){
console.log(value+' --- '+key)//1---1
//2---2
//3---3
//0---0
//5---5
})（5）集合运算
a、并集：
let s1 = new Set([4,5,6])
let s2 = new Set([5,6,7])
let s = new Set([...s1,...s2])
console.log(s)b、交集：
let seta = new Set([4,5,6])//创建集合seta
let setb = new Set([5,6,7])//创建集合setb
let arr = [...seta]//将其中一个集合转换为数组，因为只有数组才能使用filter函数
let set = arr.filter(function(item){//遍历arr数组,值全都赋予item
// return setb.has(item)//简写
if(setb.has(item)){//交集;判断setb集合中是否存在item值
return item//存在返回就这个值赋予set的数组中
}
})
console.log(set)//[5,6]c、差集
let seta = new Set([4,5,6])//创建集合seta
let setb = new Set([5,6,7])//创建集合setb
let arr = [...seta]//将其中一个集合转换为数组，因为只有数组才能使用filter函数
let su = arr.filter(function(item){//通过filter函数遍历arr数组,将值全都赋予item
if(setb.has(item) == false){//差集;判断setb集合中是否存在item值,如果不存在
return item//返回不存在的这个item值赋予set的数组中
}
})
console.log(su)//[4]Set是一个构造函数，凡是用构造函数创建对象时都要用new
Set构造方法的参数是数组或null
7、Map集合
1、数据的存放格式：采用 key-value（键值对） 的方式进行存放。采用这种方式存放数据的有
（1）对象：属性对应的是key(键)，属性值对应的是value(值)
let obj = {
name: ‘张三’,
age:25
}
（2）JSON：是常用的一种前后台数据交换的格式
（3）Map
2、Map的定义：Map是一种数据结构（Hash结构），在ES6中是Map一种存放许多键值对的有序列表
3、Map的使用方法
（1）属性：size —- 存放的是Map中的元素个数
（2）方法：
a、Map()：构造方法。用来创建Map对象，不带参数表示创建空的Map，即size属性值为0
b、set(key,value)：向Map中添加数据
c、get(key)：获取键为key的value
d、has(key)：判断Map中是否存在key
e、delete(key)：删除key
f、clear()：清空Map
g、keys()：返回Map中的所有key
课堂练习1：以“key” <===> “value”，显示一个Map
强调：
（1）Map中的key不能重复，但是value可以重复
（2）keys()返回的是Map中所有key集合 —— keys（）返回的集合类型是Set
（3）在Map中通过key可以得到对应的value，反之则不行
h、values()：返回Map中的所有value
i、entries()：可以获取Map的所有成员（即所有的key-value）
j、forEach循环遍历：
m2.forEach(function(value,key){//函数的第一个参数是value,第二个参数是key
console.log(`${key}:${value}`)
})练习:Map数组（数组的每个单元都是一个key-value）的使用
let m1 = new Map()
m1.set('XA','西安')
m1.set('XY','咸阳')
let m2 = new Map()
m2.set('K1','重庆')
m2.set('K2','成都')
let m3 = new Map()
let arr = [m1,m2,m3]
console.log(arr) //arr是Map数组
//[Map(2), Map(2), Map(0)]
//0:Map(2) {'XA' => '西安', 'XY' => '咸阳'}
//1:Map(2) {'K1' => '重庆', 'K2' => '成都'}
//2:Map(0) {size: 0}
//length:3
//[[Prototype]]:Array(0)
console.log(arr[0].get('XA'))//输出'西安' 4、Map转换为数组
（1）解构整个Map：
let m4 = new Map([
[‘one’,’北京’],
[‘two’,’上海’],
[‘three’,’深圳’]
])
let arr = [...m4.entries()] //将m4转换成数组.arr本质是3行2列的二维数组 （2）解构keys()
let m4 = new Map([
['one','北京'],
['two','上海'],
['three','深圳']
])
let a1 = [...m4.keys()] //将Map的所有key转换成数组
console.log(a1)// ['one', 'two', 'three']（3）解构values()
let m4 = new Map([
['one','北京'],
['two','上海'],
['three','深圳']
])
let a2 = [...m4.values()]
console.log(a2)//['北京', '上海', '深圳']
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
