重学JavaScript高级（八）：ES6-ES12新增特性学习

ES6-ES12新增特性学习

ES6–对象字面量增强

  • 属性的简写
  • 方法的简写
  • 计算属性名
let name = "zhangcheng"
//我想让sum作为obj的key值
let objKey = "sum"
let obj = {//属性名的简写name//等同于name:name//方法的简写running(){}//等同于running:function(){}//计算属性名[objKey]:456//打印出来就是sum:456
}

ES6–数组以及对象的解构

ES6中引入了解构的用法

  • 数组解构的基本用法、顺序问题、解构出数组，解构默认值
//不要在意变量名字是否重复let arr = ["abc","asd","ewf"]
//基本用法
let [name1,name2,name3] = arr//就会按照顺序打印出来
//顺序问题：数组解构有严格的顺序问题
let [name1,,name3] = arr //"abc","ewf"，只想获取间隔的位置时候，中间需要空出来
//解构出数组
let [name,...newName] = arr //"abc",[asd,"ewf"],用...接收剩余的值，就会装入数组中
//解构默认值
let [name1 = "defaults",name2] = arr//若arr[0]的值为undefined时候，name1就是defaults，否则就是arr[0]的值
  • 对象解构的基本用法、顺序问题、对变量重命名、默认值、…接收剩余参数
let obj = {name: "zhangcheng",age: 18,height: 188,
};//基本用法
let { name, age, height } = obj;
console.log(name, age, height);//顺序问题：对象的解构是没有顺序问题的，是根据对象的key进行解构的
let { age, name, height } = obj;
console.log(name, age, height);//对变量进行重命名 原本的key:重命名的变量名
let { age: newAge, name: newName } = obj;
console.log(newAge, newName);//默认值:若该属性为undefined，则使用默认值
let { age, name, address = "默认值" } = obj;
console.log(age, name, address);//利用...接收剩余参数:会将剩余参数放到对象中去
let { name, ...arg } = obj;
console.log(name, arg);
  • 我们了解了常规语法，用法主要是在一下方面
//在sum这里，我们就可以用解构接收参数
function sum({a,b}){}
sum({a:100,b:200})//或者接收返回值的时候，用解构
let {data} = await request()

新的ECMA代码执行描述

在先前的文章 重学JavaScript高级（三）：深入JavaScript运行原理中提到过，只不过是ES5的执行描述

ES5中ECMA文档中的术语

  • 执行上下文栈（ECS）：用于执行上下文的栈结构
  • 执行上下文（EC）：代码执行之前会先创建对应的执行上下文
  • 变量对象（VO）：执行上下文关联的VO对象，用于记录函数和变量声明
  • 全局对象（GO）：全局执行上下文关联的VO
  • **激活对象（AO）：**函数执行上下文关联的VO
  • 作用域链（scope chain）：作用域链，用于关联指向上下文的变量查找

ES6之后的术语

  • 在ES6中，有些执行描述进行了改变，但是思路是一样的（执行上下文和执行上下文栈没有变化）

  • 词法环境(Lexical Environments)—由执行上下文关联，相当于替代了VO对象

    • 一个词法环境由：环境记录（Environment Record）和一个 外部词法环境（Out Lexical Environment ）组成
    • 一个词法环境常用于 关联一个函数声明、代码块语句、try-catch语句，当他们的代码块被执行的时候，词法环境被创建出来

    image.png

    • 一般一个执行上下文会关联两个词法环境：词法环境组件（let const声明的） 和 变量环境组件（var 声明的）
    • 词法环境组件（let const声明的） ：执行代码时候，变量会被创建，但是在赋值之前，是没有办法通过任何方式访问的

    image.png

    • 变量环境组件（var 声明的）：在执行代码的时候，变量会被创建，同时会给一个默认值：undefined，可以在赋值之前访问

    image.png

  • 环境记录（Environment Record）

    • 声明式环境记录（函数声明、变量声明等） 和对象式环境记录（with语句）
    • 环境记录不仅会记录声明，还会记录let等声明的变量是否赋值了，若没有赋值则不让访问，若赋值了才可以访问

image.png

  • 大致的流程如下

image.png

ES6–let/const的基本使用

  • ES6新增了 let/const声明变量的方式
  • let关键字：用法与var没有区别
  • const关键字
    • 表示常量、衡量的意思
    • 被声明的变量，不能被更改
    • 但是被赋值的是 引用类型（对象、数组、函数），可以改变引用类型内部的东西
const obj = {a:100
}
obj = {}//这样是不被允许的
obj.a = 200//这样是可以的
  • 注意事项
    • 变量不能被重复声明（var可以）

let/const作用域提升—没有作用域提升

  • var一定会作用域提升：语言设计缺陷
//可以在定义之前访问，就是作用域提升
console.log(message)
var message = "zhangcheng"
  • let const没有作用域提升，但是会提前被创建，只是不能再赋值之前访问
    • 通过上面对 词法环境组件定义的理解：可以看出被let 和 const创建的变量，会随着词法环境的创建而创建，只是没有办法再赋值之前提前访问
    • 由于对 作用域提升没有一个官方的解释，所以这个再好好研究一下：作用域提升指的是提前创建还是提前访问？、
  • 暂时性死区（TDZ）
    • 指的就是被 let/const声明的变量，在真正赋值之前，上面的区域称为暂时性死区
    • 且暂时性死区和 变量定义位置无关，与代码执行的时机有关
function foo(){console.log(123)console.log(4456)    //以上就是暂时性死区let a = 100//虽然在这里提前访问b，但是代码执行却是在给b赋值之后console.log(b)
}
let b = 200
foo()

不会添加window

  • var声明的变量，会添加到window上面
  • 但是let/const不会添加到window

image.png

  • 通过上面的解释，我们就可以了解，let/const定义的变量被添加到了什么地方
    • 对于全局的环境记录实际上是由两部分组成的复合环境记录：**对象环境记录（Object Environment Record）**和 声明性环境记录（declarative Environment Record）
    • 而 对象环境记录（Object Environment Record）就是我们常用的window，里面存放着 var定义的变量等
    • 声明性环境记录（declarative Environment Record）存放着let/const声明的变量

let/const块级作用域

  • 块指的就是代码块

  • 在ES5之前只有 全局作用域以及函数作用域

  • 但是在ES6之后，let /const/class/function都会形成块级作用域

    • function函数需要特别注意一下，这是因为浏览器做的特殊处理，早期的工具文件有的函数写在了代码块中，需要能够正常访问
foo()//这样是没办法访问的
{var message = "hello";let a = "123"//const/class同理//但是函数不同function foo(){consloe.log(456)}
}
foo()//可以在块级作用域外访问（需要在定义之后）console.log(a)//不能访问，因为形成了块级作用域
console.log(message)//可以访问var定义的，因为var没有形成块级作用域

let/const块级作用域的应用

  • 形成词法环境，但是不会生成新的执行上下文
var message = "hello"
let address = "河北"{var height = 1.88let title = "学生"
}
//在执行代码块的时候，会形成新的词法环境，相对应的环境记录中会存放let声明的变量

image.png

  • 监听点击的按钮
//现在有多个按钮
//先前使用var定义的i，没有形成块级作用域，所以在打印i的时候，都是全局作用域中的
//我们可以换成let，会形成块级作用域，在每次执行的时候，都会生成新的词法环境，同时会有对应的环境记录，保存每次i的值
//for循环多少次，就相当于创建了多少个词法环境，每个环境记录都记录着不同的i和不同的function
const btnEls = document.querySelectorAll("button")
for(var i = 0;i < btnEls.length; i++){let btnEl = btnEls[i]btnEl.onclick = function(){console.log(`点击了第${i}个按钮`)}
}

var-let-const的选择

  • 我们需要明白，var所有表现出来的特殊性：比如作用域提升，window全局对象等都是历史遗留问题
  • 是语言设计的缺陷，同时面试的时候会被提问，来查看是否掌握了底层原理
  • 在实际工作中不会再使用var，优先使用const，当确定该变量会改变的时候，使用let

ES6–模板字符串

基本用法

let a = `aaa`//模板字符串
let b = `my functon ${foo()}`//${}中包含的是js表达式、变量等

标签模板字符串(在React框架中会用到 CSS in js)

  • 使用模板字符串调用函数
  • 里面的标签会当作参数传入函数中
  • 字符串部分会进行分割
let name = "zhangcheng";
let age = 18;function foo(...arg) {console.log(arg);
}foo`my name is ${name},i am ${age}`;//[ [ 'my name is ', ',i am ', '' ], 'zhangcheng', 18 ]

ES6–函数增强用法

默认参数用法

function foo(name = "zhangcheng ") {}

解构和默认参数搭配

  • 解构赋值 = 形参（等号右边是形参，左边是对形参的解构）
function foo({ name = "zhangcheng" } = {}) {console.log(name);
}let obj = {name: "zhangsan",
};
foo(obj);

注意事项

  • 在 没有传入参数或者传入的参数为undefined的时候，会使用默认参数，null值不会使用默认参数
  • 默认参数，以及 默认参数之后的参数，不会统计在函数的length中（foo.length）
  • 因此书写顺序为：正常参数，默认参数，剩余参数
function foo(name,age = 18,...args){}

箭头函数的额外强调

  • 箭头函数没有 显式原型prototype，代表不能 new创建对象
  • 不绑定 this、arguments、super
let bar = ()=>{}
new bar()//是错误的

展开语法的再学习（浅拷贝）

  • 展开语法是ES6提出来的，最开始只能对 数组以及字符串进行展开，后来可以对 字面量创建对象的时候进行展开
let arr = [1,2,3,4]
let str = "hello"
let obj = {a:100
}function foo(...arg){console.log(arg)
}//对数组进行展开
let arr1 = [...arr,5,6]
//对字符串进行展开
foo(...str)//创建字面量时候，将对象展开
let obj2 = {...obj,c:200
}

ES6数值的表示

console.log(100)
console.log(0b100)//2进制
console.log(0o100)//8进制
console.log(0x100)//16进制
  • 长数字的表示(ES2021)
let money = 1_0000//一万

Symbol的基本使用

  • 是一个基本数据类型，翻译为类型
  • 在ES6之前，对象的属性名都是字符串形式的，很容易造成 命名冲突
    • 比如之前我有一个对象，将这个对象传入了一个函数中，函数内部对参数的某个属性做了修改，刚好是这个对象中的属性，那么就会产生bug
  • 因此就产生了Symbol，专门生成一个独一无二的值：通过 Symbol函数创造的
let s1 = Symbol();
let obj = {[s1]: 100,
};
console.log(obj[s1]);

额外补充

  • 获取Symbol的key
let s1 = Symbol();
let s2 = Symbol();
let obj = {[s1]: 100,[s2]: 200,a: 100,
};
console.log(Object.keys(obj)); //只能获取普通的key
console.log(Object.getOwnPropertySymbols(obj)); //只能获取Symbol的key
  • 给Symbol添加description
let s1 = Symbol("aaa")//添加一个description
s1.description//aaa获取
  • 创建两个或者多个相同的Symbol
let s1 = Symbol.for("sss")
let s2 = Symbol.for("sss")
s1 == s2

Set-Map数据结构

Set的基本使用

  • 是一种数据结构，类似于数组，但是和数组的区别就是里面不能有重复的元素
let arr = [1, 2, 1, 2, 3];
let newArrSet = new Set(arr);
console.log(newArrSet);//[1,2,3]
  • 经常用于数组的去重
let arr = [1, 2, 1, 2, 3];
let newArrSet = new Set(arr);
let newArr = Array.from(newArrSet)
  • 其他用法:增删改查，批量清空
//属性size:返回Set中元素的个数
console.log(newArrSet.size);//常用方法
//add(value)添加某个元素，返回Set本身
newArrSet = newArrSet.add(4);//delete(value):删除和这个值相等的元素，返回boolean
let isDelete = newArrSet.delete(4);//has(value):判断是否存在与value值相等的元素，返回boolean
let isHas = newArrSet.has(3);//clear:清空set，没有返回值
newArrSet.clear();//forEach():遍历set
newArrSet.forEach((item) => console.log(item));//支持用for..of进行遍历
for (const item of newArrSet) {console.log(item)
}

WeakSet使用（使用的不多）

  • 首先让我们理解 弱引用 和 强引用的概念
    • 根据GC，我们知道其垃圾回收机制，主要是在看该对象从根节点是否可达，中间的这些引用，就分为 弱引用和强引用
    • 弱引用在GC认为，这是不可达的，所以有可能会被清理
    • 强引用在GC认为，是可达的，不会被清理

image.png

  • 因此WeakSet就是弱引用类型，其指向的对象，有可能会被GC回收

  • 拥有add(value)/delete(value)/has(value)等方法

  • 与 Set的区别

    • 1.WeakSet中只能传递对象类型，使用基本数据类型会报错
    • 2.对元素的引用都是弱引用
    • 3.不能使用forEach进行遍历
const wset = new WeakSet()wset.add({a:100})

Map的基本使用（映射）

  • 用于存储映射关系

  • 对象也可以存储映射关系，那么他们之间有什么区别

    • 对象存储映射关系只能用字符串或者Symbol进行存储
    • 而Map可以用其余的数据类型作为key（比如对象）

  • 常用属性和方法

let obj1 = { a: 100 };
let obj2 = { b: 200 };
let newMap = new Map();
newMap.set(obj1, "abc");
newMap.set(obj2, "abc");//size:返回map中元素个数
console.log(newMap.size);//set(key,value)添加key value，返回整个map
newMap.set({ c: 100 }, "cba");//get(key)获取key对应的value
console.log(newMap.get(obj1));//has(key)查找是否包含key值对应的value
newMap.has(obj1);//delete(key)删除key对应的元素
newMap.delete(obj1);//clear()清空元素
newMap.clear();//forEach遍历:item打印的是对应的value
newMap.forEach((item) => console.log(item));//可以使用for of 遍历
for (const item of newMap) {console.log(item); //[key,value],会将key和value装入一个数组
}

WeakMap

  • 只能用对象作为key，不能用其他类型作为key
  • 与Map相比，该数据结构是 弱引用类型，有可能会被垃圾回收器清除掉
  • 常用方法
    • set、get、has、delete
  • 应用
    • 不能遍历
    • 在Vue3响应式中会用到

ES6其他知识点说明

Proxy/Reflect(后续文章)

Promise（后续文章）

ES module（后续文章）

ES8–新增特性

padStart/pad主要用字符串的填充

  • 基本用法（保持）
//至少两位，不足两位在头部补充0
let str = "5".padStart(2, "0");
console.log(str);//05
  • 主要在敏感字符串替换上（身份证，银行卡）
let str = "1306261558515255";
let newStr = str.slice(-4).padStart(str.length, "*");
console.log(newStr);

Trailing Commas尾部逗号添加

function foo(num1,num2,){//
}

Object Description

  • Object.getOwnPropertyDescriptors获取属性描述符
  • Async Function 后续文章

ES9–新增特性

  • Async iterators 后续文章
  • Object spread operators展开运算符
  • Promise finallya 后续文章

ES10 新特性

flat flatMap

  • flat对多维数组进行遍历，将所有元素与遍历到的子数组中的元素合并称为一个新的数组
    • 可以理解为，将多维数组转成低维数组
let arr = [100, [100, 200], [[300, 400]]];
let newArr1 = arr.flat(1);
let newArr2 = arr.flat(2);
console.log(newArr1);//[ 100, 100, 200, [ 300, 400 ] ]
console.log(newArr2);//[ 100, 100, 200, 300, 400 ]
  • flatMap会先对元素进行映射，随后压入一个数组中
//现在有多个字符串，需要先将字符串按照空格分隔，而后装入一个数组中
let arr = ["hello world", "nihao hahah"];
let newArr = arr.flatMap((item) => item.split(" "));
console.log(newArr);//[ 'hello', 'world', 'nihao', 'hahah' ]

Object fromEntries

  • 基本用法

    Object.entries （静态方法返回一个数组）

    Object.fromEntries(静态方法将键值对列表转换为一个对象)

let obj = {a: 100,b: 200,
};console.log(Object.entries(obj)); //[ [ 'a', 100 ], [ 'b', 200 ] ]let arr = [["a", 100],["b", 200],
];
console.log(Object.fromEntries(arr));

trimStrat trimEnd

  • 去除首位空格的
let str = "  aaa  "
str.trim()//去除首尾空格
str.trimStart()//去除头部空格
str.trimEnd()//去除尾部空格

ES11–新增特性

BigInt

  • 在很大的数字后面+n即可
let num = 189156198165165616n

Nullish Coalescing Operator空值合并运算符

  • ??会对值进行判断，当为 undefined/“”/0/false的时候会采用默认值（遇到null的时候会采用null）
info = info ?? "默认值"
//当info为null的时候，使用null
//当info为“”  0   undefined  false的时候用默认值

Optional Chaining可选链

  • 主要是让我们的代码在 进行null和undefined判断的时候更加清晰
  • 存在b么？存在就调用，不存在就返回undefined
//
let obj = {a: 100,b: {c: function () {console.log("zhangcheng");},},
};
obj?.b?.c?.();

ES12新增特性

FinalizationRegistry

  • 该对象可以让 某对象在被回收时候，请求一个回调
let obj = {a: 100,
};//FinalizationRegistry是一个类，回调函数可以接收参数
const registry = new FinalizationRegistry((value) => {console.log(`对象${value}被销毁了`);
});//register这是实例方法，第一个参数是监听对象，第二个参数是描述
registry.register(obj, "zhangcheng");
obj = null;

WeakRef(尽量避免使用)

  • WeakRef对象允许保留对另一个对象的弱引用
let obj  = {a:100
}
let weakRefObj = new WeakRef(obj)
//实例方法
//返回当前实例的 WeakRef 对象所绑定的 target 对象，如果该 target 对象已被 GC 回收则返回undefined
let a = weakRefObj.deref()

逻辑赋值运算符

  • 首先看之前学过的赋值运算符、
let b = b + 100
//我们可以写成以下形式
b+= 100
  • 再看逻辑赋值运算符
function foo(value) {//通常我们会对value是否有值进行判断value = value || "默认值";//我们现在可以简写成这样value ||= "默认值";//我们知道||运算符，有缺陷，若传进来的是“” 0 false会当作有值的//此运算符，只有value为null的时候value ??= "默认值";
}foo(0);

字符串replaceAll方法

  • 我们之前学过字符串的replace的方法，此方法只能替换一个，不能替换全部
let str = "aaaa";
let newStr = str.replace("a", "b");
let newStr1 = str.replaceAll("a", "b");console.log(newStr);//baaa
console.log(newStr1);//bbbb

ES13新特性

对象属性hasOwn --用来替代hasOwnProperty

  • 之前我们学习过一个实例方法hasOwnProperty，用于查找一个属性是否属于对象自身的
let obj = { a: 100 };
obj.__proto__ = { b: 200 };console.log(obj.hasOwnProperty("a")); //true
//因为b是在隐式原型上面的，所以返回false
console.log(obj.hasOwnProperty("b")); //false//第一个参数传递对象，第二个参数传递要查找的属性
console.log(Object.hasOwn(obj, "a")); //true
console.log(Object.hasOwn(obj, "b")); //false

  • 通过以上代码我们可以看出以下区别

    • 1.hasOwn是一个静态方法：通过 Object.hasOwn进行调用

      hasOwnProperty是一个实例方法，需要创建出来的对象进行调用

    • 2.防止创建出来的对象中，有 hasOwnProperty属性，对内置的进行修改

    • 3.接下来看一个例子，就能明白 hasOwnProperty的局限性

const obj = Object.create(null);
obj.a = 100;//因为现在obj指向了null，obj本身没有hasOwnProperty方法，而null中也没有，所以会报错
//而之前的代码可以用，是因为obj指向的是Object_prototype，Object原型对象中有hasOwnProperty该方法可以调用
console.log(obj.hasOwnProperty("a"));//而这个是直接调用静态方法，因此无论对象的隐式原型指向什么地方，都能使用该方法
console.log(Object.hasOwn(obj, "a"));

New members of classes 新成员字段

  • 对象属性
    • public实例对象属性
    • 私有实例对象属性
  • 类属性
    • 公共类属性
    • 私有类属性
  • 静态代码块
class Person {//对象属性：publicheight = 1.88;//对象属性：private,程序员之间的约定_intro = "";//真正的私有属性.只能在clas类中访问，不能被实例访问#intro1 = "123";//类属性:publicstatic intro2 = "70";//私有类属性:外界不能访问static #intro3 = "70";constructor(name) {this.name = name;}//静态代码块：只会执行一次，用于对class进行初始化static {console.log("hello");}
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ERD助力研发资产沉淀研发提效

ERD助力研发资产沉淀研发提效

一、从痛点中思考答案 痛点一&#xff1a;复杂系统的设计和逻辑碎片化散落&#xff0c;缺少沉淀导致系统后期维护、迭代以及架构升级都非常困难。 痛点二&#xff1a;由于新需求或新项目导致的系统的老旧逻辑梳理往往耗费大量人力&#xff0c;甚至造成人才的流失。 痛点三&a…
阅读更多...
React 入门 - 05（响应式与事件绑定）

React 入门 - 05（响应式与事件绑定）

本章内容 目录 一、响应式设计思想二、React 中的事件绑定 继上一节我们简单实现一个 TodoList来更加了解编写组件的一些细节。本节继续这个案例功能的完成。 一、响应式设计思想 1、在原生的 JS中&#xff0c;如果要实现点击”提交“按钮就将输入框的内容添加至页面列表中&…
阅读更多...
什么是协议和什么是OSI模型，以及两者之间的关系

什么是协议和什么是OSI模型，以及两者之间的关系

目录 协议 1.协议 2.OSI模型 &#xff08;1&#xff09;什么是OSI模型 &#xff08;2&#xff09;OSI模型和协议之间的关系 总结 &#xff08;3&#xff09;示意图 协议 1.协议 就是双方通过协商&#xff0c;需要共同遵守的约定 协议就是规则&#xff0c;是约定 http…
阅读更多...
数字战场上的坚固屏障：雷池社区版（WAF）

数字战场上的坚固屏障：雷池社区版（WAF）

黑客的挑战 智能语义分析算法&#xff1a; 黑客们常利用复杂技术进行攻击&#xff0c;但雷池社区版的智能语义分析算法能深入解析攻击本质&#xff0c;即使是最复杂的攻击手法也难以逃脱。 0day攻击防御&#xff1a; 传统防火墙难以防御未知攻击&#xff0c;但雷池社区版能有效…
阅读更多...
Spark八：Spark性能优化

Spark八：Spark性能优化

Spark性能调优 Spark调优的方法&#xff0c;包括RDD使用、文件读取&#xff0c;partition 学习资料&#xff1a;https://mp.weixin.qq.com/s/caCk3mM5iXy0FaXCLkDwYQ 一、Spark调优之RDD算子调优 1.1 RDD复用 在对RDD进行计算时&#xff0c;要避免相同的算子和计算逻辑下对…
阅读更多...
计算机科学速成课【学习笔记】（3）——布尔逻辑和逻辑门

计算机科学速成课【学习笔记】（3）——布尔逻辑和逻辑门

本集课程的B站链接 3. 布尔逻辑 和 逻辑门-Boolean Logic & Logic Gates_哔哩哔哩_bilibili3. 布尔逻辑 和 逻辑门-Boolean Logic & Logic Gates是【计算机科学速成课】[40集全/精校] - Crash Course Computer Science的第3集视频&#xff0c;该合集共计40集&#xff…
阅读更多...
当需要视频监控技术升级时，应该如何操作呢？

当需要视频监控技术升级时，应该如何操作呢？

在当今社会&#xff0c;信息技术的飞速发展为我们提供了前所未有的安全和管理工具&#xff0c;其中视频监控系统无疑是其中一项引人注目的成果。 视频监控系统不仅提高了安全性和生产效率&#xff0c;同时也为社会的可持续发展提供了有力支持。 客户案例 工业生产管理优化 广…
阅读更多...
将dumpbin从Visual Studio中抠出来，并使用dumpbin查看exe和dll库的依赖关系

将dumpbin从Visual Studio中抠出来，并使用dumpbin查看exe和dll库的依赖关系

目录 1、初步说明 2、在开发的机器上使用dumpbin工具查看dll库的依赖关系 3、将dumpbin.exe从Visual Studio中抠出来 3.1、找到dumpbin.exe文件及其依赖的dll文件 3.2、在cmd中运行dumpbin&#xff0c;提示找不到link.exe文件 3.3、再次运行dumpbin.exe提示找不到mspdb10…
阅读更多...
了解DC电源模块的基本参数及选择方法

了解DC电源模块的基本参数及选择方法

BOSHIDA 了解DC电源模块的基本参数及选择方法 DC电源模块是一种用来提供稳定直流电源的设备&#xff0c;常被应用在电子产品测试、实验室设备等领域。了解DC电源模块的基本参数和选择方法有助于正确选择和使用合适的模块。 1. 输出电压范围&#xff1a;DC电源模块通常有固定的…
阅读更多...
mybatisplus快速入门-个人理解版

mybatisplus快速入门-个人理解版

mybatisplus快速入门 1.快速入门1.1准备开发环境-idea2019.2.1版第一步&#xff1a;新建工程第二步&#xff1a;导入依赖 1.2创建数据库和表创建库表添加数据 1.3编写代码进行测试第一步&#xff1a;配置application.yml第二步&#xff1a;添加实体类第三步&#xff1a;添加map…
阅读更多...
【算法】链表-20240109

【算法】链表-20240109

这里写目录标题 一、141. 环形链表二、876. 链表的中间结点三、面试题 02.01. 移除重复节点 一、141. 环形链表 简单 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中…
阅读更多...
Excel如何插入行？4个简单方法轻松完成！

Excel如何插入行？4个简单方法轻松完成！

“我在使用Excel表格工作时&#xff0c;需要插入一些行来填写数据。但是我不知道应该如何操作&#xff0c;有没有朋友可以支支招呀&#xff1f;” Excel是办公室工作中不可或缺的工具&#xff0c;它强大的数据处理能力使得工作变得高效。因此很多用户在使用电脑时或许都会用到E…
阅读更多...
vue倒计时60秒改变按钮状态效果demo(整理)

vue倒计时60秒改变按钮状态效果demo(整理)

你可以使用Vue的计时器和绑定状态的方法来实现这个功能。 首先&#xff0c;在data中添加一个计时器countdown&#xff0c;初始值为0。 data() {return {countdown: 0} }<template><div><button click"startCountdown" :disabled"countdown > …
阅读更多...
基于Jackson封装的JSON、Properties、XML、YAML 相互转换的通用方法

基于Jackson封装的JSON、Properties、XML、YAML 相互转换的通用方法

文章目录 一、概述二、思路三、实现四、测试 一、概述 我们在 yaml转换成JSON、MAP、Properties 通过引入 实现了JSON、Properties、XML、YAML文件的相互转换&#xff0c;具体封装的类、方法如下&#xff1a; 上面的实现&#xff0c;定义了多个类、多个方法&#xff0c;使用…
阅读更多...
FineBI实战项目一（2）：案例架构说明及数据准备

FineBI实战项目一（2）：案例架构说明及数据准备

1 系统架构 基于MySQL搭建数据仓库基于Kettle进行数据处理帆软FineBI基于MySQL搭建的数据仓库进行数据分析 2 数据流程图 通过Kettle将MySQL业务系统数据库中&#xff0c;将数据抽取出来&#xff0c;然后装载到MySQL数据仓库中。编写SQL脚本&#xff0c;对MySQL数据仓库中的数…
阅读更多...
Qt之有趣的数字钟

Qt之有趣的数字钟

一.效果 基于网络代码修改，支持时、分、秒；支持滑动、翻页和旋转。 二.实现 #include <QtCore> #include <QPainter> #include <QAction> #include <QWidget> #include <QMainWindow> #include <QTimer> #include <QKeyEvent> #…
阅读更多...
MySQL性能调优---BKA

MySQL性能调优---BKA

1.BKA原理介绍 MySQL 5.6版本开始增加了提高表join性能的Batched Key Access (BKA)算法。BKA是对于多表join语句&#xff0c;当MySQL使用索引访问第二个join表的时候&#xff0c;使用一个join buffer来收集第一个操作对象生成的相关列值。BKA构建好key后&#xff0c;批量传给引…
阅读更多...
HTML5网站小游戏源码系统：各种各样小游戏集合，你想要的这里都有+完整的安装代码包以及搭建教程

HTML5网站小游戏源码系统：各种各样小游戏集合，你想要的这里都有+完整的安装代码包以及搭建教程

现如今&#xff0c;科技的不断发展&#xff0c;HTML5技术逐渐成为网页游戏开发的主流。为了满足广大游戏爱好者的需求&#xff0c;罗峰给大家推荐一款基于HTML5的网站小游戏源码系统。这款系统集成了众多经典小游戏&#xff0c;涵盖了各种类型&#xff0c;无论您是寻找休闲益智…
阅读更多...
0基础学习VR全景平台篇第136篇：720VR全景，认识无人机

0基础学习VR全景平台篇第136篇：720VR全景，认识无人机

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 无人驾驶飞行器&#xff0c;简称“无人机”&#xff0c;英文缩写为“UAV”。是利用无线电控制设备和自备程序控制操纵的不载人飞机。 &#xff08;一&#xff09;无人机介绍 较…
阅读更多...
Linux 网络层收发包流程及 Netfilter 框架浅析

Linux 网络层收发包流程及 Netfilter 框架浅析

1. 前言 本文主要对 Linux 系统内核协议栈中网络层接收&#xff0c;发送以及转发数据包的流程进行简要介绍&#xff0c;同时对 Netfilter 数据包过滤框架的基本原理以及使用方式进行简单阐述。 内容如有理解错误而导致说明错误的地方&#xff0c;还请指正。如存在引用而没有添…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023