ES6 -- 2015

news2024/11/17 2:27:05

学习视频

1. let和const

1.1 let

  1. 变量必须先声明再使用
  2. 同一变量不能重复声明
  3. 变量有块级作用域

1.2 const

  1. 声明常量,常量不能改变
  2. 常量必须有初始值,不能先声明再赋值

2. 解构

1 数组解构

保持左右的结构一样,安装顺序一一对应

  • 完全解构
let [a,b] = [1,2]
console.log(a,b) // 1 2
  • 部分解构
let [a] = [1,2]
console.log(a) // 1 
  • 忽略方式解构
let [ ,b] = [1,2]
console.log(b) //  2
  • 嵌套结构
let [,,[a]] = [1,2,[3]]
console.log(a) // 3
  • 剩余运算符解构
let [a,...b] = [1,2,3]
console.log(a,b) // 1 [2,3]
  • 解构默认值
let [a,b=2] = [1]
console.log(a,b) // 1 2
  • 应用:两数交换
let a = 10
let b = 20
[b, a] = [a, b]
console.log(a, b) // 20, 10

2. 对象解构

按属性名对应

  1. 完全解构
let user = {name:"zhangsan",age:18}
let {age, name} = user
console.log(name, age) // zhangsan 18
  1. 部分解构
let user = {name:"zhangsan",age:18}
let {name} = user
console.log(name) // zhangsan
  1. 解构后重命名
let user = {name:"zhangsan",age:18}
let {name:userName,age:userAge} = user
console.log(userName, userAge)	// zhangsan 18
  1. 剩余运算符解构
let user = {name:"zhangsan",age:18,address:'银河系'}
let {name,...rest} = user
console.log(name, rest)	// zhangsan {age: 18, address: '银河系'}
  1. 默认值
let user = {name:"zhangsan",age:18}
let {name, age, address='银河系'} = user
console.log(name, age, address)	// zhangsan 18 银河系 

3. 字符串解构

  • 数组解构字符串
let str = 'qwert'
let [a,b,c,d] = str
console.log(a,b,c,d) // q w e r
  • 字符串属性解构
let str = 'qwert'
let {length} = str
console.log(length)	// 5

3. 对字符串扩展

1. 模板字符串

  1. 解决了字符串换行
console.log("字符串
随意换行") 	// 报错

console.log(`字符串\
可以\
随意换行`)	//	字符串可以随意换行
  1. 更容易的插入变量
let user = {name:"zhangsan",age:18}
console.log(`我叫${user.name},今年${user.age}`)	//我叫zhangsan,今年18岁

2. 字符串新增的方法

  1. 是否包含字符串,includes() 返回值:boolean
// 是否包含字符串 wo
console.log(str.includes('wo')) // true
console.log(str.includes(`oo`)) // false
// 索引0位置开始是否有hel字符串
console.log(str.includes('hel', 0)) // true
  1. 是否从某个字符串开始, startsWith(),返回值:boolean
// he 是否在字符串的开头,也就是索引0开始
console.log(str.startsWith(`he`));	// true
// el 是否从索引1开始
console.log(str.startsWith(`el`,1))	// true
  1. 是否以某个字符串结尾 endsWith(),返回值:boolean
// 字符串是否以 ld 结尾
console.log(str.endsWith(`ld`));	// true
// 截取索引从0到4的字符串,是否以 o 结尾
console.log(str.endsWith(`o`,5));	// true
  1. 返回重复几次字符串,repeat(),返回值:string
console.log(str.repeat(3));	// hello worldhello worldhello world

4. 对象的扩展

1. 简化对象中属性名和方法名的写法

// 简化对象中属性名和函数名的写法
let str = `一个字符串`

// 未简写的形式
let obj = {
    str: str,
    fun: function(){
        return '一个函数'
    }
}
console.log(obj.str,obj.fun())	//一个字符串 一个函数

// 简写的形式
let obj2 = {
    str,	// 属性名与引入的对象的名字相同,可以使用简写形式
    fun(){
        return '又一个函数'
    }
}
console.log(obj2.str,obj2.fun()) // 一个字符串 又一个函数
  1. 对象中的属性名使用[]表达式
  • 属性名使用[]拼接字符串
let lastName = 'last';
let firstName = 'first';
let obj = {
    ['my' + 'name']:'zhangsan',
    [lastName + 'name']:'lisi',
    [`${firstName}name`]:'wangwu'
}
console.log(obj);	//{myname: 'zhangsan', lastname: 'lisi', firstname: 'wangwu'}
  • 对象中的属性名可以是动态的
let arrName = ['zhangsan','lisi','wangwu']
let obj = {}

for(let item of arrName){
    obj[item+"Name"]=item
}
console.log(obj)    //{zhangsanName: 'zhangsan', lisiName: 'lisi', wangwuName: 'wangwu'}

2. 对象扩展的方法

  1. Object.assign对象合并

Object.assign(target: {}, source: any)返回值是合并后的对象

  • 第一种情形
let user = {}
let user1 = {name:'zhangsan'}
let user2 = {age:10}

console.log(user === user1) // false
user = Object.assign(user1,user2)   
console.log(user1 === user) // true
console.log(user);  // {name: 'zhangsan', age: 10}
console.log(user1)  // {name: 'zhangsan', age: 10}
console.log(user2)  // {age: 10}
  • 第二种情形
let user = {}
let user1 = {name:'zhangsan'}
let user2 = {age:10}

Object.assign(user,user1,user2) 
console.log(user)   // {name: 'zhangsan', age: 10}
console.log(user1)  // {name: 'zhangsan'}
console.log(user2)  // {age: 10}
  • 第三种情形:如有相同的属性,则覆盖属性值
let user1 = {name:'zhangsan',age:33}
let user2 = {age:10}

Object.assign(user1,user2) 
console.log(user1)  // {name: 'zhangsan', age: 10}
console.log(user2)  // {age: 10}
  • 应用:初始化对象
let user1 = {name:'',age:0}
let user2 = {...user1}

user1.name = 'zhangsan'
user1.age = 10
console.log(user1)  // {name: 'zhangsan', age: 10}
Object.assign(user1,user2) 
console.log(user1)  // {name: '', age: 0}
  1. 对象是否相等Object.is

=== 作用相同
相比较的是两个对象,地址相同返回true,不同返回false

let user1 = {name:'',age:0}
let user2 = {name:'',age:0}


console.log(Object.is(user1,user2)); // false
user1 = user2;
console.log(Object.is(user1,user2)); // true

5. 数组的扩展

1. 扩展运算符...

let arr1 = ['a','b','c']
let arr2 = ['1','2','3']

let arr = ['A',...arr1,...arr2]
console.log(arr)	// ['A', 'a', 'b', 'c', '1', '2', '3']

2. 查找 find()

let arr = ['A', 'a', 'b', 'c', '1', '2', '3']
// 返回符合条件的第一个元素
let findResult = arr.find(function(item){
    return item > 'b'
})
console.log(findResult);    // c

3. 查找 findIndex()

let arr = ['A', 'a', 'b', 'c', '1', '2', '3']
// 返回符合条件的第一个元素下标
let findResult = arr.findIndex(function(item){
    return item > 'b'
})
console.log(findResult);    // 3

4. 将一组值转换为数组

let arr = Array.of(1,2,3)
console.log(arr);   // [1,2,3]

5. 将对象内的值转化为数组

通常使用的对象是无法通过Array.form转换为数组的

  • 应用场景:查找class下的所有dom对象,将其转化为数组
var parent = document.querySelectorAll('#myClass');
let children = parent[0].children;
console.log(children);
// 将children转换为真正的数组
let arr = Array.from(children)
console.log(arr);

在这里插入图片描述

6. include 方法

ES7 – 2016 新增

  • 数组中是否包含某个元素,返回值为boolean
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.includes(5); // true

6. 函数的扩展

1. 不同函数中的this

{
    // 普通函数
    function fn() {
        console.log(this)   // windows
    }
    fn()
}
{
    // 构造函数
    function Person(name) {
        this.name = name;
        console.log(this)   // Person {name: 'zs'}
    }
    let zs = new Person('zs')
    console.log(zs) // Person {name: 'zs'}
}

{
    // 函数作为属性值
    let obj = {
        name: 'obj',
        fn() {
            console.log(this)
        }
    }
    obj.fn()    // {name: 'obj', fn: ƒ}
}

2. 更改this的指向

  1. call(this: Function, thisArg: any, ...argArray: any[])

只在执行call方法这一句代码时改变this的指向(并不是彻底改变函数中this的指向)

// 函数作为属性值
  let obj = {
      name: 'obj',
      fn() {
          console.log(`name:${this.name},age:${this.age}`) 
      }
  }
  // fn函数的this指向obj,所以没有age的属性值
  obj.fn()    // name:obj,age:undefined
  
  let obj1 = { age: 18 }
  // 将fn函数的this指向obj1,所以没有name的属性值
  obj.fn.call(obj1) //name:undefined,age:18
  • call携带参数
// 函数作为属性值
let obj = {
    name: 'obj',
    fn(param) {
        console.log(param)
    }
}
// fn函数的this指向obj
obj.fn("this指向obj")    // this指向obj

let obj1 = { age: 18 }
// 将fn函数的this指向obj1
obj.fn.call(obj1,'this指向obj1') // this指向obj1
  1. apply(this: Function, thisArg: any, argArray?: any)
  • 与call方法唯一不同的是传递参数时使用 []
// 构造函数
function Person() {
    console.log(this) 
}

let obj =  { name: 'obj'}
Person.apply(obj)   // {name: 'obj'}
let zs1 = new Person() // Person {}
// 构造函数
function Person(...argArray) {
    this.age= 10
    console.log(`参数:`,argArray) 
    console.log('this指向====>',this)
}

let obj =  { name: 'obj' }
Person.apply(obj,['arg1','arg2'])   
/*
结果:
    参数:['arg1', 'arg2']
    this指向====> {name: 'obj', age: 10}
*/
let zs1 = new Person('XXX') // Person {}
/*
结果:
    参数: ['XXX']
    this指向====> Person {age: 10}
*/
  1. bind
  • bind方法返回fn函数更换this后的fn函数
  • 对上面这句话的解释:fn函数还是fn函数,只不过fn函数中的this指向了obj对象
// 普通函数
function fn() {
    console.log(this)   // {name: 'obj'}
}

let obj = { name: 'obj' }
let newFn = fn.bind(obj)
newFn()

3. 函数中参数设置默认值

  • 如果有多个参数,使用默认值的参数要放在参数的最后面
// 默认值参数
function fun (a, b=1000) {
    console.log(a, b)
}

7. 箭头函数

1. 箭头函数中的this,指向window

let fun = ()=>{
    console.log(this)   // window
}
fun()

2. 返回值是对象,使用({......})

let fun = ()=>({name:'zhangsan'})
console.log(fun()) 

8. 二进制和八进制

let num1 = 0b101;   // 0b或者0B 二进制
let num2 = 0o123;   // 0o或者0O 八进制
let num3 = 0xff;    // 0x或者0X 十六进制
console.log(num1, num2, num3);	// 5 83 255

9. symbol

10. Class

1. 基本结构

class Person {
    // 构造器(类似构造函数)
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    // 方法
    sayHi(){
        console.log(`Hi, I am ${this.name}`);
    }
}

2. 继承

// 继承
class Student extends Person {
    constructor(name, age, grade) {
        // 调用父类的构造函数
        super(name, age);   // 调用父类的构造函数,不许写在第一行
        this.grade = grade;
    }
    study() {
        console.log(`${this.name} is studying`);
    }
}

3. get和set属性

class Person {
    pname	// 定义属性,可以不通过构造器定义属性

    // 对外使用 name 属性,类中的属性实际是pname
    set name(value) {
        console.log('set name 对name的属性值进行校验等操作')
        this.pname = value;
    }
    get name() {
        console.log('get name 对name的属性值进行操作')
        return this.pname;
    }
}

const person = new Person();
person.name = 'John'		// set name 对name的属性值进行校验等操作
console.log(person.name);	// get name 对name的属性值进行操作  John

4. 类的静态属性和方法

class Person {
    // static: 定义静态属性和方法的关键字
    static type 
    static sayHello() {
        console.log(this);	// 指向Person类
    }
    walk() {
        console.log(this);	// 指向实例化对象
    }
}
// 静态属性和方法的使用
Person.type = 'person';
console.log(Person.type);   // person
Person.sayHello();  // 静态方法中的 this 指向类本身
/*结果:
class Person {
    static type 
    static sayHello() {
        console.log(this);
    }
    walk() {
        console.log(this);
    }
}
*/
const person = new Person()
person.walk();  // walk中的this指向的是person实例

11. Set

1. Set集合的增删改查

  • Set,是一种数据结构,和数组类似,但是Set集合里面的元素不能重复
  1. 创建Set集合
// new关键字,创建Set集合
const set1 = new Set()
// 把数组转化为Set
const set2 = new Set([1, 2, 3])
  1. 将数组转换为Set集合
// 把数组转化为Set
const set2 = new Set([1, 2, 3])
const arr = [1, 2, 3, 4, 5, 1, 2]
const set3 = new Set(arr)	// {1, 2, 3, 4, 5}
  1. 获取set集合中元素的数量
// 获取Set集合的长度 .size
let size = set3.size // size是Set集合的属性,不是方法
  1. 添加元素
// 添加元素 add()
const set4 = set3.add(4)
  1. 删除元素
// 删除元素 delete()
const set5 = set3.delete(2)
  1. 判断集合中是否有某个元素
// 判断元素是否存在 has()
const isExist = set3.has(2) // 返回值是布尔值
  1. 清空集合
// 清空集合 clear()
set3.clear()

2. 遍历Set

set的数据结构和数组相似,但是它没有index
set是以键值对的形式储存的,但是set的键和值是相等的

  • 通过遍历数组和Set集合比较两个的数据结构

遍历数组

// 数组的遍历
const arr = ['a', 'b', 'c', 'd']
arr.forEach((value,index,array) => {
  console.log(`value===>${value},index===>${index},array===>`,array);
})`在这里插入代码片`
// 结果
value===>a,index===>0,array===> (4) ['a', 'b', 'c', 'd']
value===>b,index===>1,array===> (4) ['a', 'b', 'c', 'd']
value===>c,index===>2,array===> (4) ['a', 'b', 'c', 'd']
value===>d,index===>3,array===> (4) ['a', 'b', 'c', 'd']

遍历Set集合

const list = new Set(['a', 'b', 'c', 'd'])
list.forEach((value,index,set) => {
    console.log(`value===>${value},index===>${index},set===>`,set);
})
// 结果
value===>a,index===>a,set===> Set(4) {'a', 'b', 'c', 'd'}
value===>b,index===>b,set===> Set(4) {'a', 'b', 'c', 'd'}
value===>c,index===>c,set===> Set(4) {'a', 'b', 'c', 'd'}
value===>d,index===>d,set===> Set(4) {'a', 'b', 'c', 'd'}

结论: set集合中没有索引,是以键值对的结构存储元素,并且键与值是一样的

  1. for... of
const list = new Set(['a', 'b', 'c', 'd'])
for (let item of list) {
    console.log(item);	// a	b	c	d
}
  1. 将set结构转换为数组结构后遍历
  • Array.from
const list = new Set(['a', 'b', 'c', 'd'])
Array.from(list).forEach((value,index,set) => {
    console.log(`value===>${value},index===>${index},set===>`,set);
})
// 结果
value===>a,index===>0,array===> (4) ['a', 'b', 'c', 'd']
value===>b,index===>1,array===> (4) ['a', 'b', 'c', 'd']
value===>c,index===>2,array===> (4) ['a', 'b', 'c', 'd']
value===>d,index===>3,array===> (4) ['a', 'b', 'c', 'd']
  • […set]
let list = new Set(['a', 'b', 'c', 'd']);

[...list].forEach((value,index,array) => {
    console.log(`value===>${value},index===>${index},array===>`,array);
})

12 Map

  • Map:数据结构,以键值对的形式储存,但是键在集合中唯一

1. Map集合的增删改查

  1. 创建Map
const map = new Map();
map.set("IN", "India");
map.set("FR", "France");
console.log(map)
// {'IN' => 'India', 'FR' => 'France'}


const map1 = new Map([["IN","India"],["FR","France"]])
  1. 获取集合中某个键的值
let v = map.get("IN")
console.log(v)	// India
  1. 删除元素
map.delete("IN")	// 删除键值为'IN'的元素
console.log(map)
  1. 清空集合
map.clear()
console.log(map) //Map(0) {size: 0}
  1. 集合中元素的数量
let size = map.size
  1. 修改键的值
const map = new Map();
map.set("IN", "India");
map.set("IN","XXXXX")
console.log(map)	// {'IN' => 'XXXXX'}

2. 遍历Map

  • 获取Map所有的键
const map = new Map();
map.set("IN", "India");
map.set("FR", "France");
map.set("USA", "United States")

const keys = map.keys();
console.log(keys);	// {'IN', 'FR', 'USA'}
  • 获取Map所有的值
const values = map.values();
console.log(values); // {'India', 'France', 'United States'}
  • for...of
for(let [key,value] of map){
    console.log("key==> ",key,"value===> ",value);
}
/*
key==>  IN value===>  India
key==>  FR value===>  France
key==>  USA value===>  United States
*/
for(let item of map){
    console.log(item);
}
/*
['IN', 'India']
['FR', 'France']
['USA', 'United States']
*/
  • forEach
map.forEach((value,key)=>{
    console.log("key==>",key,"value===>",value);
})
/*
key==>  IN value===>  India
key==>  FR value===>  France
key==>  USA value===>  United States
*/

13. Iterator 迭代器

迭代器:

  1. 实现Symbol.iterator方法的数据解构都可以通过for…of遍历数据
  2. 迭代器必须实现next(),它返回一个对象,该对象有两个属性:value 和 done。value 是当前元素的值,done 是布尔值,表示是否已经到达了序列的末尾。
  • 原生实现迭代器的数据类型

    1. Array(数组)
    2. String(字符串)
    3. Map(映射表)
    4. Set(集合)
    5. NodeList 和 HTMLCollection: 查询器返回的结果
    6. Generator 函数: Generator 函数本身就是一个迭代器工厂
    7. TypedArray(类型化数组)
    8. Arguments 对象(传递给函数的参数)
  • 在对象中使用迭代器

let obj = {
    arr:["苹果","香蕉","梨"],
    // 创建迭代器
    [Symbol.iterator](){
        let index = 0;
        return {
            next(){
            if(index < obj.arr.length){
                return {value:obj.arr[index++],done:false}
            }else{
                return {value:undefined,done:true}
            }
        }
        }
    },
}
// 对象中实现迭代器后可以使用for..of
for(let item of obj){
    console.log(item)
}
// 迭代器中的next()方法
let it = obj[Symbol.iterator]();
console.log(it.next()); // {value: '苹果', done: false}
console.log(it.next()); // {value: '香蕉', done: false}
console.log(it.next()); // {value: '梨', done: false}
console.log(it.next()); // {value: undefined, done: true}

14. Promise

1. 基本使用

let promise = new Promise((resolve, reject) => {
    // resolve("成功")
    reject("失败")
});
promise.then(value => {
    console.log(value)  // 成功 
},err => {
    console.log(err)    // 失败 
});
  • new Promise中参数是一个函数,函数中有两个参数,第一个函数执行,对应then方法的第一个函数执行;第二个函数执行,则then方法的第二个函数执行
  • then里面有两个参数,参数数据类型是函数
function resolve(value){}
function reject(reason){}

function executor(resolve, reject){
    // 在resolve和reject执行前,promise为待定状态(pending): 初始状态,既没有被兑现,也没有被拒绝。
    resolve("成功")     // 如果执行resolve函数,promise为成功状态(fulfilled): 意味着操作成功完成。
    // reject("失败")   // 如果执行reject函数,promise为失败状态(rejected): 意味着操作失败
}
let promise = new Promise(executor)

function thenResolve(value){    // promise状态变为成功状态执行该函数
    // value 是 resolve函数的参数
    console.log(value)
}
function thenReject(reason){    // promise状态变为失败状态执行该函数
    // reason 是 reject函数的参数
    console.log(reason)
}
promise.then(thenResolve, thenResolve)

2. Promise的链式调用

//  链式调用
let ajax = (url) => {
    return new Promise((resolve) => {
        console.log('请求地址:' + url)
        setTimeout(resolve,2000)
    })
}

ajax('A_url').then(res=>{
    console.log('A请求返回的结果')
    return ajax("B_url")
}).then(res=>{
    console.log('B请求返回的结果')
    return ajax('C_url')
}).then(res=>{
    console.log('C地址返回的结果')
})
/*
    请求地址:A_url
    A请求返回的结果
    请求地址:B_url
    B请求返回的结果
    请求地址:C_url
    C地址返回的结果
*/

3. Promise.all

  • Promise.all( [ promise1, promise2, promise3 ] )
  • 将多个promise绑定到一起,直到所有的promise都变为fulfilled(成功)状态时,一起返回结果
let p1 = new Promise((resolve,  reject)=>{
    resolve("P1")
})
let p2 = new Promise((resolve,  reject)=>{
    resolve("P2")
    // reject("P2")
})
let p3 = new Promise((resolve,  reject)=>{
    resolve("P3")
    // reject("P3")
})
Promise.all([p1,p2,p3]).then(res=>{
    console.log(res)	// ['P1', 'P2', 'P3']
},value=>{
    console.log(value)
})
  • 如果有多个promise返回失败状态,则Promise.all中只会接收最先变为失败状态的promise

4. Promise.race

  • 数组中promise,谁的状态(成功或失败)先改变,返回谁的结果
let p1 = new Promise((resolve,  reject)=>{
    setTimeout(()=>{
        reject("P1")
    },2000)
})
let p2 = new Promise((resolve,  reject)=>{
    setTimeout(()=>{
        resolve("P2")
    // reject("P2")
    },1000)

})
let p3 = new Promise((resolve,  reject)=>{
    setTimeout(resolve,3000,"P3")
})
Promise.race([p1,p2,p3]).then(res=>{
    console.log(res)	// P2
},value=>{
    console.log(value)
})

5. catch

作用:当promise状态变为fulfilledthen执行成功的回调,但是在回调中产生的异常没有处理方式

  • catch可以捕获所有的异常,无论是promise还是then里面产生的
  • 如果没有错误的回调,catch也能接收rejected状态
let promise = new Promise((resolve, reject) => {
    // throw new Error("错误")
    // resolve("成功")
    reject("失败")
});
promise.then(value => {
    throw new Error("错误")
    console.log(value)  // 成功 
})
.catch(err => {
    console.log("catch:",err)    // 失败
})

6. finally

15. Module 模块的导出和导入

1. 基本使用

  1. 导入和导出
    • 导出的变量不能重新赋值
export let var1 = 1;
export let obj1 = {
  a: 1,
}
export let fun1 = ()=>{};

import {var1, obj1, fun1} from './module.js'
let var2 = 2;
let obj2 = {
  b: 2,
}
let fun2 = ()=>{};
export {var2, obj2, fun2};

import {var2, obj2, fun2} from './module.js';
  1. 使用别名 as
  • 在export中使用别名
let var2 = 2;
let obj2 = {
  b: 2,
}
let fun2 = ()=>{};

export {
    var2 as var3,
    obj2 as obj3,
    fun2 as fun3,
}

import {var3, obj3, fun3} from './module.js'
  • 在import中使用别名
let var2 = 2;
let obj2 = {
  b: 2,
};
let fun2 = () => {};
export { var2, obj2, fun2 };

import {var2 as var3, obj2 as obj3, fun2 as fun3} from './module.js'

2. 整体导入 * as

export let var1 = 1;
export let obj1 = {
  a: 1,
};
export let fun1 = () => {};

import * as myName from './module.js'
// 使用
console.log(myName.var1)    // 1
console.log(myName.obj1)    // {a: 1}
console.log(myName.fun1)    // () => {}

3. 默认导出 default,匿名导入

  • 在一个文件中只能有一个default,但是不影响普通的导出方式
  • 导入时名字不需要加 {}
let var2 = 2;
let obj2 = {
  b: 2,
};
let fun2 = () => {};

export default {
  var2,
  obj2,
  fun2,
};

import myName from './module.js'
console.log(myName.var2)    // 2
console.log(myName.obj2)    // {a: 2}
console.log(myName.fun2)    // () => {}
  • 默认导出匿名函数
export default function () {
  console.log("hello world");
};

import myName from './module.js'
myName()    // hello world
  • 默认导出匿名对象
export default {
  name: "zhangsan",
  age: 18,
  talk(){
    console.log("hello world");
  }
};

import myName from './module.js'
myName.age = 20
myName.talk()   // hello world
console.log(myName) // {name: 'zhangsan', age: 20, talk: ƒ}

4. 在html中使用Module

  • type="module"
    <script type="module">
        import {var1} from './module.js'
        console.log(var1)
    </script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2154125.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CVE-2024-46101

前言 自己挖的第一个CVE~ 喜提critical 这里简单说一下。 漏洞简介 GDidees CMS < 3.9.1 的版本&#xff0c;存在一个任意文件上传漏洞。允许登录后的攻击者上传webshell获得网站的权限。 影响版本&#xff1a; GDidees CMS < 3.9.1 &#xff08;其它的我没测。。&am…

日志系统扩展二:日志服务器的实现

日志系统扩展二&#xff1a;日志服务器的实现 一、设计1.为何要这么扩展&#xff1f;2.应用层协议的选择1.HTTP&#xff1f;2.自定义应用层协议 二、自定义应用层协议的实现1.声明日志器1.服务器和客户端这里日志器的关联2.枚举类型的定义3.sinks数组的定义 2.打印日志1.logMes…

MySQL record 06 part

事务、存储过程 事务&#xff1a; MySQL的同步&#xff0c;同步是指 together done&#xff0c;要么一起前进&#xff0c;要么一起后退的意思。 注意&#xff0c;回滚 rollback 对已经提交 commit 的数据是无效的&#xff0c;也就是说&#xff0c;只能对没有被提交 commit …

CSS 布局三大样式简单学习

目录 1. css 浮动 1.1 效果1 1.2 效果2 1.3 效果3 1.4 效果4 2. css 定位 2.1 absolute 2.2 relative 2.3 fixed 3. css 盒子模型 3.1 效果1 3.2 效果2 3.3 效果3 3.4 效果4 1. css 浮动 1.1 效果1 1.2 效果2 1.3 效果3 1.4 效果4 2. css 定位 2.1 absolute 2.2 …

thinkphp 做分布式服务+读写分离+分库分表(分区)(后续接着写)

thinkphp 做分布式服务读写分离分库分表&#xff08;分区&#xff09; 引言 thinkphp* 大道至简一、分库分表分表php 分库分表hash算法0、分表的方法&#xff08;thinkphp&#xff09;1、ThinkPHP6 业务分表之一&#xff1a;UID 发号器2、ThinkPHP6 业务分表之二&#xff1a;用…

希尔排序(C语言实现)

目录 1.希尔排序( 缩小增量排序 ) 2.动图 ​编辑 3.代码实现 预排序实现 子序列排列实现 单趟排序实现 对整组数进行子排序 希尔排序代码 代码测试 时间复杂度分析 希尔排序的特性总结&#xff1a; 1.希尔排序( 缩小增量排序 ) 基本思想&#xff1a; 1.先选定一个…

QTCreator 调试:unknown debugger type “No engine“

QTCreator 调试&#xff1a;unknown debugger type "No engine" - kaizenly - 博客园 (cnblogs.com) 一开始Debuggers---Auto-detected这里第一row第一个项是标红的&#xff0c;然后没改东西&#xff0c;点完应用Apply以后&#xff0c;就可以调试了...&#xff08;不…

在python爬虫中xpath方式提取lxml.etree._ElementUnicodeResult转化为字符串str类型

简单提取网页中的数据时发现的 当通过xpath方式提取出需要的数据的text文本后想要转为字符串&#xff0c;但出现lxml.etree._ElementUnicodeResult的数据类型不能序列化&#xff0c;在网上查找到很多说是编码问题Unicode编码然后解码什么的&#xff1b;有些是(导入的xml库而不…

深度学习之概率论预备知识点(3)

在深度学习中&#xff0c;概率论和数理统计是理解许多算法背后的理论基础。这些知识在处理不确定性、估计模型参数、理解数据分布等方面非常关键 1、概率 一种用来描述随机事件发生的可能性的数字度量&#xff0c;表示某一事件发生的可能性。 概率并不客观存在&#xff0c;是…

Android Choreographer 监控应用 FPS

Choreographer 是 Android 提供的一个强大的工具类&#xff0c;用于协调动画、绘制和视图更新的时间。它的主要作用是协调应用的绘制过程&#xff0c;以确保流畅的用户体验。Choreographer 也可以帮助我们获取帧时间信息&#xff0c;从而为性能监测和优化提供重要的数据支持。 …

IDEA中Quarkus框架(3.13版本)开发、调试、部署、打包等

code-with-quarkus code-with-quarkus 是使用官网生成的demo项目 这个项目使用Quarkus&#xff08;使用3.13.0版本&#xff0c;该版本支持JDK21&#xff09;&#xff0c;超音速亚原子Java框架。官网地址: https://quarkus.io/. 环境要求 OS: Windows 10.0 jdk 11 maven 3.9…

淘宝扭蛋机小程序,扭蛋机文化下的新体验

在数字化时代中&#xff0c;扭蛋机逐渐从传统的线下机器转移到了线上互联网中&#xff0c;市场得到了创新发展。扭蛋机小程序具有便捷、多样化、个性化的特点&#xff0c;迎合了当下消费者的线上消费习惯&#xff0c;又能够让扭蛋机玩家体验到新鲜有趣的扭蛋。 扭蛋机是一种热…

python简单的小项目-关于央行储蓄占比情况的数据可视化

该数据来源于锐思数据库&#xff0c;如果数据有偏差&#xff0c;可能是本人搜索的问题&#xff0c;希望大家谅解。 数据大纲&#xff1a; 其中我们制作折现统计图需要用到的是截止日期&#xff0c;表达数据最后获取的日期&#xff0c;而更新时间则是数据时效性的表示&#xff…

django项目添加测试数据的三种方式

文章目录 自定义终端命令Faker添加模拟数据基于终端脚本来完成数据的添加编写python脚本编写shell脚本执行脚本需要权限使用shell命令来完成测试数据的添加 添加测试数据在工作中一共有三种方式&#xff1a; 可以根据django的manage.py指令进行[自定义终端命令]可以采用第三方…

pthread_cond_signal 和pthread_cond_wait

0、pthread_join()函数作用&#xff1a; pthread_join() 函数会一直阻塞调用它的线程&#xff0c;直至目标线程执行结束&#xff08;接收到目标线程的返回值&#xff09;&#xff0c;阻塞状态才会解除。如果 pthread_join() 函数成功等到了目标线程执行结束&#xff08;成功获取…

【C++】list详解及模拟实现

目录 1. list介绍 2. list使用 2.1 修改相关 2.2 遍历 2.3 构造 2.4 迭代器 2.5 容量相关 2.6 元素访问 2.7 操作相关 3. 模拟实现 3.1 节点类 3.1.1 初始结构 3.1.2 节点的构造函数 3.2 迭代器类 3.2.1 初始结构 3.2.2 迭代器 3.2.3 迭代器-- 3.2.4 解引…

1.随机事件与概率

第一章 随机时间与概率 1. 随机事件及其运算 1.1 随机现象 ​ 确定性现象&#xff1a;只有一个结果的现象 ​ 确定性现象&#xff1a;结果不止一个&#xff0c;且哪一个结果出现&#xff0c;人们事先并不知道 1.2 样本空间 ​ 样本空间&#xff1a;随机现象的一切可能基本…

ML 系列:机器学习和深度学习的深层次总结(05)非线性回归

图 1.不同类型的回归 一、说明 非线性回归是指因变量和自变量之间存在非线性关系的模型。该模型比线性模型更准确、更灵活&#xff0c;可以获取两个或多个变量之间复杂关系的各种曲线。 二、关于 当数据之间的关系无法用直线预测并且呈曲线形式时&#xff0c;我们应该使用非线性…

MySQL篇(索引)(持续更新迭代)

目录 一、简介 二、有无索引情况 1. 无索引情况 2. 有索引情况 3. 优劣势 三、索引结构 1. 简介 2. 存储引擎对于索引结构的支持情况 3. 为什么InnoDB默认的索引结构是Btree而不是其它树 3.1. 二叉树&#xff08;BinaryTree&#xff09; 3.2. 红黑树&#xff08;RB&a…

6、等级保护政策内容

数据来源&#xff1a;6.等级保护政策内容_哔哩哔哩_bilibili 信息安全产品管理与响应 等级管理 对信息系统中使用的信息安全产品实行按等级管理&#xff0c;信息安全事件应分等级响应与处置。 预测评服务由测评公司和咨询公司提供预测评服务&#xff0c;根据技术要求和测评要…