提示：關鍵字聲明：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.語法
?文章來源地址http://www.zghlxwxcb.cn/news/detail-851845.html
一、ES6介紹
ES6（ECMAScript 2015）是JavaScript的第六個版本，引入了許多新的語言特性和功能，使得JavaScript更加現(xiàn)代化、強大和易用。
二、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 ?的區(qū)別:
var會出現(xiàn)變量聲明提升, 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();
// 監(jiān)聽頁面尺寸變化
window.addEventListener('resize', init);
})()
</script>
</body>
</html>?文章來源：http://www.zghlxwxcb.cn/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模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
