目录
ES6
ECMAScript 6 是什么：
ECMScript 是语言的标准 6 是版本号 ES6 = ECMAScript 这门语言的第6代标准
具体:
语法：
var a = "jack";
function add(x,y){
return x+y;
}
基本数据类型：数字、字符串、布尔值、undefined、null 引用数据类型：对象
API:
[1,2,3].push(4); {}.toString(); parseInt(3.14); ECMAScript = 语法 + API
历史版本：
ES1~3、ES5~6……………… ES4由于太激进则被抛弃 分解为现在的ES5、ES6等等 ES3: do while、switch、正则表达式等等 ES5： forEach、map、filter、Object.create、Object.defineProperty等 ES6: 本文讲述的就是关于ES6的语法
命名方式：
ES6 VS ES2015 ES6->ES7->ES8->...=ES6+ ES2015->ES2016->ES2017->...
ES 与 JavaScript的关系
javaScrip（浏览器端）= ECMAScript（语法+API）+ DOM + BOM
ES6的兼容性
主流的浏览器的最新版本几乎全部支持ES6
IE老版本等不支持的浏览器，可以用Babel转码
Let 和 Const
Let 和 Const 是什么？
声明变量或声明常量
以前var声明
let代替var 声明变量
const 声明常量 constant的缩写
let和const的基本用法
和var 一样
var name = "张三" let age = 18 const sex = "男" console.log(name,age,sex);
什么是变量，什么是常量
变量是可以重新赋值的
常量不可以赋值
var、let声明的就是变量，变量一旦初始化之后，还可以重新赋值
const声明的是常量，常量一旦初始化，就不能重新赋值了，否则就会报错
const sex = "男" sex = "女"
const
为什么需要const
const就是那些为了一旦初始化就不希望重新赋值的情况设计的
const的注意事项
使用const声明常量，一旦声明，就必须初始化，不能留到最后声明
const声明常量，允许在不重新赋值的情况的下修改他的值（引用数据类型可以编辑）
基本数据类型：引用数据类型：
const person = {
userName : "zhangsan"
}
console.log(person.userName);
person.userName = "lisi";
console.log(person.userName)
什么时候用const、什么时候用let
经验：当不知道使用什么的时候，直接使用const，当报错的时候，改为let即可。
let、const与var的区别
1、重复声明
已经存在的变量或常量，又声明了一遍
var允许重复声明，let、const不允许声明：
2、变量提升
var会提升变量的声明到当前作用域的顶部
let和const不存在变量提升
var则会输出 undefined 但是 let和const则会报错
{
// console.log(a)
// let a = 2;
console.log(b)
var b = 3;
// console.log(c)
// const c = 4;
}
var:
let、const:
养成养好的编程习惯，对于所有的变量或者常量，先声明再使用
3、暂时性死区
只要作用于内存在let 和 const ，他们所声明的变量或常量，就自动“绑定”这个区域，不再受到外部作用域的影响
let 和 const 存在暂时性死区
let a = 1;
{
let a = 2;
console.log(`区间内的a:${a}`)
}
console.log(`区间外的a:${a}`)
let、const:
var a = 1;
{
var a = 2;
console.log(`区间内的a:${a}`)
}
console.log(`区间外的a:${a}`)
var :
4、window对象的属性和方法（全局作用域中）
var声明的变量，通过function声明的函数，会自动变成window对象的属性和方法
let 和 const 不会
var age = 18; console.log(age === window.age) let name = "张三"; console.log(name === window.name)
5、块级作用域
1、什么是块级作用域
var没有块级作用域
let、const 有块级作用域
2、作用域链
动手画一画：
作用域链：内层作用域->外层作用域->...->全局作用域
3、有哪些块级作用域：
{}
for(){}
while(){}
do{}while()
if(){}
switch(){}
function(){}
注意：对象(object)的花括号不构成作用域
模板字符串
1、模板字符串是什么：
1.1、认识模板字符串
``反引号 **Esc下面那个键
1.2、和原来的字符串的区别
原来拼接字符串用“++”
现在需要：`${变量}`即可
var person={
name :"张三",
}
console.log("我的名字叫做："+person.name)
console.log(`我的名字叫做${person.name}`)
2、模板字符串的注意事项
2.1、输入多行字符串
普通字符串 ：\n
模板字符串：可以直接回车换行 也可以\n换行
模板字符串中，所有的空格，换行或缩进都会保留在输出之中
var person={
name :"张三",
}
console.log("我的名字叫做：\n"+person.name)
console.log(`我的名字叫做
${person.name}`)
2.2、输入反引号和\等特殊字符
通过反斜杠 \ 可以转义 特殊字符
console.log(`特殊字符反引号：\`，特殊字符反斜杠：\\`)
2.3、模板字符串的注入
${} 变量 对象 函数 计算 都可以放入
只要最终可以得到一个值得就可以通过模板字符串注入
const add = (a,b)=>a+b;
console.log(`${add(1,2)}`)
3、模板字符串的应用
1、箭头函数
1.1认识箭头函数
（）=>{}
(a,b)=>{
return a+b
}
2、箭头函数的注意事项
如果箭头函数返回单行对象，可以在{}外面加上（），让浏览器不在认为是函数的花括号
const person = (name,age)=>({name,age})
console.log(person("zhangsan","18"))
3、this指向！！！！！
1、全局作用域中的this指向
2、一般函数（非箭头函数）中的this指向
'use strict' 严格模式下fun
非严格模式下
只有在函数调用的时候this指向才确定，不调用的时候，不知道指向谁，this指向和函数在哪里调用没有关系，只和谁调用有关
构造函数的this 指向构造函数的这个对象
function func(){
return this;
}
console.log(func())
非严格模式下指向widow 严格模式下指向undefined
3、箭头函数中的this指向
箭头函数，没有自己的this
通过作用域链往外寻找this
一层一层的寻找this
4、不适用箭头函数的场景
1、作为构造函数
2、需要this指向调用对象的时候
3、需要使用arguments的时候
箭头函数中没有arguments存在
箭头函数中有剩余参数...
5、箭头函数的应用
不需要this指向的时候
解构赋值
数组的解构赋值
1、模式（结构）匹配
2、索引值相同的完成赋值
[a,b] = [2,3];
console.log(a,b)
数组解构赋值的默认值
当赋值的时候为严格等于（===）undefined的时候 则可以设置默认值 用等于号=赋值
[a=1,b=2,c= 4] = [2,3];
console.log(a,b,c)
如果默认值表达式，默认值表达式是惰性求值得，有默认值才会执行，无默认值不会执行
[a=(a+b),b=2,c= (a+b)] = [2,3];
console.log(a,b,c)
常见类数组的解构赋值
对象的解构赋值
结构 模式 匹配
{} = {}
const person = {
name :"zhangsan",
age : 18
}
const {name,age} = person
console.log(name,age)
属性名相同的完成赋值
取别名：
const person = {
name :"zhangsan",
age : 18
}
const {name:uname,age:uage} = person
console.log(uname,uage)
对象的解构赋值默认值：
无论是数组还是对象的默认值都是等号 =
const person = {
age : 18
}
const {name:uname = "李四",age:uage} = person
console.log(uname,uage)
默认值如果是表达式的话，则表达式是惰性求值的
如果将一个已经声明的变量用于对象的解构赋值，要整个赋值需要在圆括号中进行
let x= 2;
({x} = {x:1})
console.log(x)
可以取到继承的属性
const {toString} = {}
console.log(toString)
其他数据类型的解构赋值
字符串的解构赋值
既可以数组形式来解构赋值 也可以 对象的形式来解构赋值
数值和布尔值得解构赋值
现将等号右边的值转为对象
let name = "Hello Word";
[a,b,c,d,e,f] = name;
console.log(a,b,c,d,e,f);
const {0:g,1:h,2:i} = name;
console.log(g,h,i)
注意：字符串用对象解构赋值的时候，需要用下标当做key对应字符串中的下标
undefined 和 null 的解构赋值
无法转换为数组和对象 无法进行解构赋值
对象字面量的增强
属性和方法的简洁表示法
对象字面量是什么
实例化构造函数生成对象
const person = new Object();
person.name = "zhangsan";
person.age = 18;
person.speak = function(){}
console.log(person)
对象字面量
const person = {
name : "zhangsan",
age : 18,
speak : function(){
}
}
console.log(person)
属性的简洁表示法
键明和属性名一样的时候，可以写一个即可。
方法的简洁表示法
省略冒号： 和funtion关键字
const person = {
name : "zhangsan",
age : 18,
speak(){
}
}
console.log(person)
方括号语法
方括号语法的用法
先求值，再赋值
const A = "age";
const person = {
name : "zhangsan",
[A] : 18,
speak(){
}
}
console.log(person)
方括号中可以放什么
${} {值或通过计划可以得到值得（表达式）}
方括号和模板字符串中一样可以放入一切可以得到值的值或者表达式
const A = "age";
const person = {
name : "zhangsan",
[`A+${A}`] : 18,
speak(){
}
}
console.log(person)
方括号语法和点语法的区别
点语法是方括号语法的特殊形式
当属性是合法标识符的时候，可以使用点语法
合法标识符可以用来作为变量或常量名
当你属性或方法名是合法标识符时，可以使用点语法，其他情况下请使用方括号语法
函数参数的默认值
认识函数参数默认值
调用函数的时候，如果参数没有值的话则使用默认值
函数参数默认值的基本用法
在参数直接写 等于默认值 例如：
const add = (a,b=2) => a+b;
console.log(add(3))
函数默认值的注意事项
默认值的生效条件
不传参数，或者明确的传递undefined作为参数的时候，只有这两种情况下默认值才会生效
默认值的表达式
如果默认值是表达，则默认值表达式是惰性求值的
设置默认值的小技巧
函数参数的默认值，最好从参数右边开始设置
const add = (a,b=2) => a+b;
console.log(add(3,undefined))
函数参数的默认值的应用
1、接受很多参数的时候
2、接受一个对象作为参数
剩余参数和展开运算符
剩余参数
剩余参数是什么
认识剩余参数
const add = (a,b,...arg)=>{}
剩余参数的本质
剩余参数永远是个数组，即使没有值，也是空数组
const add = (a,b,...arg)=>{
console.log(a,b,arg)
}
add()
注意事项
1、箭头函数的剩余参数
箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号
2、使用剩余参数替代arguments获取实际参数
可以使用剩余参数替代arguments获取实际参数
剩余参数是数组 arguments是类数组
3、剩余参数的位置
只能放在最后一个参数 如果后面还有参数就会报错
应用
1、与方法参数来使用
2、与数组解构赋值结合使用（必须是最后一个）
[num,...arg] = [1,2,3,4];
console.log(num,arg)
3、和对象的结构赋值结合使用（这个时候剩余参数为对象）剩余元素（必须是最后一个）这个时候叫做剩余元素
const {x,y,...arg} = {x:1,y:2,z:3,a:6}
console.log(x,y,arg)
展开运算符
数组的展开运算符
数组展开运算符 基本用法
console.log(...[1,23,4])
区分剩余参数和展开运算符
数组展开运算符的应用
1、复制数组
let a = [1,2,3];
[b] = [...a];
b[0] = 10;
console.log(a)
2、合并数组
let a = [1,2,3];
let b = [4,5,6]
console.log([...a,...b])
3、字符串转为数组
字符串可以按照数组的形式展开
4、常见的类数组转换为数组
arguments 和 NodeList
对象的展开运算符
基本用法
展开对象
对象不能够直接展开，必须在{}中展开
对象的展开：把属性罗列出来，用逗号分割，放到一个{}中，构成新对象
const person = {
name :"zhangsan",
age : 18
}
const a = {...person};
a.name = "lisi"
console.log(a)
合并对象
新对象拥有全部属性，相同属性后面的覆盖前面的，不同的属性保留
const person1 = {
name :"zhangsan",
age : 18
}
const person2 = {
name :"lisi",
age : 18,
color :"green"
}
console.log({...person1,...person2})
注意事项
1、空对象的展开
如果展开一个空对象，是没有任何效果的
2、非对象的展开
如果展开的不是对象，则会自动将其转换为对象，再讲其属性罗列出来
如果展开的是字符串，他会自动转换为类数组的对象，因此返回的不是空对象
数组可以在任何地方展开
3、对象中对象属性的展开
不会展开对象中的对象属性
const person1 = {
name :"zhangsan",
age : 18,
color:{
uname:"123"
}
}
console.log({...person1})
应用
1、复制对象
2、用户参数和默认参数
const login = (param)=>{
const MOREN = {
username :"LISI",
age :19
}
param = {...MOREN,...param}
console.log(param.username,param.age)
}
login({username:"zhangsan",age:20})
Set 和 Map
Set
Set是什么
什么是set
set其实就是集合
set和数组很像
数组是一系列有序的数据集合
set是一系列无序、没有重复的数据集合
var arr = [1,2,3,1,1,2];
console.log(new Set(arr))
理解set
new Set();只能实例化构造set
set没有下标表示每一个值，所以set是无序的，也不能像数组那样通过下标去访问set的成员
Set实例的方法和属性
方法
add().add().add() 添加成员 可以连赘着写
console.log(new Set(arr).add(2).add(5).add(6))
has()是否包含
console.log(new Set(arr).add(2).add(5).add(6).has(3))
delete() 删除 使用delete删除不存的成员，什么都不会发生，也不会报错
clear() 全删
forEach() 遍历set
value和key是一样的
按照成员添加进集合的顺序遍历
set.forEach((key,value)=>{
return console.log(key,value)
});
属性
.size获取个数
console.log(set.size) //5
Set构造函数的参数
数组
字符串、arguments，NodeList，Set 等
Set的注意事项
判断重复的方式
set对重复值的判断基本遵循严格相等（===）
但是对于NaN的判断与===不同 Set中的NaN等于NaN
正常程序中 NaN === NaN false 但是 set中是全等
什么时候使用Set
1、数组或者字符串去重时
2、不需要通过下标访问，只需要遍历时
3、为了使用set提供的方法和属性时（add,delete,clear）
Set的应用
1、数组的去重
2、字符串的去重
let str = "abcdaaaxc";
let set = new Set(str);
console.log([...set].join(""))
3、存放DOM元素
Map
Map是什么
认识Map
map是对象的映射
map和对象都是键值对的集合
对象：键->值 ,key->value
map：.set（） 增加
let map = new Map();
map.set("name","zhangsan")
console.log(map)
对象一般用字符串当作键
基本数据类型：数字、字符串、布尔值、undefined、null
引用数据类型：对象（[]、{}、函数、Set、Map等）
let map = new Map();
map.set([123,4],"zhangsan")
console.log(map)
以上都可以作为Map的键
Map实例的方法和属性
方法
.set().set().set() 添加成员 可以连缀
使用set添加的新成员，键如果已经存在，后添加的键值对覆盖已有的
.get(键) 获取指定成员 通过键获取成员
获取不存在的成员的时候，返回的是undefined
has() 判断是否存在
delete 删除
使用delete删除不存的成员，什么都不会发生，也不会
clear() 删除所有 清空
forEach()
let a = new Map();
a.set("name","zhangsan")
a.forEach((value,key,map) => {
console.log(a === map)
console.log(value,key,map)
});
属性
size 获取成员个数
let a = new Map();
a.set("name","zhangsan")
console.log(a.size)
对象没有类似的属性
Map构造函数的参数
数组
只能传二维数组，而且必须体现出键和值
Set、Map中
let map = new Map([
['name','zhangsan'],
['age',19]
])
console.log(map)
Set增加的时候中也必须体现出键和值
Map的注意事项
判断键名是否相同的方式
基本遵循严格想等 （===）
例外就是NaN：Map中的NaN也是等于NaN
什么时候使用map什么时候使用对象
什么时候使用Map
如果只需要key->value的结构，或则需要字符串以外的值做键，使用map更合适
遍历：对象：for in，Map： forEach()
只有模拟现实世界中的实体时，才使用对象
例如：person
Map的应用
使用map操作元素的颜色
let [p1,p2,p3] = document.querySelectorAll("p");
let map = new Map([
[
p1,'green'
],[
p2,'red'
],[
p3,'blue'
]
])
map.forEach((color,elem)=>{
elem.style.color = color
})
Iterator遍历器与for...of循环
Iterator是什么
Iterator的作用
Iterator：遍历器（迭代器）
for()、forEach()、
Iterator也是用来遍历的
寻找Iterator
数组的Iterator对象
console.log([1,2,3][Symbol.iterator]())
使用Iterator
.next() 返回是个对象 value遍历的值 done是否遍历完成
console.log([1,2,3][Symbol.iterator]().next())
可遍历对象（可迭代的对象）
symbol.Iterator：可遍历对象的生成方法
什么是Iterator
symbol.Iterator：可遍历对象的生成方法 -->it（可遍历对象）-->it.next() ->it.next() -> ....（直到done为true）
这个过程叫做Iterator
Iterator解惑
为什么需要Iterator遍历器
遍历数组：for循环 forEach方法
遍历对象：for in 循环
Iterator遍历器是一个统一的遍历方式
如何更方便的使用Iterator
symbol.Iterator：可遍历对象的生成方法 -->it（可遍历对象）-->it.next() ->it.next() -> ....（直到done为true）
我们一般不会直接使用Iterator区遍历
for...of 循环
for...of的用法
认识for...of
遍历流程：
直接使用for...of即可
var arr = [1,2,3]
for (const iterator of arr) {
console.log(iterator)
}
for...of 循环只会遍历出那些done为false时，对应的value的值
与break、continue一起使用
var arr = [1,2,3]
for (const iterator of arr) {
if(iterator == 2){
continue;
//break;
}
console.log(iterator)
}
在for...of中取得数组的索引
arr.keys() 可以获取索引 得到的是索引的可遍历对象，可以遍历出索引值
arr.values() 获取值的可遍历对象
entries() 得到的是索引+值组成的可遍历对象
for (const iterator of arr.keys()) {
console.log(iterator)
}
for (const iterator of arr.values()) {
console.log(iterator)
}
for (const iterator of arr.entries()) {
console.log(iterator)
}
原生可遍历与非原生可遍历
什么是可遍历
只要有symbol.Iterator方法，并且这个方法可以生成可遍历对象，就是可遍历的 天生自带symbol.Iterator的即为天生可遍历
只要可遍历 就可以使用for...of循环来统一遍历
原生可遍历的有哪些
数组
字符串
Set
Map
arguments
NodeList
非原生可遍历的有哪些
一般的对象
手写Iterator方法
有length和索引属性的对象
或者：
使用了Iterator的场合
原生可遍历的数据：
数组
字符串
Set
Map
arguments
NodeList
数组的展开运算符
数组的结构赋值
只要原生可遍历的都可以进行数组的解构赋值
Set和Map的构造函数
Map必须是二维数组
ES的新增方法
字符串的新增方法
includes() 判断是否包含
判断字符串中是否包含某些字符
1、基本用法
console.log("abc".includes("q"))
2、第二个参数
表示开始搜索的位置，默认是0
console.log("abc".includes("a",1))
3、应用
padStart()padEnd()
补全字符串长度
1、基本用法
2、注意事项
原字符串的长度，等于或大于最大长度，不会消减原字符串，字符串补全不会生效，返回原字符串
用来补全的字符串与原来字符串长度之和超过了最大长度，截去超出位数的补全字符串，原字符串不动
如果省略第二个参数，默认使用空格补全长度
3、应用
trimStart()和trimEnd()
清除字符串的首或尾空格，中间的空格不会清除
1、基本用法：
别名：
trim() 去除空格，全部空格去除
2、应用
用于表单的提交
replaceAll
替换字符串的内容
语法：
searchValue：表示搜索模式，可以是一个字符串，也可以是一个全局的正则表达式（带有g修饰符)
eplacement：表示替换的文本，是一个字符串
注意事项：
如果第一个参数是一个不带有g修饰符的正则表达式，replaceAll()会报错。replace()不会报错。let str = 'aabbcc'; str.replace(/b/,'') // 不报错 str.replaceAll(/b/,'') // 报错
replaceAll()应用场景：
去除字符串中多余的文字。例如 下面的字符串 把“省”字去掉：const str1 = "广东省，福建省，湖南省..." // 将省字替换为 空白 字符 const str = str1.replaceAll("省","") console.log(str1) console.log(str)
数组的新增方法
includes() 判断是否包含
判断数组中是否包含某个成员
标准：
基本遵循严格想等（===）,但是NaN的判断与 === 不同 includes认为NaN === NaN
第二个参数表示搜索的起始位置，默认是0
应用
去重
Arry.from() 构造函数的方法
将其他数据类型转换为数组
1、基本用法：
2、哪些可以通过Arry.from()转换为数组
2.1所有可遍历的
数组、字符串、Set、Map、arguments、NodeList
2.2、拥有length属性的任意对象
length控制数组的长度，转换的只有以数字键的key和value值
3、第二个参数
作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组中
map:
4、第三个参数，修改this指向
find()和findIndex()
find():找到满足条件的一个立即返回
findIndex() ：找到满足条件的一个，立即返回其索引
1、基本用法：
最后一个参数也是修改this指向问题
2、应用
在学生数组中筛选
对象的新增方法
Object.assign()
1、用来合并对象
返回一个对象，相同的数据起后面的替换前面的，保留不同的数据
返回的是新第一个参数的对象
合并到了第一个参数中，返回的就是合并后的参数
可以合并多个对象：
展开运算符合并的时候是个新对象
2、注意事项
2.1、基本数据类型作为原对象
与对象的展开类似，先转换成对象，再合并
2.2、同名属性的替换
后面的覆盖前面的
3、应用
合并默认参数和用户参数
Object.keys()、Object.values()、Object.entries()
Object.keys() 获取键
Object.values() 获取值
Object.entries() 获取键和值
1、基本用法
返回新的数组
2、与数组类似方法的区别
调用方式不同
数组的keys()、values()、entries() 等方法是实例方法，返回的都是Iterator
对象的Object.keys()、Object.values()、Object.entries()等方法是构造函数方法，返回的是数组
3、使用for...of循环遍历遍历
Object.keys()、Object.values()、Object.entries()并不能保证顺序一定是你看到的那样，这一点和for in是一样的
2044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
