ECMAScript6

课程链接

目录

  • 相关介绍
    • 什么是ECMA
    • 什么是ECMAScript
    • 为什么学习ES6
  • let
  • const
  • 变量解构赋值
  • 模板字符串
  • 对象简化写法
  • 箭头函数
  • 函数参数的默认值
  • rest参数
  • 扩展运算符
  • Symbol
  • 迭代器
  • 生成器函数与调用
  • Promise
    • 介绍与基本用法
    • Promise封装读取文件
    • Promise.prototype...then方法
    • Promise.catch方法
  • Set
  • Map
  • class类
    • 介绍与初体验
    • 静态成员
    • 类的继承
    • 重写
    • get和set
  • ES6的数值扩展
  • 对象方法扩展
  • 模块化
  • 引入NPM包

相关介绍

什么是ECMA

中文名称是欧洲计算机制造商协会,这个组织的目标是评估、开发和认可电信和计算机标准。

什么是ECMAScript

是Ecma通过ECMA-262标准化的脚本程序设计语言

为什么学习ES6

  • ES6的版本变动内容最多,具有里程碑意义
  • ES6加入许多新的语法特性,变成实现更简单
  • ES6是前端发展趋势,就业必备技能

let

  • 声明变量
// 声明变量
let a;
let b,c;
let e = 100;
let f = 100, g = 200,h = [];
  • 变量不能重复声明
  • 块级作用域
    只在代码块里有效
  • 不存在变量提升
console.log(name); // undefined
var name = "qiu";
console.log(name); // 报错
let name = "qiu";
  • 不影响作用域链

const

  • 声明常量
// 声明常量
const AGE = 18;
console.log(AGE);
  • 一定要赋初始值
  • 一般常量使用大写
  • 常量值不能修改
  • 块级作用域
  • 对于数组和对象的元素修改,不算做对常量的修改,不会报错(引用地址并没有变)

变量解构赋值

允许直接从数组和对象中提取值并赋值

  1. 数组的解构
const hobby = ["吃","喝","玩","乐"];
let [h1,h2,h3,h4]= hobby;
console.log(h1); //"吃"
console.log(h2); //"喝"
console.log(h3); //"玩"
console.log(h4); //"乐"
  1. 对象的解构
const person = {name: "Peter",age: 12,sleep(){console.log("zzzzzzzz");}
}
let {name, age, sleep} = person;

模板字符串

  • 声明
// 模板字符串
let str = `模板字符串`
  • 内容中可以直接出现换行符
let str2 = `<ul><li>苹果<li><li>香蕉<li><ul>`;
  • 变量拼接
const fruits = ["苹果","香蕉","橘子","梨"];
let str3 = `我喜欢吃${fruits[2]}`;

对象简化写法

// 对象简化写法
let name = "lisa";
let sex = 1;
const student = {name,sex
}

箭头函数

// 箭头函数let fn = (a,b) =>{return a + b;}

特性:

  1. this是静态的,this始终指向函数声明时所在作用域下的this值 (没有自己的this,指向外部this)
let getName = ()=>{console.log(this.name);
}
function getName2() {console.log(this.name);
}
window.name = "window";
const school = {name:"TUST",
}getName(); //"window"
getName2(); //"window"
getName.call(school); //"window"
getName2.call(school); //"TUST"
  1. 不能作为构造函数实例化对象
  2. 不能使用arguments变量
  3. 箭头函数的简写
    1)当形参有且只有一个的时候,可以省略小括号
let add = n => {return n + 1;
}

2)当代码题只有一条语句的时候,可以省略花括号
此时return也必须省略,且语句的执行结果就是函数的返回值

let add = n => n + 1;

函数参数的默认值

  • 一般把有初始值的形参放到最后
// 允许给函数参数赋值初始值
function add(a,b,c = 10) {return a + b + c;
}
add(1,3); //14
  • 与结构赋值结合使用
// 结合结构赋值使用
functionconnect({host, username, pass, port=3306}) {console.log(host, username, pass, port);
}
connectInfo = {host: "localhost",username: "root",pass: "root",port: 8080
}
connect(connectInfo);

rest参数

用于获取函数的实参,同来代替arguments
与arguments不同的是,arguments是对象,rest是数组
有多个rest参数必须放到最后function date(a,b,...args){}

function date(...args){console.log(args); // ['苹果', '香蕉', '橘子', '梨']
}
date("苹果","香蕉","橘子","梨");

扩展运算符

将数组转换为逗号分隔的参数序列

const fruits = ['苹果', '香蕉', '橘子', '梨'];
date(...fruits); // 等同于date("苹果","香蕉","橘子","梨");

Symbol

Symbol特点

  1. Symbol的值是唯一的,用来解决命名冲突的问题
  2. Symbol值不能与其他数据进行运算
  3. Symbol定义的对象属性不能使用for…in循环遍历,但是可以使用Reflect.ownKeys来获取对象的所有键名
let s = Symbol();
console.log(s,typeof s); //Symbol() 'symbol'

迭代器

工作原理

  1. 创建一个指针对象,指向当前数据结构的起始位置
  2. 第一次调用对象的next方法,指针自动指向数据结构的第一个成员
  3. 接下来不断调用next方法,指针一直往后移动,直到指向最有一个成员
  4. 每调用next方法返回一个包含value和done属性的对象

注:需要自定义遍历数据的时候,要想到迭代器

原生具备iterator接口的数据(可用for of 遍历)
Arrary、Arguments、Set、Map、String、TypedArray、NodeList

const fruits = ['苹果', '香蕉', '橘子', '梨'];let iterator = fruits[Symbol.iterator](); //获取迭代器对象
console.log(iterator.next()); //{value: '苹果', done: false}
console.log(iterator.next()); //{value: '香蕉', done: false}
console.log(iterator.next()); //{value: '橘子', done: false}
console.log(iterator.next()); //{value: '梨', done: false}
console.log(iterator.next()); //{value: 'undefined', done: true}

生成器函数与调用

生成器其实就是一个特殊的函数

function * gen(){console.log("Hello generator");yield "abcdefg"; //可以看成函数分隔符//-----------------------------------------console.log("How are you?");yield "hijklmn";//-----------------------------------------console.log("I am fine. Thank you!");let str = yield "opqrst";//-----------------------------------------console.log(str); 
}
let iterator = gen();
// console.log(iterator); //gen {<suspended>}
iterator.next(); //Hello generator
console.log(iterator.next()); //How are you? {value: 'hijklmn', done: false}
iterator.next(); //I am fine. Thank you!
iterator.next("Bye bye"); //Bye bye

Promise

介绍与基本用法

const p = new Promise(function(resolve, reject){setTimeout(function(){// 成功情况// let data = "数据库中数据";// resolve(data); //执行成功回调// 失败情况let msg = "网络连接失败";reject(msg); //执行失败回调},1000)
})// 调用Promise对象的then方法a
p.then(function(data){console.log("成功回调!!!",data);
},function(error){console.log("失败回调。。。。。",error);
})

Promise封装读取文件

const fs = require('fs');const p = new Promise(function(resolve, reject){fs.readFile("./resources/readme.txt",(err,data)=> {// 如果失败,则执行错误回调if (err) reject(err);// 如果成功,则执行成功回调resolve(data);});
})p.then(function(value){console.log(data.toString());
},function(reason) {console.log("获取失败",reason);
})

Promise.prototype…then方法

之前的例子

const p = new Promise(function(resolve, reject){setTimeout(function(){// 成功情况// let data = "数据库中数据";// resolve(data); //执行成功回调// 失败情况let msg = "网络连接失败";reject(msg); //执行失败回调},1000)
})// 调用Promise对象的then方法
p.then(function(data){console.log("成功回调!!!",data);
},function(error){console.log("失败回调。。。。。",error);
})

p.then方法返回的是一个Promise对象,对象中有两个是,一个是PromiseState一个是PromiseResult
这两个属性,根据回调内容不同而不同

// 调用Promise对象的then方法
let pThen =p.then(function(data){console.log("成功回调!!!",data);// 1. 返回非Promise类型值,PromiseState为fulfilled,PromiseResult为undefined// return data;// 2. 返回非Promise类型值,PromiseState为该Promise的成功或失败结果,PromiseResult为结果参数// return new Promise(function(resolve,reject){//     resolve(123)// })// 3. 抛出错误,PromiseState为rejected,PromiseResult为抛出的错误throw "err";
},function(error){console.log("失败回调。。。。。",error);
})
console.log(pThen);

比如,此时结果就如下
在这里插入图片描述
可以通过在then中返回Promise进行链式调用,杜绝回调地狱问题

Promise.catch方法

就相当于then方法,不写第一个回调

p.catch(function(reason) {console.warn(reson);
})

Set

自动去重

// Set
let s= new Set(["苹果","香蕉","橘子","梨","橘子"]);
console.log(s); //Set(4) {'苹果', '香蕉', '橘子', '梨'}
// 元素格式
s.size;
// 添加元素
s.add("葡萄");
// 删除元素
s.delete("橘子");
// 检测
s.has("西瓜");
// 清空
s.clear();
// 循环 实现了iterator迭代器接口可以用forof
for (const iterator of s) {console.log(iterator);
}

Map

键值对集合

// Map
let m =new Map();
// 添加元素
m.set("name","qiu");
m.set({name:"qiu"},{obj:null});
// 键值对个数
m.size;
// 获取
m.get("name");
// 删除
m.delete("name");
// 清空
m.clear();
// 遍历 实现了iterator接口
for (const iterator of m) {console.log(m);
}

class类

介绍与初体验

对比一下ES5和ES6创建实例对象

// class
// ES5
function Phone(brand, price){this.brand = brand;this.price = price;
}
// 通过原型对象添加方法
Phone.prototype.open = function(){console.log("dangdangdangdang~");
}
// 实例化对象
let Huawei = new Phone('华为',5999);// ES6
class Phone {// 构造方法 名字不能修改constructor(brand, price){this.brand = brand;this.price = price;}// 方法 不能使用open: function(){}形式open(){console.log("dangdangdangdang~");}}
let Vivo = new Phone("Vivo",3999);

静态成员

属于类的属性,不属于实例对象

class Phone {// 静态成员static classify = "数码设备";
}

类的继承

ES5中的构造函数继承(父级就不写了,和上面一样)

// ES5
function AIPhone(brand, price, color, os) {Phone.call(this,brand,price);this.color = color;this.os = os;
}
// 设置子级构造函数的原型
AIPhone.prototype = new Phone;
AIPhone.prototype.constructor = AIPhone;

ES6中类的继承

// ES6
class AIPhone extends Phone {constructor(brand, price, color, os) {super(brand,price); //父类构造函数this.color = color;this.os = os;    }
}

重写

重写同名方法,当重写方法中不允许调用父类方法,只能直接覆盖

get和set

class Phone {// 构造方法 名字不能修改constructor(brand, price){this.brand = brand;this.price = price;}get color() {console.log("读取了color属性");return "黑色";}set color(newVal) {console.log("修改了color属性");// this.color = newVal;}
}
let vivoS9 = new Phone("Vivo",3999);
console.log(vivoS9.color);
vivoS9.color = "白色";
console.log(vivoS9.color);

ES6的数值扩展

  • Number.EPSILON是js表示的最小精度
  • 二进制和八进制:二进制0bxxx 八进制0oxxx 十进制xxx 十六进制0xxxx
  • Number.isFinite检测是否为有限数
  • Number.isNaN检测数值是否为NaN
  • Number.parseIntNumber.parseFloat字符串转为数字(整数/浮点数)
  • Number.isInteger判断是否为整数
  • Math.trunc将数字的小数部分抹掉
  • Math.sign判断一个数到底为正数(1)、负数(-1)还是零(0)

对象方法扩展

  • Object.is 判断两个值是否完全相等(与===的区别 NaN===NaN为false)
  • Object.assign 两个对象的合并(相同的覆盖,不同的保留)
  • Object.setPrototypeOf设置原型对象 Object.getPrototypeOf获取原型对象 (不建议使用)

模块化

将大文件拆分为多个小文件,再组合
优点:

  1. 防止命名冲突
  2. 代码复用
  3. 高维护性

主要有两个命令构成:export暴露和import引用

//test.js
// 分别暴露
export let school = "TUST";
export let add = "TJ";//统一暴露
let school = "TUST"
let add = "TJ"
export {school, add}// 默认暴露
export default {school: "TUST",add: "TJ"
}
//study.html
//<script type="module">
//通用引入方式
import * as text from "./text.js";// 解构赋值形式
import {school, add as address} from "./text.js"; //分别暴露 重名用as取别名
import {default as text} from "./text.js"; //统一暴露 必须取别名// 简便形式 只能对应默认暴露
import text from "./text.js";

还可以直接在标签上引用 (应该是vue中拆分出js文件)(一般不这么直接引,会有兼容问题)

<script src="./text.js" type="module">

在项目中,一般是需要使用工具将代码进行转换并打包,再通过标签引用来实现模块化

引入NPM包

  1. 通过npm i xxx命令安装
  2. 通过import 变量名 from "包名";引入

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CCDP.01.寄主机SSH连接虚拟机的QA

V0.0 初始版本-2024.2.29 检查VM的网卡配置 如上图&#xff0c;如果enp0s3网卡没有出现形如10.0.0.??/24的ip配置&#xff0c;说明该网卡配置存在错误&#xff0c;或者没有“使能”该网卡。在RockyLinux8.X中可检查“ifcfg-enp0s&#xff1f;” vi /etc/sysconfig/network-…

智能系统引领的未来时代

智能系统引领的未来时代 随着人工智能技术的不断发展和普及&#xff0c;智能系统已经成为引领未来时代的关键力量。智能系统能够模拟人类的智能行为&#xff0c;实现自主学习、自主决策&#xff0c;并在各个领域展现出强大的应用潜力。在未来时代&#xff0c;智能系统将在各个…

【Python 图像处理 PIL 系列 13.1 -- 从列表中读取图像数据并生成图像】

文章目录 从列表中读取图像数据并生成图像代码示例 从列表中读取图像数据并生成图像 在Python中&#xff0c;可以使用Pillow库来创建和保存图像。这里我们将展示如何从列表list_num中读取RGB颜色数据&#xff0c;并根据row_num和column_num生成RGB格式的图像。 安装Pillow库&…

【JS】WebSocket实现简易聊天室

【JS】WebSocket实现简易聊天室 聊天室思路示例 聊天室思路 聊天室思路 1、连接服务器先建立连接&#xff0c;默认生成匿名用户(admin01) 2、客户端发送消息&#xff0c;其它客户端用户都会同步接收消息(服务端接受消息广播所有连接用户) 3、客户端修改昵称&#xff0c;其它客…

数据结构之七大排序

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary_walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

FreeRTOS操作系统学习——FreeRTOS工程创建

FreeROTS工程创建 详细步骤 如无特殊情况&#xff0c;大部人都要配置为外部高速时钟 另外&#xff0c;本实验使用了FreeRTOS&#xff0c;FreeRTOS的时基使用的是Systick&#xff0c;而 STM32CubeMX中默认的HAL库时基也是Systick&#xff0c;为了避免可能的冲突&#xff0c;最…

渗透测试工具 nmap 详解

官网&#xff1a;Nmap: the Network Mapper - Free Security Scanner -p&#xff1c;端口范围&#xff1e;&#xff1a;仅扫描指定的端口 用于扫描指定端口是否开放&#xff0c;在 -p 后输入指定的端口&#xff0c;以英文","进行拼接多个指定端口。 nmap -p 80&…

2024年3月产品认证基础考试简答题及答案

产品认证基础 46.产品认证的工厂检查有哪几种路线&#xff1f;各有什么优缺点&#xff1f; 答案&#xff1a;两种常用的检查路线&#xff1a; 1.按照要素或过程检查 按照认证规则规定的工厂应满足的要素要求&#xff08;包括质量保证能力要求&#xff09;&#xff0c;结合部…

TestNG @Test注释属性- threadPoolSize属性

本文将讨论TestNG中Test annotation的threadPoolSize属性。那么&#xff0c;我们开始吧。 那么&#xff0c;threadPoolSize属性有什么用处呢&#xff1f;答案是&#xff0c;无论何时您想要多次并行地运行一个测试方法&#xff0c;您都需要这个属性。该方法将从invocationCount…

java014 - Java继承

1、继承 1.1 继承概述 继承是面向对象的三大特征之一&#xff0c;可以使得子类具有父类的属性和方法&#xff0c;还可以在子类中重新定义&#xff0c;追加属性和方法。 1.2 继承格式 public class 子类类名 extends 父类类名 {} 范例&#xff1a;public class son extends …

鸿蒙应用组件

基础组件 索引组件—AlphabetIndexer&#xff08;相当于安卓的seedbar&#xff09; 使用&#xff1a;AlphabetIndexer(value: {arrayValue: Array<string>, selected: number})空白填充组件—Blank&#xff08;占位使用&#xff0c;当父组件为Row/Column/Flex时生效&am…

Redis相关学习

Redis 的访问速度比 MySql 快上万倍。因为Redis 在内存中使用&#xff0c;MySql 在硬盘上使用 Redis 和 MySql 相比最大的劣势是存储空间是有限的 redis 主要作为缓存、内存数据库、消息队列 在启动redis客户端的时候&#xff0c;加上--raw&#xff0c;可以让redis客户端将二…

商淘云成功通过中国支付清算协会备案 助力商户合规发展有序经营

2023年12月&#xff0c;商淘云&#xff08;广州商淘信息科技有限公司&#xff09;进入中国支付清算协会第五批收单外包服务机构名单&#xff0c;成功通过聚合支付技术服务类型机构备案。这是继2022年商淘云通过第36类&#xff08;支付和投资类别&#xff09;商标的又一大喜事&a…

Python Shebang(#!)中的/usr/bin/env原理(#!/usr/bin/env python3)(定位系统安装Python解释器的位置)

文章目录 Understanding the Principle of /usr/bin/env in Python Shebang&#xff08;理解Python Shebang中的/usr/bin/env原理&#xff09;Introduction&#xff08;简介&#xff09;Understanding /usr/bin/env&#xff08;理解/usr/bin/env&#xff09;Defining /usr/bin/…

【Lattice FPGA 开发】IP核的调用

本文介绍Diamond开发软件进行IP核调用与对应官方文档查找方法。 文章目录 1. IP核的调用1.1 IPexpress调用IP核1.2 Clarity Designer调用IP核 2. IP核相关文档查找2.1 方法一2.2 方法二2.3 方法三 3 问题 1. IP核的调用 Diamond软件中&#xff0c;根据所选目标FPGA器件型号的…

Golang embed 库全面解析:从基础到高级应用

Golang embed 库全面解析&#xff1a;从基础到高级应用 引言Golang的 embed&#xff1a;简化资源管理提升可移植性与便利性适用场景的拓展 embed 库的基本概念embed 库的工作原理使用 embed 的基本语法访问嵌入资源的方法embed 的限制 如何使用 embed嵌入单个文件嵌入整个目录结…

zephyr学习笔记

zephyr内核对象学习 定时器 类似linux的定时器&#xff0c; 可以分别设置第一次到期时间和后续的周期触发时间&#xff0c; 可以注册到期回调和停止回调 还有一个计数状态&#xff0c;用于标记timer到期了多少次 duration&#xff1a;设定timer第一次到期的时间。 period: …

keycloak-鉴权springboot

一、环境描述 keycloak鉴权springboot的方式&#xff0c;此处简单介绍&#xff0c;springboot官方也提供了demo https://github.com/keycloak/keycloak-quickstarts/tree/latest/spring/rest-authz-resource-server 以及文档说明 Securing Applications and Services Guide…

华为OD机试真题-提取字符串中的最长数学表达式并计算-2023年OD统一考试(C卷)---Python3--开源

题目&#xff1a; 考察内容&#xff1a; 滑动窗口 eval() 思路&#xff1a;先把合法字符提取出来&#xff1b;再从合法字符提取出合法表达式&#xff1b;再获取最长字符串&#xff0c;并运算最后结果。 代码&#xff1a; """ analyze: 如果没有&#xff0c;返…

数字逻辑与计算机组成

冯诺依曼计算机 计算机结构 计算机特点 1.采用二进制 2.程序存储 2.由五大部件组成计算机系统&#xff1a;运算器、存储器、控制器、输入设备和输出设备 计算机硬件系统的层次 中央处理器&#xff08;CPU&#xff09;&#xff1a;运算器 控制器 计算机主机&#xff1a;…