您现在的位置是：首页 > 技术教程正文

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

admin 阅读： 2024-03-31

后台-插件-广告管理-内容页头部广告（手机）

提示：关键字声明：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 等于其父元素的字体大小

<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>

2).rem

rem 相对于文档的根元素（）的字体大小。默认情况下，根元素的字体大小是浏览器的默认字体大小，通常为 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的值

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 中从数组或对象中提取数据并将其赋值给变量的方式。解构赋值使得从数组或对象中提取数据变得更加简洁和直观。

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.基本语法

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.语法

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>

标签:

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）

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

一、ES6介绍

二、let&const

1.let

1) 用 let 关键字声明的变量不能提前引用

2) 不允许重复声明变量

3) 可以产生块级作用域 { }

总结

2.const

三、 长度单位

1.em与rem

1).em

2).rem

2.vw与vh

四、 解构赋值

五、箭头函数

1.基本语法

2.语法

三、长度单位

四、解构赋值