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

提示：关键字声明：let与const,长度单位：em与rem,vw与wh，解构赋值，箭头函数(简介)

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

也具有块级作用域。

在使用
```
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>

标签：学习 es6 前端

本文转载自: https://blog.csdn.net/weixin_245249828/article/details/136891694
版权归原作者 吃清心的椰羊 所有，如有侵权，请联系我们删除。