ES6学习笔记(二)

最新推荐文章于 2024-09-13 20:30:04 发布

2401_83703999

最新推荐文章于 2024-09-13 20:30:04 发布

阅读量939

点赞数 7

分类专栏：程序员文章标签： es6 学习笔记

本文链接：https://blog.csdn.net/2401_83703999/article/details/137130405

版权

程序员专栏收录该内容

454 篇文章 1 订阅

订阅专栏

这是学习es6的一些新特性整理出来的笔记，有看不懂的地方推荐阮一峰的ES6，写的很详细。

附上传送门阮一峰ES6，接上一集传送门ES6学习笔记（一）

14 、Set集合

ES6 提供了新的数据结构 Set（集合）。 它类似于数组，但成员的值都是唯一的 ，集合实现了 iterator接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法

size 返回集合的元素个数；
add 增加一个新元素，返回当前集合；
delete 删除元素，返回 boolean 值；
has 检测集合中是否包含某个元素，返回 boolean 值；
clear 清空集合，返回 undefined；

// Set集合

let s = new Set();

console.log(s, typeof s);

let s1 = new Set([“大哥”, “二哥”, “三哥”, “四哥”, “三哥”]);

console.log(s1); // 自动去重

// 1. size 返回集合的元素个数；

console.log(s1.size);

// 2. add 增加一个新元素，返回当前集合；

s1.add(“大姐”);

console.log(s1);

// 3. delete 删除元素，返回 boolean 值；

let result = s1.delete(“三哥”);

console.log(result);

console.log(s1);

// 4. has 检测集合中是否包含某个元素，返回 boolean 值；

let r1 = s1.has(“二姐”);

console.log(r1);

// 5. clear 清空集合，返回 undefined；

s1.clear();

console.log(s1);

// Set集合实践

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];

// 数组去重

let s1 = new Set(arr);

console.log(s1);

// 交集

let arr2 = [3, 4, 5, 6, 5, 4, 3];

let result = […new Set(arr)].filter(item => new Set(arr2).has(item));

console.log(result);

// 并集

// … 为扩展运算符，将数组转化为逗号分隔的序列

let union = […new Set([…arr, …arr2])];

console.log(union);

// 差集：比如集合1和集合2求差集，就是1里面有的，2里面没的.就是并集减去交集。

let result1 = […new Set(arr)].filter(item => !(new Set(arr2).has(item)));

console.log(result1);

15 、Map集合

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类

型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和

『for…of…』进行遍历；

Map 的属性和方法

size 返回 Map 的元素个数；
set 增加一个新元素，返回当前 Map；
get 返回键名对象的键值；
has 检测 Map 中是否包含某个元素，返回 boolean 值；
clear 清空集合，返回 undefined；

// Map集合

// 创建一个空 map

let m = new Map();

// 创建一个非空 map

let m2 = new Map([

[‘name’, ‘尚硅谷’],

[‘slogon’, ‘不断提高行业标准’]

]);

// 1. size 返回 Map 的元素个数；

console.log(m2.size);

// 2. set 增加一个新元素，返回当前 Map；

m.set(“皇帝”, “大哥”);

m.set(“丞相”, “二哥”);

console.log(m);

// 3. get 返回键名对象的键值；

console.log(m.get(“皇帝”));

// 4. has 检测 Map 中是否包含某个元素，返回 boolean 值；

console.log(m.has(“皇帝”));

// 5. clear 清空集合，返回 undefined；

m.clear();

console.log(m);

16 、class类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已；

知识点

class 声明类；
constructor 定义构造函数初始化；
extends 继承父类；
super 调用父级构造方法；
static 定义静态方法和属性；
父类方法可以重写；

class静态成员

// class静态成员

// ES5写法

// function Phone() {}

// Phone.name = “手机”;

// Phone.change = function () {

// console.log(“我可以改变世界！”);

// }

// let nokia = new Phone();

// console.log(nokia.name); // undefined

// // nokia.change();

// // 报错：Uncaught TypeError: nokia.change is not a function

// Phone.prototype.color = “黑色”;

// console.log(nokia.color); // 黑色

// console.log(Phone.name);

// Phone.change();

// 注意：实例对象和函数对象的属性是不相通的

// ES6写法

class Phone {

// 静态属性，只有类有，实例对象是没有的

static name = “手机”;

static change() {

console.log(“我可以改变世界！”);

}

let nokia = new Phone();

console.log(nokia.name);

console.log(Phone.name);

Phone.change();

ES5构造函数实现继承

// 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);

this.color = color;

this.size = size;

}

// 设置子级构造函数的原型

SmartPhone.prototype = new Phone;

SmartPhone.prototype.constructor = SmartPhone;

// 声明子类的方法

SmartPhone.prototype.photo = function () {

console.log(“我可以拍照！”);

}

SmartPhone.prototype.game = function () {

console.log(“我可以玩游戏！”);

}

const chuizi = new SmartPhone(“锤子”, 2499, “黑色”, “5.5inch”);

console.log(chuizi);

chuizi.call();

chuizi.photo();

chuizi.game();

ES6class类继承

注意：super只能用在子类的构造函数中，不能用于普通函数，且类的方法只能用 name(){};，不支持name:function(){};

// ES6class类继承

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(“我可以拍照！”);

}

game() {

console.log(“我可以玩游戏！”);

}

const chuizi = new SmartPhone(“小米”, 1999, “黑色”, “5.15inch”);

console.log(chuizi);

chuizi.call();

chuizi.photo();

chuizi.game();

class中的getter和setter设置

// class中的getter和setter设置

class Phone {

get price() { //当price这个属性被读取，会执行这个函数

console.log(“价格属性被读取了！”);

// 返回值

return 123;

}

set price(value) {//当price这个属性被修改，会执行这个函数

console.log(“价格属性被修改了！”);

}

// 实例化对象

let s = new Phone();

console.log(s.price); // 返回值

s.price = 2999;

17 、数值扩展

Number.EPSILON：

Number.EPSILON 是 JavaScript 表示的最小精度；

EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16；

二进制和八进制：

ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b 和 0o 表示；

Number.isFinite() 与 Number.isNaN() ：

Number.isFinite() 用来检查一个数值是否为有限的；

Number.isNaN() 用来检查一个值是否为 NaN；

Number.parseInt() 与 Number.parseFloat()：

ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变；

Math.trunc：

用于去除一个数的小数部分，返回整数部分；

Number.isInteger：

Number.isInteger() 用来判断一个数值是否为整数；

// 数值扩展

// 0. Number.EPSILON 是 JavaScript 表示的最小精度

// EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16

function equal(a, b) {

return Math.abs(a - b) < Number.EPSILON;

}

console.log(“0、Number.EPSILON 是 JavaScript 表示的最小精度”);

// 箭头函数简化写法

equal = (a, b) => Math.abs(a - b) < Number.EPSILON;

console.log(0.1 + 0.2);

console.log(0.1 + 0.2 === 0.3); // false

console.log(equal(0.1 + 0.2, 0.3)); // true

// 1. 二进制和八进制

console.log(“1、二进制和八进制”);

let b = 0b1010;

let o = 0o777;

let d = 100;

let x = 0xff;

console.log(x);

// 2. Number.isFinite 检测一个数值是否为有限数

console.log(“2、Number.isFinite 检测一个数值是否为有限数”);

console.log(Number.isFinite(100));

console.log(Number.isFinite(100 / 0));

console.log(Number.isFinite(Infinity));

// 3. Number.isNaN 检测一个数值是否为 NaN

console.log(“3. Number.isNaN 检测一个数值是否为 NaN”);

console.log(Number.isNaN(123));

// 4. Number.parseInt Number.parseFloat字符串转整数

console.log(“4. Number.parseInt Number.parseFloat字符串转整数”);

console.log(Number.parseInt(‘5211314love’));

console.log(Number.parseFloat(‘3.1415926神奇’));

// 5. Number.isInteger 判断一个数是否为整数

console.log(“5. Number.isInteger 判断一个数是否为整数”);

console.log(Number.isInteger(5));

console.log(Number.isInteger(2.5));

// 6. Math.trunc 将数字的小数部分抹掉

console.log("6. Math.trunc 将数字的小数部分抹掉 ");

console.log(Math.trunc(3.5));

// 7. Math.sign 判断一个数到底为正数负数还是零

console.log(“7. Math.sign 判断一个数到底为正数负数还是零”);

console.log(Math.sign(100));//1

console.log(Math.sign(0));//0

console.log(Math.sign(-20000));//-1

18 、对象扩展

ES6 新增了一些 Object 对象的方法：

Object.is比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）；
Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；
proto 、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型；

// 对象扩展

// 1. Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）；

console.log(Object.is(120, 120)); // ===

// 注意下面的区别

console.log(Object.is(NaN, NaN));

console.log(NaN === NaN);

// NaN与任何数值做===比较都是false，跟他自己也如此！

// 2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；

const config1 = {

host: “localhost”,

port: 3306,

pass: “root”,

test: “test” // 唯一存在

}

const config2 = {

host: “http://zibo.com”,

port: 300300600,

pass: “root4444”,

test2: “test2”

}

// 如果前边有后边没有会添加，如果前后都有，后面的会覆盖前面的

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

// 3. proto、setPrototypeOf、 getPrototypeOf 可以直接设置对象的原型；

const school = {

}

const cities = {

xiaoqu: [‘北京’, ‘上海’, ‘深圳’]

}

// 并不建议这么做

Object.setPrototypeOf(school, cities);

console.log(Object.getPrototypeOf(school));

console.log(school);

19 、模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来；

模块化的优势有以下几点：

防止命名冲突；
代码复用；
高维护性；

ES6 之前的模块化规范有：

CommonJS => NodeJS、Browserify；
AMD => requireJS；
CMD => seaJS；

ES6 模块化语法

模块功能主要由两个命令构成：export 和 import；

export 命令用于规定模块的对外接口（导出模块）；
import 命令用于输入其他模块提供的功能（导入模块）；

ES6导出模块语法汇总

m.js（逐个导出）

export let school = “尚硅谷”;

export function teach(){

console.log(“我们可以教你开发技术！”);

}

n.js（统一导出）

// 统一暴露（导出）

let school = “尚硅谷”;

function findJob(){

console.log(“我们可以帮你找到好工作！”);

}

export {school,findJob}

o.js（默认导出）

export default{

school : “尚硅谷”,

change : function(){

console.log(“我们可以帮你改变人生！”);

}

ES6导入模块语法汇总

使用模块化的另一种方式

将js语法整合到一个文件app.js：

// 通用方式

// 引入m.js模块内容

import * as m from “./m.js”;

console.log(m);

console.log(m.school);

m.teach();

使用模块化的另一种方式.html：

使用模块化的另一种方式

20 、Babel对ES6模块化代码转换

Babel 是一个 JavaScript 编译器；Babel 能够将新的ES规范语法转换成ES5的语法；

因为不是所有的浏览器都支持最新的ES规范，所以，一般项目中都需要使用Babel进行转换；步骤：使用Babel转换JS代码——打包成一个文件——使用时引入即可；

步骤

第一步：安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具，项目中使用的是webpack）；

第二步：初始化项目

npm init -y

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体即可获取！！！

大厂面试题

面试题目录

——使用时引入即可；

步骤

第一步：安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具，项目中使用的是webpack）；

第二步：初始化项目

npm init -y

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

[外链图片转存中…(img-rHa5jUTb-1711661529997)]

[外链图片转存中…(img-Et7Ufo4x-1711661529998)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-xnO0rxcy-1711661529998)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后的最后

[外链图片转存中…(img-2v7b68eT-1711661529998)]

[外链图片转存中…(img-RVmzCFsl-1711661529998)]

[外链图片转存中…(img-FjuNcAd1-1711661529999)]

[外链图片转存中…(img-IS24VCyN-1711661529999)]

2401_83703999

关注

7
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录