JavaScript高级教程（25）——ES6

最新推荐文章于 2024-05-02 10:57:41 发布

脸红流氓兔

最新推荐文章于 2024-05-02 10:57:41 发布

阅读量574

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41860287/article/details/106295584

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1.ES6简介

1.1什么是es6？

ES的全称是ECMAScript，它是由ECMA国际标准组织化制定的一项脚本语言的标准化规范。
在这里插入图片描述
1.2为什么使用ES6

每一次标准的诞生都意味着语言的完善，功能的增强。JavaScript语言本身也有一些令人不满意的地方。

变量提升特性增加了程序运行时的不可预测性
语法过于松散，实际相同的功能，不同的人可能会写出不同的代码

2.ES6的新增语法

2.1let

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

let声明的变量只在所处于的块级有效

注意：使用let关键字声明的变量具有块级作用域，使用var声明的变量不具备块级作用域特性。
不存在变量提升
暂时性死区

在块级作用域内声明的变量，就和这个块级作用域进行了整体的绑定，此代码会报变量未定义的错误。

let经典面试题1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [];
        for (var i = 0; i < 2; i++) {
            arr[i] = function() {
                console.log(i);

            }
        }
        arr[0](); //2
        arr[1](); //2
    </script>
</body>

</html>

结果：
在这里插入图片描述
解析：此题的关键点在于变量i是全局的，函数执行时输出的都是全局作用域下的值。

let经典面试题2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = [];
        for (let i = 0; i < 2; i++) {
            arr[i] = function() {
                console.log(i);

            }
        }
        arr[0]();
        arr[1]();
    </script>
</body>

</html>

结果：
在这里插入图片描述
解析：此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域的变量都是不同的，函数执行时输入的时自己上一级（循环产生的块级作用域）作用域下的值。

2.2const

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

具有块级作用域
声明常量时必须赋值
常量赋值后，值不能修改

3.let. const. var的区别

（1）使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
（2）使用let声明的变量，其作用域为语句所在的代码块内，不存在变量提升。
（3）使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。
在这里插入图片描述
4.解构赋值

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

4.1数组解构
在这里插入图片描述
如果解构不成功，变量的值为undefined;

4.2对象解构

写法1：
在这里插入图片描述
写法2：

4.3箭头函数

ES6中新增的定义函数的方式。
在这里插入图片描述
箭头函数的特点：（1）函数体中只有一句代码，且代码的结果就是返回值，可以省略大括号

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

function fn(v){
	rerurn v;
}
//箭头函数写法
const fn = v => v;

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

箭头函数面试题：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var age = 100;
        var obj = {
            age: 20,
            say: () => {
                alert(this.age);
            }
        };
        obj.say(); //100
        //解析：对象不能产生作用域，say()方法实际是被定义在全局作用域下，say方法中的this指向的是window
    </script>
</body>

</html>

5.剩余参数

（1）剩余参数语法允许我们将一个不定数量的参数表示为一个数组
在这里插入图片描述
（2）剩余参数和解构配合使用

6.Array的扩展方法

6.1扩展运算符（展开语法）

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
扩展运算符可以应用于合并数组
在这里插入图片描述
将类数组或可遍历对象转换成真正的数组

6.2构造函数方法：Array.from()

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

在这里插入图片描述
方法还可以接收第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

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

6.4实例方法：findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到，返回-1
在这里插入图片描述
6.5实例方法：includes()

表示某个数组是否包含给定的值，返回布尔值。
在这里插入图片描述
7.String的扩展方法

7.1模板字符串

ES6新增的创建字符串的方式，使用反引号定义。
在这里插入图片描述
模板字符串的特点：
①模板字符串可以解析变量

<script>
        let name = '张三';
        console.log(name);
        let sayHello = `Hello, 我的名子叫${name}`;
        console.log(sayHello);
    </script>

②模板字符串可以换行

 <script>
 let result = {
            name: 'zhangsan',
            age: 20
        }
        let html = `
        <div>
            <span>${result.name}</span>
            <span>${result.age}</span>
        </div>
        `;
        console.log(html);
 </script>

③在模板字符串中可以调用函数
在这里插入图片描述
7.2实例方法：startWith()和endWith()

starWith()：表示参数字符串是否在原字符串的头部，返回布尔值。
endWith()：表示参数字符串是否在原数组的尾部，返回布尔值

7.3实例方法：repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串。
在这里插入图片描述
8.Set数据解构

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

Set本身是一个构造函数，用来生成Set数据解构。

const s = new Set();

Set函数可以接受一个数组参数，用来初始化。

const set = new Set([1, 2, 3, 4, 4]);

实例方法：

add(value):添加某个值，返回Set结构本身
delete：删除某个值，返回一个布尔值，表示删除是否成功
has(value):返回一个布尔值，表示该值是否为Set的成员
clear():清除所有成员，没有返回值

遍历：

set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
在这里插入图片描述

脸红流氓兔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级教程（25）——ES6

1.ES6简介1.1什么是es6？ES的全称是ECMAScript，它是由ECMA国际标准组织化制定的一项脚本语言的标准化规范。1.2为什么使用ES6每一次标准的诞生都意味着语言的完善，功能的增强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加了程序运行时的不可预测性语法过于松散，实际相同的功能，不同的人可能会写出不同的代码2.ES6的新增语法2.1letES6中新增的用于声明变量的关键字let声明的变量只在所处于的块级有效注意：使用let关键字声明
复制链接

扫一扫