最详细的—— ES6有哪些新特性？

程序员树朦

于 2024-04-12 14:53:17 发布

阅读量1.1k

点赞数 26

文章标签：前端 javascript 开发语言 es6 ecmascript vue.js

本文链接：https://blog.csdn.net/qq_45963045/article/details/137666755

版权

一、let命令

ES6中新增的用于声明变量的关键字。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

基本用法：
  {
    let a = 10;
    var b = 1;
  }

特性：
        1.变量不能重复声明
        2.块儿级作用域
        3.不存在变量提升
        4.不影响作用域链

二、const命令

const声明一个只读的常量。一旦声明，常量的值就不能改变。

基本用法：
  {
     const PI =3.1415
  }

特性：
1.一定要赋初始值
2.一般常量使用大写(潜规则)
3.常量的值不能修改
4.块儿级作用域
5.对于数组和对象的元素修改，不算做对常量的修改，不会报错

三、var let const的区别

1. 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
3. 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值。

四、解构赋值

ES6允许按照一定模式从数组和变量中提取值，对变量进行赋值，这被称为结构赋值，主要用于数据处理。

let [a, b, c] = [11, 22, 33]
console.log(a, b, c)  // 输出11，22，33

用途：
1.交换变量的值
2.从函数返回多个值
3.函数参数的定义
4.提取 JSON 数据
5.函数参数的默认值
6.遍历 Map 结构
7.输入模块的指定方法

五、字符串的扩展

1.模板字符串

ES6引入新的声明字符串的方式（``）。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<ul>
		<!-- <li></li> -->
	</ul>
</body>
</html>
<script type="text/javascript">
	let data = [
		{
			title: "张三",
			id: 1001
		}, {
			title: "李四",
			id: 1002
		}, {
			title: "王五",
			id: 1003
		},
	]
	let ul = document.querySelector("ul")
	for (let i = 0; i < data.length; i++) {
		console.log(data[i].title)
		ul.innerHTML += `
			<li>${data[i].title}---${data[i].id}</li>
		`
	}
<script/>

2.方法

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
repeat():repeat方法返回一个新字符串，表示将原字符串重复n次。
padStart():用于头部补全。
padEnd():用于尾部补全。
trimStart()：清除字符串左边的空白。
trimEnd()：清除字符串右边的空白。
replaceAll():可以一次性替换所有匹配。
at():接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。

六、箭头函数

ES6允许使用（箭头） (=>)定义函数。

特性：
1.this 是静态的。this 始终指向函数声明时所在作用域下的 this 的值
2.不能作为构造实例化对象
3.不能使用 arguments 变量
4.箭头函数的简写
1）省略小括号，当形参有且只有一个的时候
    let add = n => {
        return n + n;
    }
    console.log(add(9));
2) 省略花括号，当代码体只有一条语句的时候，此时 return 必须省略
    let pow = (n) => n * n;
    console.log(pow(8));

七、symbol

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。

特点：
1.Symbol的值是唯一的，用来解决命名冲突的问题
2.Symbol值不能与其他数据进行运算
3.Symbol 定义的对象属性不能使用 for...in 循环遍历，但是可以使用3)Reflect.ownKeys来获取对象的所有键名
4.Symbol 值不能与其他类型的值进行运算，会报错，但是，Symbol 值可以显式转为字符串，另外，Symbol 值也可以转为布尔值，但是不能转为数值。

八、模块化

模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。

模块化的优势有以下几点：
    1)防止命名冲突
    2)代码复用
    3)高维护性

模块功能主要由两个命令构成:
    export和import。
    export 命令用于规定模块的对外接口
    import 命令用于输入其他模块提供的功能

九、数值的扩展

Number.parseInt()：转为整数。
Number.parseFloat()：转为小数。
Number.isInteger()：用来判断一个数值是否为整数。

十、数组的扩展

array.of()：用于将一组值，转换为数组。
find()：用于找出第一个符合条件的数组成员，如果没有找到返回undefined。
findIndex()：用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。
includes()：表示某个数组是否包含给定的值，返回布尔值。
flat()：将多维数组转化为低位数组。
flatMap()：将多维数组转化为低位数组。
at():接受一个整数作为参数，返回对应位置的成员，并支持负索引。这个方法不仅可用于数组，也可用于字符串和类型数组（TypedArray）。
扩展运算符:可以将数组进行实例化，也可以将实例化的数据转成数组的形式。
                用途：
                       1.数组的合并
                       2.数组的克隆
                       3.将伪数组转为真正的数组

// 1.数组的合并
let arra1=[55,66,77,88]
let arra2=[99,0]
let arrs=[...arra1,...arra2]
console.log(arrs) // [55,66,77,88,99,0]
// 2.数组的克隆
let a1=[1,2,3,4]
b1=[...a1]
console.log(b1) //[1,2,3,4]
// 3.将伪数组转为真正的数组
const divs = document.querySelectorAll('div')
const divArr = [...divs]
console.log(divArr) //[div,div,div]

十一、对象的扩展

object.keys()方法返回一个给定对象的所有的键
object.values()方法返回一个给定对象的所有的值
object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组
Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。
object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）

十二、Set和Map数据结构

1.Set(集合）

      ES6 提供了新的数据结构 Set(集合)。它类似于数组，但成员的值都是唯一的，集合的属性和方法:
     1) size    返回集合的元素个数
      2) add     增加一个新元素，返回当前集合
      3) delete 删除元素，返回 boolean 值
      4) has     检测集合中是否包含某个元素，返回 boolean 值

2.map

       ES6 提供 Map数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值(包括对象)都可以当作键。Map的属性和方法:
    1) size    返回Map的元素个数
    2) set     增加一个新元素，返回当前 Map
    3) get     返回键名对象的键值
    4) has    检测 Map 中是否包含某个元素，返回 boolean 值
    5) clear   清空集合，返回undefined

十三、class类

ES6 提供了更接近传统语言的写法，引入了 Class(类)这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
知识点:
1) class 声明类
2) constructor 定义构造函数初始化
3) extends 继承父类
4) super 调用父级构造方法
5) static 定义静态方法和属性
6) 父类方法可以重写

十四、promise

Promise是 ES6引入的异步编程的新解决方案。回调函数和异步编程是js特点之一，但是js中传统的回调函数编写太麻烦，如果嵌套的回调函数层级过多会导致回调地狱，代码很难看，因此promise在es6被引入用来解决这个问题。语法上Promise 是一个构造函数用来封装异步操作并可以获取其成功或失败的结果。

语法：
        resolve和reject是传进来的函数
new Promise((resolve,reject)=>{
            成功的回调
            resolve()
            失败的回调
            reject()
        })

resolve函数的作用：在异步操作成功时调用，并将异步操作的结果作为参数传递出去
reject函数的作用：在异步操作失败时调用，并将异步操作的结果作为参数传递出去
then：获取Promise的结果，查看成功/失败回调函数的结果