解构赋值,解构对象,三点运算符,模块化,正则表达式,各种符号

本文介绍了JavaScript ES6中的解构赋值,包括数组和对象的解构,并通过示例展示了如何使用。还探讨了扩展运算符的展开和合并功能,以及在参数传递中的应用。此外,讲解了模块化的概念,包括单个暴露和多个暴露的方式,并简单提及正则表达式的基础知识,如创建正则、元字符和限定符等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

解构赋值
- 在ES6当中有一个语法,解构赋值=> 快速的从对象当中或者是数组当中获取对应的成员
    - 解构数组
    - 解构对象
- 解构数组
    - 解构数组需要使用到 []
    - 解构数组的语法 => `const [变量1,变量2,变量3...] = arr`
    - 在解构的过程当中,会按照数组的下标一次的赋值给变量
> 示例:
```js
//先定义一个数组
const arr = [1, 2, 3, 4, 5, 6, 7, 8]
//获取数组的元素
// arr[0]
// arr[1]
// arr[2]
// ...

//利用数组的解构获取数组里面的元素
// const [a,b,c,d,e,f,g,h] = arr;
// console.log(a,b,c,d,e,f,g,h);


//多维数组的解构赋值 => 就是数组里面再套一层数组
const arr1 = [1,[2,3,[4,5]]]
// 解构
const [a,[b,c,[d,e]]] = arr1;
console.log(a,b,c,d,e);
```


- 解构对象
    - 解构对象需要使用到 {}
    - 解构对象的语法 => `const {变量1,变量2,变量3...} = obj`
    - 在解构的过程当中,会按照对象的属性一次的赋值给变量
> 示例
```js
//对象的解构
const obj = {
    name:"张三",
    age:18,
}
// 解构
const { name,age} = obj
console.log(name,age);

//嵌套对象的解构
const obj1 = {
    name1:"张三",
    age1:18,
    address1:{
        info1:'江西',
        info2:"湖南"
    }
}
//解构对象
const {name1,age1,address1:{info1,info2}} = obj1;
console.log(name1,age1,info1,info2);
```


## 扩展运算符
- 展开
> 示例:
```js
//展开一个数组
const arr = [1, 2, 3, "文渊", "文件"] //将数组展开 => 1,2,3
console.log(arr);
//如何展开一个数组呢?
console.log(...arr);//将数组给展开了


//展开一个对象,没有办法输出,原因JS高级里面有一个知识点 => 迭代器
const obj = {name:"张三",age:18}
console.log(obj);
//展开一个对象
// console.log(...obj);
```
- 合并
> 示例:
```js
//展开一个数组
const arr = [1, 2, 3, "文渊", "文件"] //将数组展开 => 1,2,3
console.log(arr);
console.log("--------------");
//将数组使用...展开,得到的是数组里面的每一个元素,还可以使用数组将展开的个包裹起来,展开还可以合并,合并数组使用 []
console.log(['文天',...arr,"文香"]);

//展开一个对象
const obj = {name:"张三",age:18}
console.log(obj);
console.log("----------");
//将对象展开,然后再使用{}将展开的内容给包裹起来
console.log({gender:"男",...obj,eat(){console.log("文章吃");}});
```


- 三点运算符
> 示例:
```js
//我们之前有提到过一句 => 就是说arguments以后使用的不多了,在ES6当中我们的参数使用...运算符 , arguments => 是一个伪数组
//...rest => 得到是数组
//...rest必须要写在参数末尾,在三点运算符的后面不能有参数
function fn(a,b,...rest){
    console.log(a,b);
    console.log("--------");
    console.log(rest);
}
fn(1,2,3,4,5,6,7,8,9)
```
## 模块化
ES6的模块化=>面试不会问,但是=极其重要,没有ES6的模块化,第三阶段没有办法学了
目前我们写模块化必须要下载一个插件`live server`=> 插件的作用,就以服务器的方式运行的前端代码
    找打扩展(快捷键 ctrl+shift+X) => 搜索 `live server` => 点击安装
- 单个暴露
    - 暴露 => `export default {}` 
    - 引入 => `import 名字 from '暴露的文件名'`
    - 在引入模块化文件的时候 `<script src="./有食物的房间.js" type="module"></script>`
- 多个暴露
    - 暴露
        - `export const name1 = "张三"`
        - `export const name2 = "李四"`
    - 引入 => `import {name1,name2} from '路径'`
## 正则表达式
正则表达式是JS的内置数据类型,是一个JS的复杂数据类型
根据我们提供的正则,来写一个规则,用这个规则来校验的字符串是否满足我指定规则
1. 创建正则表达式
- 字面量创建正则表达式 => `const reg = /abc/`
- 内置构造函数创建正则表达式 => `const reg = new RegExp('abc')`
2. 正则表达式的方法
- test
> 语法:
```js
正则表达式.test("字符串")
返回的是一个boolean => true/false
如果字符串符合的正则校验的规则,返回的就是true
如果字符串不符合正则校验规则,返回的就是false
```


## 正则表达式的组成部分
1. 普通文本
2. 元字符 => 用一个字符表示一类的内容
3. 标识符 => 用来修饰整个表达式的
### 元字符


1. 基本元字符
- `\d` => 表示的是 一位 数字
- `\D` => 表示的是 一位 非数字
- `\s` => 表示的是 一位 空白内容(比如:缩进,空格..)
- `\S` => 表示的是 一位 非空白内容
- `\w` => 表示的是 一位 数字,字母,下划线
- `\W` => 表示的是 一位 非数字,字母,下划线
- `.`  => 表示的是 一位 非换行的任意内容
- `\`  => 转义符
    将本身没有意义的转换成有意义的特殊符号
    将本身有意义的特殊符号转换成没有意义的文本


2. 边界符
- `^` => 表示字符串的开头
- `$` => 表示字符串的结尾
一般情况下,我们`^和$`会一起来使用


3. 限定符 -> 注意: 一个限定符只能修饰前面的一个符号
- `*` => 0~多次
- `+` => `1~多次
- `?` => 0~1次
- `{n}` => 指定n次
- `{n,}` => 至少有n次
- `{n,m}` => 最小n次,最大m次 


4. 特殊符号
- `()` => 单独处理,一个()是一个整体
- `|`  => 或,一般和() 连用
- `[]` => 一个[]一个占位符
- `[^]` => [^]里面任意一个内容都不行
- `-` => 至,到, 比如 A-Z,或者 0-9

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值