5-let声明变量
- 块级作用域
- 不允许重复声明
- 变量提升没有,var有变量提升
//暂存性死区
let myname ="kerwin"
function test(){
console.log(myname)
let myname = "tiechui"
}
//报错
- 不与顶层对象挂钩
用let不会被window访问到
Let myage =100
console.log(window.myage)
-const声明
- 常量
- 不能重复定义
- 块级
- 声明不提升
- 不与顶层对象挂钩
const myobj ={
name: "kerwin",age:100
}
//const myobj =Object.freeze({
//name : "kerwin",
//age:100
//}冻结，不会改变
myobj.name = "tiechui"
console. log (myobj)
变量解构赋值
let x = 1;let y = 2;
[y,x] =[x,y];
console.log(×,y);
//let arr = [1,[2,3,4],5,6]
// let [a, [b,,d],c] = arr;
//console.log(b,d)
Let res = {
code: 200,
data: "11111111"
}
let {data} = res;
console.log(data)
let code = "AAAA"
let res = {
code : 200,
data: "11111111"
}
let {data,code:co} = res;
//对code进行重命名
console.log(data,co)
-模板字符串
Let name ="tiechui"
//
//let oli = "<li>\
//<b>"+name+"</b>\
//</li>"
//比较
Let oli = `<li>
<b>${name}</b>
</li>`
console.log(oli)
Let arr =[ "tiechui" , "kerwin" , "gangdan"]
Let newlist = arr.map(function(item){
//遍历
//return '<li class="${index===O ? 'active' : ''}">
//还可以放三目运算符
return `<li>
<b>${item}</b>
</li>`
})
console.log(newlist)
字符串与数值扩展
console.log(myname.includes( "en" ))
console.log(myname.startswith( "er" ))
console.log(myname.endswith( "win" ))
数值扩展
支持二进制八进制
-数组扩展
在这里插入代码片
1
//1- ...展开运算符
let arr [1,2,3]
// let arr2 = arr.concat()
Let arr2 = [ ...arr]
arr2.pop()
console.log (arr,arr25
let arr = [1,2,3]
let arr2 =[4,5,6]
console.log([ ...arr, ...arr2])
//合并数组
Let myarr = [1,2,3,4,5,6,7,8]
let [a,b,...c] = myarr
console.log(a,b,c)
//收集剩余数组
2
Symbol
// obj.getName()
Let s1 = Symbol()//生成了一个symbol类型数据
let s2 = Symbol()
//console.log(typeof s1)
console.log(s1===s2)//不相等
//1．不能进行运算
console.log(s1>"aaaaa")
//2．显示调用toString()
console.log(s1.toString()+"aaaa")
//3．隐式转换boolean
Iterator
set
不允许有重复的数组
// add
s1.add(5).add(6)console.log(s1)
// has监测含有什么
console.log(s1.has(5))
// delete
s1.delete(5)
console.log(s1.has(5))
map
Proxy
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
var obj = new Proxy({}, {
get: function (target, propKey, receiver) {
console.log(`getting ${propKey}!`);
return Reflect.get(target, propKey, receiver);
},
set: function (target, propKey, value, receiver) {
console.log(`setting ${propKey}!`);
return Reflect.set(target, propKey, value, receiver);
}
});
上面代码对一个空对象架设了一层拦截，重定义了属性的读取（get）和设置（set）行为。
let obj = { }
// console.log(box)
object.defineProperty(obj, "data",{
get(){
console.log( "get")return box.innerHTML},
set(vaLue){
console.log( "set" , value)//设置dom
box.innerHTML = vaLue
}
})
console.log(obj)
Reflect对象
Reflect 可以用于获取目标对象的行为，它与Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与Proxy是对应的。
15-1代替Object的某些方法
const obj = {
};
Reflect.defineProperty(obj,'name ', {
value: 'kerwin' ,
writable: false,
configurable:false
});
15-2修改某些object方法返回结果
//老写法
try {
object.defineProperty(target，property,attributes);l / success
}catch (e) {l / fai1
I
}
//新写法
if (Reflect.defineProperty(target，property，attributes)) {
// success
}e1se {
//fail
}
15-3命令式变为函数行为
const obj = {
name : "kerwin"};
//老写法
conso1e.log("name" in obj) //true
//新写法
console.1og(Reflect.has(pbj， 'name ')) l /true
//老写法
delete obj. name
//新写法
Reflect.deleteProperty(obj， "name")
15-4配合Proxy
let target = new set(
const proxy = new Proxy(target，{
get(target，key) {
const value = Rerlect.get(target,key)
//遇到Function都手动绑定一下 this
if (value instanceof Function) {
console.log(`访问${value}方法了`)
return value. bind(target)
//不能是call apply
}
Promise
Promise是异步编程的一种解决方案，比传统的解决方案回调函数，更合理和更强大。ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。
·指定回调函数方式更灵活易懂。
·解决异步回调地狱的问题。
16-1回调地狱
·当一个回调函数嵌套一个回调函数的时候·就会出现一个嵌套结构
·当嵌套的多了就会出现回调地狱的情况·比如我们发送三个ajax请求
。第一个正常发送
。第二个请求需要第一个请求的结果中的某一个值作为参数。第三个请求需要第二个请求的结果中的某一个值作为参数
Promise基础语法
// Promise构造函数
var q=new Promise(function(){
})
//q是promise对象
q.then(function(){//兑现承诺，这个函数被执行
}).catch(function(){//拒绝承诺，这个函数就会被执行
})
// pending执行中
//fulfilled
//reject
Promise封装ajax
-ES6-class
cLass createobj {
//构造器函数
constructor( name){
this.name =name
}
}
-继承
类的写法
function Person( name , age){
this.name = name
this.age = age
}
//Person()
Person. prototype.say = function(){
console.log (this.name ,"hello")
}
function student( name,age,grade){
Person.call(this,name,age)
this.grade = grade
}
var obj = new Student( "kerwin",100, 100)
console.log(obj)
//构造函数继承–继承属性
//原型继承===继承原型上方法
class继承
//父类
class Person {
constructor(name ,age){
this.name = namethis.age = age
}
say(){
console.log(this.name, "hello")
}
}
//子类
// extends原型继承
cLass student extends Person{
constructor(name,age, grade){
super(name ,age)// Person.call(this, name , age)
this.grade = grade
}
}
Module语法
异步加载
私密不漏
重名不怕
依赖不乱
<script src="1.js" type="module"></script>引入Module 异步加载
以下这种可以访问到JS里面的东西
export default A1
//js里面这样写
<script type="module">
import A1 from './1.js'
console.log(A1)
</script>
<script>
import obj1 from './1.js '
import obj2 from './2.js'
console.log(obj1.test,obj2.test)]
</script>
//可以解决重名问题
export {
A1,A2
}
//也可以直接这么导出
export function test(){
console.log( "1.js--test")
}
<script>
import {test as testA} from './1.js '
import {test as testB} from './2.js'
//重命名
import * as obj1 from './1.js'
import * as obj2 from './2.js'
//导入js所有
</script>
- async返回值是非promise对象，fulfiled， then指定
- async返回的是 promsie对象，fulfilled vs rejected ,then vs catch
2.对象方法扩展
-字符串填充
let list = []
for(Let i=1;i<13;i++){
// list.push(string(i).padstart(2,"O"))
list.push((i+"").padstart(2,"0" ))
}
往前后填充指定字符达到指定长度
ES9新特性.对象的剩余参数与扩展运算符
1-1对象的剩余参数
let obj = {
name : "kerwin”，age : 100,
location: "dalian"
}
let {name , . . . other} = obj
console.log(name) //kerwin
console.log(other) //{age: 100，location: 'dalian'}
正则扩展
命名
Let str ="今天是2022-11-10"
Let reg = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/
Promise.finally
//显示loading
ajax( ).then((data)=>{
console.log(data)//隐藏loading
}).catch(err=>{
console.log( "err",err)//隐藏loading
}).finally(()=>r
工
console.log( "finally")
//隐藏loading
-异步迭代
function ajax(data){
return new Promise(resolve=>{
resoLve(data)
})
}
//异步生成器
async function *gen(){
yield ajax(111)
yield ajax(222)
}
Let g =gen() //g就是一个异步遍历器
-Object.fromEntries
//用处1
let m = new Map()
m.set( "name" , "tiechui")m.set( "age", 100)
console.log(object.fromEntries(m))
//用处2
let str = "name=xiaoming&age=18"
Let seatchParams = new URLSearchParams(str)
console.log(object.fromEntries(seatchParams))
//用处3
let obj = {
"A": [ "A1", "A2", "A3"],"B":["B1", "B1"],
"c":["c1"]
}
/ /console.log(obj.map)
let myarr = object.entries(obj)/ /console.log( myarr)
let mynewarr = myarr.map(([key , vaLue])=>
[key, value.length]
)
console.log(0bject.fromEntries(mynewarr
trimStart与trimEndtscproj
删除前/后空格
##
Promise.allSettled
-Module新增
let role1 ="管理员"
let role2 ="普通用户"
function (){
return "普通用户"
}
async function render(roLe){
if(roLe==="管理员"){
//加载1.js
Let res1 =await import("./1.js")//返回值promise对
console.log(res1)
}else{
//加载2.js
Let res2 = await import( "./2.js")console.log(res2)
}
import *as obj from './3.js'
console.log(obj)
//HTML导入js
export * as obj3 from './3.js'
//js继承js
-String的matchAll方法
1et str =<ul>
<li>1111</li><1i>2222</1i><1i>3333</1i><1i>4444</1i></u1>
let reg = /<1i>(.*)<\/li>/g
Let iobj = str.matchAll(reg)
console.log([ . . .iobj])
4.BigInt
JavaScript能够准确表示的整数范围在-253到253之间(不含两个端点)，超过这个范围，无法精确表示这个值，这使得JavaScript不适合进行科学和金融方面的精确计算。
为了与Number类型区别，Biglnt类型的数据必须添加后缀n。
console.log(BigInt(2**53))
console.log( BigInt(2**53)+Bigint(1))
console.log( BigInt(2**53)+BigInt(2))
console.log(BigInt(2**53)+Bigint(3))
let jsonstr = `
{
"id" : 9007199254740993,"list":[]
}`
console.log (JSON. parse(jsonstr).id)
//1．后端返回字符串
//2．引入一个模块json-bigint
globalThis
globalThis提供了一个标准的方式来获取不同环境下的全局this对象（也就是全局对象自身)。
没有窗口环境也能工作
var getG1obal = function o {
if (typeof self !== ' updefined ' ) i return se1f; }
if (typeof window !== 'undefined ' ) i return window; }
if (typeof global !== 'undefined ' ) i return globa1; }
throw new Error( ' unable to locate global object ');
空值合并运算符
let str = null ??"kerwin"
let str = undefined ?? "kerwin"
//0就会显示0
let str = 0||"kerwin” I
console.log(obj.introduction ||"这个人很赖，什么也没有留下")
7.可选链操作符
可选链前面的值如果是null或undefined，则不再执行后面的，之前返回可选链前面的值
let obj = {
name : "kerwin"，introduction:0,
// location: {
//city : "dalian"
//}
}
console.log(obj && obj.location && obj.1ocation.city)
console.log(obj?. location?.city)
1.逻辑赋值操作符
let a = true
let b = false
//a &&= b //false
a ||= b ; //true
conso1e.log(a)
let obj = {
name : "kerwin",
}
obj.introduction = obj.introduction??"很懒"obj.introduction??="很懒"
⒉数字分隔符
这个新特性是为了方便程序员看代码而出现的，如果数字比较大，那么看起来就不是那么一目了然
分隔符不仅可以分割十进制，也可以分割二净值或者十六净值的数据，非常好用。
3.replaceAll
所有匹配都会被替代项替换。模式可以是字符串或正则表达式，而替换项可以是字符串或针对每次匹配执行的函数。并返回一个全新的字符串
const str =
"I wish to wish the wish you wish to wish，but if you wish the wish the witchwishes， I won't wish the wish you wish to wish. ";
const newstr = str.replaceAll("wish"， "kerwin");
conso1e.log(newstr);
5.支持在最外层写await
顶层await只能用在ES6模块，不能用在Common]S模块。这是因为Common]S模块的require()是同步加载，如果有顶层await，就没法处理加载了。
function ajaxoi
return new Promise((resolve) => {
setTimeout(() => {
reso1ve ("data-1111");}，1000);
}
}
let res = await ajax(;console. 1og(res)
6.at函数来索引元素
let arr = ["kerwin" , "tiechui" , "gangdan" , "xiaoming"]
conso1e.log(arr[1])
console.log(arr[arr.1ength-1])//变丑了console.log(arr[arr.length-2])//变丑了
console.log(arr.at(1))
console.log(arr.at(-1))conso1e.log(arr.at(-2))
7.正则匹配的开始和结束索引
let str = "今天是2022-11-10"
let reg = /(?<year>[0-9]{43})-(?<month>[O-9]{23)-(?<day>[O-9]{23)/d
//exec
let res = reg.exec(str)console.log(res)
3471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
