ES6的一些笔记

最新推荐文章于 2023-06-19 17:56:39 发布
最新推荐文章于 2023-06-19 17:56:39 发布
阅读量78 收藏
点赞数
分类专栏： 笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41529385/article/details/119763998
版权

一、声明变量

使用let、const，会创建块级作用域

二、字符串和正则

字符串多了个codePointAt方法，找到字符串的码点
正则多了个标志u，使用码点进行匹配

三、函数

参数默认值、剩余参数、展开运算符、箭头函数

四、类

  1. 使用class关键字创建构造函数（类）
class User {
	constructor(name, age, gender) {
		this.name = name;
		this.age = age;
		this.gender = gender;
	}
	sayHello() {
		console.log(`我叫${this.name}，${this.age}岁，${this.gender}`)
	}
}
const user1 = new User('张三', 16, '男');
user1.sayHello();
  1. 使用getter setter对属性设置、读取
 class User {
	constructor(name, age, gender) {
		this.name = name;
		this.age = age;
		this.gender = gender;
	}
	get age() {
		return this._age;
	}
	set age(val) {
		if (val < 0) {
			this._age = 0;
		} else if (val > 100) {
			this._age = 100;
		} else {
			this._age = val;
		}
	}
	sayHello() {
		console.log(`我叫${this.name}，${this.age}岁，${this.gender}`)
	}
}
  1. 静态成员 关键字static 挂载类上，实例上没有
 class User {
	constructor(name, age, gender) {
		this.name = name;
		this.age = age;
		this.gender = gender;
	}
	static hobit = '敲代码'
	static youSaySay() { console.log('我不想修水管') }
	// ...
}
  1. 类的继承 使用关键字extends super
class User {
	constructor(name, age, gender) {
		this.name = name;
		this.age = age;
		this.gender = gender;
	}
	print(){
		console.log('我是父类方法')
	}
	// ...
}
class VipUser extends User {
	constructor(name, age, gender){
		super('李四', 19, 女)
		this.vip = '我是VIP'
	}
	print(){
		super.print();
		console.log('我是子类方法，还想用父类的同名方法，要使用super关键字')
	}
	// ...
}
// 或者
class VipUser extends User {
	// 不写constructor，系统会自动创建并调用，参数是父类所需参数
}
  1. 可以使用new.target来制作抽象类（抽象类：一般是父类，不能通过该类创建对象）
class A{
	constructor() {
		if (new.target === A) {
			throw Error('不能直接创建父类')
		}
	}
    print() {
    	console.log('我是父类')
	}
}
class AA extends A {
    print() {
    	console.log('我是子类')
	}
}
const a = new A(); // 报错
const aa = new AA();

五、解构

对数组、对象、参数结构

六、符号Symbol 创建对象的私有属性

使用Symbol('符号描述')创建符号
特点：

  1. 没有字面量
  2. type of 得到symbol
  3. 每次调用Symbol函数得到的符号永远不相等
  4. 可以作为对象的属性名存在，叫做符号属性
    1、这些符号属性通常不能被外界访问
    2、符号属性不能被枚举，for-in 循环、Object.keys()方法无法得到符号属性
    3、Object.getOwnPropertyNames 可以得到所有无法枚举的属性，但得不到符号属性
    4、Object.getOwnPropertySymbols 可以得到符号属性

共享符号Symbol.for('符号描述')
知名符号：
1、Symbol.hasInstance 会影响 instanceof 的判定

Object.defineProperty(A, Symbol.hasInstance, {
    value: function (obj) {
        return false
    }
})

2、Symbol.isConcatSpreadable 会影响数组的 concat 方法

const arr = [3];
const arr2 = [5, 6, 7, 8];
const result = arr.concat(56, arr2)
// arr2[Symbol.isConcatSpreadable] = false;
//  [3, 56, [5,6,7,8]]
// arr2[Symbol.isConcatSpreadable] = true; 默认会分割
//  [3, 56, 5, 6, 7, 8]
console.log(result)

const arr = [1];
const obj = {
    0: 3,
    1: 4,
    length: 2,
    [Symbol.isConcatSpreadable]: true // [1, 2, 3, 4]
    // [Symbol.isConcatSpreadable]: false // [1, 2, {0: 3, 1: 4, length: 2}]
}
const result = arr.concat(2, obj)
console.log(result)

3、Symbol.toPrimitive 会影响类型转换的结果

class Temperature {
    constructor(degree) {
        this.degree = degree;
    }
    [Symbol.toPrimitive](type) {
        if (type === "default") {
            return this.degree + "摄氏度";
        }
        else if (type === "number") {
            return this.degree;
        }
        else if (type === "string") {
            return this.degree + "℃";
        }
    }
}
const t = new Temperature(30);
console.log(t + "!"); // 30摄氏度!
console.log(t / 2); // 15（并且是数字类型）
console.log(String(t)); // 30℃

4、Symbol.toStringTag 会影响 Object.prototype.toString 的返回值

class Person {
    [Symbol.toStringTag] = "Person"
}
const p = new Person();
const arr = [32424, 45654, 32]
console.log(Object.prototype.toString.apply(p)); // [object Person]
console.log(Object.prototype.toString.apply(arr)); // [object Array]

七、Promise与async\await

Promise基本使用方法：then、catch、finally

const pro = new Promise((res, rej) => {
	// 处理函数
	// res(args)
	// rej(args)
}).then(res => {
	// 成功的处理函数
	// 返回的还是Promise对象
}, rej => {
	// 失败的处理函数
	// 返回的还是Promise对象
}).catch(err => {
	// 失败的处理函数
}).finally(() => {
	// 不管成功失败，都会处理的函数
})

Promise的静态方法：resolve、reject、all、race，返回一个Promise对象

const pro = Promise.resolve(args)
const pro = Promise.reject(args)
const pro = Promise.all(iterable).then(...) // 获取接口速度不一致时，全部成功后才会执行then
const pro = Promise.race(iterable).then(...) // 获取接口速度不一致时，最先完成的才会执行then

async\await Promise 的语法糖，返回一个Promise对象

async function test1(){
    console.log(1);
    return 2;
}
async function test2(){
    const result = await test1();
    console.log(result);
}
test2();
//等效于
function test1(){
    return new Promise((resolve, reject)=>{
        console.log(1);
        resolve(2);
    })
}
function test2(){
    return new Promise((resolve, reject)=>{
        test1().then(data => {
            const result = data;
            console.log(result);
            resolve();
        })
    })
}
test2();

八、迭代器Iterator与生成器Generator

迭代器：一个对象有next方法,并且返回一个对象，对象格式为{value: xx, done: xx}

// 将普通对象转换为可迭代对象，并且可以修改可迭代对象返回值的格式
const obj = {
    a: 1,
    b: 2,
    [Symbol.iterator]() {
        const keys = Object.keys(this);
        let i = 0;
        return {
            next: () => {
                const propName = keys[i];
                const propValue = this[propName];
                const result = {
                    value: {
                        propName,
                        propValue
                    },
                    done: i >= keys.length
                }
                i++;
                return result;
            }
        }
    }
}

可迭代对象可以使用for-of循环进行遍历

const arr = [5, 7, 2, 3, 6];
// const iterator = arr[Symbol.iterator]();
// let result = iterator.next();
// while (!result.done) {
//     const item = result.value; //取出数据
//     console.log(item);
//     //下一次迭代
//     result = iterator.next();
// }
// 与上面的方法等价
for (const item of arr) {
    console.log(item)
}

生成器：是一个迭代器的同时，是一个可迭代对象
创建生成器：使用生成器函数

function* method() {}

生成器函数中取值要配合yield关键字
注意点：

  1. 生成器函数可以有返回值，返回值出现在第一次done为true时的value属性中
function* test() {
    console.log("第1次运行")
    yield 1;
    console.log("第2次运行")
    yield 2;
    console.log("第3次运行");
    return 10;
}
const generator = test();
generator.next() // 第1次运行 {value: 1, done: false}
generator.next() // 第2次运行 {value: 2, done: false}
generator.next() // 第3次运行 {value: 10, done: false}
generator.next() // {value: undefined, done: true}
  1. 调用生成器的next方法时，可以传递参数，参数会交给yield表达式的返回值
  2. 第一次调用next方法时，传参没有意义
function* test() {
    console.log("函数开始")
    let info = yield 1;
    console.log(info)
    info = yield 2 + info;
    console.log(info)
}
const generator = test();
generator.next() // 函数开始  {value: 1, done: false}
generator.next('abc') // abc  {value: '2abc', done: false}
generator.next('xyz') // xyz  {value: undefined, done: true}
  1. 生成器函数内部可以调用其他生成器函数，要加上*
function* t1(){
    yield "a"
    yield "b"
}
function* test() {
    yield* t1();
    yield 1;
    yield 2;
    yield 3;
}
const generator = test();

生成器的其他API
return：可以提前结束生成器函数，让整个迭代过程结束
throw：可以在生成器中产生一个错误
生成器异步控制小方法：

function* task() {
    const d = yield 1;
    console.log(d)
    // //d : 1
    const resp = yield fetch("http://www.baidu.com")
    const result = yield resp.json();
    console.log(result);
}
run(task);
function run(generatorFunc) {
    const generator = generatorFunc();
    let result = generator.next(); //启动任务（开始迭代）, 得到迭代数据
    handleResult();
    //对result进行处理
    function handleResult() {
        if (result.done) {
            return; //迭代完成，不处理
        }
        //迭代没有完成，分为两种情况
        //1. 迭代的数据是一个Promise
        //2. 迭代的数据是其他数据
        if (typeof result.value.then === "function") {
            //1. 迭代的数据是一个Promise
            //等待Promise完成后，再进行下一次迭代
            result.value.then(data => {
                result = generator.next(data)
                handleResult();
            })
        } else {
            //2. 迭代的数据是其他数据，直接进行下一次迭代
            result = generator.next(result.value)
            handleResult();
        }
    }
}

九、Set与Map

功能与数组和对象有点类似，都是用于存放数据的集合

  1. Set：用于存放不重复的数据，可以用来数组去重
    创建set集合
    new Set(iterable)
    对set集合进行操作：
    1). add(数据)：添加一个数据到set集合末尾，若数据已存在（使用Object.is判断两个数据是否相同，除+0-0会判断相等），则不进行任何操作
    2). has(数据)：判断set集合中是否存在数据
    3). delete(数据)：删除匹配的数据，返回值为是否删除成功
    4). clear()：清空set集合
    5). size：获取set集合元素的数量，只读
    和数组进行相互转换
    const s = new Set([1, 2, 3])
const arr = [...s]
    使用for-of遍历
    for (const item of s) {
	console.log(item)
}
    使用forEach遍历，参数分别为值、值、本身
    s.forEach((item, item, s)=>{
	console.log(item, item, s)
})
    set集合中不存在下标，所以用forEach遍历时item===index
  2. Map：用于存储多个键值对数据，键名可以是任意值，例如对象
    创建map集合
    new Map(iterable) // 要求每一次迭代的结果必须是一个长度为2的数组，数组第一项表示键，数组的第二项表示值
    例：const mp = new Map([['a', 1], ['b', 2], ['c', 3]])
    对set集合进行操作：
    1). set(键, 值)：设置一个map键值对，键、值都可以是任意类型
    如果键不存在，则添加；如果存在，则修改。判断方式同set
    2). get(键)：获取键的值
    2). has(键)：判断map集合中是否存在键
    3). delete(键)：删除匹配的键
    4). clear()：清空map集合
    5). size：获取map集合元素的数量，只读
    和数组进行相互转换
    const mp = new Map([['a', 1], ['b', 2], ['c', 3]])
const arr = [...mp]
    使用for-of遍历，每次得到的是长度为2的数组
    for (const item of mp) {
	console.log(item)
}
    使用forEach遍历，参数分别为值、键、本身
    mp.forEach((value, key, mp)=>{
	console.log(value, key, mp)
})

十、反射Reflect与代理Proxy

Reflect的一些API
Reflect.set(target, propertyKey, value): 设置对象target的属性propertyKey的值为value，等同于给对象的属性赋值
Reflect.get(target, propertyKey): 读取对象target的属性propertyKey，等同于读取对象的属性值
Reflect.apply(target, thisArgument, argumentsList)：调用一个指定的函数，并绑定this和参数列表。等同于函数调用
Reflect.deleteProperty(target, propertyKey)：删除一个对象的属性
Reflect.defineProperty(target, propertyKey, attributes)：类似于Object.defineProperty，不同的是如果配置出现问题，返回false而不是报错
Reflect.construct(target, argumentsList)：用构造函数的方式创建一个对象
Reflect.has(target, propertyKey): 判断一个对象是否拥有一个属性
…
使用new Proxy()创建代理对象，与Reflect搭配使用

const proxy = new Proxy(target, {
    set(target, prop, value) {
        Reflect.set(target, prop, value);
        render();
    },
    get(target, prop){
        return Reflect.get(target, prop);
    }
})

function ConstructorProxy(Class, ...propNames) {
    return new Proxy(Class, {
        construct(target, argumentsList) {
            const obj = Reflect.construct(target, argumentsList)
            propNames.forEach((name, i) => {
                obj[name] = argumentsList[i];
            })
            return obj;
        }
    })
}
Chaos__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6 学习笔记.pdf
07-05
这是一份关于JavaScript ES6 的整理笔记，包括块级作用域，解构，promise，class，proxy
const 用法小结
jiucongtian的专栏
02-24 346
1.       const常量，如const int max = 100;   优点：const常量有数据类型，而宏常量没有数据类型。编译器可以对前者进行类型安全检查，而对后者只进行字符替换，没有类型安全检查，并且在字符替换时可能会产生意料不到的错误（边际效应） 2.       const 修饰类的数据成员。如： class A {     const int size;     …  } c
Vue基础四
qq_39325660的博客
10-28 222
fetch Mock模拟数据请求 <button @click="getMovies"> getMockData</button> methods: { getMovies() { /* 第一个then是为数据格式化，可以格式化的数据类型有： json text blob[ 二进制 ] 第...
Javascript练习，手写Lodash内置函数(1)
最新发布
m0_64642443的博客
06-19 495
Javascript练习，手写Lodash内置函数(1)
ES6的一些基础知识点
weixin_41227874的博客
10-18 1167
1、解构赋值 一般时候会这样写，ES5写法： const obj = { a:1, b:2, c:3, d:4 } 取值是下面这样的 const a = obj.a const b = obj.b const c = obj.c const d = obj.d 或者是这样取值的 const e = obj.a + obj.b const f = obj.c + obj.d 其实，类似这样的写法可以用ES6语法编写，且更加简短，ES6写法： const {a
请求接口单体测试
在路上`的博客
11-28 145
单体测试
es6笔记es6笔记es6笔记
04-03
ES6，全称ECMAScript 2015，是JavaScript语言的一个重要更新版本，引入了许多新特性，其中面向对象编程的改进是其一大亮点。本文将深入探讨ES6中的面向对象编程，包括类和对象、类继承以及面向对象的实践案例。 1. ...
es6尚硅谷笔记es6尚硅谷笔记
04-03
【ES6】是ECMAScript的第六版，它引入了许多新的特性和语法改进，使得JavaScript编程更加现代化和高效。在JavaScript的世界中，ECMAScript是由Ecma国际制定的一系列标准，特别是ECMA-262标准，定义了脚本语言的规范...
ES6笔记笔记笔记笔记笔记
11-15
ES6笔记笔记笔记笔记笔记
es6学习笔记
08-12
本学习笔记将深入探讨ES6中的核心概念，帮助你全面掌握这一现代JavaScript语法。 1. **let 和 const 声明** 在ES6之前，我们主要使用`var`进行变量声明，但`let`和`const`的引入解决了作用域和提升（hoisting）的...
const 修饰函数参数，返回值，函数体
05-18 457
看到const 关键字，C++程序员首先想到的可能是const 常量。这可不是良好的条件反射。如果只知道用const 定义常量，那么相当于把火药仅用于制作鞭炮。const 更大的魅力是它可以修饰函数的参数、返回值，甚至函数的定义体。 const 是constant 的缩写，“恒定不变”的意思。被const 修饰的东西都受到强制保护，可以预防意外的变动，能提高程序的健壮性。所以很多C++程序设
ES6新增的特性(上)
zhuzhaofa的博客
04-02 90
作用域 ES6之前只有两个变量作用域（全局作用域和局部作用域）；ES6中新增了块级作用域 例如： if(true) { var foo = 'sfy' } console.log(foo) // 这里我们很明显都知道他的结果就是 sfy 但是如果是下面的这种方式 if(true) { let foo = 'sfy' } console.log(foo) // 这次的结果就和上面的不一样了；他会出现：ReferenceError: foo is not defined 。 // 从这个例子我们就能看出
JavaScript——ES6
weixin_53416906的博客
03-14 157
ES6 let es6新增用于声明变量的关键字 // 1.使用let关键字声明的变量具有块级作用域 if (true) { let b = 20; console.log(b)// 输出 if (true) { let c = 30; } console.log(c);// 报错 } console.log(b)// 报错 // 2.防止循环变量 i变成全局变量 for (let i = 0; i < 2; i++) {} console.log(i);
ES6基础
weixin_54685571的博客
04-16 1075
系列文章目录 第一章 ECMASript相关介绍 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 课程介绍 ES介绍（ES全称EcmsScript，是脚本语言的规范，而平时经常编写的jsvascript，是EcmaScript的一种实现，所以ES新特性其实指的就是javascript新特性） 为什么要学习ES新特性（1.语法简洁，功能..
Javascript内容理解
Aaron Con的博客
04-26 975
常用javascript知识的理解和总结
const {} = this.props;的写法es6写法理解
热门推荐
qlin_11的博客
06-08 2万+
const {dispatch} = this.props; 这段代码你可以认为是这样： const dispatch = this.props.dispatch; 那样写是 ES6 的简写形式。
const用法详解
zhwlc的博客
05-22 1万+
const （1）可以定义 const 常量 （2）const 可以修饰函数的参数、返回值. 加粗样式 详细内容： 1、什么是const? 常类型是指使用类型修饰符const说明的类型，常类型的变量或对象的值是不能被更新的。（当然，我们可以偷梁换柱进行更新：） 2、为什么引入const？ const 推出的初始目的，正是为了取代预编译指令，消除它的缺点，同时继承它的优点。 3、cons有什么主要的...
ES6入门--3.const常量
Superstatus的博客
06-26 404
const data = 10; console.log(data); //data = 100; //执行错误 const list = [10,20,30]; console.log(list); list[0] = 100;//const是指数组本身，并不是数组里面的值 console.log(list); //list = [1,2,3]; //错误 //可以换一种写法 li...
ES6新特性的使用
CC酱写前端的博客
10-18 1770
ES5之后的JS语法统称ES6！！！ 一、关于取值的吐槽 取值在程序中非常常见，比如从对象obj中取值。 const obj = { a:1, b:2, c:3, d:4, e:5, } 吐槽： const a = obj.a; const b = obj.b; const c = obj.c; const d = obj.d; const e = obj.e; 或者 const f = obj.a + obj.d; const g = obj.c + obj.

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值