掌握JavaScript中的解构赋值：深入挖掘隐藏的技巧

掌握JavaScript中的解构赋值：深入挖掘隐藏的技巧

  • 前言
  • 基础概念
      • 为什么解构赋值如此重要？
      • 数组解构的基本语法：
      • 对象解构的基本语法：
      • 默认值：
  • 解构赋值的妙用
      • 从对象和数组中提取值：
        • 从数组中提取值：
        • 从对象中提取值：
      • 默认值的设置与解构赋值结合：
        • 数组解构赋值设置默认值：
        • 对象解构赋值设置默认值：
  • 嵌套解构
      • 解构多层嵌套的数组：
      • 解构多层嵌套的对象：
      • 结合数组和对象的嵌套解构：
  • 剩余/扩展操作符
      • 剩余操作符的使用：
        • 在数组解构中使用剩余操作符：
        • 在对象解构中使用剩余操作符：
      • 扩展操作符的应用：
        • 在数组解构中使用扩展操作符：
        • 在对象解构中使用扩展操作符：
  • 解构赋值与函数
  • 解构赋值的高级用法
  • 实用技巧与最佳实践
  • 结语

前言

在 JavaScript 的广袤世界中，解构赋值如同一扇通向代码灵活性之门。就像魔法师解开魔法书中的咒语一样，掌握解构赋值将为你打开编程新的境界。让我们一起踏上这段神奇的学习之旅，发现解构赋值的深奥之处。

基础概念

解构赋值（Destructuring Assignment） 是一种在 JavaScript 中方便地从数组或对象中提取值，并赋值给变量的方法。它可以让你更简洁地编写代码，减少冗长的语法。

为什么解构赋值如此重要？

  1. 简化代码： 解构赋值可以大大减少代码量，使代码更加简洁和易读。
  2. 提取对象和数组的值： 通过解构赋值，你可以轻松地从复杂的数据结构中提取所需的值，而无需使用多个独立的语句。
  3. 函数参数解构： 在函数参数中使用解构赋值，可以使函数调用更清晰，避免传递大量的参数。
  4. 默认值： 解构赋值允许你为变量设置默认值，防止因为未找到匹配值而导致的错误。

数组解构的基本语法：

// 数组解构
let [a, b, c] = [1, 2, 3];console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

在这个例子中，通过 let [a, b, c] 我们成功地从数组 [1, 2, 3] 中提取了值，并将其赋值给了变量 a、b、c。

对象解构的基本语法：

// 对象解构
let { x, y, z } = { x: 1, y: 2, z: 3 };console.log(x); // 1
console.log(y); // 2
console.log(z); // 3

在对象解构中，通过 let { x, y, z } 我们从对象 { x: 1, y: 2, z: 3 } 中提取了相应属性的值。

默认值：

// 数组解构默认值
let [a = 1, b = 2] = [3];console.log(a); // 3
console.log(b); // 2// 对象解构默认值
let { x = 1, y = 2 } = { x: 3 };console.log(x); // 3
console.log(y); // 2

在解构赋值中，你还可以设置默认值，当解构的值为 undefined 时，将会使用默认值。

总体而言，解构赋值是一种强大的语法特性，提高了代码的可读性和简洁性，同时让开发者更便利地处理复杂的数据结构。

解构赋值的妙用

从对象和数组中提取值：

从数组中提取值：
// 数组解构赋值
let numbers = [1, 2, 3, 4, 5];let [first, second, , , fifth] = numbers;console.log(first);  // 1
console.log(second); // 2
console.log(fifth);  // 5

在这个例子中，我们只关心数组中的第一个、第二个和第五个元素，通过数组解构赋值直接提取了这些值。

从对象中提取值：
// 对象解构赋值
let person = { name: 'John', age: 30, city: 'New York' };let { name, city } = person;console.log(name); // John
console.log(city); // New York

在这个例子中，我们通过对象解构赋值直接提取了person对象中的name和city属性的值。

默认值的设置与解构赋值结合：

数组解构赋值设置默认值：
let colors = ['red'];let [primaryColor, secondaryColor = 'blue'] = colors;console.log(primaryColor);   // red
console.log(secondaryColor); // blue

在这个例子中，如果 colors 数组中没有第二个元素，secondaryColor 将会使用默认值 'blue'。

对象解构赋值设置默认值：
let settings = { theme: 'dark' };let { theme, font = 'Arial' } = settings;console.log(theme); // dark
console.log(font);  // Arial

在这个例子中，如果 settings 对象中没有 font 属性，font 将会使用默认值 'Arial'。

这些妙用展示了解构赋值在提取值和设置默认值时的便捷性。你可以在实际开发中灵活运用这些特性，使代码更为简洁和易读。

嵌套解构

嵌套解构 是指在解构赋值中处理包含嵌套结构的数组或对象。通过嵌套解构，你可以更灵活地提取多层深度的值，使代码更为简洁和可读。

解构多层嵌套的数组：

// 多层嵌套数组解构
let nestedArray = [1, [2, [3, 4], 5], 6];let [first, [second, [third, fourth], fifth], sixth] = nestedArray;console.log(first);  // 1
console.log(second); // 2
console.log(third);  // 3
console.log(fourth); // 4
console.log(fifth);  // 5
console.log(sixth);  // 6

在这个例子中，我们通过多层嵌套的数组解构，直接提取了嵌套数组中的值。

解构多层嵌套的对象：

// 多层嵌套对象解构
let nestedObject = {person: {name: 'Alice',address: {city: 'Wonderland',country: 'Fantasia'}}
};let { person: { name, address: { city, country } } } = nestedObject;console.log(name);    // Alice
console.log(city);    // Wonderland
console.log(country); // Fantasia

在这个例子中，我们通过多层嵌套的对象解构，直接提取了嵌套对象中的值。

结合数组和对象的嵌套解构：

// 结合数组和对象的嵌套解构
let data = {user: 'John',posts: [{ title: 'Post 1', comments: ['Nice!', 'Great!'] },{ title: 'Post 2', comments: ['Interesting!', 'Well done!'] }]
};let { user, posts: [{ title, comments: [comment1, comment2] }] } = data;console.log(user);     // John
console.log(title);    // Post 1
console.log(comment1); // Nice!
console.log(comment2); // Great!

在这个例子中，我们结合了数组和对象的嵌套解构，直接提取了嵌套结构中的值。

嵌套解构使得处理复杂的数据结构变得更加简便，但需要谨慎使用，以确保代码的可读性和维护性。

剩余/扩展操作符

剩余操作符（Rest Operator） 和 扩展操作符（Spread Operator） 是在解构赋值中非常有用的工具，它们提供了一种灵活处理剩余元素的方式。

剩余操作符的使用：

在数组解构中使用剩余操作符：
// 数组解构中的剩余操作符
let numbers = [1, 2, 3, 4, 5];let [first, second, ...rest] = numbers;console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

在这个例子中，...rest 表示将剩余的数组元素收集到一个数组中。

在对象解构中使用剩余操作符：
// 对象解构中的剩余操作符
let person = { name: 'Alice', age: 30, city: 'Wonderland' };let { name, ...rest } = person;console.log(name); // Alice
console.log(rest); // { age: 30, city: 'Wonderland' }

在这个例子中，...rest 表示将剩余的属性收集到一个新的对象中。

扩展操作符的应用：

在数组解构中使用扩展操作符：
// 数组解构中的扩展操作符
let numbers1 = [1, 2, 3];
let numbers2 = [4, 5, 6];let combined = [...numbers1, ...numbers2];console.log(combined); // [1, 2, 3, 4, 5, 6]

在这个例子中，[...numbers1, ...numbers2] 将两个数组合并成一个新数组。

在对象解构中使用扩展操作符：
// 对象解构中的扩展操作符
let person1 = { name: 'Alice', age: 30 };
let additionalInfo = { city: 'Wonderland', hobby: 'Reading' };let combinedInfo = { ...person1, ...additionalInfo };console.log(combinedInfo);
// { name: 'Alice', age: 30, city: 'Wonderland', hobby: 'Reading' }

在这个例子中，{ ...person1, ...additionalInfo } 将两个对象合并成一个新对象。

剩余和扩展操作符的引入使得处理数组和对象时更加灵活，它们提供了一种更为简便的方式来处理不确定长度的数据结构。

解构赋值与函数

函数参数中的解构赋值可以让我们更方便地传递复杂的数据结构，例如对象或数组，且具有默认值、别名、剩余参数等功能。以下是一个简单的示例：

function printName({ firstName, lastName }) {console.log(`Hello, ${firstName} ${lastName}!`);
}const person = { firstName: 'John', lastName: 'Doe' };
printName(person); // Hello, John Doe!

在上面的示例中，我们定义了一个函数 printName，它的参数使用了对象解构赋值。通过传递一个 person 对象，我们可以直接使用其中的属性来执行函数，而无需手动提取这些值。

函数返回值中的解构赋值则可以让我们更方便地获取函数返回结果的某些部分，例如：

function getPerson() {return { firstName: 'John', lastName: 'Doe' };
}const { firstName, lastName } = getPerson();
console.log(`Hello, ${firstName} ${lastName}!`); // Hello, John Doe!

在上面的示例中，我们定义了一个函数 getPerson，它返回一个对象。通过使用解构赋值，我们可以在函数调用的同时直接获取其中的 firstName 和 lastName，并打印出 Hello, John Doe!。函数参数中的解构赋值可以让我们更方便地传递复杂的数据结构，例如对象或数组，且具有默认值、别名、剩余参数等功能。以下是一个简单的示例：

function printName({ firstName, lastName }) {console.log(`Hello, ${firstName} ${lastName}!`);
}const person = { firstName: 'John', lastName: 'Doe' };
printName(person); // Hello, John Doe!

在上面的示例中，我们定义了一个函数 printName，它的参数使用了对象解构赋值。通过传递一个 person 对象，我们可以直接使用其中的属性来执行函数，而无需手动提取这些值。

函数返回值中的解构赋值则可以让我们更方便地获取函数返回结果的某些部分，例如：

function getPerson() {return { firstName: 'John', lastName: 'Doe' };
}const { firstName, lastName } = getPerson();
console.log(`Hello, ${firstName} ${lastName}!`); // Hello, John Doe!

在上面的示例中，我们定义了一个函数 getPerson，它返回一个对象。通过使用解构赋值，我们可以在函数调用的同时直接获取其中的 firstName 和 lastName，并打印出 Hello, John Doe!。

解构赋值的高级用法

解构赋值的高级用法主要包括在循环结构中的应用和在ES6模块中的应用。

  1. 解构赋值与循环结合的实际场景

在循环结构中，使用解构赋值可以更方便地获取数组或对象中的值。例如，在处理一个包含多个对象的数组时，可以使用解构赋值将对象中的属性值提取出来：

const users = [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },{ name: 'Charlie', age: 35 }
];for (const { name, age } of users) {console.log(`${name} is ${age} years old`);
}

上面的代码中，使用解构赋值将每个对象中的name和age属性值分别赋值给了name和age变量。在循环中，直接使用这些变量即可，避免了使用users[i].name和users[i].age的繁琐操作。

除了在for…of循环中使用解构赋值，还可以在forEach、map和filter等方法中使用。例如：

users.forEach(({ name, age }) => {console.log(`${name} is ${age} years old`);
});const userNames = users.map(({ name }) => name);
  1. 解构赋值在ES6模块中的应用

ES6模块是一种新的模块化方案，可以将代码按功能划分为多个模块，并通过export和import语句将各个模块组合起来。在ES6模块中，使用解构赋值可以更方便地导入和导出模块中的变量和函数。

例如，在一个名为utils.js的模块中，定义了一个名为add的函数：

export function add(a, b) {return a + b;
}

在另一个模块中，可以使用解构赋值导入该函数并使用：

import { add } from './utils';console.log(add(1, 2)); // 输出3

上面的代码中，使用解构赋值将add函数从utils模块中导入，然后直接调用该函数即可。

除了导入函数，还可以导入模块中的变量、类、对象等。例如：

// 导出变量
export const PI = 3.14;// 导出对象
export default {name: 'Alice',age: 25
}// 导出类
export class Person {constructor(name, age) {this.name = name;this.age = age;}
}// 导入变量、对象和类
import { PI } from './constants';
import person from './person';
import { Person } from './person';

上面的代码中，使用解构赋值将PI常量从constants模块中导入，并将默认导出的person对象和Person类从person模块中导入。解构赋值的高级用法主要包括在循环结构中的应用和在ES6模块中的应用。

  1. 解构赋值与循环结合的实际场景

在循环结构中，使用解构赋值可以更方便地获取数组或对象中的值。例如，在处理一个包含多个对象的数组时，可以使用解构赋值将对象中的属性值提取出来：

const users = [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },{ name: 'Charlie', age: 35 }
];for (const { name, age } of users) {console.log(`${name} is ${age} years old`);
}

上面的代码中，使用解构赋值将每个对象中的name和age属性值分别赋值给了name和age变量。在循环中，直接使用这些变量即可，避免了使用users[i].name和users[i].age的繁琐操作。

除了在for…of循环中使用解构赋值，还可以在forEach、map和filter等方法中使用。例如：

users.forEach(({ name, age }) => {console.log(`${name} is ${age} years old`);
});const userNames = users.map(({ name }) => name);
  1. 解构赋值在ES6模块中的应用

ES6模块是一种新的模块化方案，可以将代码按功能划分为多个模块，并通过export和import语句将各个模块组合起来。在ES6模块中，使用解构赋值可以更方便地导入和导出模块中的变量和函数。

例如，在一个名为utils.js的模块中，定义了一个名为add的函数：

export function add(a, b) {return a + b;
}

在另一个模块中，可以使用解构赋值导入该函数并使用：

import { add } from './utils';console.log(add(1, 2)); // 输出3

上面的代码中，使用解构赋值将add函数从utils模块中导入，然后直接调用该函数即可。

除了导入函数，还可以导入模块中的变量、类、对象等。例如：

// 导出变量
export const PI = 3.14;// 导出对象
export default {name: 'Alice',age: 25
}// 导出类
export class Person {constructor(name, age) {this.name = name;this.age = age;}
}// 导入变量、对象和类
import { PI } from './constants';
import person from './person';
import { Person } from './person';

上面的代码中，使用解构赋值将PI常量从constants模块中导入，并将默认导出的person对象和Person类从person模块中导入。

实用技巧与最佳实践

解构赋值是一种方便快捷的方式，可以从对象或数组中提取值并赋值给变量。然而，它也可能会导致一些常见的错误和陷阱，下面是一些实用技巧和最佳实践：

避免解构赋值的陷阱和常见错误：

  1. 对象解构赋值时，如果要使用默认值，必须在变量名和默认值之间放置括号。

示例：

// 错误示例
const {name = 'Tom', age} = person;
// 正确示例
const {name = 'Tom', age} = person;
  1. 如果解构的值是 null 或 undefined，则会引发 TypeError 错误。可以使用默认值来避免此错误。

示例：

// 错误示例
const {name, age} = null;
// 正确示例
const {name = '', age = 0} = null;
  1. 数组解构赋值时，可以使用逗号跳过不需要的元素，但要确保逗号匹配正确。

示例：

// 正确示例
const [name, , age] = person;
// 错误示例
const [name, age] = person;
const [name, , , age] = person;

最佳实践：何时使用解构赋值，何时避免使用。

  1. 使用解构赋值可以简化代码，但是如果解构赋值过于复杂，可能会影响代码的可读性和可维护性。因此，应该避免过度使用解构赋值。

  2. 可以使用解构赋值来提取对象或数组中的值，以便更方便地访问它们。这可以使代码更简洁清晰。

  3. 当从函数中返回多个值时，可以使用解构赋值通过一个单一的返回值返回多个值。

示例：

function getUser() {return {name: 'Tom',age: 25,gender: 'male'}
}const {name, age, gender} = getUser();

总之，使用解构赋值可以提高代码的可读性和可维护性，但应该避免过度使用它。在选择是否使用解构赋值时，需要根据代码的复杂性和可读性进行权衡。解构赋值是一种方便快捷的方式，可以从对象或数组中提取值并赋值给变量。然而，它也可能会导致一些常见的错误和陷阱，下面是一些实用技巧和最佳实践：

避免解构赋值的陷阱和常见错误：

  1. 对象解构赋值时，如果要使用默认值，必须在变量名和默认值之间放置括号。

示例：

// 错误示例
const {name = 'Tom', age} = person;
// 正确示例
const {name = 'Tom', age} = person;
  1. 如果解构的值是 null 或 undefined，则会引发 TypeError 错误。可以使用默认值来避免此错误。

示例：

// 错误示例
const {name, age} = null;
// 正确示例
const {name = '', age = 0} = null;
  1. 数组解构赋值时，可以使用逗号跳过不需要的元素，但要确保逗号匹配正确。

示例：

// 正确示例
const [name, , age] = person;
// 错误示例
const [name, age] = person;
const [name, , , age] = person;

最佳实践：何时使用解构赋值，何时避免使用。

  1. 使用解构赋值可以简化代码，但是如果解构赋值过于复杂，可能会影响代码的可读性和可维护性。因此，应该避免过度使用解构赋值。

  2. 可以使用解构赋值来提取对象或数组中的值，以便更方便地访问它们。这可以使代码更简洁清晰。

  3. 当从函数中返回多个值时，可以使用解构赋值通过一个单一的返回值返回多个值。

示例：

function getUser() {return {name: 'Tom',age: 25,gender: 'male'}
}const {name, age, gender} = getUser();

总之，使用解构赋值可以提高代码的可读性和可维护性，但应该避免过度使用它。在选择是否使用解构赋值时，需要根据代码的复杂性和可读性进行权衡。

结语

解构赋值是 JavaScript 中一项强大而灵活的特性，它不仅能够让你的代码更简洁，还能提高编程的乐趣。通过深入学习，你将掌握解构赋值的方方面面，成为更为熟练的 JavaScript 开发者。现在，让我们一同揭开解构赋值的神秘面纱，迎接编程的新挑战吧！

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

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

相关文章

docker读取字体异常

docker读取字体异常

解决方法 docker容器中执行 apk add ttf-freefont 根据版本不同 apk add ttf-dejavu-fonts apk add ttf-bernoulli
阅读更多...
【开源】基于Vue.js的医院门诊预约挂号系统的设计和实现

【开源】基于Vue.js的医院门诊预约挂号系统的设计和实现

项目编号： S 033 ，文末获取源码。 \color{red}{项目编号：S033，文末获取源码。} 项目编号：S033，文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 功能性需求2.1.1 数据中心模块2.1.2…
阅读更多...
第十五章 Linux

第十五章 Linux

Python基础、函数、模块、面向对象、网络和并发编程、数据库和缓存、 前端、django、Flask、tornado、api、git、爬虫、算法和数据结构、Linux、设计题、客观题、其他 第十五章 Linux 1. 下面的linux命令中, 那个不能显示出文件的内容 A. tacB. moreC. headD. man在下面的…
阅读更多...
Ranger安装和使用

Ranger安装和使用

Ranger部署 1.准备 1.1 编译 Ranger编译（已经编译过的话，直接看1.2） 1.1.1 准备到Ranger官网下载ranger的源码：http://ranger.apache.org/download.html 1.1.2 Ranger编译的过程实在非虚拟机环境下完成的，下载好r…
阅读更多...
chapter10-homework-Java

chapter10-homework-Java

第十章作业 Homework01知识点 Homework02知识点 Homework03知识点 Homework04知识点 Homework05知识点 Homework06Homework07Homework08 Homework01 分析执行结果。 public static void main(String[] args) {Car_ c new Car_();Car_ c1 new Car_(100);System.out.println(…
阅读更多...
Vue中 实现自定义指令（directive）及应用场景

Vue中 实现自定义指令（directive）及应用场景

一、Vue2 1. 指令钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已…
阅读更多...
三.排序与分页

三.排序与分页

目录 一.排序数据二.分页 一.排序数据 1.排序规则 使用ORDER BY 子句排序 ASC（ascend）升序DESC（descend）降序 ORDER BY 子句在SELECT语句的结尾 2.单列排序 SELECT last_name, job_id, department_id, hire_date FROM e…
阅读更多...
（蓝桥杯）1125 第 4 场算法双周赛题解+AC代码（c++/java）

（蓝桥杯）1125 第 4 场算法双周赛题解+AC代码（c++/java）

题目一&#xff1a;验题人的生日【算法赛】 验题人的生日【算法赛】 - 蓝桥云课 (lanqiao.cn) 思路&#xff1a; 1.又是偶数&#xff0c;又是质数&#xff0c;那么只有2喽 AC_Code:C #include <iostream> using namespace std; int main() {cout<<2;return 0; …
阅读更多...
windows系统bat脚本命令总结之复制命令（copy和xcopy）

windows系统bat脚本命令总结之复制命令（copy和xcopy）

前言 做了一段时间的bat脚本开发&#xff0c;bat脚本中有各种各样的命令跟传统的编程逻辑完全不同&#xff0c;本专栏会讲解下各种各式的命令使用方法。 本篇文章讲解的是获取windows系统的复制命令&#xff08;copy和xcopy&#xff09;&#xff0c;copy和xcopy是Windows命令行…
阅读更多...
【Web端CAD/CAE文字标注】webgl+canvas 2d实现文字标注功能

【Web端CAD/CAE文字标注】webgl+canvas 2d实现文字标注功能

一、需求背景 在CAD/CAE领域经常会遇到显示节点编号这种需求&#xff0c;效果如下图&#xff1a; 本文介绍如何在WebGL中实现文字的显示&#xff0c;对于如何在OpenGL中实现请绕路。 二、实现原理 Canvas是HTML5提供的元素&#xff0c;用于在网页上绘制图形&#xff0c;其支…
阅读更多...
设计循环队列

设计循环队列

目录 设计循环队列 &#x1f642;【1】数组循环队列 思路分析 ❓1 ❓2 ❓3 易错总结 创建MyCircularQueue 初始化myCircularQueueCreate 为空否myCircularQueueIsEmpty 为满否myCircularQueueIsFull 插入元素myCircularQueueEnQueue 删除元素myCircularQueueDeQue…
阅读更多...
load_policy命令详解与实例

load_policy命令详解与实例

1. 概述 load_policy是一个与systemd相关的命令，用于加载SELinux（Security-Enhanced Linux）策略。load_policy命令通常与SELinux策略文件（通常是以.pp或.te为扩展名的文件）一起使用，用于加载新的或更新的SELinux策略。 在加载新的SELinux策略后，新的访问控制规则将生效…
阅读更多...
无醇啤酒行业分析：预计2028年将达到106亿美元

无醇啤酒行业分析：预计2028年将达到106亿美元

按照国际惯用的标准划分&#xff0c;通常将酒精度3.5%-4%的称为普通啤酒&#xff0c;将酒精度大于0.5%、小于2.5%的称为低醇啤酒&#xff0c;而酒精度小于0.5%便称为无醇啤酒。酒精给人带来的兴奋感&#xff0c;与体育比赛的紧张刺激相辅相成&#xff0c;啤酒也成为了许多球迷们…
阅读更多...
基于UDP的网络聊天室

基于UDP的网络聊天室

客户端 #include <myhead.h> //定义存储信息结构体 typedef struct _MSG {char code; //操作码&#xff1a;L表示登录C表示群聊S表示系统消息S表示退出char name[128]; char txt[256];}msg_t;//定义保存客户端网络信息的链表 typedef struct _ADDR {struct sockaddr_i…
阅读更多...
第十四章 算法和数据结构

第十四章 算法和数据结构

Python基础、函数、模块、面向对象、网络和并发编程、数据库和缓存、 前端、django、Flask、tornado、api、git、爬虫、算法和数据结构、Linux、设计题、客观题、其他 第十四章 算法和数据结构 1. 顺序表、链表的区别及应用场景。 顺序表&#xff08;Sequential List&#xf…
阅读更多...
【elementUI】el-tab相关问题

【elementUI】el-tab相关问题

Tabs 标签页 分隔内容上有关联但属于不同类别的数据集合。 <template><el-tabs v-model"activeName" tab-click"handleClick"><el-tab-pane label"用户管理" name"first">用户管理</el-tab-pane><el-tab-p…
阅读更多...
Linux重置MySql密码(简洁版)

Linux重置MySql密码(简洁版)

关闭验证 /etc/my.cnf-->[mysqld]-->skip-grant-tables 重启MySql service mysql restart 登陆MySql mysql -u root 刷新权限 FLUSH PRIVILEGES; 更新密码 ALTER USER rootlocalhost IDENTIFIED BY 123456; 退出MySql exit 打开验证 /etc/my.cnf-->[mysqld]-->skip…
阅读更多...
建设“参与城市”大学--SMU在2023年绿色金融全球论坛上分享观点

建设“参与城市”大学--SMU在2023年绿色金融全球论坛上分享观点

2023年11月21日&#xff0c;由新加坡管理大学&#xff08;SMU&#xff0c;简称新大&#xff09;和中国人民大学&#xff08;RUC&#xff0c;简称人大&#xff09;联合主办的“绿色金融与治理&#xff1a;从承诺到行动”全球论坛在北京召开。论坛汇集了来自新加坡、中国及世界各…
阅读更多...
数据类型及强制转换

数据类型及强制转换

数据类型范围&#xff08;基本&#xff09; 数据类型占内存字节数表示范围数量级char&#xff08;signed char&#xff09;1-128~1272unsigned char10~2552short int&#xff08;signed short int&#xff09;2-32,768~32,7674unsigned short int20~65,5354int&#xff08;sig…
阅读更多...
ThreeJs样例 webgl_shadow_contact 分析

ThreeJs样例 webgl_shadow_contact 分析

webgl_shadow_contact 官方样例中&#xff0c;对阴影的渲染比较特殊&#xff0c;很值得借鉴&#xff0c;学习渲染阴影的思路&#xff1b;这个例子中对阴影的渲染&#xff0c;并没有使用任何光源&#xff0c;没有用shadowmap的常规方式 渲染阴影&#xff1b;而是使用了深度材质T…
阅读更多...
最新文章

Copyright @ 2022~2023