目录
ES6 新特性的介绍：✨
🎈ES6是什么
段落1：let声明变量 📝
段落2：const声明常量/只读变量 📝
段落3：解构赋值 📝
🌰数组结构
🌰对象结构
段落4：模板字符串 📝
段落5：箭头函数 📝
📌总结 : 编辑
ES6 新特性的介绍：✨
这是每个前端开发者都应该掌握的技能。ES6是JavaScript的一个重要的版本升级，它带来了许多新特性和语法糖，让我们的代码更加简洁高效。无论你是新手还是有经验的开发者，掌握ES6都会让你的编码变得更加愉快和高效。那么，让我们开始吧！💪
🎈ES6是什么
1. ECMAScript 6.0( 以下简称 ES6) 是 JavaScript 语言的下一代标准， 2015 年 6 月发布。
2. ES6 设计目标：达到 JavaScript 语言可以用来编写复杂的大型程序，成为企业级开发语 言
3. ECMAScript 和 JavaScript 的关系： ECMAScript 是 JavaScript 的规范 / 规则， JavaScript 是
ECMAScript 的一种实现
段落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开发的需求，不断学习和探索是非常重要的。感谢大家的阅读，希望本文能对你有所帮助！如果你有任何问题或者更多的建议，欢迎在评论区留言，我会尽快回复。再见！
