ES6-ES11笔记(2)

news2024/11/15 17:24:13

笔记
(https://www.bilibili.com/video/BV1uK411H7on?p=30&vd_source=3cf72bb393b8cc11b96c6d4bfbcbd890)

1.ES6

1.14集合介绍与API

1.14.1 set常用的api

//声明一个set
//set 里面的元素是唯一的,会自动去重
let s1 = new Set(); //创建
//可以传入可以迭代的数据
let s2 = new Set([33,1,2,3,3,5,7,10]) //元素唯一,自动去重
console.log(s2);

//添加元素
s2.add(999)
console.log(s2);

//删除元素
s2.delete(999)
console.log(s2);

//set长度
console.log(s2.size);

//has 方法,是否包含某个元素
console.log(s2.has(999));

//foreach
// s2.forEach(element => {
//     console.log(element);
// });

//for of
// for (const iterator of s2) {
//     console.log(iterator);
// }

//set 转数组
let array01 = Array.from(s2)
console.log(array01);

//清除
s2.clear()
console.log(s2);

1.14.2 数组的一些api

//1.数组去重
let s1 = new Set([1,1,2,3,2,3,5])
let array01 = Array.from(s1)
console.log(array01);


//2.求交集
let array02 = [1,2,3,4,5,6]
let array03 = [5,6,7]
let s2 = new Set(array02)
let s3 = new Set(array03)
let r1 = array02.filter(item=>s3.has(item))
console.log(r1);

//3.并集
let r3 = Array.from(new Set([...s2,...s3]))
console.log(r3);

//4.差集
let r2 = array02.filter(item=>!s3.has(item))
console.log(r2);

1.14.3 Map的一些api

//创建一个空的map
let m1 = new Map()
console.log('m1',m1);

//添加元素
m1.set('k1','v1')
m1.set('k2','v2')
m1.set(99,'v3')

console.log('m1',m1);

//删除元素
m1.delete(99)
console.log('m1',m1);

//获取元素
console.log(m1.get('k2'));

//清空
// m1.clear()
// console.log('m1',m1);

//遍历
// for (const v of m1) {
//     console.log(v);
// }

//长度
console.log(m1.size);

1.15class类

在这里插入图片描述
class初体验

// es5的方法,用构造函数实例化一个对象
function Phone(brand,price){
    this.brand = brand;
    this.price = price;
}

//添加方法
Phone.prototype.call=function(){
    console.log("我可以打电话");
}

//实例化对象
let huawei = new Phone('华为',599)
huawei.call()
console.log(huawei);

//es6的class
class SmartPhone{
    //构造方法,名字固定
    constructor(brand,price){
        this.brand = brand;
        this.price = price;
    }

    //必须使用 方法名(){}, 不能使用 方法名:function()的方式
    call(){
        console.log('我可以打电话2');
    }
}

let oneplus = new SmartPhone('一加','999')
oneplus.call();
console.log(oneplus);

1.15.1class静态成员

//es5的构造函数
function Phone(){

}

//这个是函数对象的属性,(类似java的静态常量,但是在js里面这个是和实例属性和函数属性是不相同的)
Phone.name="手机"
Phone.play = function(){
    console.log("我可以玩游戏!!!");
}

//这个属于原型对象,js的对象可以访问
Phone.prototype.size=5  

let p1 = new Phone()
// console.log(p1.name);//undefined
// console.log(p1.play());//报错
console.log(p1.size);


//es6
class SmartPhone{
    // 静态属性，只属于类，不属于对象实例，这和java有些区别,js实例无法访问这些静态属性
    static name='手机'
    static play(){
        console.log('我可以玩游戏!!123');
    }


}
let p2 = new SmartPhone();
console.log(p2.name);//undefined
console.log(SmartPhone.name);//手机

1.15.2 ES6-ES5构造函数继承

ES5的继承

<script>
    //es5的构造函数继承继承
function Phone(brand,price){
    this.brand = brand;
    this.price = price;
}

//添加方法
Phone.prototype.call=function(){
    console.log("我可以打电话");
}


function SmartPhone(brand,price,color,size){
    Phone.call(this,brand,price) //继承phone的一些现有的函数和属性
    this.color = color;
    this.size = size;
}
//设置子级构造函数的原型
SmartPhone.prototype = new Phone;
SmartPhone.prototype.constructor = SmartPhone;

SmartPhone.prototype.play=function(){
    console.log('我可以打游戏');
}

let oneplus = new SmartPhone('一加',999,'绿色',5)
oneplus.call();
console.log(oneplus);
</script>

ES6的继承 这个java的非常相似

<script>
    //es6的继承
class Phone{
    constructor(brand,price){
        this.brand = brand;
        this.price = price;
    }
    call(){
        console.log("我可以打电话");
    }
}



class SmartPhone extends Phone{
    constructor(brand,price,color,size){
        super(brand,price)
        this.color = color;
        this.size = size;
    }
    photo(){
        console.log('我可以拍照');
    }
}


let oneplus = new SmartPhone('一加',999,'绿色',5)
oneplus.photo();
oneplus.call();
console.log(oneplus);
</script>

1.15.3ES6子类对父类方法的重写

<script>
    //es6的继承
class Phone{
    constructor(brand,price){
        this.brand = brand;
        this.price = price;
    }
    call(){
        console.log("我可以打电话");
    }
}



class SmartPhone extends Phone{
    constructor(brand,price,color,size){
        super(brand,price)
        this.color = color;
        this.size = size;
    }
    call(){
        console.log('我可以视频电话----注意这是完全重写了父类的方法');//注意这是完全重写了父类
    }
}


let oneplus = new SmartPhone('一加',999,'绿色',5)
oneplus.call();
console.log(oneplus);
</script>

1.15.4 class中getter和setter

<script>
     class Phone{
        get price(){
            console.log('价格被获取了');
            return 100
        }

        set price(newVal){
            console.log('价格被修改了');
        }
     }

    //  get set 是对某一个属性的获取和修改
    //使用
    let p1 = new Phone();
    p1.price = 99  //赋值会调用set方法
    console.log(p1.price); //p1.price 会调用get方法
</script>

1.15.5 数值的拓展

1.15.5.1 Number.EPSILON 这是js表示的最小精度,只要误差小于这个值,那么就代表这两个值是一样的了
js 0.1+0.2是不等于0.3，可以用Number.EPSILON判断 0.1+0.2 和 0.3的误差，只要小于Number.EPSILON就可以相当于相等了，这是一个例子，不是十分的严谨
参考 https://blog.csdn.net/ixygj197875/article/details/79117229

1.15.5.2 数字的各种进制

let b = 0b1010;  //零b开头  二进制
let o = 0o1010; //零欧开头  八进制
let d = 100; //十进制
let x = 0xff; //零x开头  十六进制

console.log输出以上变量都是十进制

1.15.5.3 Number.isFinite`

<script>
    //Number.isFinite 判断是不是一个有限的数
    console.log(Number.isFinite(100/0)); //这是个错误的数，不是有限的数 false
    console.log(Number.isFinite(0));//true
    console.log(Number.isFinite(Infinity)); //false
</script>

1.15.5.4 Number.isNaN`

/判断数字是不是NaN
    console.log(Number.isNaN(NaN));

**1.15.5.5 Number.parseInt Number.parseFloat **`


    // parseInt parseFloat转为整数
    console.log(Number.parseInt('放大看了')); //NaN
    console.log(Number.parseInt('999'));//999
    console.log(Number.parseInt('3156456不能'));//3156456
    console.log(Number.parseInt('3.156456不能'));//3
    console.log(Number.parseFloat('3.156456不能'));//3.156456

1.15.5.6 其他

    //Number.isInteger 判断是不是整数
    console.log(Number.isInteger(5));//true
    console.log(Number.isInteger(5.3));//false

    //Math.trunc 将数字的小数抹去
    console.log(Math.trunc(5.3));

    //Math.sign 判断正数,负数 0
    console.log(Math.sign(2000));//1
    console.log(Math.sign(0));//0
    console.log(Math.sign(-2000));//-1

1.16 对象函数的拓展

<script>
    //Object.is 判断值是否相对
    console.log(Object.is(120,120));//true
    console.log(Object.is(NaN,NaN));//true   
    console.log(NaN===NaN);//false   

    //Object.assign 对象的合并(后面的会把前面的覆盖)
    let config1={
        name:"张三",
        password:"123456",
    }
    let config2={
        name:"李四",
        password:"789",
        other:"1"
    }

    console.log(Object.assign(config1,config2));

    //Object.setPrototypeOf 设置原型对象
    let city={
        name:"北京"
    }

    let other={
        a:[1,2,3]
    }

    Object.setPrototypeOf(city,other)
    console.log(Object.getPrototypeOf(city));
    console.log(city);
</script>

1.17 ES6的模块化

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

例子
待引入的js文件

//第一种暴露方式
// export let school= "牛牛牛学校"
// export function teach(){
//     console.log('教学');
// }

//第二种暴露方法
// let school= "牛牛牛学校"
// function teach(){
//     console.log('教学');
// }

// export{school,teach}

//第三种暴露方式
export default{
    school:"牛牛牛学校",
    teach(){
        console.log('教学');
    }
}

引入js文件的html文件,需要以服务器运行

<script type="module">
    //第一种导入方式,适用于各种暴露方式
    // import * as m1 from "./m1.js"
    // console.log(m1);

    //第二种,解构赋值的形式,适用于第一种和第二种暴露方式
    // import {school as school2,teach} from "./m1.js"  //可以起别名
    // import {default as m3} from "./m1.js"  //第三种暴露方式,接收default,还要起别名
    // console.log(school2);
    // console.log(teach);

    //第三种 简便形式,针对默认暴露,第三种
    import m3 from "./m1.js"
    console.log(m3);
</script>

1.17.2 浏览器使用ES6模块化方式二

https://www.bilibili.com/video/BV1uK411H7on?p=45&vd_source=3cf72bb393b8cc11b96c6d4bfbcbd890

1.17.3 babel对ES6模块化代码转换

https://www.bilibili.com/video/BV1uK411H7on?p=46&vd_source=3cf72bb393b8cc11b96c6d4bfbcbd890

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/126289.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Windows服务器调整TLS1.2加密套件

Windows服务器调整TLS1.2加密套件

由于部分服务器默认不支持&#xff1a;TLS1.2加密条件&#xff0c;这会导致谷歌、火狐等浏览器无法访问网站&#xff0c;这种情况下需要调整加密条件。 支持TLS1.2协议的服务器操作系统需要&#xff1a;windows 2008R2 IIS7以上。 注意&#xff1a;微软说明windows 2003、win…
阅读更多...
软件测试期末复习（二）试题及答案

软件测试期末复习（二）试题及答案

文章目录试卷答案试卷 一、选择题(每题 2 分&#xff0c;共 20 分) 1、下面关于软件测试的说法&#xff0c;_______是错误的。 A 软件测试就是程序测试 B 软件测试贯穿于软件定义和开发的整个期间 C 需求规格说明、设计规格说明都是软件测试的对象 D 程序是软件测试的对象 2…
阅读更多...
github工具之OA综合利用python

github工具之OA综合利用python

文章目录0x01 下载地址0x02 主要功能0x03 使用方法0x04 参数使用OA v11.6 report_bi.func.php SQL注入漏洞OA v11.6 print.php 任意文件删除漏洞&#xff0c;删除auth.inc.php中OA v11.8 api.ali.php 任意文件上传漏洞OA v11.8 logincheck_code.php登陆绕过漏洞免责声明0x01 下…
阅读更多...
adb工具包环境变量配置

adb工具包环境变量配置

官方下载 Android SDK Platform-Tools 一、关于 adb Android SDK Platform-Tools 是 Android SDK 的一个组件。它包含与 Android 平台进行交互的工具&#xff0c;主要是 adb 和 fastboot。   adb是什么? 他的全称叫安卓调试桥&#xff0c;也就是Android debug bridge &…
阅读更多...
AAAI2023 | 针对联邦推荐场景的非定向攻击与防御

AAAI2023 | 针对联邦推荐场景的非定向攻击与防御

嘿&#xff0c;记得给“机器学习与推荐算法”添加星标TLDR&#xff1a;今天跟大家分享一篇通过利用聚类算法来操纵物品嵌入特征以此针对联邦推荐场景进行非定向攻击的工作&#xff0c;随后作者针对这一攻击又提出了一种基于一致性的对应防御机制&#xff0c;该论文已被AAAI2023…
阅读更多...
如何在Power BI中使用Python导入数据

如何在Power BI中使用Python导入数据

在这篇文章中&#xff0c;我们将学习如何在Power BI中使用Python编程语言进行数据源化。 简介 Python可以说是业界最流行、最普遍的编程语言之一。一方面&#xff0c;Python可用于网络和应用程序开发&#xff0c;另一方面&#xff0c;它在数据世界中也非常流行&#xff0c;特…
阅读更多...
生产制造业ERP管理系统能解决哪些仓库管理难题？

生产制造业ERP管理系统能解决哪些仓库管理难题？

仓库管理够不够好&#xff0c;安不安全&#xff0c;直接关系到生产制造企业的发展。要知道制造型企业的大部分“身家”&#xff0c;都在仓库里了。来料是否及时&#xff0c;物料是否齐套&#xff0c;库存是否安全&#xff0c;配件品质是否合格&#xff0c;库容是否足够&#xf…
阅读更多...
【蓝桥杯备赛系列 | 简单题】素数判断 字符串输入输出

【蓝桥杯备赛系列 | 简单题】素数判断 字符串输入输出

&#x1f935;‍♂️ 个人主页: 计算机魔术师 &#x1f468;‍&#x1f4bb; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 蓝桥杯竞赛专栏 | 简单题系列 &#xff08;一&#xff09; 作者&#xff1a; 计算机魔术师 版本&#xff1a; 1.0 &#xff08…
阅读更多...
[leetcode.10]正则表达式匹配

[leetcode.10]正则表达式匹配

&#xff08;1&#xff09;题目分析如下 题目要求完成一个正则表达式的匹配&#xff0c;其中s为目标串&#xff0c;p为正则串 .符号代表任何字符&#xff0c;*符号代表把前一个字符重复n次&#xff08;可能为0次&#xff09; &#xff08;2&#xff09;具体思路 一开始的时…
阅读更多...
c++算法基础必刷题目——贪心

c++算法基础必刷题目——贪心

文章目录贪心1、拼数2、排座椅3、矩阵消除游戏4、华华听月月唱歌贪心 贪心算法&#xff08;greedy algorithm &#xff0c;又称贪婪算法&#xff09;是指&#xff0c;在对问题求解时&#xff0c;总是做出在当前看来是最好的选择。也就是说&#xff0c;不从整体最优上加以考虑&a…
阅读更多...
《图解TCP/IP》阅读笔记（第八章 8.5）—— WWW知多少？

《图解TCP/IP》阅读笔记（第八章 8.5）—— WWW知多少？

8.5 WWW 看到这章的名字&#xff0c;对于日常上网冲浪的我们而言&#xff0c;应该是再熟悉不过了。这不就是常见网址前的那三个字母&#xff0c;号称万维网&#xff08;WWW&#xff0c;World Wide Web&#xff09;的东西吗? 确实&#xff0c;我们本篇文章就要介绍与之相关的…
阅读更多...
Dimitra 2022: 年度回顾

Dimitra 2022: 年度回顾

大家好&#xff0c; 我首先要感谢 Dimitra 社区和我们所有的投资者在 2022 年期间的支持。俗话说&#xff0c;“这些都会过去”&#xff0c;2022 年的宏观加密环境尤其具有挑战性&#xff0c;一些非常糟糕的行为者给广泛的加密行业带来很多痛苦。 2023 年可能是监管框架最终显…
阅读更多...
公司来了个新测试开发，一副毛头小子的样儿，哪想到......

公司来了个新测试开发，一副毛头小子的样儿，哪想到......

最近公司来了个新同事&#xff0c;学历并不高&#xff0c;而且大学也不是计算机专业的&#xff0c;今年刚满25岁。。 本以为也是来干点基础的活混混日子的&#xff0c;结果没想到这个人上来就把现有项目的性能优化了一遍&#xff0c;直接给公司节省了不少成本&#xff0c;这种…
阅读更多...
Qt通过QProcess启动进程并传递命令行参数

Qt通过QProcess启动进程并传递命令行参数

目录QProcess启动外部程序的两种方式依赖式分离式&#xff1a;启动进程前的预处理设置启动路径设置启动命令参数启动的状态更多说明Public FunctionsSignals设计一个拉起进程的程序基本设计思路效果图核心代码控件对象header file&#xff08;头文件&#xff09;member variabl…
阅读更多...
java比较器

java比较器

一、说明: Java中的对象&#xff0c;正常情况下&#xff0c;只能进行比较: 或 ! 。不能使用 >或 如何实现? 使用两个接口中的任何一个: Comparable 或 Comparator 二、Comparable的使用(自然排序) 1.Comparable接口的使用举例: 1.像string、包装类等实现了Comparable接口…
阅读更多...
智能优化算法：协作搜索算法-附代码

智能优化算法：协作搜索算法-附代码

智能优化算法&#xff1a;协作搜索算法 摘要&#xff1a;协作搜索算法( Cooperation search algorithm &#xff0c;CSA)是 Zhong-kai Feng等 于 2021 年提出的一种新型元启发式优化算法 。 该算法受现代企业团队协作行为的启发&#xff0c;具有寻优能力强&#xff0c;收敛速度…
阅读更多...
Seata-AT模式数据源代理-JDBC中的关键知识点

Seata-AT模式数据源代理-JDBC中的关键知识点

背景 Seata 对业务无侵入是通过数据源代理实现的&#xff0c;从下图中可看出&#xff0c;数据源代理的实现涉及到 DataSource、Connection 以及 Statement&#xff0c;这几个关键知识属于 JDBC 的范畴&#xff0c;所以本篇从 JDBC 的视角对他们进行介绍。 一、JDBC 概述 JDBC…
阅读更多...
【算法】面试题 - 回溯算法解题套路框架

【算法】面试题 - 回溯算法解题套路框架

回溯算法解题套路框架前言回溯算法的框架排列&#xff08;元素无重不可复选&#xff09;46. 全排列解析子集&#xff08;元素无重不可复选&#xff09;78. 子集解析组合&#xff08;元素无重不可复选&#xff09;77. 组合解析子集/组合&#xff08;元素可重不可复选&#xff09…
阅读更多...
免费PDF转Word？有这几个网站就够了

免费PDF转Word？有这几个网站就够了

如果您想使用 Word 文档&#xff0c;您可能需要将PDF 转换为 Word&#xff0c;以便您可以随意使用该文档。将 PDF 转换为 Word 的过程需要一个好的 PDF 转换器。在本文中&#xff0c;您将探索可用的 5个免费转换器&#xff0c;其中包括 奇客PDF 和PDF2Go。 最好的 6 个 PDF 转 …
阅读更多...
【unity笔记】图解Vector3.SignedAngle（）方法的返回值

【unity笔记】图解Vector3.SignedAngle（）方法的返回值

首先看一下官方文档的说明&#xff1a; public static float SignedAngle (Vector3 from, Vector3 to, Vector3 axis); from测量角度差的源向量。to测量角度差的目标向量。axis一个向量&#xff0c;其他向量将绕其旋转。返回 from 与 to 之间的有符号角度&#xff08;以度为单…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023