ES6知识总结------第3篇（class、Symbol、新的数据结构、模块化）

已于 2022-09-02 16:37:35 修改
阅读量417 收藏 5
点赞数 1
分类专栏： # es6 文章标签： es6 javascript 前端
于 2022-07-10 20:50:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fangqi20170515/article/details/125707832
版权

ES6知识总结------第3篇

一、class

1、class的写法

class 类名{
constructor(name,age) {
       //写属性
    }
}

  实例属性的新写法

class 类名{
	 //写属性
	属性=XXX;
}

  **代码示例：

class Person{
	a=111;
    //对象中的属性，写在constructor中
    constructor(name,age) {
        this.name=name;
        this.age=age;
    }
    //对象中的方法
    showName(){
        return '你好，我是'+this.name
    }
}
let p1=new  Person('李四',18);
console.log(p1);//Person{a:111, name: '李四', age: 18}
console.log(p1.showName());//你好，我是李四

2、 继承

class 子类 extends 父类{
constructor(){
		super(要继承的属性);
	}
}

  代码示例：

class Person {
        //对象中的属性，写在constructor中
        constructor(name = "小方同学", age = 18) {
            this.name = name;
            this.age = age;
        }

        //对象中的方法
        showName() {
            return '你好，我是' + this.name
        }
    }
	//定义一个类Worker继承Person
    class Worker extends Person {
        constructor(...args) {
            super(...args);//继承父类
        }
    }

    let p1 = new Person()
    let w2 = new Worker('赵六', 24);
    console.log(p1);
    console.log(w2);//{name: '赵六', age: 24, sex: '女'}

检查是否继承
Object.getPrototypeOf(子类)===父类

console.log(Object.getPrototypeOf(Worker) === Person);//true

总结：

  1. 类中的构造器不是必写的，要对实例进行一些初始化的操作，如需要指定属性时才写
  2. 如果A类继承了B类，且A类写了构造器，那么A类构造器中的super是必须调用的
  3. 类中所定义的方法，都是放在类的原型对象上的，供实例去使用

3、静态方法

  类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这被称为“静态方法”。父类的静态方法，可以被子类继承

class Person {
        //对象中的属性，写在constructor中
        constructor(name="张三", age=20) {
            this.name = name;
            this.age = age;
        }

        //对象中的方法
       static showAge(){
            return "我今年"+this.age+"岁"
        }
    }

    class Worker extends Person {
        constructor(...args) {
            super(...args);//继承父类
        }
    }

    let p1 = new Person();
    alert(Person.showAge());//通过类调用
    alert(p1.showAge())//通过实例调用，报错
    let w1 = new Worker();
    alert(w1.showAge());//通过实例调用，报错
    alert(Worker.showAge());//通过类调用

4、静态属性

  静态属性指的是Class本身的属性，而不是定义在实例对象上的属性；
  ES6明确规定，Class内部只有静态方法，没有静态属性。现在有一个提案提供了类的静态属性，写法就是在实例属性的前面，加上static关键字

class Person {
        static a=1;
        //对象中的属性，写在constructor中
        constructor(name="张三", age=20) {
            this.name = name;
            this.age = age;
        }
        test(){
            alert(this.a)
        }

    }

    class Worker extends Person {
        constructor(...args) {
            super(...args);//继承父类
        }
    }

    let p1 = new Person();
    p1.test();//undefined
    alert(Person.a);//1
    let w1 = new Worker();

5、私有方法和私有属性

  私有方法和属性，是只能在类的内部访问的方法和属性，外部不能访问。这是常见需求，有利于代码的封装，但是ES6不提供，只能公共变通方法模拟实现。在属性和方法前加#

    class Person {
        #sex = "男";
        //对象中的属性，写在constructor中
        constructor(name = "张三", age = 20) {
            this.name = name;
            this.age = age;
        }

        //对象中的方法
        showName() {
            return '你好，我是' + this.name
        }

        _showAge() {
            return "我的年龄是" + this.age
        }
        showSex(){
            return "我的性别:"+this.#sex
        }
    }
    let p1 = new Person();
    alert(p1.showSex());//我的性别:男
    alert(p1.sex);//undefined

二、Symbol

  ES6之前对象属性名都是字符串，这容易造成属性名的冲突，为了保证每个属性的名字都是表示独一无二的值ES6引 入Symbol

  Symbol是一种新的原始数据类型，表示独一无二的值。它是JavaScript 语言的第七种数据类型，前六种是: undefined、 null、布尔值(BooLean)、字符串(String) 、数值(Number)、对象(Object) 。

  Symbol值通过SymboL函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另-种就是新增的SymboL 类型。凡是属性名属于SymboL 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

  SymboL函数可以接受一个字符串作为参数，表示对SymboL 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

  SymboL. description

let s1=Symbol("s1");
    let s2=Symbol("s2");
    let json={
        [s1]:1//只能使用[]
    }
    console.log(s1,s2);
    console.log("描述信息",s1.description);
    json[s2]=666;//只能使用[]
    console.log(json);//{Symbol(s1): 1, Symbol(s2): 666}

  Symbol作为属性名，遍历对象的时候，该属性不会出现在for…in、for…of循环中，也不会被bject. keys()、object. getOwnPropertyNames()、JSON. stringify()返回。

三、新的数据结构

1、set

  它类似于数组，但是成员的值都是唯—的，没有重复的值。(可用于数组去重，这也是最简单的方法)

1-1、声明方式

let set1=new Set();
    set1.add(1);

或

let set1=new Set([1,4,9]);

1-2、相关方法

let set1=new Set([1,4,9]);

1、add()
  向set添加成员

set1.add(3);

2、delete(value)
  删除某个值，返回一个布尔值，表示删除是否成功。

set1.delete(1);

3、has(value)
  返回一个布尔值，表示该值是否为Set的成员。

console.log(set1.has(1));//false
console.log(set1.has(4));//true

4、clear():
  清除所有成员，没有返回值

set1.clear()
console.log(set1);//Set(0) {size: 0}

1-3、转为真正的数组

//方式1
console.log([...set1]);

//方式2
console.log(Array.from(set1));

1-4、长度

set.size

1-5、去重

  […new Set(arr)]

  链接: js中数组去重的方法

1-6、遍历

let set1 = new Set([1, 4, 9, 4, 3, 2]);

方法1：forEach

  通过这种方式无法获取到下标

set1.forEach((item)=>{
        console.log(item);
    })

方2：for-of

for (let i of set1){
        console.log(i);
    }

  keys()返回键名的遍历器
  values()返回键值的遍历器
  entries()返回键值对的遍历器

for (let i of set1.entries()){
        console.log(i);
    }

2、map

  键可以是任何数据类型的对象

2-1、声明方式

	const m = new Map();
    const o = {p: 'hello world'}
    m.set(o, 'content');

在这里插入图片描述

2-2、方法

const m = new Map();
const o = {p: 'hello world'}

1、set()

m.set(o, 'content');
m.set("a",1)

2、get()

console.log(m.get(o));//content

3、has()

console.log(m.has(o));//true

4、delete()

m.delete("a")

5、size

console.log(m.size);//1

6、clear()

m.clear()

2-3、遍历

	const m = new Map();
    const o = {p: 'hello world'}
    m.set(o,'content')
    m.set("a", 1);
    m.set("b", 3);
    m.set("c", 4);

方法1：forEach

m.forEach((value,key,map)=>{
        console.log(value);//键值
        console.log(key);//键名
        console.log(map);//遍历的数组
    })

方2：for-of

  keys()返回键名的遍历器
  values()返回键值的遍历器
  entries()返回键值对的遍历器

for(let i of m){
        console.log(i);
    }

在这里插入图片描述

四、模块化

  一个js文件就是一个模块

1、导出 export

//方式1：导出变量
export let a=1;

//方式2：导出对象
export {a}
//取别名
export {a as xiao}

//方式3：使用default
let a = 0;
let b = 1;
export default {
    a, b
}

2、引入

  type的类型为module

<script type="module">
import '../js/a.js';//引入整个文件全部加载
import {a} from '../js/a.js';

import * as module from "../js/a.js";
import {a as bieming} from '../js/a.js';//去别名
</script>

3、动态引入

  模块加载完后再执行里面的函数

import ("../js/a.js").then(res=>{
        console.log(res);
    })

4、es6模块化

  1、必须放在服务器环境中
  2、import ‘xxx’ 直接写路径，相当于引入文件
  3、关于路径可以写相对也可以写绝对
  4、多次引入相同的模块，只相当于一次
  5、引入模块的时候，会预加载提升到开头
  6、模块化的写法必须是严格模式，es6所有都是严格模式

5、es6模块化好处

  1、一个模块一个js文件
  2、可以安需求加载，如果不需要可以不加载
  3、模块小，便于维护、减少冗余
  4、每个模块都有自己的作用域，变量都是私有变量

学习前端的渣渣
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Symbol配合模块化机制和类机制的使用例子
C05230的博客
09-11 197
注意： 由于模块化机制涉及到模块化语法，这是es6的一种语法，兼容性较差，因此需要转码，转成es5, 所以需要新建一个项目，在当前项目下安装babel，步骤为：1.初始化：npm init -y 2.安装babel:cnpm install babel-cli --save-dev 3.安装预设：babel install babel-preset-es2015 --save-dev 4.创建.babelrc的文件，边写入内容{“presets”:[“es2015”]} 5.为简化后期频繁转码操作，可修改p
ES6的Class类和Symbol符号
weixin_45214220的博客
12-27 376
class类 ES6的class可以看作只是一个语法糖，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法 class 函数名{ constructor(){ // 构造器 }//必须要写，就算不写也会默认添加 } class类的使用注意点 可以写成计算属性名 const person="text" class Person{ [person+"1"](){ console.log("大哥大姐过年好") } } const a=new Person
简述ES6新增的语法 二（class 类 和Symbol 符号）
TXW6666的博客
03-21 494
ES6中 新增class（类）关键字 创建构造函数 class的基本语法： class它跟普通构造函数的一个主要区别： class必须使用new调用，不用new调用会报错。普通构造函数不用new也可以执行。 constructor方法 constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的const...
Class类和Symbol 值类型
m0_68293816的博客
04-09 347
class 类（对象的模板 借助他可以生成对应的对象 抽取对应的公共特点）。Symbol是es6新增的类型 这个是值类型 独一无二的值
ES6 Class使用Symbol创建私有成员变量
程序达人
01-04 5241
为什么要Symbol Symbol的目的就是为了实现一个唯一不重复不可变的值，任何一个Symbol都是唯一的，不会和其他任何Symbol相等。 很多时候其实我们都需要用到唯一不重复的值。比如我们给一个DOM节点做动画，那么我们需要判断动画是否正在执行。 这个时候一般的做法是给DOM节点加上一个属性（或者classname之类的）做一个标记，比如下面这样： d.isMoving
es6-css-minify：轻松缩小VS Code中CSS和JavaScript
02-05
JS＆CSS缩小器 如果您发现此扩展有用，并希望支持进一步的开发，请考虑。 操作系统状态Linux和MacOS 视窗 一个简单的Javascript和CSS缩小器。 当打开.js或.css文件时，状态栏中将出现一个Minify按钮。...
html-es6-template-loader:Webpack加载器将HTML解析为ES6模板字符串
05-15
WEBPACK-HTML ES6模板加载器 Webpack加载器将HTML解析为ES6模板字符串 动机 该加载器主要用于香草Javascript项目（无模板引擎），因为它使用ES6字符串模板运算符（反引号：``”将导入的html文件包围起来，使您能够将...
es6-string-html：es6多行字符串中的突出显示代码
02-05
在es6多行字符串中添加了对代码的语法突出显示支持： HTML（包括带引号和未引号的html的atts） SQL 社区 在ES6模板文字中突出显示CSS 在python多行字符串中突出显示SQL代码 在多行字符串中突出显示JS 安装 从扩展...
d3-es6-样板：ES6-D3-Babel-SCSS-Webpack样板
02-04
然后，安装依赖项： $ npm install 要开始运行，请执行以下操作： $ npm start 您应该在看到一个新的浏览器点击打开，标题为“ D3 Boilerplate”。 从那里开始，您可以在app目录中开发自己的代码。 完成编码后，请...
es6-umd-module-howto:用于从ES6 JavaScript创建通用模块应用程序的可扩展样板
05-17
该模块由三个ES6类Base ， Foo和Bar ; 但它仅将其中两个暴露为MyModule.Foo和MyModule.Bar 。 此配置非常简单，但可扩展以编写功能非常丰富的模块，例如three.js（该模块提供了许多类，例如THREE.Scene ， THREE....
Java编译（二） Java前端编译：Java源代码编译成Class文件的过程
热门推荐
tjiyu的博客
12-21 2万+
在上篇文章中了解到了Java前端编译 JIT编译 AOT编译各有什么优点和缺点，下面详细了解Java前端编译：Java源代码编译成Class文件的过程；我们从官方JDK提供的前端编译器javac入手，用javac编译一些测试程序，调试跟踪javac源码，看看javac整个编译过程是如何实现的。
ES6中class与symbol简介
Jaden
08-28 740
一、新增数据类型     ES5中的数据类型有：undefined、null、object、number、string、boolean、function；     ES6中新增数据类型：symbol     ES6中新增类数据结构：class     1、symbol         概述：新的数据类型，表示独一无二的值；         （1）基本用法
Es6 Class(类)&类的继承
weixin_41989717的博客
09-10 211
Es6 Class(类)&类的继承 JavaScript语言中，生成实例对象的传统方法是通过构造函数。 ES6引入了Class(类)这个概念，通过class关键字，可以定义类 构造函数 constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。 一个类中必须有constructor方法 class Person{ constructor(){} } 实例方法&实例属性 定义在类体中的方法是实例方法 定义在类体中的属性是实例属性
ES6解构嵌套对象
weixin_33725126的博客
12-04 2121
让我们先回忆一下ES6的对象解构，本文介绍各种ES6的对象解构用法，你用过哪一种？ 最基本的解构 在对象中提取某个字段 const user = { id: 123, name: 'hehe' }; const {name} = user; console.log(name); //prints: hehe 解构并使用别名 有时接...
ES6_对象结构，对象结构别名，对象结构默认值
小歪博客
04-11 2432
只有undefined的时候才能生效 var {x=3} = {x:10} //x=10 var {x=3} = {}; //x=3 var {x,y=5} = {x:1}; //x=1,y=5 var {x:a=10,y=20} = {y:10}; //a=10,y=10 var {x:a=10}...
common.js和es6中模块引入的区别
He_9a9的博客
06-05 1116
common.js和es6中模块引入的区别
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 526
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 366
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
最新发布
乐闻世界
06-10 1336
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
ES6-ES12新特性
07-20
ES6-ES12是JavaScript的不同版本，每个版本都引入了新的特性和改进。以下是一些ES6到ES12的新特性的示例： ES6（2015年）： 1. 箭头函数：简化了函数的语法。 2. 模板字面量：使用反引号(`)来创建多行字符串和插入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值