06-ES6ES11
ES6~ES11
一、ECMASript 6 新特性
let 关键字
- let 关键字用来声明变量，用来 let 声明的变量有几个特点：
1、不允许重复声明
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5A3oAfNe-1678617402356)(D:\01_Software\03-markdownImages\image-20230115094535324.png)]
2、块级作用域
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IE1iv8Ap-1678617402357)(D:\01_Software\03-markdownImages\image-20230115094554126.png)]
3、不存在变量提升
4、不影响作用域链
//1、不允许重复声明
let start = "罗志祥";
let start = "小猪";//2、块级作用域 全局 函数 eval
if else while for
{let girl = '周扬青';
}
console.log(girl);//3、不存在变量提升
console.log(song);
let song = '恋爱达人';//4、不影响作用域链
{let school = '尚硅谷';function fn(){console.log(school);}fn();
}
应用场景：以后声明变量使用 let 就对了
let items = document.querySelectAll(".item");
for(let i = 0; i < items.length; i++){items[i].addEventListener("click",function(){items[i].style.background = "pink"; })
}
const 定义常量
1、一定要付初始值
2、潜规则：一般常量使用大写
3、常量值不能修改
4、块级作用域
变量的解构赋值
1、数据的解构
const F4 = {'小沈阳','刘能','找死','王五'}
let {xiao, liu, zhao, song} = F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);
2、对象的接构
const zhao = {name: '赵本山',age: '不详',xiaopin: function(){console.log("小品");}
}
let {name, age} = zhao;
console.log(name);
console.log(age);let {xiaopin} = zhao;
xiaopin();
模板字符串
1、可以直接出现换行符
let str = `<ul><li>刘翔</li><li>苏炳添</li></ul>`;
2、变量拼接
let lovest = '魏翔';
let out = `${lovest}是我心目中最喜欢的演员`;
简化对象写法
旧版本
var school = {name: '沈腾',xiaopin: function(){console.log('小品');}
}
新版本
- 如果外部变量跟内部变量的名称一样则可以直接省略
let name = 'summer';
let change = function(){console.log("alksdjflkajds");
}
let hahah = {name,change,improve(){console.log("klajsdfkljjhadsf");}
}
箭头函数
1、this 是静态的：this 始终指向函数声明时所在作用域下的 this 的数值
- call 方法可以修改 this 的指向
function getName(){console.log(this.name);
}
let getName2 = () => {console.log(this.name);
}
window.name = '尚硅谷';
const school = {name: "ATGUIGU"
}
//直接调用
getName();
getName2();
//结果：
尚硅谷
尚硅谷//call 方法调用
getName.call(school);
getName2.call(school);
//结果：
ATGUIGU
尚硅谷
2、不能作为构造实例化对象
let Person = (name, age) => {this.name = name;this.age = age;
}
let me = new Person('xiaoming', 30);
console.log(me);
3、不能使用 arguments 变量
4、箭头函数的简写
- 省略小括号，当形参有且只有一个的时候
- 省略花括号，当代码只有一条代码的时候
//1) 省略小括号
let add = n => {return n + n;
}
console.log(add(9))//2)省略花括号
let add = n => return n * n;
console.log(add(9));
应用场景
1、点击 div 2s 后颜色变成粉色
错误示范：定时器的this是指向window的
var div = document.querySelect("div");
div.addEventListener('click',function(){Interview(function(){this.style.background = 'pink';},2000)
})
1）正确示范：保存this
var div = document.querySelect("div");
div.addEventListener('click',function(){let _this = this;Interview(function(){_this.style.background = 'pink';},2000)
})
2）正确示范：箭头函数
- 它是指向声明时所在作用域下的 this 数值
var div = document.querySelect("div");
div.addEventListener('click',function(){Interview(() => {this.style.background = 'pink';},2000)
})
2、从数组中返回偶数的元素
旧版本
const arr = [1,6,8,9,6,4,3];
const result = arr.filter(function(item){if(item % 2 === 0){return true;}else{return fasle;}
})
新版本
const arr = [1,6,8,9,6,4,3];
const result = arr.filter(item => item % 2 === 0);
形参初始值
1、形参初始值 具有默认的参数，一般位置要靠后（潜规则）
function add(a,b,c = 10){return a + b + c;
}
let result = add(1,2);
console.log(result);
//13;
2、与解构赋值结合
function connect({host="127.0.0.1", username, password, port}){console.log(host);console.log(username);console.log(password);console.log(port);
}
connect({host: 'atguigu.com',username: 'root',password: 'root',port: 3305
})
//atguigu.com
//root
//root
//3305
rest 形参
1、rest 参数必须要放参数最后面
2、rest 参数是以数组的方式返回的
function fn(a, b, ...args){console.log(a);console.log(b);console.log(args);
}
fn(1,2,3,4,5,6)
扩展运算符
- 【…】 扩展运算符能将 【数组】转换为逗号分隔的【参数序列】
- 扩展运算符是放在实参里面的
const tfboys = ['易烊千玺', '王俊凯', '王源'];function chunwan(){console.log(arguments);
}
chunwan(...tfboys);
使用场景
1、数组的合并
const kuaizi = ['王太利', '小样'];
const fenghuang = ['曾毅', '菱花'];
//1、函数合并
const hebing = kuaizi.concat(fenghuang);
//2、第二种
const hebing = [...kuaizi, ...fenghuang];
2、数组的克隆
- 如果拷贝的元素有引用类型，则是浅拷贝
const sanzhihua = ['E', 'G', 'M'];
const sanyecao = [...sanzhihua];
console.log(sanyecao) //['E', 'G', 'M']
3、将伪数组转为真正的数组
const divs = document.querSeletorAll('div');
const divArr = [...divs];
console.log(divArr)
Symbol
- ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol 特点
Symbol 的值是唯一的，用来解决命名冲突的问题
Symbol 值不能与其他数据进行运算
Symbol 定义 的 对象属 性 不能 使 用 for…in 循 环遍 历 ，但 是可以使用Reflect.ownKeys 来获取对象的所有键名
七种数据类型（USONB）
1、u：undefined
2、s：string symbol
3、o：object
4、n：null number
5、b：boolean
//创建 symbol
let s = Symbol();let s3 = Symbol('尚硅谷');
let s4 = Symbol('尚硅谷');
console.log(s2 === s3) // falselet s3 = Symbol.for('尚硅谷');
let s4 = Symbol.for('尚硅谷');
console.log(s2 === s3) // true
注：遇到唯一性的场景就要想到 Symbol
Symbol 创建对象属性
第一种方法
let game = {up(){console.log("up");} down(){console.log("down")}
}//声明对象
let methods = {up: Symbol();down:Symbol();
}//添加属性
game[methdos.up] = function(){console.log("我可以改变形状");
}
game[methods.down] = function(){console.log("我可以快速下降");
}
第二种方法
let youxi = {name: "狼人杀",[Symbol("say")]: function(){console.log("天黑请闭眼")},[Symbol('zibao')]: function(){console.log("我可以自爆");}
}
Symbol 内置值
| 方法 | 说明 |
|---|---|
| Symbol.hasInstance | 当其他对象使用 instanceof 运算符，判断是否为该对 |
| Symbol.isConcatSpreadable | 对象的 Symbol.isConcatSpreadable 属性等于的是一个 |
| Symbol.species | 创建衍生对象时，会使用该属性 |
| Symbol.match | 当执行 str.match(myObject) 时，如果该属性存在，会 |
| Symbol.replace | 当该对象被 str.replace(myObject)方法调用时，会返回 |
| Symbol.search | 当该对象被 str.search (myObject)方法调用时，会返回 |
| Symbol.split | 当该对象被 str.split(myObject)方法调用时，会返回该 |
| Symbol.iterator | 对象进行 for…of 循环时，会调用 Symbol.iterator 方法， |
| Symbol.toPrimitive | 该对象被转为原始类型的值时，会调用这个方法，返 |
| Symbol. toStringTag | 在该对象上面调用 toString 方法时，返回该方法的返回值 |
| Symbol. unscopables | 该对象指定了使用 with 关键字时，哪些属性会被 with 环境排除 |
//Symbol.hasInstance
class Person{static [Symbol.hasInstance](param){console.log(param);console.log("我是被用来检查类型的");return fasle;}
}let o = {};
console.log(o instanceof Person); // false//Symbol.isConcatSpreadable
const arr = [1, 2, 3];
const arr2 = [4,5,6];
console.log(arr.concat(arr2)); // [1,2,3,4,5,6];const arr = [1, 2, 3];
const arr2 = [4,5,6];
arr2[Symbol.isConcatSpreadable] = false;
console.log(arr.concat(arr2)); // [1,2,3,Array(3)];
迭代器
ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费
原生具备 iterator 接口的数据(可用 for of 遍历)
a) Array
b) Arguments
c) Set
d) Map
e) String
f) TypedArray
g) NodeList
- 工作原理
a) 创建一个指针对象，指向当前数据结构的起始位置
b) 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
c) 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
d) 每调用 next 方法返回一个包含 value 和 done 属性的对象
注： 需要自定义遍历数据的时候，要想到迭代器。
//声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];let iterator = xiyou[Symbol.iterator]();console.log(iterator.nect());
console.log(iterator.nect());
console.log(iterator.nect());
console.log(iterator.nect());
console.log(iterator.nect());
自定义迭代器
const banji = {name: "终极一般",stus: ['xiaoming','xiaoning','xiaotian','knight'],[Symbol.iterator](){let intdex = 0;let _this = this;return {next: function(){if(index < _this.stus.length){const result = {value: _this.stus[i], done: false;index++;return result;}else{return {value: undefined, done: true}}}}};}
}
生成器
代码说明：
*的位置没有限制
生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到yield 语句后的值
yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next方法，执行一段代码
next 方法可以传递实参，作为 yield 语句的返回值
function * gen(){yield '一只没有耳朵';yield '一只没有尾巴';return '真奇怪';
}
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
生成器函数参数
function * gen(arg){console.log(arg);let one = yield '一只没有耳朵';console.log(one);let two = yield '一只没有尾巴';console.log(two);
}
let iterator = gen('AAA');
console.log(iterator.next());
console.log(iterator.next('BBB'));//结果
//AAA
//BBB
生成器实例（1）
- 实现异步任务的功能
旧版本
setTimeout(() => {console.log(111);setTimeout(() => {console.log(222);setTimeout(() => {console.log(333);},3000)},2000)
},1000)
新版本
function one(){setTimeout(() => {console.log(111);iterator.next();})
}
function two(){setTimeout(() => {console.log(222);iterator.next();})
}
function three(){setTimeout(() => {console.log(333);iterator.next();})
}
function * gen(){yield one();yield two();yield three();
}
let iterator = gen();
iterator.next();
生成器实例（2）
- 用户数据、订单数据、商品数据
function one(){setTimeout(() => {let data = "用户数据";iterator.next(data);})
}
function two(){setTimeout(() => {let data = "订单数据";iterator.next(data);})
}
function three(){setTimeout(() => {let data = "商品数据";iterator.next(data);})
}
function * gen(){let one = yield one();console.log(one);yield two();let two = console.log(two);let three = yield three();console.log(three);
}
let iterator = gen();
iterator.next();
Set 集合
- ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：
- size
返回集合的元素个数
- add
增加一个新元素，返回当前集合
- delete
删除元素，返回 boolean 值
- has
检测集合中是否包含某个元素，返回 boolean 值
- clear
清空集合，返回 undefined
//声明变量
let s = new Set();
let s2 = new Set(['哈哈哈', '嘻嘻嘻'])//遍历
for(var v of s2){console.log(v);
}
使用场景
let arr = [1,2,3,4,5,6,7];//1、去重
let result = [...new Set(arr)];//2、交集
let arr2 = [4,5,6,7];
let result = [...new Set(arr)].filter(item => {let ar2 = new Set(arr2);if(ar2.has(item)){return true;}else{return fasle;}
})let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));//3、并集
let result = [...new Set([...arr, ...arr2])];//4、差集
let result = [...new Set(arr)].filter(!item => new Set(arr2).has(item));
Map 集合
- ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属性和方法：
- size
返回 Map 的元素个数
- set
增加一个新元素，返回当前 Map
- get
返回键名对象的键值
- has
检测 Map 中是否包含某个元素，返回 boolean 值
- clear
清空集合，返回 undefined
Class 类
class Phone{constructor(brand,price){this brand = brand;this.price = price;}call(){console.log("正在拨打电话");}
}
let onePlus = new Phone("1+",1999);
console.log(onePlus);
Class 静态成员
- 实例化对象和静态成员的属性是不相通的
//可以通过 Phone.prototype.call 给类添加静态成员变量
class Phone{static name = '手机';static change(){console.log("我可以改变世界");}
}
let nokia = new Phone();
console.log(nokia); // undefined
console.log(Phone.name) // 手机
Class 继承
class Phone {constructor(brand, price){this.brand = brand;this.price = price;}call(){console.log('我可以打电话哦');}
}class SmartPhone extends Phone {constructor(brand, price, size, color){super(brand, price);this.size = size;this.color = color;}phone(){console.log("我是手机");}
}
Class 重写
- 子类不能调用父类的成员方法的
class Phone {constructor(brand, price){this.brand = brand;this.price = price;}call(){console.log('我可以打电话哦');}
}class SmartPhone extends Phone {constructor(brand, price, size, color){super(brand, price);this.size = size;this.color = color;}phone(){console.log("我是手机");}//重写call(){console.log("重写方法");}
}
get 和 set
class Phone{get price(){return "i love you";}set price(newVal){}
}
let s = new Phone();
s.price = "free";
数值扩展
1、Number.EPSILON 是 JavaScript 表示最小精度
function equal(a, b){if(Math.abs(a - b) < Number.EPSILON){return true;}else{return false;}
}
2、二进制和八进制
let b = 0b1010;
let o = 0o777;
let d = 100;
let x = 0xff;
3、Number.isNaN 检测一个数值是否是 NaN
Number.isNaN(123);
//true;
4、Number.parseInt Number.parseFloat字符串整数
- 如果有字符串则直接截断
5、Number.isInteger 判断一个数是否是整数
6、Math.trunc 将数字的小数部门抹掉
7、Math.sign 如果为正数返回 1 如果是负数返回 -1 如果是零返回 0
8、Number.isFinite 检查一个数值是否为有限数
对象方法扩展
1、Object.is 判断两个数值是否完全相等（类似全等）
console.log(123 === 123); // true
console.log(Object.is(123,123)) // true
console.log(NaN === NaN) // false;
console.log(Object.is(NaN, NaN)) // true;
2、Object.assign 对象的合并
- 会将 config1 没有属性的追加
- 如果参数重属性，以 config1 为准
const config1 = {host: 'localhost',prot: 3306,name: 'root',pass: 'root'
};
const config2 = {host: 'localhost',prot: 3306,name: 'root',pass: 'root',test: 'asdf'
}
3、Object.setPrototypeOf、Object.getPrototypeOf
- 设置原型，设置对象
const school = {name: '尚硅谷'
}
const cities = {xiaoqu: ['北京', '深圳']
}
Object.setPrototypeOf(school, cities);
模块化
引入模块数据方式一
1、模块化的好处
模块化的优势有以下几点：
防止命名冲突
代码复用
高维护性
2、模块化规范产品
ES6 之前的模块化规范有：
CommonJS => NodeJS、Browserify
AMD => requireJS
CMD => seaJS
3、ES6模块化语法
模块功能主要由两个命令构成：export 和 import。
export 命令用于规定模块的对外接口
import 命令用于输入其他模块提供的功能
m1.js
export let school = '尚硅谷';export function teach() {console.log("我们可以教你开发技能");
}
m2.js
let school = '尚硅谷';function teach() {console.log("我们可以教你开发技能");
}
export {school, teach};
m2.js
export default {school: 'atguigu',change: function(){console.log("我们可以改变你") }
}
index.html
<script type = "module">//1、通用的导入方式import * as m1 from "./src/js/m1.js";import * as m2 from "./src/js/m2.js";import * as m3 from "./src/js/m3.js";m3.default.change();//2、解构赋值的形式import {school, teach} from "./src/js/m1.js";import {school as guigu, teach} from "./src/js/m2.js";import {default as m3} from "./src/js/m3.js"//3、渐变形式 针对默认暴露import m3 from "./src/js/m3.js";
</script>
引入模块数据方式二
app.js
//模块引入
import * as m1 from "./m1.js";
import * as m1 from "./m2.js";
import * as m1 from "./m3.js";
index.html
<script src="./src/js/app.js" type="module"></script>
bable对ES6模块化代码转换
1、初始化 npm init —yes
2、开发依赖 npm i babel-cli babel-preset-env browserify -D
3、npx babel src/js -d dist/js --presets=babel-preset-env
4、打包 npx browserify dist/js/app.js -o dist/bundle.js
引入NPM包
1、安装 jquery 包：npm i jquery
import $ from 'jquery';
${'body'}.css('background,''pink');
og(“我们可以改变你”)
}
}
**index.html**```html
<script type = "module">//1、通用的导入方式import * as m1 from "./src/js/m1.js";import * as m2 from "./src/js/m2.js";import * as m3 from "./src/js/m3.js";m3.default.change();//2、解构赋值的形式import {school, teach} from "./src/js/m1.js";import {school as guigu, teach} from "./src/js/m2.js";import {default as m3} from "./src/js/m3.js"//3、渐变形式 针对默认暴露import m3 from "./src/js/m3.js";
</script>
引入模块数据方式二
app.js
//模块引入
import * as m1 from "./m1.js";
import * as m1 from "./m2.js";
import * as m1 from "./m3.js";
index.html
<script src="./src/js/app.js" type="module"></script>
bable对ES6模块化代码转换
1、初始化 npm init —yes
2、开发依赖 npm i babel-cli babel-preset-env browserify -D
3、npx babel src/js -d dist/js --presets=babel-preset-env
4、打包 npx browserify dist/js/app.js -o dist/bundle.js
引入NPM包
1、安装 jquery 包：npm i jquery
import $ from 'jquery';
${'body'}.css('background,''pink');
06-ES6ES11相关推荐
- 一幅长文细学JavaScript（五）——ES6-ES11新特性
5 ES版本 摘要 ES5的先天不足致使ES后续版本的发展,这也是前端人员绕不开的一个点.如果我们想要在工作和面试中轻松解决问题,那么了解ES6-ES11是必不可少的. 在本文中,我将采用一种更加通俗 ...
- 06 面向对象之：反射，双下方法
一.反射 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省).这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它首先被程序语 ...
- 【跃迁之路】【495天】程序员高效学习方法论探索系列（实验阶段252-2018.06.15）...
@(跃迁之路)专栏 实验说明 从2017.10.6起,开启这个系列,目标只有一个:探索新的学习方法,实现跃迁式成长 实验期2年(2017.10.06 - 2019.10.06) 我将以自己为实验对象. ...
- Java虚拟机JVM学习06 自定义类加载器 父委托机制和命名空间的再讨论
Java虚拟机JVM学习06 自定义类加载器 父委托机制和命名空间的再讨论 创建用户自定义的类加载器 要创建用户自定义的类加载器,只需要扩展java.lang.ClassLoader类,然后覆盖它的f ...
- 【跃迁之路】【425天】刻意练习系列184—SQL（2018.04.06）
@(跃迁之路)专栏 叨叨两句 技术的精进不能只是简单的刷题,而应该是不断的"刻意"练习 该系列改版后正式纳入[跃迁之路]专栏,持续更新 刻意练习--MySQL 2018.04.02 ...
- OD使用教程6 - 调试篇06|解密系列
OD使用教程6 - 调试篇06 让编程改变世界 Change the world by program 这一讲开始,小甲鱼带大家接触真正程序的逆向.其实也没啥大不了的,也就是对之前所学的知识进行巩 ...
- 【青少年编程】【Scratch】06 侦测模块
06 侦测模块 侦测模块是用来检测场景中某一参数的变化,通过参数变化来为下一步操作提供运行依据.通常与控制模块中的条件语句和循环语句一起使用. 具体分为: 与运动相关的侦测: 与按键相关的侦测: 侦测 ...
- 06 Scratch等级考试（一级）模拟题
Scratch竞赛交流群已成立(适合6至18周岁的青少年),公众号后台回复[Scratch],即可进入.如果加入了之前的社群不需要重复加入. 微信后台回复"资料下载"可获取以往学习 ...
- 数据结构与算法：06 线性表
06 线性表 知识结构: 1. 线性表的定义与操作 1.1 线性表的定义 线性表(Linear List)是由n(n≥0)n (n≥0)n(n≥0)个相同类型的数据元素a0,a1,⋯,an−1a_0, ...
- linux深度定制,Linux Deepin 12.06 beta1 发布
反馈如下: 1) Linux Deepin 12.06 beta1 中文简体和繁体版本,默认安装后,主题有点问题,即默认的Metacity左上角的菜单背景色与文字的颜色都是白色,只有鼠标移经过时高亮才 ...
最新文章
- 自动化测试工具Cucumber的简单介绍
- 【linux开发】IO端口和IO内存的区别及分别使用的函数接口
- NYOJ-172 小珂的图表
- Linux 系统应用编程——出错处理(errno)
- 论文浅尝 | KGAT: 用于推荐的知识图注意力网络
- jenkins docker 自动部署 构建_Docker_Jenkins自动部署项目
- 03.基于测试开发讲解和Cobertura框架介绍
- AudioSwitcher for mac(音频控制工具)v3.08 版本支持M1芯片
- 华为服务器sn码查询网站,linux 查询服务器sn号
- Matplotlib：线类型
- Decorate 模式
- python 3 过滤股票
- java word 批注_Java 添加Word批注（文本、图片）
- mac qq 用户信息文件夹
- windows电影杀毒linux程序,两部Linux有关的电影：《操作系统革命》《代码》
- python ipo模式包括什么_什么是IPO？
- antdvue upload组件的customRequest自定义上传事件一直uploading处理方法
- English语法_不定式 - 常用句型
- Xshell登录后自动执行命令
- DARTS论文和算法解析