前端小白的学习之路(ES6 一)

提示：关键字声明：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;// 默认字体20pxconst 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 高度100px1vw = 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 };// 同样需要注意左右两侧的数据结构，使用的是对象中的keylet { 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);// 100console.log(bb);// 200console.log(cc);// 300let { 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>