ES6新特性

矫情吗；* 2024-04-21 08:03 104阅读 0赞

> #### ✨ ES6新特性 ####
> 
>  *  1.ES6概述
>  *  2.变量声明
>  *   *  2.1let
>      *  2.2const
>  *  3.解构赋值
>  *   *  3.1数组解构赋值
>      *  3.2对象解构赋值
>  *  4.函数
>  *   *  4.1参数默认值
>      *  4.2可变参数
>      *  4.3箭头函数
>  *  5.对象
>  *   *  5.1对象的简写
>      *  5.2扩展运算符
>      *  5.3Object.assign(target,source\_1,...)
>  *  6.字符串
>  *   *  6.1新增函数
>      *  6.2模板字符串
>  *  7.数组
>  *   *  7.1数组遍历
>      *   *  7.1.1for循环
>          *  7.1.2forEach()
>          *  7.1.3map
>      *  7.2过滤
>      *  7.3数组查找
>      *  7.4数组生成
>  *  8.模块化开发
> 
>   
> **?个人主页:[不断前进的皮卡丘][Link 1]**  
> **?博客描述:梦想也许遥不可及，但重要的是追梦的过程，用博客记录自己的成长，记录自己一步一步向上攀登的印记**  
> **?博主主要想从事后端开发，前端方面作为了解**

## 1.ES6概述 ##

*  ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下⼀个版本标准，2015.06 发版。
 *  ES6 主要是为了解决 ES5 的先天不⾜，⽐如 JavaScript ⾥并没有类的概念，但是⽬前浏览器的 JavaScript 是 ES5 版本，⼤多数⾼版本的浏览器也⽀持 ES6，不过只实现了 ES6 的部分特性和功能。

## 2.变量声明 ##

在ES6中，变量的声明使用let,常量声明使用const

### 2.1let ###

*  变量作用域是代码块
 *  不可以重复声明

/* 
    				let: 声明变量
    			       - 有作用域，作用域是声明时位于的代码块
    				   - 不能重复声明
    			 */
    			  let age = 22
    			  age = 23
    			  console.log(age)//23

![在这里插入图片描述][9315edba1a564005ac479228c1d29216.png]

### 2.2const ###

*  声明的变量必须赋值
 *  声明后不能重新赋值

/* 
    			    const: 声明常量
    			       - 常量声明时，必须赋值
    				   - 常量无法重新赋值
    			 */
    			 const HOURS_IN_DAY = 24
    			  const TEST_VALUE
    			  HOURS_IN_DAY = 22

![在这里插入图片描述][6b8be9e702b74fd0b397fcb62cd1595d.png]

## 3.解构赋值 ##

*  解构赋值是对赋值运算符的扩展，是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
 *  解构赋值简单来说就是解析数据的结构，然后对变量进行赋值

### 3.1数组解构赋值 ###

*  ![在这里插入图片描述][907d7715877f4861bd41c46bac4bf42c.png]
 *  ![在这里插入图片描述][857e101258c049df96154b1656233261.png]
 *  ![在这里插入图片描述][1da24b11990440b4916fa3587ed73262.png]
 *  ![在这里插入图片描述][ad147f8a49f8424bb084bdadebeb4ea3.png]
 *  ![在这里插入图片描述][b7cc825d89fb425f95d2b1499f104779.png]
 *  ![在这里插入图片描述][0228fc5c283a4037a43cf05223a24212.png]

### 3.2对象解构赋值 ###

*  对象解构：根据对象的属性名给变量赋值
 *  ![在这里插入图片描述][a53d56a92b484e40b23dfa87554bf192.png]
 *  ![在这里插入图片描述][07af9b27cd3f44d38e8ff900fde1adde.png]
 *  ![在这里插入图片描述][31d3af7363af492a8ef54757bd8d0e67.png]
 *  ![在这里插入图片描述][1e0fe3f6181148afaf3224007664e352.png]
 *  ![在这里插入图片描述][b5eb45def24448248c7feea3c12b2763.png]
 *  ![在这里插入图片描述][50c1ff0efe654fedb5da2472f993cb5c.png]

## 4.函数 ##

### 4.1参数默认值 ###

在没有传递参数的时候，或者当参数是undefined的时候，我们是可以使用默认值来给参数赋值的

*  ![在这里插入图片描述][dac51e2222e2438c9a7365af0d574a4c.png]

### 4.2可变参数 ###

> 可变参数, …扩展运算符  
> ① 定义可变参数的时候， …必须定义在参数列表的尾部  
> ② 函数内部，可变参数被当作数组处理  
> ③ 调用函数传参的时候，可以传入任意个数据，也可以传入数组

![在这里插入图片描述][7e52546724cb4ab3af578c8d9d80ff75.png]

### 4.3箭头函数 ###

> 箭头函数提供了一种更加简洁的函数书写方式，基本语法是(参数)=>\{函数体\},箭头函数在回调函数中使用非常方便  
> 我们先来看看原始的写法  
> ![在这里插入图片描述][4264990ed9054fe39cdb426d0de905df.png]  
> ![在这里插入图片描述][7b334b506b4b46a78cb551e0089786ed.png]  
> ![在这里插入图片描述][ddc405ac133d4bceb20af19089441092.png]

## 5.对象 ##

![在这里插入图片描述][e194ba903a74450f875e236956d15e14.png]

### 5.1对象的简写 ###

*  对象的属性和方法可以简写
 *  当属性名和变量名的名字相同的时候，我们可以简写成为属性名
 *  对象行为的简写，可以省略function关键字(和Java的方法有点类似)![在这里插入图片描述][54d3971bd8c2459a8879f02148e93585.png]

### 5.2扩展运算符 ###

> 拓展运算符…用于取出参数对象所有可遍历属性然后拷贝到当前对象  
> ![在这里插入图片描述][596fda0581824b0ea96088f5e1f2d6de.png]  
> ![在这里插入图片描述][94dd0288f017444d80a877b8d4107352.png]  
> ![在这里插入图片描述][c2b86e943f9f4cca8c89d89dd3d9f212.png]

### 5.3Object.assign(target,source\_1,…) ###

用于把源对象的所有可枚举属性复制到目标对象中  
![在这里插入图片描述][44384ae33ec84debb0f70dff35dea8d5.png]

## 6.字符串 ##

### 6.1新增函数 ###

*  include:返回布尔值，判断是否找到参数字符串
 *  startsWith():返回布尔值，判断参数字符串是否在原字符串的头部
 *  endsWith():返回布尔值，判断参数字符串是否在原字符串的尾部  
    以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的检索起始位置索引。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script>
    			// - **includes()**：返回布尔值，判断是否找到参数字符串。
    			// - **startsWith()**：返回布尔值，判断参数字符串是否在原字符串的头部。
    			// - **endsWith()**：返回布尔值，判断参数字符串是否在原字符串的尾部。
    			// 以上三个方法，都可以包含一个参数，或者2个参数。第二个参数表示查询的起始位置。
    			
    			console.log('aabbcc'.includes('bc'))
    			console.log('aabbcc'.includes('bc', 4))
    			console.log('abcdef'.startsWith('ab'))
    			console.log('abcdef'.endsWith('ef'))
    			
    			// repeat()：返回新的字符串，表示将字符串重复指定次数返回。
    			console.log('abc'.repeat(2))
    			
    			// - **padStart**：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
    			// - **padEnd**：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。
    			// 参数1=补齐后的长度，参数2=补齐的字符，如果没有参数2，表示使用空格补齐
    			console.log('abc'.padStart(5, 'x'))
    			console.log('abc'.padStart(5))
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

*  repeat():返回新的字符串，表示将字符串重复指定次数返回

console.log("Hello,".repeat(2)) //输出内容:Hello,Hello,

*  padStart():返回新的字符串，表示用参数字符串从头部(左侧)补全原字符串
 *  padEnd():返回新的字符串，表示用参数字符串从尾部(右侧)补全原字符串  
    以上两个方法接受两个参数，第一个参数是指定生成的字符串的长度，第二个参数是用来补全的字符，如果没有指定第二个参数的话，默认使用空格填充  
    ![在这里插入图片描述][b6a4bfc71e0c44318fa7c320d12166ac.png]

### 6.2模板字符串 ###

> ?模板字符串相当于加强版的字符串，用反引号\`除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。  
> ?模板字符串中的换行和空格都会被保留  
> ?模板中，我们可以使用`${}`,在`${}`中可以放入JavaScript表达式  
> ![在这里插入图片描述][d6fea3f988174badaac4e8e421901b2b.png]

## 7.数组 ##

### 7.1数组遍历 ###

#### 7.1.1for循环 ####

let arr = ['aa', 'bb', 'cc']
    			//普通for循环
    			for(let i=0; i<arr.length; i++) {
        
    				console.log(arr[i])
    			}
    			
    			//for-in
    			for(i in arr) {
        
    				console.log(arr[i])
    			}
    			
    			//for-of
    			for(item of arr) {
        
    				console.log(item)
    			}

#### 7.1.2forEach() ####

*  参数是循环的回调函数，回调函数参数1=数组元素，参数2=元素下标，参数3=循环的数组  
    ![在这里插入图片描述][2008b0b20c9348d28826fa3ab3fe0c6b.png]

#### 7.1.3map ####

*  无返回的时候，和foreach的效果一致。

let arr = ['aa', 'bb', 'cc']
    			  当map()无返回时候，作用等同于foreach()
    			  arr.map((item, index) => {
        
    			  	console.log(item, index)
    			  })

*  一般使用map的时候，必须要和retuen配合，返回新的映射  
    ![在这里插入图片描述][b49b3f231f51471494703cc3807cf928.png]

### 7.2过滤 ###

![在这里插入图片描述][c632a3d79e934bc2b80c142e4643027c.png]

### 7.3数组查找 ###

*  find:查找数组中符合条件的元素，如果有多个符合条件的元素，则返回第一个元素，找不到则返回undefined
 *  findIndex():查找数组中符合条件的元素索引，如果有多个符合条件的元素，则返回第一个元素索引，没有找到则返回-1
 *  ![在这里插入图片描述][8c019e6b16334914b99a317dff5fd810.png]

### 7.4数组生成 ###

*  Array.from()：把类数组对象转换成数组
 *  Array.of():把一组数值转成数组
 *  fill:数组填充，参数1=填充的东西，参数2=开始位置，参数3=结束位置
 *  ![在这里插入图片描述][bb0ff741cb574d21a0bed764381f8381.png]

## 8.模块化开发 ##

[JavaScript模块化开发][JavaScript]  
导出导入都是JavaScript的对象，模块化开发是基于对象来进行封装和处理的

*  默认导出  
    common.js

let stu = {
        
    	name: 'abc',
    	age: 22,
    	study() {
        
    		console.log('学习了')
    	}
    }
    
    // 模块化开发，向外部导出对象，供外部使用
    // 全局导出  export default
    export default stu

*  默认导入  
    test1.js

// 模块化开发，使用外部模块，必须先导入
    import stu from './common.js'
    
    console.log(stu.name, stu.age)
    stu.study()

*  html引入模块  
    main.html,注意导入模块的type类型

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script src="test1.js" type="module"></script>
    		
    	</head>
    	<body>
    	</body>
    </html>

![在这里插入图片描述][ffd7dd2cf2834c4ebbc47eb4b1d4aa37.png]

[Link 1]: https://blog.csdn.net/qq_52797170?spm=1010.2135.3001.5343
[9315edba1a564005ac479228c1d29216.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/1a42dad306f54a16ac1b51f38f94b1f7.png
[6b8be9e702b74fd0b397fcb62cd1595d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/6e2dcdd7cc374d65bfc0c2cb0ded4d7d.png
[907d7715877f4861bd41c46bac4bf42c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/f176bf20bfbb420fa903c25c6b1f11cc.png
[857e101258c049df96154b1656233261.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/1c38081c75da43aab463bc60c67defd3.png
[1da24b11990440b4916fa3587ed73262.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/22e2176f46b743fb95538a8b1ed64fe0.png
[ad147f8a49f8424bb084bdadebeb4ea3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/c9012cf4d226457aa42b392fb4f349f3.png
[b7cc825d89fb425f95d2b1499f104779.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/82f0c93a545444afbc36f7a2f79e0288.png
[0228fc5c283a4037a43cf05223a24212.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/619439e32fcc4ef789b914d4fc8ecc01.png
[a53d56a92b484e40b23dfa87554bf192.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/81bfb65d2a244caabc0a95965ba85b9b.png
[07af9b27cd3f44d38e8ff900fde1adde.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/06c03e8842514142838e6678dfc9f56d.png
[31d3af7363af492a8ef54757bd8d0e67.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/5dd84d17a15440c093da39a9a185dbc0.png
[1e0fe3f6181148afaf3224007664e352.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/fd0726031d8644c096747de16b7f7a03.png
[b5eb45def24448248c7feea3c12b2763.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/8e31936846444a13ad523a01bd457581.png
[50c1ff0efe654fedb5da2472f993cb5c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/3669b783b90547adb932d073f56c351d.png
[dac51e2222e2438c9a7365af0d574a4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/cbd0be8fddd24a13af6d6aadd45c4977.png
[7e52546724cb4ab3af578c8d9d80ff75.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/2cd9268b2569465aae0574fdb2c38f6c.png
[4264990ed9054fe39cdb426d0de905df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/806bd720be3c4ec8b3877d46992c37de.png
[7b334b506b4b46a78cb551e0089786ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/19207e3f99f14e6eb3234583f8c8e986.png
[ddc405ac133d4bceb20af19089441092.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/c526fb4fac28494fb46c6069dae47c2a.png
[e194ba903a74450f875e236956d15e14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/68f368b5222c4a569f960cdd2f2bd688.png
[54d3971bd8c2459a8879f02148e93585.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/a9263e6525e241a69f8c0154b6a4deda.png
[596fda0581824b0ea96088f5e1f2d6de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/57eaf7432f8946c2aa6314154ad531f5.png
[94dd0288f017444d80a877b8d4107352.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/1de02b3c509b41509fc5e0a9a8b7709b.png
[c2b86e943f9f4cca8c89d89dd3d9f212.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/66d4f5ca4a4f4d21a89168fae025e071.png
[44384ae33ec84debb0f70dff35dea8d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/c372ffcac6f4452e8b822f5dc4e72048.png
[b6a4bfc71e0c44318fa7c320d12166ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/fd44adfe64ed47c28fd0774637202100.png
[d6fea3f988174badaac4e8e421901b2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/748777f8640d4e828962bf496660faff.png
[2008b0b20c9348d28826fa3ab3fe0c6b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/1e343ba2873146e9b757f95bc613448f.png
[b49b3f231f51471494703cc3807cf928.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/6761c29361264662a0d8bff022ea1cb8.png
[c632a3d79e934bc2b80c142e4643027c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/531db6f40cfb4aa0a8dca757bc816e05.png
[8c019e6b16334914b99a317dff5fd810.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/fa89824b7ce24ec197373aeb628380ad.png
[bb0ff741cb574d21a0bed764381f8381.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/139669ce836749bfa2cc0dc1dc326a68.png
[JavaScript]: https://www.jianshu.com/p/4ea5a600485f
[ffd7dd2cf2834c4ebbc47eb4b1d4aa37.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/70d4b8f7ee4049ccbd045a73874ac96c.png