🎄欢迎来到@边境矢梦°的csdn博文🎄

 🎄本文主要梳理前端技术的JavaScript的知识点ES6 新特性文件上传下载🎄

🌈我是边境矢梦°，一个正在为秋招和算法竞赛做准备的学生🌈
🎆喜欢的朋友可以关注一下🫰🫰🫰，下次更新不迷路🎆

 Ps: 月亮越亮说明知识点越重要 (重要性或者难度越大)🌑🌒🌓🌔🌕

 

目录

ES6 新特性的介绍：✨

🎈ES6是什么

段落1：let声明变量 📝

段落2：const声明常量/只读变量 📝

段落3：解构赋值 📝

🌰数组结构

🌰对象结构

段落4：模板字符串 📝

段落5：箭头函数 📝

📌总结 : ​编辑

---

 

ES6 新特性的介绍：✨

这是每个前端开发者都应该掌握的技能。ES6是JavaScript的一个重要的版本升级，它带来了许多新特性和语法糖，让我们的代码更加简洁高效。无论你是新手还是有经验的开发者，掌握ES6都会让你的编码变得更加愉快和高效。那么，让我们开始吧！💪

🎈ES6是什么

---

段落1：let声明变量 📝

ES6引入了let关键字，用于声明块级作用域的变量。相比于以前的var关键字，let在作用域上更加严格，避免了变量提升的问题。另外，使用let声明的变量可以被重新赋值，对于需要频繁变动的变量来说非常实用。😊

// let 细节 1
// (1) let 声明的变量, 在代码块中，则作用域在代码块中
// (2) var 声明的变量, 在代码块中，作用域没有限制
{
var name = "边境矢梦";
let job = "java 工程师";
console.log("name=", name);
console.log("job=", job);
}
console.log("name=", name);
//console.log("job=", job);//job is not defined// let 细节 2
// 1. var 可以声明多次
// 2. let 只能声明一次
var num1 = 100;
var num1 = 200;
console.log(num1);
let num2 = 600;
//Syntax => 语法
//let num2 = 900;//Uncaught SyntaxError: redeclaration of let num2
console.log(num2);
// let 细节 3
// 1. let 不存在变量提升
// 2. var 存在变量提升
console.log("x=", x);//undefined
var x = "tom";
//can't access lexical declaration 'z'console.log("z=", z);
let z = "mary";

通过这种方式，我们可以避免变量冲突和覆盖，更加灵活地控制变量的作用域。🌟

---

段落2：const声明常量/只读变量 📝

除了用于声明变量，ES6还引入了一个新的关键字const，用于声明常量或者只读变量。与使用let声明的变量不同，const声明的变量是不能被重新赋值的，一旦声明就不能被改变。const关键字在开发中常用于对于不可变的值进行定义，使我们的代码更加健壮和可维护。🔒

1. 常量在定义时，需要赋值

2. 常量赋值后不能修改

让我们看一个例子：

const PI = 3.14;
PI = 3.14159; // 尝试修改常量，会报错
console.log(PI); // 输出 3.14

在上面的代码中，我们使用const声明了一个常量PI，并尝试修改其值。由于常量不可被重新赋值，所以当我们在第二行进行赋值操作时会报错。这种机制保证了我们定义的常量不会被无意间修改，提高了代码的可读性和稳定性。🔐

---

段落3：解构赋值 📝

ES6的解构赋值是一种快捷的方式，可以方便地从数组或对象中提取值并赋给变量。这个特性对于处理复杂的数据结构非常有帮助，让我们的代码更加简洁易读。🔍

1. 解构赋值是对 赋值运算符的扩展

2. 是一种针对 数组或者对象 进行模式匹配，然后对其中的变量进行赋值

3. 主要有两种形式： 数组解构和对象解构

🌰数组结构

细节 : 📌

let arr = [1, 2, 3];
//如果要看某个变量的类型
console.log("arr=>", arr);
//数组解构[取出元素]
//1.传统
let x = arr[0], y = arr[1], z = arr[2];
console.log(x, y, z);
//2. ES6 风格
let [a, b, c] = arr;
console.log("==================================");
console.log(a, b, c);
let [num1, num2, num3] = [100, 200, 300];
console.log(num1, num2, num3);

🌰对象结构

细节说明
1, 对象解构时，let{name, age}中的name和 age名称需要和对象属性名保持

2, 也可解构对象部分属性，比如 let{age}

3, 还有其它的形式,比如方法上使用对象解构

ES6对象解构

1．把monster对象的属性，赋值给{name , age}

2. {name , age}的取名name 和 age要和monster对象的属性名保持一致

3．使用 {} 包括，不要使用 [ ]

4. {name , age}顺序是无所谓

让我们看一个例子：

const person = {name: '小红',age: 18,city: '上海'
};const { name, age, city } = person;
console.log(name); // 输出 '小红'
console.log(age); // 输出 18
console.log(city); // 输出 '上海'

在上面的代码中，我们通过解构赋值从person对象中提取了name、age和city的值，并分别赋给了对应的变量。这样我们就能轻松地访问和使用这些值，省去了使用冗长的对象属性访问的步骤。这种语法糖使我们的代码更加精简和可读。🪄

---

段落4：模板字符串 📝

在ES6之前，我们使用字符串拼接来组合字符串和变量，非常繁琐。而ES6引入了模板字符串，使得字符串的拼接更加简单和直观。使用模板字符串，我们可以在字符串中嵌入变量，只需用${}包裹变量即可。🎉

让我们看一个例子：

const name = '小红';
const age = 18;const greeting = `大家好，我是${name}，今年${age}岁了。`;
console.log(greeting); // 输出 '大家好，我是小红，今年18岁了。'

在上面的代码中，我们使用模板字符串创建了一个包含变量的字符串greeting。通过使用${}包裹变量，我们可以方便地将变量嵌入到字符串中，使代码更加简洁和可读性更高。这种语法糖让我们拼接字符串的过程更加愉快！🎈

细节 : 📌

//1、字符串，换行会原生输出
let str1 = `for(int i = 0;i < 10;i++){
System.out.println("i="+i);
}`;
console.log("str1=", str1);
//2. 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "边境矢梦";
//老师解读
//(1) 当解析 ${name}, 就找最近的 name 遍历, 进行替换
//(2) 然后可以得到最后解析的字符串
let str2 = `博主=${name}`;
let str3 = `1+2=${1 + 2}`;
let n1 = 80;
let n2 = 20;
let str4 = `${n1}+${n2}=${n1 + n2}`;
console.log("str2=", str2);
console.log("str3=", str3);
console.log("str4=", str4);
//3. 字符串中调用函数
function sayHi(name) {
return "hi " + name;
}
let name2 = "tom";
let str5 = `sayHi() 返回的结果是=${sayHi('jack')}`;
let str6 = `sayHi() 返回的结果是=${sayHi(name2)}`;
console.log("str5=", str5);
console.log("str6=", str6);

---

段落5：箭头函数 📝

ES6中的箭头函数是一种更简洁的函数声明方式，提供了更短的语法。它不仅让我们的代码看起来更加简洁，还改变了this的指向，解决了传统函数中this指向问题。箭头函数通常被用于回调函数、迭代器和简单的函数定义。💫

让我们看一个例子：

const numbers = [1, 2, 3, 4, 5];const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // 输出 [2, 4, 6, 8, 10]

在上面的代码中，我们使用箭头函数作为map方法的参数来对数组中的每个元素进行处理，将其乘以2。通过简洁的语法，我们可以更方便地定义匿名函数，使得代码更加紧凑和可读性更高。这种函数的声明方式让我们的开发变得更加高效和灵活！🚀

---

📌总结 : 

希望通过本文的介绍，你对ES6的基本特性有了更深刻的了解。记住，掌握这些语法糖和新特性将为你的开发之路带来巨大的便利和乐趣。为了更好地适应现代Web开发的需求，不断学习和探索是非常重要的。感谢大家的阅读，希望本文能对你有所帮助！如果你有任何问题或者更多的建议，欢迎在评论区留言，我会尽快回复。再见！👋

边境矢梦°_Java,数据结构与算法,数据库-CSDN博客https://blog.csdn.net/dandelionl_?type=blog