ECMAScript——Map、class、静态成员、类的继承、方法重写、set和get

最新推荐文章于 2022-07-12 16:55:15 发布
最新推荐文章于 2022-07-12 16:55:15 发布
阅读量224 收藏
点赞数
分类专栏： javascript es6 node.js 文章标签： ecmascript javascript html5 map 类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_jQuery/article/details/120301949
版权
javascript 同时被 3 个专栏收录
123 篇文章 0 订阅
订阅专栏
es6
73 篇文章 0 订阅
订阅专栏
node.js
26 篇文章 0 订阅
订阅专栏

ECMAScript

Map

ES6提供了Map数据结构。它类似于对象，也是键值对的集合。但是‘键’的范围不限于字符串，各种类型的值（对象）都可以当做键。Map也实现了iterator接口，所以可以使用[扩展运算符]和[for…of…]进行遍历。Map的属性和方法

1.size：返回Map的元素个数

2.set：增加一个新元素，返回当前Map

3.get：返回键名对象的键值

4.has：检测Map中是否包含某个元素，返回boolean值

5.clear：情况集合，返回undefined

<!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
        let m = new Map();
        // 添加元素
        m.set('name', 'zs');
        m.set('func', function() {
            console.log('Map');
        });
        let key = 'citys';
        m.set(key, ['南宁', '河池', '北海']);
        console.log(m);
        // 元素个数
        console.log(m.size);
        // 删除元素
        m.delete('name');
        // 获取指定的元素
        // console.log(m.get('func'));
        console.log(m.get('func'));
        console.log(m.get(key));
        // 清空
        // m.clear();
        // 遍历
        for (const item of m) {
            console.log(item);
        }
        console.log(m);
    </script>
</body>

</html>
class类

ES6提供了更接近传统语言的写法，引入了class（类）的概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象变成的语法而已

知识点：

1.class 声明类

2.constructor 定义构造函数初始化

3.extends 集成父类

4.super 调用父级构造方法

5.static 定义静态方法和属性

6.父类方法可以重写

<!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>
        // es5写法
        // 创建Person类
        /* function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        };
        Person.prototype.say = function() {
            console.log('hello');
        };
        */
        // ES6写法
        class Person {
            // 当new之后，会自动调用这个构造器函数
            constructor(name, age, sex) {
                this.name = name;
                this.age = age;
                this.sex = sex;
            };
            say() {
                console.log('hello');
            };
        };
        // 实例化对象
        let zs = new Person('张三', 22, '男');
        console.log(zs);
        zs.say();
    </script>
</body>

</html>

静态成员

<!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>
        // function Person() {};
        // 以下这两个属性是属性函数对象的，不是实例化对象的，所以实例化对象不能调用
        // 函数对象的成员称为静态成员（是属于类的，不是属于实例对象的）
        /* Person.name = '张三';
        Person.change = function() {
            console.log('hello');
        }; */
        // let nona = new Person();
        // console.log(nona.name); //undefined
        // nona.change(); //Uncaught TypeError: nona.change is not a function
        /* Person.prototype.name = '李四';
        Person.prototype.change = function() {
            console.log('hello');
        };
        let nana = new Person();
        console.log(nana.name); //李四
        nana.change(); */
        class Person {
            // 静态属性
            // 由static标注的属性，是属于class的，不属于实例对象的
            static name = '张三';
            static change() {
                console.log('我可以改变世界');
            }
        };
        let nana = new Person();
        console.log(nana.name); //undefined
        console.log(Person.name); //张三
    </script>
</body>

</html>

类的继承（ES5构造函数继承）

<!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>
        // 人类
        function Person(name, age) {
            this.name = name;
            this.age = age;
        };
        Person.prototype.say = function() {
            console.log('hello');
        };
        // 中国人
        function Cperson(name, age, sex, color) {
            // 改变Person类的this指向，Person的name，age指向Cperson的name和age
            Person.call(this, name, age);
            this.sex = sex;
            this.color = color;
        };
        // 设置子类构造函数的原型
        // 这样后，子级的实例对象上就会存在父级的成员
        Cperson.prototype = new Person;
        // 校正
        Cperson.prototype.constructor = Cperson;
        // 声明子类的方法
        Cperson.prototype.toDos = function() {
            console.log('我要干饭');
        };
        Cperson.prototype.playGame = function() {
            console.log('我要玩王者');
        };
        const p = new Cperson('张三', '22', '男', '粉色');
        console.log(p);
    </script>
</body>

</html>

ES6的继承

<!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>
        class Person {
            // 构造器
            constructor(name, age) {
                this.name = name;
                this.age = age
            };
            // 父类的成员属性（所有子类都可继承到）
            say() {
                console.log('hello');
            }
        };
        class Cperson extends Person {
            // 构造器
            constructor(name, age, sex, color) {
                // spuer就相当于父类的构造方法
                super(name, age); //相当于Person.call(this,name,age)
                this.sex = sex;
                this.color = color;
            };
            // 子类独有的方法
            play() {
                console.log('玩游戏');
            }
        };
        const p = new Cperson('张三', 22, '男', 'pink');
        console.log(p);
        p.say();
        p.play();
    </script>
</body>

</html>

子类对父类方法的重写

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

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

<body>
    <script>
        class Person {
            // 构造器
            constructor(name, age) {
                this.name = name;
                this.age = age
            };
            // 父类的成员属性（所有子类都可继承到）
            say() {
                console.log('hello');
            }
        };
        class Cperson extends Person {
            // 构造器
            constructor(name, age, sex, color) {
                // spuer就相当于父类的构造方法
                super(name, age); //相当于Person.call(this,name,age)
                this.sex = sex;
                this.color = color;

            };
            // 子类独有的方法
            play() {
                console.log('玩游戏');
            };
            //对父类的方法进行重写（声明一个同名方法）
            // 子类调用该方法时，调用的是子类的方法而不是父类的
            say() {
                // 使用super.say()也可以同时调用父类中的方法
                super.say()
                console.log('我重写了父类的方法');
            }
        };
        const p = new Cperson('张三', 22, '男', 'pink');
        p.say()
    </script>
</body>

</html>

set和get

<!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>
        // 创建类
        class Person {
            // 可以不写构造器，不写的默认形式：
            /* constructor(){
                super()
            }; */
            get name() {
                console.log('我叫张三');
            };
            set name(newVal) {
                console.log('name属性被修改了' + newVal);
            }
        };
        // 实例化对象
        const p = new Person();
        // 读取了实例对象的代码
        p.name;
        p.name = '李四';
        // console.log();
    </script>
</body>

</html>
h_jQuery
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6新特性_ES6语法糖_class静态成员---JavaScript_ECMAScript_ES6-ES11新特性工作笔记034
添柴程序猿的专栏
01-30 301
再来看一下class的静态成员 可以看到上面是es5的写法,我们写了个Phone这个函数,相当于一个类 然后给这个Phone类添加了change这个方法, 然后我们创建了Phone这个实例对象. 然后我们输出nokia.name 可以看到是undefined. 这里说明啥?说明Phone.name这个声明的这个属性,是类的属性,而不是实例的属性对吧. 所以实例拿不到这个name 然后我们去调用这个change方法,去看看也出错了 这说明什么? 说明这个Phon...
JS中map方法的使用
m0_59168984的博客
11-26 1968
JS中map方法的使用
HashMap重写实现
01-15
HashMap重写实现 轻量级实现 使用自定义的轻量对象HashObjectMap替代jdk的HahMap HashMap里的Entry占用较大内存，可以用自己实现的轻量级容器替换，步骤如下： 1、 缓存的对象需要继承BaseHashObject /** * 这个类主要完成HashMap的一些基本操作。 * 如果使用HashObjectMap来存储数据，则必须继承该类。 */
javaScript的Map数据类型
m0_67266787的博客
03-21 2486
一、Map数据类型产生的背景 JavaScript 天生就有缺陷 34岁的系统程序员Brendan Eich只用10天时间就把Javascript设计出来了。（多肽语言） 所以javaScript自然是有缺陷的，所以就有了javaScript的更新版本 ES6更新版本 ES6版本 是一个非常重要的JavaScript版本 在 ES6版本时,对JavaScript的语法缺陷做了补充和修改 提出很多重要的语法结构：Class类、箭头函数、 Map、SET数据类型、方法函数等 让 JavaScript从
ES6-集合、Map、class
mantou_riji的博客
05-16 632
文章目录SetSet声明集合的属性和方法Set实例MapMap的声明格式Map的属性和方法Classclass定义格式实例化对象class静态成员引入：换到calss Set ES6提供了新的数据结构 set(集合)。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用扩展运算符...和for ...of...进行遍历. Set声明 格式：let 集合名 = new Set([集合元素1,集合元2素,...]) 集合的属性和方法 集合本是也是一个对象,他有属性和方法： set.
ES6 | Promise + Set + Map + class类 + 数值扩展 + 对象方法扩展 + 模块化
不爱吃菜的菜菜的博客
06-19 340
是 ES6 引入的异步编程的新解决方案。(解决回调地狱） 所谓，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 从语法上说， 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 用Promise读取文件 Promise 封装Ajax Promise-then方法 Promise实践-读取多个文件 Promise-catch方法 方法是.then(null, rejection)或.
Class类与继承
langmanboy的博客
04-28 268
Class类与继承 1. Class基础语法 1-1 定义类 ES6 引入了 Class 类构造方式，作为对象的模板，通过class关键字，可以定义类 ES6 的 class 是一个语法糖，新的 class 写法只是让对象原型的写法与继承更加清晰简洁 **Tips：**类方法与方法之间不需要逗号分隔 定义类的一种方法是使用类声明，通过 class 关键字定义类 类表达式是定义类的另一种方法，类表达式可以命名或不命名。命名类表达式的名称是该类体的局部名称，仅在类内部可见 // 第一种方式 通过clas
ES6新特性 — 迭代器、生成器、Promise、Set、Map、Class类、数值和对象的扩展、模块化
m0_59897687的博客
03-02 412
目录 一、迭代器 迭代器自定义遍历对象案例 二、生成器 生成器函数的参数 生成器函数的两个实例： 三、Promise 实例化Promise对象 Promise 读取文件 四、Set 数组去重： 交集： 并集 差集 五、Map 六、class 类 知识点： 类的静态成员 类的继承 class的get和set 七、数值扩展 1.Number.EPSILON 2. 二进制和八进制 3. Number.isFinite() 与 Number.isNaN() ...
现代 JavaScript 教程——ECMAscript基础知识
Tinkerbaby的博客
11-24 627
JavaScript基础知识 现代模式，“use strict” begin from ES5, 为了标识ES5的新特性 变量 我们可以使用 var、let 或 const 声明变量来存储数据。 let — 现代的变量声明方式。 var — 老旧的变量声明方式。一般情况下，我们不会再使用它。 const — 类似于 let，但是变量的值无法被修改。 用 const 声明的对象的值 能 被修改。 数据类型 JavaScript 中有八种基本的数据类型（译注：前七种为基本数据类型，也称为原始类型，而 obj
ECMAScript（ES6+）
m0_61044901的博客
06-12 695
ECMAScript（ES6+）
JS自定义一个Map类
weixin_33890526的博客
12-30 168
2019独角兽企业重金招聘Python工程师标准>>> ...
js中的Map对象
supercolorpower的博客
02-19 409
1.js创建map对象 var map = new Map(); 2.将键值对放入map对象 map.set("key",value) map.set("key1",value1) map.set("key2",value2) 3.根据key获取map值 map.get(key) 4.删除map指定对象 delete map[key] 或 map.delete(key) 5.循环遍历map map.forEach(function(key){ 　　conso...
ECMAScript6（ES6）标准之class类的定义、继承及静态方法
尐轩web前端网络日志
12-26 1万+
众所周知，JavaScript中是没有传统类的概念的 它利用原型链完成继承 对于当时刚学JavaScript的我来说，一时不好接受 声明的方式看起来很奇怪 不过在我们的ES6借鉴了很多语言的语法 这其中包括class class不是新结构而是原型链的语法糖早在ES4的时候，草案中就已经出现了class 不过ES4由于过于激进，和一系列问题 被大家抵制 不过大家完全不用担心ES6步E
nodeJS继承中的子类constructor的写法+静态属性和静态方法+nodejs中的全局对象
qq_64970126的博客
07-12 1633
1、继承中的子类constructor的写法： 2、静态属性和静态方法 3、nodejs中的全局对象
修改类的静态成员的共享属性
大周辞寒的专栏
01-10 2028
类的static成员，属于类，而不属于对象，因此，每一个类的对象都可以使用，使用模板改变这一特性。代码如下：vs2008 #include using namespace std;template class T> class Base {public:    static int count;    Base();};template class T>int BaseT>::
NodeJS中的类、属性和方法以及继承
热门推荐
比特鱼
04-12 2万+
最新的NodeJS（8）全面支持了类似Java的类和继承机制，包括类的什么、继承、静态方法等。 类的什么 声明一个类的方法通过class关键字，比如下面这样： class Person{ constructor(name,age){ this.name=name; this.age=age; } getInfo(){ ...
javascript 静态变量与实例变量
Phil_Young的博客
12-29 5438
javascript的静态变量例子与实例变量例子
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值