let变量声明以及声明特性：
1. 变量不能重复声明
let a=0 修改值不会==> let a=0
let a=1 //报错 a=1 //不会报错
-------------------------------------------------------------------------------------------
2. 具有块级作用域
{
let a=0
}
console.log(a) //报错 a is not defined
-------------------------------------------------------------------------------------------
3. 不存在变量提升
console.log(a) //报错
let a=0
-------------------------------------------------------------------------------------------
4. 不影响作用域链
let school = '尚硅谷';
function fn(){
console.log(school);
}
fn(); //打印成功
const声明常量的特点：
1. 一定要赋初始值
const a //报错
------------------------------------------------------------------------------------------
2.一般常量使用大写(潜规则)
const A=0
-------------------------------------------------------------------------------------------
3. 常量的值不能修改
const a=1
a=2 //报错
-------------------------------------------------------------------------------------------
4. 块级作用域
{
const a=1
}
console.log(a) //报错
-------------------------------------------------------------------------------------------
5. 对于数组和对象的元素修改，不算做对常量的修改，不会报错
const num=[1,4,7,8]
num.push(5)
console.log(num) //[1, 4, 7, 8, 5] ,不会报错变量的解构赋值：
数组的解构赋值：
const person=["小王","小李","小黑"]
let [wang,li,hei]=person
console.log(wang) //小王
console.log(li) //小李
console.log(hei) //小黑
-------------------------------------------------------------------------------------------
对象的解构赋值：
const person={
name:"小王",
age:18,
say:function(){
console.log("哈哈")
}
}
let {name,age,say}=person
console.log(name) //小王
console.log(age) //18
say() //哈哈模板字符串：
1. 声明
let str=`我是一个字符串`
console.log(str,typeof str) //我是一个字符串 string
-------------------------------------------------------------------------------------------
2. 内容可以直接出现换行符
let str=`<ul>
<li>小王</li>
<li>小李</li>
<li>小红</li>
</ul> `
-------------------------------------------------------------------------------------------
3. 变量拼接
let name="雷军"
let love=`${name}是我最崇拜的人`
console.log(love) //雷军是我最崇拜的人对象的简化写法:
ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
let name="小王"
let change=function(){
console.log("我可以改变你")
}
const person={
name,
change,
say(){
console.log(":和function可以省略")
}
}箭头函数:
1. 声明一个函数：
let fn=(a,b)=>{
return a+b
}
let result=fn(1,2)
console.log(result) //3
-----------------------------------------------------------------------------------------
2. this是静态的,this始终指向函数声明时所在作用域下的this的值。
let name="小王"
const myname={
name:"小黑"
}
let getname=()=>{
console.log(this.name)
}
getname.call(myname) //小王 使用call也不会改变this
-----------------------------------------------------------------------------------------
3. 不能作为构造实例化对象
let person=(name,age)=>{
this.name=name,
this.age=age
}
let me=new person("小王",12) //报错
-----------------------------------------------------------------------------------------
4. 不能使用arguments
let fn=(a,b)=>{
console.log(arguments)
}
fn(1,2) //报错
-----------------------------------------------------------------------------------------
5. 箭头函数的简写：
(1)省略小括号，当形参只有一个的时候
let add=n=>{
return n+n
}
console.log(add(1)) //2
(2)省略花括号，当代码体只有一条语句时，此时return必须省略，而且语句的执行结果就是函数的返回值
let add=n=>n+n
console.log(add(1)) //2
-----------------------------------------------------------------------------------------
注意：箭头函数适合与this无关的回调，像定时器，数组的方法回调
不适合与this有关的回调，像事件回调，对象的方法函数参数默认值：
ES6允许给函数参数赋值初始值
1. 形参初始值具有默认值的参数，一般位置要靠后(潜规则)
function add(a,b=10){
return a+b
}
let result=add(1)
console.log(result) //11
-------------------------------------------------------------------------------------------
2. 与解构赋值结合
function person({name="小黑",age,height}){
console.log(name) //小王
console.log(age) //18
console.log(height) //180
}
person({
name:"小王",
age:18,
height:180
})rest参数：
ES6引入rest参数，用于获取函数的实参，用来代替arguments
注意：得到的是一个数组，而arguments得到的是伪数组
function name(...args){
console.log(args)
}
name("小王","小黑","小红") //输出['小王', '小黑', '小红']
-------------------------------------------------------------------------------------------
注意：rest参数必须放在参数最后
function name(a,b,...args){
console.log(a) //小王
console.log(b) //小黑
console.log(args) // ['小红', '小李']
}
name("小王","小黑","小红","小李")扩展运算符：
...扩展运算符能将数组转换为逗号分隔的参数序列
1. 数组的合并：
let a=[1,2]
let b=[3,4]
let c=[...a,...b]
console.log(c) //[1, 2, 3, 4]
-------------------------------------------------------------------------------------------
2. 数组的克隆
let a=[1,2,3,4,5]
let b=[...a]
console.log(b) //[1, 2, 3, 4, 5]
注意:如果有引用类型是浅拷贝
-------------------------------------------------------------------------------------------
3. 将伪数组转为真正的数组
const divs=document.querySelector("div")
const divArr=[...divs]Symbol：见此博客
迭代器与生成器：见此博客
Promise:见此博客
Set：
ES6提供了新的数据结构Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了iterator 接口，所以可以使用【扩展运算符】和【for…of…】进行遍历，集合的属性和方法：
1. size： 返回集合的元素个数
2. add： 增加一个新元素，返回当前集合
3. delete： 删除元素，返回boolean 值
4. has ： 检测集合中是否包含某个元素，返回boolean值
let s=new Set()
console.log(s,typeof s) //Set(0) {size: 0} 'object'
-----------------------------------------------------------------------------------------
let s=new Set([1,3,5,7,2,1,3])
console.log(s) //Set(5) {1, 3, 5, 7, 2} 可以自动去重
-----------------------------------------------------------------------------------------
let s=new Set([1,3,5])
s.size //元素的个数
s.add(7)//添加新元素
s.delete(1)//删除元素
s.has(1)检查是否有此元素
s.clear()//清空
-----------------------------------------------------------------------------------------
可以用for of进行遍历
let s=new Set([1,3,5])
for(let v of s){
console.log(v) //1 3 5
}
-----------------------------------------------------------------------------------------
数组去重
let num=[1,2,4,5,3,2,1,5,6]
let result=[...new Set(num)]
console.log(result) // [1, 2, 4, 5, 3, 6]
-----------------------------------------------------------------------------------------
求交集
let num1=[1,2,3,4,2,3]
let num2=[3,4,5,6,4,5]
let result=[...new Set(num1)].filter(item=>{
let s2=new Set(num2)
if(s2.has(item)){
return true
}else{
return false
}
})
console.log(result) // [3, 4]
-----------------------------------------------------------------------------------------
求并集
let num1=[1,2,3,4,2,3]
let num2=[3,4,5,6,4,5]
let result=[...new Set([...num1,...num2])]
console.log(result) // [1, 2, 3, 4, 5, 6]Map：
ES6提供了Map数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map也实现了iterator 接口，所以可以使用【扩展运算符】和【for…of…】进行遍历。Map的属性和方法：
1）size：返回Map的元素个数
2）set：增加一个新元素，返回当前Map
3）get：返回键名对象的键值
4）has：检测Map中是否包含某个元素，返回boolean值
5）clear：清空集合，返回undefined
let m=new Map()
//添加元素
m.set("name","小王")
m.set("change",function(){
console.log("我们可以改变你")
})
let sch={
school:"唐山职业技术学院"
}
m.set(sch,["河北","唐山"])
console.log(m.size)
//删除
m.delete("name")
//获取
console.log(m.get(sch))
//遍历
for(let v of m){
console.log(v)
}
//清空
m.clear()Class类:见此博客
数组的扩展：
1、Number. EPSILON是JavaScript 表示的最小精度
2、二进制和八进制
0b二进制
0o八进制
0x十六进制
3、Number.isFinite 检测一个数值是否为有限数
4、Number.isNaN检测一个数值是否为NaN
5、Number.parseInt、Number . parseFloat字符串转整数
6、Number.isInteger判断一个数是否为整数
7、Math.trunc 将数字的小数部分抹掉
8、Math.sign 判断一个数到底为正数、负数还是零对象方法拓展：
1. Object.is 判断两个值是否完全相等(可以比较NaN)
console.log(Object.is(NaN, NaN)); //ture
console.log(NaN===NaN) //false
-------------------------------------------------------------------------------------------
2. Object.assign 对象的合并
const config1 = {
host: 'localhost ',
port: 3306,
name: 'root',
pass: 'root',
test: 'test'
}
const config2 = {
host: 'http://atguigu.com',
port: 33060,
name: 'baidu.com',
pass: 'iloveyou',
test2: 'test2' //有则覆盖，无则不覆盖
}
console.log(Object.assign(config1, config2)); //2覆盖1
-----------------------------------------------------------------------------------------
3、Object. setPrototype0f（设置原型对象）、Object.getPrototypeof（获取原型对象）
const school = {
name: '尚硅谷'
}
const cities = {
xiaoqu: ['北京', ' 上海', '深圳']
}
Object.setPrototypeOf(school, cities); //将cities设置为school的原型对象,但最好不用此方法设置
console.log(Object.getPrototypeOf(school)); //获取school的原型对象模块化：见此博客
ES7 新特性：
1. Array.prototype.includes 方法用来检测数组中是否包含某个元素，返回布尔类型值
let num=[1,3,5,7]
console.log(num.includes(5)) //true
------------------------------------------------------------------------------------------
2. 指数操作符，在ES7中引入指数操作符 【**】，用来实现幂运算功能与Math.pow结果相同。
console.log(2**10) //1024ES8对象方法的扩展：
1.Object.values()方法返回一个给定对象的所有可枚举属性值的数组 (就是返回字典中的键值)
2.Object.entries()方法返回一个给定对象自身可遍历属性[key,value] 的数组 （就相当于是获取字典中的一整个条目,方便创建Map对象）
3.Object.getOwnPropertyDescriptors()该方法返回指定对象所有自身属性的描述对象。（方便深克隆对象）
ES9新特性：
ES9扩展运算符和rest参数
Rest 参数与 spread 扩展运算符在 ES6 中已经引入
不过ES6中只是针对于数组
在ES9 中为对象提供了像数组一样的rest 参数和扩展运算符
rest参数
function fun({name,...user}){
console.log(name) //小王
console.log(user) //{age: 18, height: 180}
}
fun({
name:"小王",
age:18,
height:180
})
-------------------------------------------------------------------------------------------
扩展运算符
const a={
name:'小王'
}
const b={
age:18
}
const c={
height:180
}
const d={...a,...b,...c}
console.log(d) //{name: '小王', age: 18, height: 180}ES9正则扩展：命名捕获分组：
原始：
//声明一个字符串
let str = '<a href="http://www.baidu.com">百度</a>
提取url 与 标签文本
const reg = /<a href="(.*)">(.*)<\/a>/
//执行
const result = reg.exec(str);
console.log(result);
console.log(result[1]);
console.log(result[2]);
-------------------------------------------------------------------
使用命名捕获分组：
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/
const result = reg.exec(str);
console.log(result)
console.log(result.groups.url)
console.log(result.groups.text)ES9正则扩展：反向断言：
let str = 'JS5211314你晓呆吗5555呜呜呜';
正向断言 取5555
reg = /\d+(?=呜)/
const result = reg.exec(str);
console.log(result);
--------------------------------------------------
反向断言
let str = 'JS5211314你晓呆吗5555呜呜呜';
reg = /(?<=吗)\d+/;
let result = reg.exec(str);
console.log(result);ES9 正则扩展：dotAll模式
//dot 有 . 的意思 而.在正则里表示 元字符（除换行符以外的任意单个字符）
let str = `
<ul>
<li>
<a>肖生克的救赎</a>
<p>上映时间:1994-09-10</p>
</li>
<li>
<a>阿甘正传</a>
<p>上映时间:1994-20-10</p>
</li>
</ul>`;
// 声明正则
// const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/s
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs
let result;
let data = [];
while(result = reg.exec(str)){
data.push({title:result[1],time:result[2]})
}
console.log(data);ES10新特性：
ES10 对象扩展方法Object.fromEntries
Object.fromEntries 和 Object.entries是逆运算
Object.entrise是将对象转换为数组，而Object.fromEntries则是将数组转化为对象。字符串方法扩展trimStart与trimStart：
trimStart是去除字符串左侧空格，trimEnd是去除字符串右侧空格
let str=' aa '
console.log(str)
console.log(str.trimStart())
console.log(str.trimEnd())数组方法扩展flat与flatMap:
flat可译为：平 ；能将多位数组转化为低位数组；如果传参，那么参数位数字，这个数字为转化的深度
flatMap是一个符合操作，可以将Map方法生成的多维数组转化为一维数组
const arr = [1,2,3,4,5,[6,8,5,[8,9,10,11]]];
console.log(arr.flat(2));
const arr1 = [1,2,3,4,5]
// const arr3 = arr1.map(item => item*10) // [10, 20, 30, 40, 50]
const arr3 = arr1.flatMap(item => [item*10])
console.log(arr3);symbol.prototype.description:
Symbol对象的description属性可以获得Symbol对象的值
let s = Symbol（"哈哈"）
console.log(s.description) //哈哈ES11:
ES11 的私有属性:
ES11的私有属性前要加#来区分，私有属性只能在类里面使用，不能用实例化的对象直接调用Promise.allSettled() :
Promise.allSettled() 接收的是一个 Promise对象数组
返回的结果永远是Promise对象状态永远是resolve，该结果是数组中的Promise值的返回结果状态+值字符串方法扩展 String.prototype.matchAll()
该方法是用来得到 正则批量的匹配的结果
let str = `
<ul>
<li>
<a>肖生克的救赎</a>
<p>上映时间:1994-09-10</p>
</li>
<li>
<a>阿甘正传</a>
<p>上映时间:1994-20-10</p>
</li>
</ul>`;
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
let result = str.matchAll(reg);
const arr = [...result]
console.log(arr)可选链操作符 ?.
?. 是用来判断对象的层级属性是否存在
function main(config) {
// 不用可选操作符？
// const dbHost = config && config.db && config.db.host
const dbHost = config?.db?.host //这两条语句 等价
console.log(dbHost);
}
main({
db:{
host:'127.0.0.1:8000',
username:'jiajia'
},
dba:{
username:'xiaojiajia',
password:'123456'
}
})动态import :
动态import即按需加载，可实现import的懒加载效果
ES11的动态import就是不在开头引入，是在需要引入时调用import方法
这个方法返回的是一个Promise对象，可通过这个Promise对象调用模块方法。
import(传入的是模块路径).then(module=>{module.hello()});BigInt类型:见此博客
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。