ES6常用语法

最新推荐文章于 2022-10-30 21:16:29 发布

Tiny_G

最新推荐文章于 2022-10-30 21:16:29 发布

阅读量294

点赞数 1

分类专栏： ES6 文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/qq_45801179/article/details/125795157

版权

ES6 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ES6简介
1. 什么是ES6？
  
  ES（ECMAScript）,它是由ECMA 国际标准化组织，制定的一项脚本语言的规范话标准
  
  ES6实际上是泛指，泛指ES2015及后续的版本
2. 为什么使用ES6？
  
  每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。
  - 每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。
  - 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码
let

ES6中新增的用于声明变量的关键字

特点：
- let声明的变量旨在所处于的块级有效（只能在一对大括号中进行访问），eg：防止循环变量变成全局变量
- 不存在变量提升
```
console.log(a);//报错：a is not defined
let a = 10;
```
- 暂时性死区特性：一但在块级区域内声明了该变量，该变量就和整体进行了绑定
```
		var demo = 123;
        if (true) {
            demo = 234;
            let demo//报错：Cannot access 'demo' before initialization
        }
```
注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性
const

作用：声明常量，常量就是值（内存地址）不能变化的量

特点：
- 具有块级作用域
```
if (true) {
            const a = 10;
        }
        console.log(a)//报错：a is not defined
```
- 声明常量时必须赋初始值
- 常量赋值后，值（内存地址）不能修改：简单数据类型赋值后不可更改，复合数据类型，例如数组和对象，其值/属性可以更改,即对应的内存地址不可更改
总结：let、const、var的区别：
1. 使用var 声明变量：其作用域为该语句所在的函数内，且存在变量提升现象；
2. 使用let声明变量：其作用域为该语句所在的代码块内，不存在变量提升；
3. 使用const声明的是常量，在后面的代码中不能对该常量的内存地址进行修改；

解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以解构赋值；

数组解构：

允许我们按照一一对应的关系，从数组中提取值，然后赋值给变量

let [a, b, c] = [123, "123", { "123": 123 }]//a=123，b="123",c={"123": 123}
let [f1, f2] = [1]
console.log(f1, f2);//打印1 undefined

对象解构：

对象解构，实际上是属性匹配，变量的名字匹配对象中属性的名字，如果匹配成功，就讲对象属性的值赋值给变量

const person = {
            name: '张三',
            age: 18
        }
let { name, age } = person;
console.log(name, age)//张三 18

//或者：取别名的方式
let {
            name: MyName,
            age: MyAge
        } = person
        console.log(MyName, MyAge);//张三 18

箭头函数

ES6中新增的定义函数的方式,是用来简化函数定义语法的

() => {}
const fn = () => {
  console.log("A")
}
fn()

注意：

如果箭头函数的函数体中，只有一句代码，且代码的的执行结果是返回值，可以省略大括号

 /* var getRandom = (max, min) => {
            return Math.floor(Math.random() * (max - min) + min)
} */
 // 相当于
var getRandom = (max, min) => Math.floor(Math.random() * (max - min) + min)
console.log(getRandom(1, 2));

如果形参只有一个，可以省略形参的小括号

 var getSelf = v => {
            alert(v)
        };
 getSelf(2)

箭头函数不绑定this,箭头函数中的this,指向的是函数定义位置的上下文this

let obj = { name: "zhangsan" }
        function fn() {
            console.log(this);
            return () => {
                console.log(this);
            }
        }
        const res = fn.call(obj)
        res()
        // 输出：{name: 'zhangsan'}
        //       {name: 'zhangsan'}

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组：

const sum = (...arg) => {
            let sum = 0;
            arg.forEach(v => {
                sum += v;
            })
            return sum
        }
        console.log(sum(10, 20))
        console.log(sum(10, 20, 30, 40))

剩余参数和结构配合使用：

let arr = ["zhangsan", "lisi", "wangwu"];
let [s1, ...s2] = arr;
console.log(s1, s2)//打印：zhangsan ['lisi', 'wangwu']

Array的拓展方法

拓展运算符（展开语法）

拓展运算符可以将数组或者对象转为用逗号分隔的参数序列

应用：
- 拓展运算符可以应用于合并数组
```
		let arr1 = [1, 2, 3]
        let arr2 = [4, 5, 6]
        let arr3 = [...arr1, ...arr2];
        arr1.push(...arr2)
        console.log(arr3, arr1)
```
- 将类数组或可比案例额对象转换成真正的数组
构造函数方法：Array,form()

将类数组或可以遍历对象转换为真正的数组

数组的实例方法：find(), 用于找出第一个符合条件的数组成员，如果没有找到返回undefined

		var person_list = [
            {
                id: 0,
                name: 'Zhangsan',
                value: 10
            },
            {
                id: 1,
                name: 'Lisi',
                value: 20
            },
        ]

        var target = person_list.find((item, index) => {
            return item.id === 1
        })
        var targetIndex = person_list.findIndex((item, index) => {
            return item.value >= 1
        })
        console.log(target, targetIndex)//输出：{id: 1, name: 'Lisi', value: 20} 0

数组的实例方法：findIndex(),用于找出第一个符合条件的数组成员的位置，如果没有找到则返回-1；

具体代码，见上个代码块
数组的实例方法：includes（），用于判断某个数组是否包含给定的值，返回布尔类型的值

模板字符串
- 模板字符串中可以换行
- 模板字符串中可以调用函数，结果将会返回调用函数执行后的返回值
```
 var fun = () => 'say hello';
        var str = `${fun()}`
        console.log(str)
```

字符串的拓展方法

实例方法：startsWith()和endsWith()

startsWith():判断某字符串是否在原字符串的开头，返回布尔类型；

endsWith()：判断某字符串是否在原字符串的结尾，返回布尔类型；

 var str = "hello world";
        console.log(
            str.startsWith("hel"),
            str.startsWith("hello "),
            str.endsWith('world')
        )//true true true

实例方法：reapeat()

reapeat()方法，表示将原字符串重复n次，返回一个新的字符串

var str = "hello world";
        var newStr = str.repeat(3);
        console.log(newStr)//hello worldhello worldhello world

Set数据结构

ES6提供了新的数据结构Set.它类似数组，但成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成Set数据结构。
```
const s = new Set();
```
Set函数也可以接收一个数组作为参数，用来初始化
```
const set = new Set([1,2,3]);
console.log(set.size)//3
```

1.set方法

Set.prototype.add(value)	在Set对象尾部添加一个元素。返回Set对象
Set.prototype.clear()	移除Set对象内的所有元素
Set.prototype.delete(value)	移除Set中与value值相等的元素
Set.prototype.has()	返回一个布尔值，表示该值是否为Set的成员
Set.prototype.keys()	返回键名的遍历器
Set.prototype.values()	返回键值的遍历器
Set.prototype.entries()	返回键值对的遍历器
Set.prototype.forEach()	使用回调函数遍历每个成员

利用set去重

		const set = new Set([1, 2, 2, 3, 3])
        console.log(set.size)//3
        const arr = [...set];
        console.log(arr)//(3) [1, 2, 3]

Array.from 方法可以将Set结构转为数组。

let set = new Set([1,2,2,3,2,3,4]);
let arr = Array.from(set) //1,2,3,4

Set遍历

Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种VS噢序偶，没有返回值;

const set = new Set([1, 2, 2, 3, 3])
        // set.forEach(item => {
        //     console.log(item)
        // }) // 1 2 3
        const set1 = new Set([{ key: 1, value: 2 }, { key: 2, value: 3 }])
        for (let item of set1.values()) {
            console.log(item)
            /*
            {key: 1, value: 2}
             {key: 2, value: 3} 
             */
        }
        for (let key of set1.keys()) {
            console.log(key)
            /*
            {key: 1, value: 2}
             {key: 2, value: 3} 
             */
        }
        for (let item of set1.entries()) {
            console.log(item)
            /* 
            (2) [{…}, {…}]
            (2) [{…}, {…}]
             */
        }