简述ES6新特性 (前端面试题)

最新推荐文章于 2024-04-03 18:57:46 发布

前端小刀119

最新推荐文章于 2024-04-03 18:57:46 发布

阅读量203

点赞数 1

文章标签：前端 es6 ecmascript

本文链接：https://blog.csdn.net/m0_59467570/article/details/132634773

版权

1 let和const

使用var关键字声明变量的弊端：

1、var声明的变量有预解析，造成逻辑混乱，可以先使用，后声明

2、var可以重复定义同一个变量，逻辑错误，第二次应该是修改变量，而不是定义

3、var用在for循环条件中，造成for 循环的污染的问题

4、var 声明的变量没有块级作用域（ES5中的作用域：全局和局部）

所以es6中新增了 let 来定义变量

它的基本使用如下：

let 变量 = 值;
例如：
let age = 15;

let关键字的必要性

var关键字其实是有不少的问题的，比如var的变量会提升，提升后会造成一定的混乱，你可以在变量声明之前使用这个变量，而此时你对于这个变量是否有值是不确定的，所以var的变量提升后其实是有一定的问题的。

因此es6中为了统一并提高代码的安全性，引入了let关键字来代替var声明变量

1.let声明的变量不会提升，必须要在声明后才能使用
2.let声明的变量不能重复声明
3.let声明的变量存在块级作用域
4.let在for循环中全局变量污染

示例:

<!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>
        // 1.let没有预解析（变量提升）
        // console.log(a); //Cannot access 'a' before initialization   在初始化之前不能使用
        // let a = 10;
        // console.log(a);

        // 2.let  不能重复声明同一个变量
        // let  a = 10;
        // let  a = 20; //Identifier 'a' has already been declared
        // let  b = 20; 
        // console.log(a,b);

        // 3.let  可以防止循环变量污染
        // for(let i=1;i<=10;i++){
        //     console.log(i);
        // }
        // console.log(i); //i is not defined

        // 4.let  拥有块级作用域
        let a = 20;  //全局作用域
        {
            let a = 10;  //块级作用域
            console.log(a); // 10
        }
        console.log(a); // 20
    </script>
</body>
</html>

let的块级作用域

块指的是代码块，一对 {} 之间就是一个代码块。

变量的有效范围只在这对大括号之间，就是块级作用域

2 symbol

Symbol是ES6中引入的一种新的基本数据类型

3 模板字符串

3.1 字符串新方法（补充）

includes()判断字符串是否包含参数字符串，返回boolean值。
startsWith() / endsWith()，判断字符串是否以参数字符串开头或结尾。返回boolean值。这两个方法可以有第二个参数，一个数字，表示开始查找的位置。
repeat()方法按指定次数返回一个新的字符串。

padStart()/padEnd()，用参数字符串按给定长度从前面或后面补全字符串，返回新字符串。

4 数组解构对象解构字符串解构

5 Map和Set 新增加的对象

6 数组的新增方法 Array.from()是内置对象Array的方法，实例数组不能调用 includes() 参数：数值 -------- 返回值：true/false map()、filter() 参数：函数-------- 返回值：数组 forEach() 参数：函数-------- 返回值：undefined find() 参数：函数-------- 返回值：数值 some()、every() 参数：函数-------- 返回值：true/false

7 object的新方法

在 ES6 中，添加了Object.is()、Object.assign()、Object.keys()、Object.values()、Object.entries()等方法。

8 对象声明简写

声明对象时的属性名与引用的变量名相同就可以省略*

9 …(扩展运算符)

10 函数参数默认值

function 函数名(函数参数 = 默认值){}

11 箭头函数

箭头函数实现了一种更加简洁的书写方式。箭头函数内部没有arguments，也没有prototype属性，所以不能用new关键字调用箭头函数。箭头函数和普通函数最大的区别在于其内部this永远指向其父级对象的this。(重点)

12 class（类）

class 作为对象的模板被引入ES6，你可以通过 class关键字定义类。class的本质依然是一个函数。