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

最新推荐文章于 2022-05-16 14:15:52 发布
原创 最新推荐文章于 2022-05-16 14:15:52 发布 · 315 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ecmascript #javascript #html5 #map #类

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>
ES6新特性_ES6语法糖_class静态成员---JavaScript_ECMAScript_ES6-ES11新特性工作笔记034
添柴程序猿的专栏
01-30 464
再来看一下class的静态成员 可以看到上面是es5的写法,我们写了个Phone这个函数,相当于一个类 然后给这个Phone类添加了change这个方法, 然后我们创建了Phone这个实例对象. 然后我们输出nokia.name 可以看到是undefined. 这里说明啥?说明Phone.name这个声明的这个属性,是类的属性,而不是实例的属性对吧. 所以实例拿不到这个name 然后我们去调用这个change方法,去看看也出错了 这说明什么? 说明这个Phon...
HashMap重写实现
01-15
HashMap重写实现 轻量级实现 使用自定义的轻量对象HashObjectMap替代jdk的HahMap HashMap里的Entry占用较大内存，可以用自己实现的轻量级容器替换，步骤如下： 1、 缓存的对象需要继承BaseHashObject /** * 这个类主要完成HashMap的一些基本操作。 * 如果使用HashObjectMap来存储数据，则必须继承该类。 */
javaScript的Map数据类型
m0_67266787的博客
03-21 2704
一、Map数据类型产生的背景 JavaScript 天生就有缺陷 34岁的系统程序员Brendan Eich只用10天时间就把Javascript设计出来了。（多肽语言） 所以javaScript自然是有缺陷的，所以就有了javaScript的更新版本 ES6更新版本 ES6版本 是一个非常重要的JavaScript版本 在 ES6版本时,对JavaScript的语法缺陷做了补充和修改 提出很多重要的语法结构：Class类、箭头函数、 Map、SET数据类型、方法函数等 让 JavaScript从
12.3 ES6 新特性- Set、Map、class 类和模块化
qq_42874319的博客
06-29 556
文章目录1. Set2. Map3. class 类3.1 类的定义与声明3.2 类的属性3.3 类的方法3.4 类的实例化3.5 继承4. 模块化4.1 特点4.2 export 与 import4.3 import 命令的特点4.4 as 的用法5. 数值扩展 1. Set ES6 提供了新的数据结构Set（集合）。类似于数组，但Set 中元素值都是唯一的，Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。 集合实现了iterator 接口，所以可以使用『扩展运算符』和『for…of
ES6 基本语法2（class、Set和Map数据结构）
小葵坤_易安的博客
03-20 523
五、class的基本语法 1.类 （1）ES6通过class关键字，可定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } 说明： 定义了一个“类”，可以看到里...
JS中map方法的使用
m0_59168984的博客
11-26 2296
JS中map方法的使用
ES6-集合、Map、class
mantou_riji的博客
05-16 775
文章目录SetSet声明集合的属性和方法Set实例MapMap的声明格式Map的属性和方法Classclass定义格式实例化对象class静态成员引入：换到calss Set ES6提供了新的数据结构 set(集合)。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用扩展运算符...和for ...of...进行遍历. Set声明 格式：let 集合名 = new Set([集合元素1,集合元2素,...]) 集合的属性和方法 集合本是也是一个对象,他有属性和方法： set.
玩转ES6（四）Set、Map、Class类和decorator 装饰器
frontend_frank的博客
09-20 420
Setset是放不重复的项，也就是去重let set = new Set([1,2,3,4,3,2,1]) console.log(set) // Set { 1, 2...
JS实现Map集合的实现
CNSYEAR BLOG
07-24 1万+
JS实现Map集合的实现（自定义对象） /** * Simple Map * * * var m = new Map(); * m.put('key','value'); * ... * var s = ""; * m.each(function(key,value,index){ * s += index+"...
js map()定义与用法
kangkang_style的博客
01-22 2万+
基本用法跟forEach方法类似     map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。     map() 方法按照原始数组元素顺序依次处理元素。         注意： map() 不会对空数组进行检测。         注意： map()返回的是新数组，map() 不会改变原始数组。     语法：         array.map(function(cur...
js中的Map对象
supercolorpower的博客
02-19 456
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...
JS创建map结构以及map中的方法
热门推荐
qq_40144558的博客
06-22 7万+
js新的数据结构创建map的时候网上有很多，但是有时候你会发现很多方法都不能使用，这里我简单写一写常用的以及怎样去查看map的哪些方法，靠人不如靠己，博客抄来抄去，看起来还浪费时间一般我创建的时候就用这两种就够了创建：遍历：长度：删除：新增：像我一样的Java程序员就没必要去翻博客翻API去找来找去的真的浪费时间，可以直接创建一个map对象，然后再页面进行debug查看该数据结构的原型链，原型链里...
JS中Map的用法
u010227042的博客
08-01 1030
声明 var map = new Map(); 设值 map.set("key","value"); 取值 map.get("key"); 判断key是否存在 map.has("key"); 删除key map.delete("key");
JS之map用法初探
this_ITBoy的博客
11-10 7059
一个项目的时候出现了一个获取品牌列表，并按照首字符的拼音或者英文的首字母A-Z排序的需求，如图所示：   由于html页面里面还用到了art-template的模板循环，最开始写出来的时候列表是循环了出来，但是并没有按照A-Z的分组，而是很多A,A,A，很多B,B,B，很多C,C,C，等等，问题困扰了很久，后来经人帮助用map的键值对方法得到了解决。 html代码如下：
JS中Map以对象作为键的问题
sky1679的博客
03-04 5362
JS中Map以对象作为键的问题 ![《深入理解es6》](https://img-blog.csdnimg.cn/20190304141046943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NreTE2Nzk=,size_16,co...
JS自定义一个Map类
weixin_33890526的博客
12-30 214
2019独角兽企业重金招聘Python工程师标准>>> ...
JS Map对象排序
04-09 3万+
JS 中Map对象会按照元素的写入顺序来保存，有时我们想对Map中的对象进行排序应该怎么做呢？参考别人的回答这里做一个小小的总结； 假如有以下map var map=new Map(); map.set("b","8"); map.set("c","10"); map.set("a","1"); map.set("d","7"); map.set("e","3"); 现在想根据v...
ES6 JavaScript实现类继承的方法详解
总结来看，“js代码-ES6的方法实现继承”所涵盖的知识点非常丰富，包括但不限于：`class` 语法结构、`extends` 实现继承、`super` 的双重用途（调用父类构造函数和父类方法）、方法重写与多态、静态成员继承、原型链...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值