提示：关键字声明：let与const,长度单位：em与rem,vw与wh，解构赋值，箭头函数(简介)
目录
一、ES6介绍
二、let&const
1.let
1) 用 let 关键字声明的变量不能提前引用
2) 不允许重复声明变量
3) 可以产生块级作用域 { }
总结
2.const
三、 长度单位
1.em与rem
1).em
2).rem
2.vw与vh
四、 解构赋值
五、箭头函数
1.基本语法
2.语法
一、ES6介绍
ES6（ECMAScript 2015）是JavaScript的第六个版本，引入了许多新的语言特性和功能，使得JavaScript更加现代化、强大和易用。
二、let&const
1.let
1) 用 let 关键字声明的变量不能提前引用
// 声明变量console.log(index);// 报错let index = 100;console.log(index);2) 不允许重复声明变量
// 声明变量let index = 100;let index = 99;// 报错3) 可以产生块级作用域 { }
{ // 块级作用域的变量是局部的，是私有的。 let x = 10; console.log(x);// 10}console.log(x);// 报错{ let x = 50; console.log(x);// 50}// var 全局作用域for (var i = 0; i < 3; i++) { buttons[i].onclick = function () { console.log("i:", i);// i:3 }}// let 块级作用域for (let i = 0; i < 3; i++) { buttons[i].onclick = function () { console.log("i:", i);// i:1，2，3 }}总结
var 和 let 的区别:
var会出现变量声明提升, let不能变量声明提升
var可以重复声明, let 不允许重复声明
var没有块级作用域, let 有块级作用域
2.const
1.声明常量
// 变量： 值是可以改变的 let a = 100; a = 99; a = 98; // 常量：值是固定的 （基本类型的数据, 如果数据为引用类型，那么可以间接的修改） // const b = 1; // b = 2;// 报错 const arr = ['red','green','blue']; // arr = ["红色","绿色","蓝色"]; // 通过索引值间接的修改 arr[0] = "红色"; arr[1] = "绿色"; arr[2] = "蓝色"; console.log(arr);2.和 let 一样，const 也具有块级作用域。
3. 在使用 const 声明变量时，必须同时进行赋值。
三、 长度单位
1.em与rem
1).em
如果应用于文本，1em 等于当前元素的字体大小。如果应用于非文本元素，1em 等于其父元素的字体大小
<!-- <div class="box-1">px单位（固定的）</div> --> <style> body { font-size: 20px; } .parent { font-size: 40px; } /* 1em = ?px； 由父元素的字体属性决定。 此处是1em = 40px */ .box-2 { width: 10em; height: 10em; background-color: green; } </style> <div class="parent"> <!-- <div class="box-2"><span style="font-size: 16px;">em单位(可变的，由父元素字体大小变化)</span></div> --> </div>2).rem
rem 相对于文档的根元素（<html>）的字体大小。默认情况下，根元素的字体大小是浏览器的默认字体大小，通常为 16px。rem 没有继承性，子元素的字体大小不受父元素的影响，这样可以更好地控制样式。
<style> /* html: 根元素 */ html { font-size: 30px; } .big { font-size: 100px; } /* 1rem = ?px 由根元素的字体属性决定。默认1rem = 16px */ .box-3 { width: 10rem; height: 10rem; background-color: blue; font-size: 16px; } </style> <div class="big"> <div class="box-3">rem单位(可变的，由根元素字体大小变化)</div> </div>设置rem的值
<!DOCTYPE html><html lang="zh-cn"><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>基本模板</title> <style> html { font-size: 20px; } .box { /* 1rem = 20px */ width: 5rem; height: 5rem; background-color: red; } </style></head><body> <div class="box"></div> <script> ; (function () { // 初始化html标签的字体 const init = function () { // 根元素 const html = document.documentElement; // 视口宽度 const width = document.documentElement.offsetWidth || window.innerWidth; // 设计稿的宽度 const w = 320; // 默认字体20px const value = 20; // html标签字体大小结果 let fontSize = width / w * value; // 设置html标签字体 html.style['fontSize'] = fontSize + "px"; } // 初始化html字体 init(); // 监听页面尺寸变化 window.addEventListener('resize', init); })() </script></body></html>
2.vw与vh
<style> /* 1vw = 百分之?的屏幕的宽度 */ /* 1vh = 百分之?的屏幕的高度 */ /* 假设在320的视口尺寸下，设置盒子宽度100px 高度100px 1vw = 320 * (1 / 100) 100 / 320 * 100 = 31.25vw */ .box-4 { width: 31.25vw; height: 31.25vw; background-color: deeppink; } </style> <div class="box-4"> vw (视口宽度) </div>四、 解构赋值
解构赋值（Destructuring Assignment）是一种在 JavaScript 中从数组或对象中提取数据并将其赋值给变量的方式。解构赋值使得从数组或对象中提取数据变得更加简洁和直观。
<!DOCTYPE html><html lang="zh-cn"><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>基本模板</title> <style></style></head><body> <script> // 1) 赋值 // 定义a,b,c三个变量 // let a = "red"; // let b = "green"; // let c = "blue"; // 2) 数组解构赋值 let arr = ["red", "green", "blue"]; // 左右两个结构相同才能进行赋值 let [a, , c] = arr; console.log(a, c);// red blue // 3) 对象解构赋值 let obj = { x: 100, y: 500, r: 400 }; // 同样需要注意左右两侧的数据结构，使用的是对象中的key let { x, y, r, w } = obj; console.log(x, y, r, w); // 遇到结构较复杂如何解剖赋值 let { result: [{ num: aa }, { num: bb }, { num: cc }] } = { result: [{ num: 100 }, { num: 200 }, { num: 300 }] } console.log(aa);// 100 console.log(bb);// 200 console.log(cc);// 300 let { data:[i,j,k] } = { data: [111, 222, 333] }; console.log(i,j,k);// 111 222 333 // 数组： [0,1,2,3,4,....] // 对象: {key: value} // let [] = []; // let {} = {}; // 使用解构赋值这种方式记录数据的时候，需要注意左右两侧数据结构要相同，否则无法赋值。 </script></body></html>五、箭头函数
1.基本语法
<!DOCTYPE html><html lang="zh-cn"><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>基本模板</title> <style></style></head><body> <script> // 普通函数 const sayHello = function(){ console.log("这就是一个普通函数!!!") } sayHello(); // 箭头函数 // 使用箭头 => 声明的代码块 const speakHello = () => { console.log("这就是一个箭头函数~~~") } speakHello(); </script></body></html>2.语法
<!DOCTYPE html><html lang="zh-cn"><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>基本模板</title> <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css"></head><body> <button class="btn btn-success m-3">点击按钮</button> <script> // 1. 代码块 // 1.1 ********* // const add = () => { // console.log('test') // } // add(); // 1.2 ********* // 有参数而且是一个参数的情况 // const add = x => { // console.log(x) // } // add(1000); // 1.3 ********* // const add = (x,y) => { // console.log(x,y) // } // add(1000,9999); // 1.4 ********* // 返回值 // const add = (x,y) => { // return x + y // } // let r = add(1000,9999); // console.log(r);// 10999 // 1.5 ********* // 意思是返回x+y的结果 // const add = (x,y) => x + y; // let r2 = add(1,2); // console.log(r2);// 3 // 1.6 ********* // 接收单一参数的函数 // 柯里化函数 // const add = function(x) { // return function(y){ // return function(z){ // return x + y + z; // } // } // } // let r3 = add(1)(2)(3); // console.log(r3);// 6 // 1.7********* // 箭头函数 // const add = x => y => z => x + y + z; const add = x => y => z => x + y + z; // let r4 = add(1)(2)(3); // console.log(r4);// 6 // 可以让书写函数代码的风格要更加简约！！ // 2. 事件函数 const butt = document.querySelector(".btn-success"); // 注意this的使用 // butt.onclick = function(){ // console.log(this);// 事件调用者，就是按钮标签 // } // console.log(this);// window // butt.onclick = () => { // console.log(this);// window // } // 3. 回调函数 // setTimeout(function(){},100) // setTimeout(()=>{ // document.body.className="bg-danger"; // },100) // let arr = [111,222,333]; // // arr.forEach(function(item,index){}) // arr.forEach((item,index)=>{ // console.log(item,index); // }) // arguments会报错 // const foo = (a,b) => { // console.log(arguments); // } // foo(1,2) // arguments不会报错 // const foo = function(a,b) { // console.log(arguments); // } // foo(1,2) // 构造函数 const Person = function (name) { this.name = name; } const p1 = new Person("小明"); console.log(p1);// Person {name: '小明'} // Uncaught TypeError: Animal is not a constructor // 报错 // const Animal = (name)=> { // this.name = name; // } // new Animal("小狮子") // 注意： // 1. 箭头函数作用域没有this的概念 // 2. 箭头函数作用域没有arguments对象 // 3. 箭头函数不能作为构造函数使用，也不能作为原型对象的函数 </script></body></html>
