前端路线--ES6（day01）

最新推荐文章于 2024-07-29 15:46:22 发布
最新推荐文章于 2024-07-29 15:46:22 发布
阅读量568 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/124143191
版权

day01-01-let

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // ES6中新增加的定义变量的关键字let
        // var ES5中定义变量的关键字
        // console.log(username); //undefined
        // var username = "好谷"


        // 相当于
        // var username;  //变量提升
        // console.log(username);
        // username = "好谷"


        // console.log(username); //报错
        // let username = "好谷"

        // {
        //     var num = 100
        // }
        // console.log(num); //100

        // {
        //     let num2 = 200
        // }
        // console.log(num2); //num2 is not defined

        /*
        for (var i = 0; i < 5; i++) {
            console.log(i); // //0 1 2 3 4
        }
        console.log(i); // 5
        */

        /*
        for (let i = 0; i < 5; i++) {
            console.log(i); //0 1 2 3 4
        }
        console.log(i); //报错
        */

        /*
        for (var i = 0; i < 5; i++) {

            // setTimeout  异步任务
            setTimeout(function () {
                console.log(i);  //5个5
            })
        }
        */

        // 修改代码利用闭包让这里输入0 1 2 3 4
        for (var i = 0; i < 5; i++) {
            // setTimeout  异步任务
            setTimeout((function (i) {
                console.log(i);  //修改代码让这里输入 0 1 2 3 4
            })(i))
        }

        for (let i = 0; i < 5; i++) {
            setTimeout(function () {
                console.log(i);  //0 1 2 3 4
            })
        }
        // 总结
        // 1、let不存在变量提升，使用变量时候必须先定义
        // 2、let定义变量，只能在当前块级作用域中有效


        // js中的作用域
        // 全局作用域
        // 局部作用域
        // ES6中新增加块级作用域，一个{}就代表一个块级作用域

    </script>
</body>

</html>

day01-02-面试题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = []
        for (var i = 0; i < 5; i++) {
            arr[i] = function () {
                console.log(i);
            }
        }
        //[function () {console.log(i)},function () {console.log(i)},function () {console.log(i)},function () {console.log(i)},function () {console.log(i)}]
        // 在for循环外 i的值已经是5
        arr[0]()  //5
        arr[1]()  //5
        arr[2]()  //5
        arr[3]()  //5


        var arr2 = []
        for (let i = 0; i < 5; i++) {
            arr2[i] = function () {
                console.log(i);
            }
        }
        arr2[0]()  //0
        arr2[1]()  //1
        arr2[2]()  //2
        arr2[3]()  //3

        // let a = 100;
        // let a = 200;
        // console.log(a); //报错
        /*
        var tmp = 123;  //全局变量
        if (true) {
            tmp = 'abc';  //在块级作用域中使用let定义变量必须先定义
            let tmp;  //用定义这个变量， 在当前块级作用域中，不能使用全局变量了
        }
        */

        let temp = 100
        if (true) {
            temp = 200
        }
        console.log(temp); //200


        // 总结
        // 1、let不存在变量提升，使用变量时候必须先定义
        // 2、let定义变量，只能在当前块级作用域中有效
        // 3、let不能重复定义变量
        // 4、暂时性死区


        // js中的作用域
        // 全局作用域
        // 局部作用域
        // ES6中新增加块级作用域，一个{}就代表一个块级作用域

    </script>
</body>

</html>

day01-03-const

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // const 定义常量的关键字
        // const num = 10;
        // num = 20;
        // console.log(num);


        // const定义一个只读的变量，声明之后不允许再改变
        // 不存在变量提升
        // 也不能重复定义
        // 只能在当前块级作用域中有效
        // 存在暂时性死区

        // 注意事项
        const obj = {
            username: "好谷"
        }
        obj.username = "好谷二哥"
        console.log(obj);
    </script>
</body>

</html>

day01-04-解构赋值-数组解构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 解构赋值
        // 是对赋值运算符的扩展
        // 他是针对数组或者对象进行的模式匹配，对变量进行一一对应赋值
        {
            let [a, b, c] = [10, 20, 30] //对数组的解构
            console.log(a); //10
            console.log(b); //20
            console.log(c); //30
        }

        // 嵌套数组的解构
        {
            let [a, [b, c]] = [1, [2, 3]]
            console.log(a); //1
            console.log(b); //2
            console.log(c); //3

        }

        // 不完全解构
        {
            let [a, b, c] = [1, 2]
            console.log(a); //1
            console.log(b); //2
            console.log(c); //undefined
        }

        // ... 剩余运算符（扩展运算符）
        {
            let [a, b, c, ...rest] = [1, 2, 3, 4, 5, 6]
            console.log(a); //1
            console.log(b); //2
            console.log(c); //3
            console.log(rest); //[4, 5, 6]
        }

        {
            let [a, , b] = [1, 2, 3]
            console.log(a); //1
            console.log(b); //2
        }

        {
            let [a, [b, [c]]] = [1, [2, [3]]]
            console.log(a); //1
            console.log(b); //2
            console.log(c); //3
        }

        {
            // 错误的写法
            // let [...rest, a, b] = [1, 2, 3, 4, 5]
            // console.log(rest);
        }

        // 对字符串的匹配
        {
            let [a, b, c, d] = "erge"
            console.log(a); //e
            console.log(b); //r
            console.log(c); //g
            console.log(d); //e
        }

        // a=10 相当于给a初始化值
        {
            let [a = 10, b = a] = []
            console.log(a);  //10  读取的是默认值
            console.log(b);  //10
        }

        {
            let [a = 10, b = a] = [100]
            console.log(a);  //100
            console.log(b);  //100
        }

        {
            // 
            let [a = b, b] = [100]
            console.log(a);  //100
            console.log(b);  //undefined
        }

        {
            // 
            let [a = b, b] = [100, 200] //会覆盖默认值
            console.log(a);  //100
            console.log(b);  //200
        }

    </script>
</body>

</html>

day01-05-解构赋值-对象解构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 解构赋值
        // 是对赋值运算符的扩展
        // 他是针对数组或者对象进行的模式匹配，对变量进行一一对应赋值

        // 对象的解构
        // { username, age } 等价于 {username:username,age:age}
        {
            let { username, age } = { username: "二哥", age: 18 }
            console.log(username);
            console.log(age);
        }

        // 复杂的对象解构
        {
            // obj假如就是以后请求出来的数据
            let obj = {
                username: "二哥",
                student: [{
                    name: "张三",
                    age: 18
                }]
            }

            let { username, student } = obj
            console.log(username); //二哥
            console.log(student);  //[{name: "张三",age: 18}]
        }

        // ... 剩余运算符
        {
            let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 }
            console.log(a); //10
            console.log(b); //20
            console.log(rest); //{c: 30, d: 40}
        }

        // 带有默认值的
        {
            let { a = 10, b = 20 } = { a: 100 }
            console.log(a); //100
            console.log(b); //20
        }

    </script>
</body>

</html>

day01-06-解构赋值-总结

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 解构赋值
        // 是对赋值运算符的扩展
        // 他是针对数组或者对象进行的模式匹配，对变量进行一一对应赋值

        // 解构源--指的是=右边的部分  [10, 20]
        // 解构目标--指的是=左边的部分 [a, b]

        // 解构赋值的代码，在书写上更加简洁易读，语义更加清晰明了，更方便从复杂对象中取值
        {
            let [a, b] = [10, 20]
            console.log(a); //10
            console.log(b); //20
        }

        {
            let a = 10;
            let b = 20;
            console.log(a); //10
            console.log(b); //20
        }

        // - 解构赋值就是把数据结构分解，然后给变量进行赋值
        // - 如果解构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
        // - 数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
        // - 利用解构赋值能够让我们方便的去取对象中的属性跟方法




    </script>
</body>

</html>

day01-07-symbol

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // Symbol 新增加的一种原始数据类型，表示独一无二的值
        // 通常做为对象的唯一属性名使用

        // JavaScript中的数据类型都有那一些？
        // 数据类型
        // 简单类型：
        // Number数值类型
        // String 字符串类型
        // Undefined 未定义
        // Boolean  布尔值
        // Null  空值
        // Symbol  原始类型
        // 复杂类型：
        // Object

        // 如何检测数据类型
        // typeof
        // instanceof
        // contructor
        // Object.prototype.toString.call()


        // 怎么定义一个Symbol

        let sy1 = Symbol("erge")
        let sy2 = Symbol("erge")
        console.log(sy1 == sy2); //false

        let a = sy1
        console.log(a == sy1);  //true
        console.log(a === sy1); //true


    </script>
</body>

</html>

day01-08-面试题-如何判断一个数组是数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 如何验证一个数组是数组,并且考虑兼容性问题
        // isArray() //可以验证数组是数组，但是不兼容低版本IE浏览器
        var arr = [1, 2, 3, 4, 5]
        //  console.log(Array.isArray(arr));  //true

        // 可以通过构造函数形式
        // console.log(arr.__proto__.constructor == Array);  //true

        // 最精准的方法,都兼容的方法
        console.log(Object.prototype.toString.call(arr) == "[object Array]"); //true


    </script>
</body>

</html>

day01-09-map对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // Map对象，保存的是键值对，任何类型的值都可以作为属性或者属性值

        // Maps 和 Objects 的区别（面试题）
        // - 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
        // - Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
        // - Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
        // - Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

        // 如何定义一个Map对象
        let obj = new Object(); //定义一个普通对象
        let oMap = new Map();  //定义一个map对象
        let str = "this is a attr"
        let obj2 = {}
        oMap.set(str, "str的属性值");  //通过set() 方法向map对象中添加一个属性
        oMap.set("username", "二哥")
        oMap.set(obj2, "对象的属性值")
        oMap.set({ a: 10 }, "属性值123")

        console.log(oMap);
        console.log(oMap.size);  //Map 的键值对个数可以从 size 属性获取

        console.log(oMap.get("username"));
        console.log(oMap.get(str));

        console.log(oMap.get({ a: 10 })); //undefined
        console.log({ a: 10 } == { a: 10 }); //false

        console.log(oMap.get(obj2)); //对象的属性值
        console.log({} == {}); //false


        // 遍历Map对象
        // for of  来遍历有序列的对象
        // for in  遍历没有序列的对象

        for (let [key, value] of oMap) {
            console.log(key); //键名
            console.log(value); //键值
        }



        // 只遍历出键名
        for (let key of oMap.keys()) {
            console.log(key);
        }

        // 只遍历出键值
        for (let value of oMap.values()) {
            console.log(value);
        }

        // 遍历键值对
        for (let [key, value] of oMap.entries()) {
            console.log(key); //键名
            console.log(value); //键值
        }


        // 总结
        // Map对象可以通过set() 方法来设置键值对
        // 通过get() 方法获取键值
        // Map 的键值对个数可以从 size 属性获取
    </script>
</body>

</html>
喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端路线--ES6（day02）
Yan9_9的博客
04-13 135
day02-01-Set对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
前端路线--ES6（day03）
Yan9_9的博客
04-16 1008
day03-01-箭头函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
前端路线--ES6（day04）
Yan9_9的博客
04-19 740
@import @import url(“index.css”); 导入CSS引用 模块化 var username = “二哥”; //定义一个变量，将来在所有的页面中使用 var age = 18 var fn = function () { return username + “:” + age } //导出(export) // 导出这个变量 // 暴露 export { username, age, fn } //导入( import) // 按需导入 ./表示同级目录 import { us
Day03-前端技术es6
2401_84411822的博客
04-28 146
2、const声明常量（只读变量）3、结构赋值结构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
MooNkirA#code-learning-note#Day01-ES6新特性以及ReactJS入门1
07-25
Day01-ES6新特性以及ReactJS入门1. ES6 新特性此部分内容为前端知识，详见《ECMAScript6 基础笔记》在线文档：JavaScript笔
前端项目-dayjs.zip
09-03
const date = dayjs('2022-01-01'); ``` 2. **格式化日期**：使用`format()`方法将日期转换为特定格式。 ```javascript date.format('YYYY-MM-DD'); // 输出 "2022-01-01" ``` 3. **比较日期**：通过`isBefore()`...
前端项目-date-fns.zip
09-03
const targetDate = new Date('2023-05-01'); const now = new Date(); const remainingDays = differenceInDays(targetDate, now); const daysLeftText = format(subDays(targetDate, remainingDays), 'PP'); ...
day032-前端三剑客-H5快速入门+VScode.zip
09-05
7. ES6新特性：let、const、箭头函数、模板字符串等，提高代码可读性。 【Visual Studio Code (VScode)】 VScode是微软开发的一款免费、跨平台的代码编辑器，具备丰富的扩展功能： 1. 代码高亮和自动补全：提高...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 821
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 603
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 1019
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 283
【代码】TS如何处理js模块的类型？
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 237
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 407
对于上云api开发学习过程中的错误教训积累总结
electron 主进程和渲染进程
qq_21087199的博客
07-29 207
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 651
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端 axios 封装
最新发布
清云
07-29 320
前端 axios 封装
cesium-popup-es6 文档
07-18
cesium-popup-es6是一个基于ES6语法编写的Cesium.js的弹窗组件，用于在Cesium地图上显示自定义的弹窗内容。 这个组件主要包含了以下几个部分： 1. Popup类：这是弹窗的主要类，负责创建和管理弹窗的各种属性和方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值