一篇文章带你走进ES6

---

一、ES6简介

1.什么是ES6

ECMAScript 6（简称 ES6）是 JavaScript 语言的下一代标准，于 2015 年 6 月正式发布，也被称为 ECMAScript 2015。ES6 引入了许多新特性，旨在使 JavaScript 编程更加简洁、强大和灵活。总的来说ES6是为了当我们写JS的时候写的更少做的事情更多。

2.必知词汇

语法糖：又称糖衣语法，指不改变语言的本质功能，只是使编程变的更加简洁。而本课程后续所学
习的很多ES6的新特性大多也都是由一粒粒语法糖所构成，所以ES6的一些新特性并不是真的“新”，只是
试图简化语法而已。简言之：ES6是一大盒语法糖，解决了以前ES5很多难受的地方。

Babel：Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。相信未来浏览器会逐渐对其提
供原生的支持。

3. 为什么要学习ES6

ES5语言先天不足，通过学习ES6可以将其很多丑陋的部分进行隐藏。
包含了很多超棒的新特性，可以简化很多复杂的操作，从而大大提高开发效率。
为后面学习vue、react以及小程序做好充足准备。
目前大部分公司的项目都在使用ES6，它是前端发展的趋势，就业必备技能之一。

二、let和const关键字

1.var，let，const关键字的区别

在详细讲let和const关键字之前先让我们了解一下为什么不建议使用var来定义变量

1.作用域问题：由于 var 声明的变量具有函数作用域，而不是块级作用域，这可能导致意外的变量共享和难以追踪的错误。

2.变量提升：var 的变量提升可能导致在变量声明之前就使用变量，这可能会导致混淆和错误。

3.函数作用域：在循环中使用 var 声明变量时，变量会被提升到循环外部，这可能会导致循环中的迭代变量在循环结束后仍然可访问。

4.重复声明：var 允许重复声明同一个变量，这可能会导致代码的可读性和可维护性降低。

5.现代 JavaScript 标准：随着 ES6 的推出，let 和 const 提供了更现代、更安全的方式来声明变量，它们提供了块级作用域和不允许重复声明的特性，使得代码更加清晰和易于理解。

 var：声明变量，有变量声明提升，可以重复声明，没有块级作用域
 let：声明变量，没有变量声明提升，不可以重复声明，有块级作用域
 const：声明常量，没有变量声明提升，不可以重复声明，有块级作用域，无法修改，声明时必须要初始化
 tip:如果 const 声明的是一个对象或数组，你可以修改对象的属性或数组的元素，但不能重新赋值给这个对象或数组变量。

※小面试题

 //暂时性死区：使用let/const声明的变量，在声明之前不能使用，即使父级作用域里有同名变量
 //解决办法：使用let/const声明变量后再使用

三、变量的解构赋值

1.什么是变量的解构赋值

允许从数组或对象中提取数据并赋值给新的变量。

2.对数组进行解构赋值

//基本
let [a, b, c] = [1, 2, 3];// a = 1, b = 2, c = 3
//可嵌套
let [a, [[b], c]] = [1, [[2], 3]];// a = 1, b = 2, c = 3
//可忽略
let [a, , b] = [1, 2, 3];// a=1,b=3
//不完全解构
let [a = 1, b] = []; // a = 1, b = undefined
//剩余运算符
let [a, ...b] = [1, 2, 3];//a = 1, b = [2, 3]
//字符串
let [a, b, c, d, e] = 'hello';//a='h', b='e', c='l', d='l',e='o'
//解构默认值
let [a = 2] = [undefined]; // a = 2
//当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。
let [a = 3, b = a] = []; // a = 3, b = 3
let [a = 3, b = a] = [1]; // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

3.对对象进行解构赋值

//基本
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };// foo = 'aaa', bar = 'bbb'
let { baz : foo } = { baz : 'ddd' };// foo = 'ddd'
//可嵌套
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello' ,y = 'world'
//可忽略
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { }] } = obj;// x = 'hello'
//不完全解构
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'
//剩余运算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}
//解构默认值
let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

4.对函数进行解构赋值

function add([x, y]){
return x + y;
}
add([1, 2]); // 3
// 默认值
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
function move({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]
[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

5.小练习（答案放在最后）

1.使用解构赋值实现将两个变量的值交换

let x = 1;
let y = 2;
// 期望结果：x = 2, y = 1

四、模板字符串

1.简介

模板字符串（Template Literals），也称为模板字面量，是 ES6 引入的一种新的字符串表示方法，它允许你以更简洁、更易读的方式构建字符串。模板字符串使用反引号（`）而不是普通引号（’ 或 "）来包围字符串，并且提供了一些非常有用的功能，如字符串插值、多行字符串和表达式嵌入。

2.基本语法

模板字符串由反引号（`）包围，你可以在模板字符串中直接包含变量、表达式和换行符。

let name = 'world';
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出：Hello, world!

3.更多用法

1.字符串插值

    <script>
        let price = 19.99;
        let taxRate = 0.08;
        let total = price + (price * taxRate);
        let message = `总价钱为:${total.toFixed(2)}`;
        console.log(message); // 输出：总价钱为: $20.79
    </script>

2.多行字符串

    <script>
        let word = `
        春江潮水连海平，
        海上明月共潮生。
        滟滟随波千万里，
        何处春江无月明。
            `;
        console.log(word);
    </script>

3.表达式嵌入

        function getGreeting(name) {
            return `Hello, ${name}!`;
        }

        const name = 'world';
        console.log(getGreeting(name)); // 输出：Hello, world!
    </script>

4.小练习（答案放在最后）

编写一个函数。该函数接受一个对象作为参数，对象中包含姓名、年龄和爱好数组。使用解构赋值
提取这些信息，并通过模板字符串生成一段介绍文字

五、字符串的新增方法

1.字符串识别includes、 startsWith、 endsWith

ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法
includes()：返回布尔值，判断是否找到参数字符串。
startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。

    <script>
        let string = "apple,banana,orange";
        string.includes("banana"); // true
        string.startsWith("apple"); // true
        string.endsWith("apple"); // false
        string.startsWith("banana", 6) // true
    </script>

2.字符串重复repeat

在 JavaScript 中，repeat() 方法会创建一个由重复给定字符串若干次的新字符串。这个方法接受一个参数，即你希望原始字符串重复的次数。

//repeat()：返回新的字符串，表示将字符串重复指定次数返回。
console.log("Hello,".repeat(2)); // "Hello,Hello,"
//如果参数是小数，向下取整
console.log("Hello,".repeat(3.2)); // "Hello,Hello,Hello,"
//如果参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整得到 -0 ，等同于
repeat 零次
console.log("Hello,".repeat(-0.5)); // ""
//如果参数是 NaN，等同于 repeat 零次
console.log("Hello,".repeat(NaN)); // ""
//如果参数是负数或者 Infinity ，会报错
console.log("Hello,".repeat(-1)); // RangeError: Invalid count value
console.log("Hello,".repeat(Infinity)); // RangeError: Invalid count value
//如果传入的参数是字符串，则会先将字符串转化为数字
console.log("Hello,".repeat("hh")); // ""
console.log("Hello,".repeat("2")); // "Hello,Hello,"

3.字符串补全padStart、padEnd（此方法多用于补全日期）

padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。

以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全
的字符串。如果没有指定第二个参数，默认用空格填充。

    <script>
        console.log("h".padStart(5, "o")); // "ooooh"
        console.log("h".padEnd(5, "o")); // "hoooo"
        console.log("h".padStart(5)); // " h"
        //如果指定的长度小于或者等于原字符串的长度，则返回原字符串
        console.log("hello".padStart(5, "A")); // "hello"
        //如果原字符串加上补全字符串长度大于指定长度，则截去超出位数的补全字符串
        console.log("hello".padEnd(10, ",world!")); // "hello,worl"
        //常用于补全位数
        console.log("123".padStart(10, "0")); // "0000000123"
    </script>

小练习答案

let x = 1;
let y = 2;

// 使用解构赋值交换变量
[x, y] = [y, x];

// 此时 x = 2, y = 1
console.log(x); // 输出：2
console.log(y); // 输出：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>
    <h1 id="h1"></h1>
    <script>
        var h1 = document.querySelector('#h1')
        function test() {
            var obj = {
                name: '蔡徐坤',
                age: 20,
                hobby: ['唱', '跳', 'rap', '篮球']
            }
            h1.innerHTML = (`大家好，我是练习时常两年半的${obj.name}，我喜欢${obj.hobby}`)
        }
        test()
    </script>
</body>

</html>