Day02-ES6

这篇具有很好参考价值的文章主要介绍了Day02-ES6。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.proxy代理

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        let obj = {
            name: "xiaohao",
            age: 18
        }

        let handler = {
            get: function (target, key) {
                console.log(key);

                // console.log("无权访问" + key);

                return target[key];
            },

            set: function (target, key, value) {
                console.log("设置" + key + "成功");
                target[key] = value;
            }
        }

        // 实例化代理
        var proxy = new Proxy(obj, handler);
        console.log(obj);

        console.log(proxy);
        console.log(proxy.name);        // proxy.get

        proxy.gender = "男";            // proxy.set
        console.log(proxy);

    </script>

</body>

</html>

二.reflect反射

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        let obj = {
            name: "xiaohao",
            age: 18,
            get fun() {
                return this.name;
            }
        }

        // Reflect 反射
        // get 
        console.log(Reflect.get(obj, "name"));

        var newObj = {
            name: "xiaogu",
            age: 20
        }

        console.log(Reflect.get(obj, "fun", newObj));

        Reflect.set(obj, "gender", "男");
        console.log(obj);

    </script>

</body>

</html>

三.组合使用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        let obj = {
            name: "xiaohao",
            age: 18
        }

        let handler = {
            get: function (target, key) {
                // ...操作

                return Reflect.get(target, key);
            },
            set: function (target, key, value) {
                return Reflect.set(target, key, value);
            }
        }

        // 实例化代理对象
        let proxy = new Proxy(obj, handler);
        console.log(proxy.name);

        proxy.gender = "男";
        console.log(proxy);

    </script>

</body>

</html>

四.ES6字符串

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div></div>

    <script>

        let str = "hello";

        // 重复
        console.log(str.repeat(3));

        // 补全
        console.log(str.padStart(10, "o"));

        // 模板字符串
        document.querySelector("div").innerHTML = `<h1>hello</h1>`;

    </script>

</body>

</html>

五.ES6数值

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // 十进制
        let num = 10;

        // 二进制
        let num1 = 0b1001;
        console.log(num1);

        // 八进制
        let num2 = 0o1001;
        console.log(num2);

        // 十六进制
        let num3 = 0x1001;
        console.log(num3);

        // 幂运算
        console.log(num ** 3);

        // parseInt()方法补充
        console.log(parseInt("10"));
        console.log(parseInt("10", 8));

        let arr = ["1", "2", "3"];
        console.log(arr.map(parseInt));
        parseInt("1", 0);       // 1
        parseInt("2", 1);       // NaN
        parseInt("3", 2);       // NaN

    </script>

</body>

</html>

六.ES6对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        let name = "zhangsan";
        let age = 18;
        function sayHi() {
            console.log("hello");
        }

        // 对象的简写形式
        var obj = {
            name,
            age,
            sayHi
        }

        let obj2 = {
            gender: "男"
        }

        console.log(obj);
        obj.sayHi();

        // 扩展运算符
        // 扩展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。
        let newObj = { ...obj, ...obj2 };        // 浅拷贝
        console.log(newObj);

    </script>

</body>

</html>

七.ES6数组

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // Array.of() 创建数组

        console.log(Array.of(1, 2, 3, 4, 5, 6, 7));

        var map = new Map();
        map.set("name", "xiaohao");
        map.set("age", "18");

        console.log(Array.from(map));

        // arr.flat()  抚平数组
        let arr = [1, 2, 3, [4, [5, 6, [7, 8, 9]]]];
        console.log(arr);
        console.log(arr.flat(1));
        console.log(arr.flat(2));
        console.log(arr.flat(3));

        // 扩展运算符
        let arr2 = [1, 2, 3, 4, 5];
        let arr3 = [...arr2];
        console.log(arr3);

    </script>

</body>

</html>

文章来源地址https://www.toymoban.com/news/detail-768248.html

到了这里,关于Day02-ES6的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript Es6_3笔记

    了解构造函数原型对象的语法特征,掌握 JavaScript 中面向对象编程的实现方式,基于面向对象编程思想实现 DOM 操作的封装。 了解面向对象编程的一般特征 掌握基于构造函数原型对象的逻辑封装 掌握基于原型对象实现的继承 理解什么原型链及其作用 能够处理程序异常提升程

    2024年02月11日
    浏览(48)
  • JavaScript 之 ES6 新特性

    在ES6中,模块化成为了JavaScript的标准特性。ES6模块化提供了一种更加优雅和可维护的方式来组织和管理JavaScript代码,可以有效地避免全局变量的污染和命名冲突的问题。以下是ES6模块化的一些主要特性: 导出(export): 可以通过 export 将一个变量、函数或类导出为一

    2024年02月07日
    浏览(46)
  • 【ES6】JavaScript中的Symbol

    Symbol是JavaScript中的一种特殊的、不可变的、不可枚举的数据类型。它通常用于表示一个唯一的标识符,可以作为对象的属性键,确保对象的属性键的唯一性和不可变性。 Symbol.for()是Symbol的一个方法,它用于创建一个已经注册的Symbol对象。当使用Symbol.for()创建Symbol对象时,会

    2024年02月10日
    浏览(42)
  • JavaScript版本ES5/ES6及后续版本

    Brendan Eich在短短10天内创建了JavaScript的第一个版本。它被称为摩卡,但已经具备了现代JavaScript的许多基本特性! 为了吸引Java开发人员,Mocha先是更改为LiveScript,然后又更改为JavaScript然而,JavaScript与Java几乎没有任何关系; 微软推出了IE,从网景复制JavaScript,并称之为JScript; 由

    2024年02月13日
    浏览(46)
  • JavaScript:ES6中类与继承

    在JavaScript编程中,ES6引入了一种更现代、更清晰的方式来定义对象和实现继承,那就是通过类和继承机制。本文将以通俗易懂的方式解释ES6中类与继承的概念,帮助你更好地理解和应用这些特性。 1. 类的创建与使用 类是一种模板,用于创建对象。在ES6中,我们可以使用 cl

    2024年02月13日
    浏览(42)
  • JavaScript之ES6高级语法(一)

    本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习。 今天学习的主要是关于ES6新语法知识的理解和应用 栈负责存放简单数据类型,堆负责存放复杂数据类型,但是复杂数据类型会把内容存在

    2024年02月09日
    浏览(51)
  • 【Javascript】ES6新增之类的认识

    在现代编程语言中,类是面向对象编程范式中的核心概念之一。 与函数类似,类本质上是一种特殊的函数,它允许我们将数据和操作封装在一起,以创建具有共同行为和状态的对象。 在类的世界里,我们有类表达式和类声明,它们各自具有自己的特性和用途。 ✨ 类本质上是

    2024年02月13日
    浏览(42)
  • 前端-ES6

    let 和 const 为了解决var的作用域的问题,而且var 有变量提升,会出现全局污染的问题 let 块状作用域,并且不能重复声明 const 一般用于声明常量,一旦被声明无法修改,但是const 可以声明一个对象,对象内部的属性是可以修改的 建议: 在默认的情况下用const, 而只有你知道

    2024年02月12日
    浏览(37)
  • 15 JavaScript ES6中的箭头函数

    15 JavaScript ES6中的箭头函数 什么是箭头函数 ES6中允许使用=来定义函数。箭头函数相当于匿名函数,并简化了函数定义。 基本语法 箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=来定义函数,省去function。 函数的参数放在=前面的括号中,函数体跟在=后的

    2024年02月12日
    浏览(46)
  • 【ES6】 JavaScript 中的Object.assign

    Object.assign() 是 JavaScript 中的一个方法,它用于复制源对象的所有可枚举属性到目标对象。该方法会返回目标对象。 这是其基本用法: 在这个例子中,source 对象的所有可枚举属性都被复制到了 target 对象。 需要注意的是,Object.assign() 是浅复制(shallow copy),意味着如果源对

    2024年02月10日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包