提示：关键字声明：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.语法
文章来源地址https://www.toymoban.com/news/detail-851845.html
一、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>文章来源：https://www.toymoban.com/news/detail-851845.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>
到了这里，关于前端小白的学习之路(ES6 一)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
