1.ES6是什么
ES6，全称是ECMAScript 6，是JavaScript语言的下一代标准，由ECMA国际组织在2015年6月正式发布。ES6也被称作ECMAScript 2015，从这个版本开始，ECMA组织决定每年发布一个新的ECMAScript版本，以使JavaScript语言能够持续发展和进化。
ES6引入了许多新特性，这些特性旨在提高JavaScript语言的编程效率、代码的可读性和可维护性。以下是一些ES6中的重要特性：
-
箭头函数（Arrow functions）：提供了一种更简洁的函数书写方式。
const sum = (a, b) => a + b; -
类（Classes）：引入了类的概念，尽管JavaScript仍然是基于原型的，但类的语法更接近传统的面向对象语言。
class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } -
模块化（Modules）：通过
import和export关键字，支持模块的导入和导出，使得代码组织更加清晰。// 导出 export const myFunction = () => {}; // 导入 import { myFunction } from './myModule'; -
模板字符串（Template literals）：允许使用反引号（`）创建字符串，并提供字符串插值功能。
const message = `Hello, ${name}!`; -
解构赋值（Destructuring assignment）：允许从数组或对象中提取数据，并赋值给变量。
const [a, b] = [1, 2]; const { x, y } = { x: 1, y: 2 }; -
let和const：引入了
let和const关键字用于声明变量，解决了var的一些问题，如变量提升和作用域问题。 -
Promise：用于更优雅地处理异步操作，替代了传统的回调函数模式。
-
默认参数（Default parameters）：允许在函数定义时为参数设置默认值。
-
展开运算符（Spread operator）：允许在函数调用或数组字面量中展开数组或对象。
-
Set和Map：引入了新的数据结构Set和Map，提供了更丰富的集合操作。
ES6的这些新特性极大地推动了JavaScript的发展，使得这门语言更适合大型应用的开发，并且更加现代化和高效。随着现代浏览器的支持，ES6已经成为现代前端开发的标配。
ES与JavaScript的关系
2.let和const的简介
在JavaScript中，let、var 和 const 都是用来声明变量的关键字，但它们之间有几个关键的区别：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>let、const 与 var 的区别</title>
</head>
<body>
<script>
// 1.重复声明
// 已经存在的变量或常量，又声明了一遍
// var 允许重复声明，let、const 不允许
// let a = 1;
// // ...
// let a = 2;
// console.log(a);
// function func(a) {
// let a = 1;
// }
// func();
// 2.变量提升
// var 会提升变量的声明到当前作用域的顶部
// console.log(a);
// console.log(a);
// var a = 1;
// 相当于
// var a;
// console.log(a);
// a = 1;
// console.log(a);
// let、const 不存在变量提升
// console.log(a);
// let a = 1;
// 养成良好的编程习惯，对于所有的变量或常量，做到先声明，后使用
// 3.暂时性死区
// 只要作用域内存在 let、const，它们所声明的变量或常量就自动“绑定”这个区域，不再受到外部作用域的影响
// let、const 存在暂时性死区
// let a = 2;
// let b = 1;
// function func() {
// console.log(b);
// // console.log(a);
// // let a = 1;
// }
// func();
// 养成良好的编程习惯，对于所有的变量或常量，做到先声明，后使用
// 4.window 对象的属性和方法
// 全局作用域中，var 声明的变量，通过 function 声明的函数，会自动变成 window 对象的属性或方法
// let、const 不会
// var/function
// var age = 18;
// function add() {}
// console.log(window.age);
// console.log(window.add === add);
// let/const
// let age = 18;
// const add = function () {};
// console.log(window.age);
// console.log(window.add === add);
// 5.块级作用域
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>let、const 与 var 的区别</title>
</head>
<body>
<script>
// 块级作用域
// 1.什么是块级作用域
// var 没有块级作用域
// for (var i = 0; i < 3; i++) {
// // console.log(i);
// }
// console.log(i);
// let/const 有块级作用域
// for (let i = 0; i < 3; i++) {
// // i = i+1
// // console.log(i);
// }
// console.log(i);
// 2.作用域链
// function func() {
// for (let i = 0; i < 3; i++) {
// // console.log(i);
// }
// }
// func();
// console.log(i);
// 作用域链：内层作用域->外层作用域->...->全局作用域
// 3.有哪些块级作用域
// {}
// {
// let age = 18;
// // console.log(age);
// }
// console.log(age);
// {}
// for(){}
// while(){}
// do{}while()
// if(){}
// switch(){}
// function(){}
// const person = {
// getAge: function () {}
// };
</script>
</body>
</html>
1.作用域（Scope）:
var 声明的变量拥有函数作用域（function scope），这意味着如果 var 变量在函数外部声明，它将是一个全局变量；如果在函数内部声明，它只能在那个函数内部被访问。
let 和 const 声明的变量拥有块作用域（block scope），这意味着它们的作用域限定在它们被声明的块（如一个花括号 {} 内部的区域）中。
2.变量提升（Hoisting）:
var 声明的变量会被提升到其作用域的顶部，但在初始化之前不能使用，访问未初始化的变量会得到 undefined。
let 和 const 也会被提升，但是它们不允许在声明之前被访问，如果尝试这样做将会导致一个引用错误（ReferenceError）。
3.重复声明（Re-declaration）:
在同一个作用域内，var 允许重复声明同一个变量。
let 和 const 不允许在同一个作用域内重复声明同一个变量。
4.重新赋值（Re-assignment）:
使用 var 和 let 声明的变量可以被重新赋值。
使用 const 声明的变量必须在声明时初始化，并且一旦被赋值，其引用就不能再被改变。需要注意的是，const 保证的是变量引用的不可变性，而不是变量的值不可变。例如，如果 const 变量引用的是一个对象，那么对象的属性是可以被修改的。
5.window 对象的属性和方法
全局作用域中，var 声明的变量，通过 function 声明的函数，会自动变成 window 对象的属性或方法。let、const 不会
// 2.2.const 声明的常量，允许在不重新赋值的情况下修改它的值
// 基本数据类型
// const sex = 'male';
// sex = 'female'; //会报错
// 引用数据类型
// const person = { username: 'Alex' };
// // person = {};
// person.username = 'ZhangSan'; //通过.直接修改值，而不是复制操作，是可以的。
// console.log(person);
不知道用什么的时候先用const，也就是说不确定需求的时候用const，因为如果需要修改会报错，方便查找。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>const</title>
</head>
<body>
<script>
// 1.为什么需要 const
// let
// let sex = 'male';
// // ...
// sex = 'female';
// console.log(sex);
// const
// const sex = 'male';
// // ...
// sex = 'female';
// console.log(sex);
// const 就是为了那些一旦初始化就不希望重新赋值的情况设计的
// 2.const 的注意事项
// 2.1.使用 const 声明常量，一旦声明，就必须立即初始化，不能留到以后赋值
// const sex;
// sex='male'
// const sex = 'male';
// 2.2.const 声明的常量，允许在不重新赋值的情况下修改它的值
// 基本数据类型
// const sex = 'male';
// sex = 'female';
// 引用数据类型
// const person = { username: 'Alex' };
// // person = {};
// person.username = 'ZhangSan';
// console.log(person);
// 3.什么时候用 const，什么时候用 let
// var
// for (let i = 0; i < 3; i++) {}
// const username = 'Alex';
// // ...
// username = 'ZhangSan';
</script>
</body>
</html>
以下是这些关键字的简单比较：
var 是ES5及之前版本中的标准声明方式，现在一般不推荐使用，因为它的作用域和提升行为可能会导致代码中的意外行为。
let 是ES6（ECMAScript 2015）中引入的，用于声明块作用域的变量，通常在需要重新赋值的情况下使用。
const 也是ES6中引入的，用于声明块作用域的常量，当你不希望变量的引用改变时使用。
总结来说，现代JavaScript编程中推荐尽可能使用 const，只在变量需要被重新赋值时使用 let。这样做可以提高代码的可读性和可维护性。
3.模版字符串
（1）是什么
模板字符串（Template Literals）是ES6（ECMAScript 2015）中引入的一种新的字符串表示法，它允许开发者以更简单、更直观的方式创建和维护字符串。模板字符串使用反引号（`）而不是单引号（'）或双引号（"）来定义字符串。
以下是模板字符串的一些主要特点和用法：
-
多行字符串：模板字符串可以跨越多行，不需要使用反斜杠（\）来换行。
const multiLineString = `This is a string that spans multiple lines.`; -
字符串插值：可以在模板字符串中嵌入变量和表达式，这些变量和表达式会被解析并转换为字符串的一部分。插入变量或表达式时，需要使用
${expression}的语法。const name = 'Alice'; const age = 30; const greeting = `Hello, my name is ${name} and I am${age} years old.`; -
标签模板（Tagged Templates）：模板字符串可以与一个函数一起使用，这种用法称为标签模板。函数的第一个参数是一个字符串数组，其余的参数对应于模板字符串中的插值表达式。
function myTag(strings, ...values) { // strings 是一个包含模板字符串中静态部分的数组 // values 是一个包含模板字符串中动态部分（即插值表达式）的数组 return strings.reduce((acc, str, i) => { return acc + str + (values[i] || ''); }, ''); } const result = myTag`Hello ${name}, how are you?`;
最低0.47元/天 解锁文章
扫一扫
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
