ES6自用笔记

目录

原型链

引用类型:__proto__(隐式原型)属性,属性值是对象函数:prototype(原型)属性,属性值是对象

相关方法

person.prototype.isPrototypeOf(stu)

Object.getPrototypeOf(Object)替换已不推荐的Object._ _ proto _ _ 

Object.create(instance) 以一个现有对象作为原型,创建一个新对象

class类

ES6前:构造函数和原型链

1.构造函数:this.x=x

2.类方法:构造函数.prototype.fun=function(){}

继承

1.构造函数:父类构造函数.call(this,x)

2.原型链:Dog.prototype = Object.create(Animal.prototype)

3.修正prototype上的构造函数:Dog.prototype.constructor = Dog

ES6:class

constructor可没有(默认会创建)

super必须实现

执行上下文/作用域:执行环境(变量+函数)存于 变量对象

全局执行上下文:this 指向window全局对象

函数执行上下文:每次调用会创建新的执行上下文

作用链=作用域链表

查找不到:原型链undefined,作用域链ReferenceError

this

全局环境(普通函数/匿名函数):window/undefined 严格模式

调用函数的对象

JS预解析/编译(变量提升):var、function变量 创建作用域

闭包:函数返回函数,且子函数 调用 父级作用域的变量

内存泄漏:内存浪费->慢->崩溃

不再使用/为空的引用未被移除:闭包/DOM移除,子节点引用没移除

​​​​​​​垃圾回收:自动定期,不需要的引用设置为null

模块化规范:一个模块=实现特定功能的一组方法。

几个函数:全局变量的污染,模块间没有联系。

ES6新增

数据类型:

基本Symbol,Bigint(ES10)

引用/(Object)对象Set ,Map(键(string,symbol)/值对),Promise(解决回调地狱)

WeakSet:弱引用(不被引用时会被回收)对象

WeakMap:键(弱引用对象)/值对

Map:任何值(函数、对象、基本类型)都可以作为键/值,size,可迭代,删减优化,

Object:键:String、Symbol,JSON序列化JSON.stringify()和解析JSON.parse()

运算符

变量的解构赋值:从数组/对象中取值

数组/对象:扩展运算符(浅拷贝)

函数

箭头函数:简洁

继承上一层作用域链的this​​​​​​​

不绑定arguments,用rest参数

因为没有function声明,所以没有原型prototype,所以不能作为构造函数

rest 参数:...真正的数组

ES7 的async/await函数替代了ES6 的Generator 函数

字符串方法:${ },单反引号

块级作用域:let,const

ES6 前作用域: 全局变量 与 函数内的局部变量。

块级作用域{}:if(){},for(){}等

var:重复声明,变量提升

let、const:块作用域里访问,无重复声明,变量提升

const :必须初始化(语法错误SyntaxError),栈值/内存地址不变(类型错误TypeError)

定义类的语法糖(class)

模块化import/export

类型转换

Number

显式类型转换

Number(任意类型):若string含非数字,会返回NaN

parseInt(string[,radix]):基数radix是2-36之间的整数

parseFloat(string):解析一个参数并返回一个浮点数

隐式转换:+str-,含boolean的相加

str - 1 //122

+str+1 // 124

str+1 // '1231'

string

显式类型转换

除了null/undefined.toString()  

String(任意类型) 

隐式转换:含str的相加

Boolean

显式类型转换

Boolean():0, ''(空字符串), null, undefined, NaN会转成false,其它都是true

隐式转换 :!!

判断数据类型

运算符

typeof:判断 基本数据类型

typeof null=Object 类型标签均为000

实例 instanceof 构造函数:判断原型链,和isPrototypeOf

方法

构造函数.prototype.isPrototypeOf(实例) :判断原型链

(数据).constructor === 数据类型:不包含继承类型

显示:toString,valueOf​​​​​​​ 除了null,undefined

valueOf:this 值转换成对象。除了Date都是返回数据本身

console.log

toString:重写对象的类型转换。console.log

松散相等==(可自动转换类型) 和 严格相等===

比较的是内存单元的内容

set判断===相等

DOM事件流:捕获->冒泡

遍历(str,num,set,map)

for of:val,Object.keys(obj)自身属性

for in:idx ,包括继承的可枚举属性

可遍历对象的 公有 可枚举属性(除symbol 属性)  

obj.hasOwnProperty(prop) 避免遍历原型链上的属性

forEach(value[,index,arr]):不改变原数组,返回undefined

无法中断( break (Illegal break statement)和 return (无效))

map(value[,index,arr]):返回新的数组

执行速度优于forEach(底层做了优化)

高阶函数:params / return func

函数柯里化​​​​​​​:return func

手写

改变this

call

typeof this !== 'function'

context = context || window

context._this = this

delete context._this

bind: return _this.apply(context, [...arguments].slice(1));

深拷贝

!arr|| arr == null || typeof arr != 'object'

arr instanceof Array ?  [] :  {}

for (const key in arr)

result[key] = cloneDeep(arr[key])


原型链

引用类型:__proto__(隐式原型)属性,属性值是对象
函数:prototype(原型)属性,属性值是对象

​​​​​​​

相关方法

person.prototype.isPrototypeOf(stu)

Object.getPrototypeOf(Object)替换已不推荐的Object._ _ proto _ _ 

Object.create(instance) 以一个现有对象作为原型,创建一个新对象

class类

ES6前:构造函数和原型链

1.构造函数:this.x=x

2.类方法:构造函数.prototype.fun=function(){}

继承

1.构造函数:父类构造函数.call(this,x)

2.原型链:Dog.prototype = Object.create(Animal.prototype)

3.修正prototype上的构造函数:Dog.prototype.constructor = Dog

// 使用构造函数和原型链定义"类"
function Animal(name) {this.name = name;
}Animal.prototype.speak = function() {console.log(this.name + ' makes a sound.');
};// 创建类的实例
const dog = new Animal('Dog');
dog.speak(); // 输出: "Dog makes a sound."// 继承一个"类"
function Dog(name, breed) {Animal.call(this, name);this.breed = breed;
}
//Object.create() 静态方法以一个现有对象作为原型,创建一个新对象
Dog.prototype = Object.create(Animal.prototype);
//修正构造函数
Dog.prototype.constructor = Dog;Dog.prototype.speak = function() {console.log(this.name + ' barks loudly.');
};const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // 输出: "Buddy barks loudly."

ES6:class

constructor可没有(默认会创建)

super必须实现

执行上下文/作用域:执行环境(变量+函数)存于 变量对象

全局执行上下文:this 指向window全局对象

函数执行上下文:每次调用会创建的执行上下文

作用链=作用域链表

查找不到:原型链undefined,作用域链ReferenceError

this

全局环境(普通函数/匿名函数):window/undefined 严格模式

调用函数的对象

JS预解析/编译(变量提升):var、function变量 创建作用域

闭包:函数返回函数,且子函数 调用 父级作用域的变量

因为js作用域生命周期在于内部脚本是否全部执行完毕才会销毁,并且不会带到父级作用域

因为被下级作用域内  引用,而没有被释放。就导致上级作用域内的变量,等到下级作用域执行完后 或者 当闭包(子函数)不再被引用时才会被释放

  function createCounter() {let counter = 0const myFunction = function() {counter = counter + 1return counter}return myFunction}const increment = createCounter()const c1 = increment()const c2 = increment()const c3 = increment()console.log('example increment', c1, c2, c3)//1 2 3
  • 闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包
  • 滥用闭包容易内存泄漏
  • 使用场景 : 防抖、节流函数套函数避免全局污染

内存泄漏:内存浪费->慢->崩溃

不再使用/为空的引用未被移除:闭包/DOM移除,子节点引用没移除

​​​​​​​垃圾回收:自动定期,不需要的引用设置为null

(GC)Garbage Collection

浏览器js具有自动垃圾回收机制,垃圾回收机制也就是自动内存管理机制,垃圾收集器会定期的找出不可访问的值,然后释放内存,所以将不需要的对象设为null即可。

模块化规范:一个模块=实现特定功能一组方法

  1. 几个函数:全局变量的污染模块间没有联系

// 模块A
var ModuleA = {func1: function() {// ...},func2: function() {// ...}
};// 模块B
var ModuleB = {func3: function() {// ...}
};

​​​​​​​

  1. 后面提出了对象,通过将函数作为一个对象的方法来实现,但是这种办法会暴露所 有的所有的模块成员,外部代码可以修改内部属性的值
  2. 现在最常用的是立即执行函数的写法,通过利用闭包来实现模块私有作用域的建立,同时不会对全局作用域造成污染
//IIFE(立即调用函数表达式)
//创建一个私有作用域,避免变量之间的冲突。然后,通过返回一个对象或函数来暴露模块的公共部分
// 模块A
var ModuleA = (function() {var privateVar = "private";function privateFunc() {// ...}return {publicVar: "public",publicFunc: function() {// ...}};
})();
  • ES6 :使用 import 和 export 的形式来导入导出模块。

ES6新增

数据类型:

基本Symbol,Bigint(ES10)

let bnum=1684424684321231561n  //方式1:数组后加n
bunm=BigInt("1684424684321231561")//方式2:调用BigInt

引用/(Object)对象Set ,Map(键(string,symbol)/值对),Promise(解决回调地狱)

WeakSet:弱引用(不被引用时会被回收)对象

WeakMap键(弱引用对象)/值对

Map:任何值(函数、对象、基本类型)都可以作为键/值,size,可迭代,删减优化,

Object:键:StringSymbol,JSON序列化JSON.stringify()和解析JSON.parse()

运算符

变量解构赋值:数组/对象中取值

// 提取部分数组元素,其余元素放在剩余数组中
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(rest);   // 输出: [3, 4, 5]// 从对象中提取属性并赋值给变量
const person = { firstName: 'John', lastName: 'Doe' };
const { firstName, lastName } = person;
console.log(firstName); // 输出: John
console.log(lastName);  // 输出: Doe// 提取属性并赋值给变量,并指定默认值
const { age = 30, occupation = 'Engineer' } = person;
console.log(age);        // 输出: 30 (因为age属性不存在)
console.log(occupation); // 输出: Engineer (因为occupation属性不存在)const nestedObject = {outer: {inner: {deep: 'Hello, nested!'}}
};const { outer: { inner: { deep } } } = nestedObject;
console.log(deep); // 输出: Hello, nested!

数组/对象扩展运算符(浅拷贝)

函数

箭头函数:简洁

继承上一层作用域链的this​​​​​​​

不绑定arguments,用rest参数

因为没有function声明,所以没有原型prototype,所以不能作为构造函数

rest 参数:...真正的数组

function sum(...numbers) {let total = 0;for (let number of numbers) {total += number;}return total;
}console.log(sum(1, 2, 3)); // 输出 6

ES7 的async/await函数替代了ES6 的Generator 函数

字符串方法:${ },单反引号

块级作用域:let,const

ES6 前作用域: 全局变量 与 函数内的局部变量

块级作用域{}:if(){},for(){}等

var:重复声明,变量提升

let、const:块作用域里访问,无重复声明,变量提升

const :必须初始化(语法错误SyntaxError栈值/内存地址不变(类型错误TypeError)

定义类的语法糖(class)

模块化import/export

类型转换

Number

显式类型转换

Number(任意类型):若string含非数字,会返回NaN

parseInt(string[,radix]):基数radix是2-36之间的整数

parseFloat(string):解析一个参数并返回一个浮点数

隐式转换:+str-,含boolean的相加

str = '123'

  1. str - 1 //122

  2. +str+1 // 124

  3. str+1 // '1231'

string

显式类型转换

除了null/undefined.toString()  

String(任意类型) 

隐式转换:含str的相加

Boolean

显式类型转换

Boolean():0, ''(空字符串), null, undefined, NaN会转成false,其它都是true

隐式转换 :!!

判断数据类型

运算符

typeof:判断 基本数据类型

typeof null=Object 类型标签均为000

实例 instanceof 构造函数:判断原型链,和isPrototypeOf

Object.prototype.isPrototypeOf({})// true
{} instanceof Object// true

方法

构造函数.prototype.isPrototypeOf(实例) :判断原型链

(数据).constructor === 数据类型:不包含继承类型

显示:toString,valueOf​​​​​​​ 除了null,undefined

valueOf:this 值转换成对象。除了Date都是返回数据本身

console.log

在这里插入图片描述

toString:重写对象的类型转换。console.log

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

松散相等==(可自动转换类型) 和 严格相等===

比较的是内存单元的内容

set判断===相等

//Set用===判断是否相等
const set= new Set();
const obj1={ x: 10, y: 20 },obj2={ x: 10, y: 20 }
set.add(obj1).add(obj2);console.log(obj1===obj2);//false
console.log(set.size);// 2set.add(obj1);
console.log(obj1===obj1);//true
console.log(set.size);//2

DOM事件流:捕获->冒泡

  • 事件捕获:由外往内,从事件发生的根节点开始,逐级往下查找,一直到目标元素。
  • 事件冒泡:由内往外,从具体的目标元素触发,逐级向上传递,直到根节点
element.addEventListener(event, function[, useCapture]);
//useCapture 默认为false,即冒泡阶段调用事件处理函数,
//为ture时,在事件捕获阶段调用处理函数

遍历(str,num,set,map)

for of:val,Object.keys(obj)自身属性

for in:idx ,包括继承的可枚举属性

可遍历对象公有 可枚举属性(除symbol 属性)  

obj.hasOwnProperty(prop) 避免遍历原型链上的属性

forEach(value[,index,arr]):不改变原数组,返回undefined

无法中断 break (Illegal break statement)和 return (无效)

map(value[,index,arr]):返回新的数组

执行速度优于forEach(底层做了优化)

高阶函数:params / return func

函数柯里化​​​​​​​:return func

改变数组​​​​​​​:

  1. push() 和 unshift(): push() 方法用于在数组末尾添加一个或多个元素,而 unshift() 方法用于在数组开头添加一个或多个元素。

  2. pop() 和 shift(): pop() 方法用于移除并返回数组末尾的元素,而 shift() 方法用于移除并返回数组开头的元素。

  3. splice(): splice() 方法可以用于从数组中添加或删除元素。它可以指定一个起始索引和要删除的元素数量,并可以选择性地插入新元素。

  4. slice(): slice() 方法用于创建一个从现有数组中选取元素的新数组。它接受起始索引和结束索引作为参数,但不会修改原始数组。

  5. map(): map() 方法对数组中的每个元素应用一个函数,并返回一个新数组,新数组中的元素是原数组元素经过函数处理后的结果。

  6. filter(): filter() 方法根据给定的函数筛选出满足条件的数组元素,返回一个新数组。

  7. splice(): splice() 方法可以插入、删除或替换数组的元素。它可以接受起始索引、删除的元素数量和要插入的新元素。

  8. fill(): fill() 方法可以用指定的值填充数组的元素,可以指定填充的起始索引和结束索引。

  9. sort(): sort() 方法用于对数组元素进行排序,可以传入比较函数以自定义排序方式。

  10. reverse(): reverse() 方法用于颠倒数组中元素的顺序。

手写

改变this

call

  1. typeof this !== 'function'

  2. context = context || window

  3. context._this = this

  4. delete context._this

    // 给function的原型上面添加一个 _call 方法Function.prototype._call = function (context) {//  判断调用者是否是一个函数  this 就是调用者if (typeof this !== 'function') {throw new TypeError('what is to be a function')}// 如果有 context 传参就是传参者 没有就是windowcontext = context || window// 保存当前调用的函数context._this = this   // 截取传过来的参数/*argumentsa: 1fn: ƒ fns()*/// 通过 slice 来截取传过来的参数const local = [...arguments].slice(1)// 传入参数调用函数let result = context._this(...local)// 删属性delete context._thisreturn result}let obj = { a: 1 }function fns(a, b) {console.log(a, b);console.log(this)}fns._call(obj, 23, 555)

bind: return _this.apply(context, [...arguments].slice(1));

深拷贝

  1. !arr|| arr == null || typeof arr != 'object'

  2. arr instanceof Array ?  [] :  {}

  3. for (const key in arr)

  4. result[key] = cloneDeep(arr[key])

 function cloneDeep(arr = {}) {// 终止递归 if (!arr|| arr == null || typeof arr != 'object' ) return arr// 用 instanceof 判断原型链上是否有该类型的原型 是 Array => [] ! Arrays =>{}let result=arr instanceof Array ?  [] :  {}// forin 循环对象的key值for (const key in arr) {//  对象 key 赋值 resultresult[key] = cloneDeep(arr[key])}return result}

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

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

相关文章

【hive】hive中row_number() rank() dense_rank()的用法

hive中row_number() rank() dense_rank()的用法 一、函数说明 主要是配合over()窗口函数来使用的,通过over(partition by order by )来反映统计值的记录。 rank() over()是跳跃排序,有两个第二名时接下来就是第四名(同样是在各个分组内)dense_rank() …

WebStorm运行vue项目

WebStorm运行vue项目(vue2) 1.安装webstorm 2. 需要安装node.js 环境,可以去官网下载 https://nodejs.org/en 3. 安装完需要查看 按winr 输入cmd进入 输入命令node -v 和npm -v 查看,会出现相应的版本号,代表安装成功 vue官网安…

【Python】Web学习笔记_flask(6)——会话session对象

处理利用cookie来判断用户登录外,也可以使用session来判断用户是否登录 html代码和cookie对象的设置相同 from flask import Flask,request,render_template,make_response,session,url_for,redirectappFlask(__name__) app.secret_keyps1234567890 app.route(/) …

Vue-5.编译器Idea

Vue专栏(帮助你搭建一个优秀的Vue架子) Vue-1.零基础学习Vue Vue-2.Nodejs的介绍和安装 Vue-3.Vue简介 Vue-4.编译器VsCode Vue-5.编译器Idea Vue-6.编译器webstorm Vue-7.命令创建Vue项目 Vue-8.Vue项目配置详解 Vue-9.集成(.editorconfig、…

开箱报告,Simulink Toolbox库模块使用指南(四)——S-Fuction模块

文章目录 前言 S-Fuction模块 电路方程模型 编写S函数 仿真验证 Tips 分析和应用 总结 前言 见《开箱报告,Simulink Toolbox库模块使用指南(一)——powergui模块》 见《开箱报告,Simulink Toolbox库模块使用指南&#xff…

23年9月到24年3月苹果产品发布

2023年到2024年的苹果产品发布 9月 基本就是手机,4款:15、15plus、15pro、15pro max 手表和ipodmini 10月就是新的M3芯片,至于M pro芯片会放在24年的3月份。 其他的就没什么新意了

AI 绘画Stable Diffusion 研究(十)sd图生图功能详解-精美二维码的制作

免责声明: 本案例所用安装包免费提供,无任何盈利目的。 大家好,我是风雨无阻。 为了让大家更直观的了解图生图功能,明白图生图功能到底是干嘛的,能做什么事情?今天我们继续介绍图生图的实用案例-精美二维码的制作。 对…

Datawhale Django后端开发入门 TASK03 QuerySet和Instance、APIVIew

一、QuerySet QuerySet 是 Django 中的一个查询集合,它是由 Model.objects 方法返回的,并且可以用于生成数据库中所有满足一定条件的对象的列表。 QuerySet 在 Django 中表示从数据库中获取的对象集合,它是一个可迭代的、类似列表的对象集合。主要特点…

自我管理篇--工作做完了,我能不能到点就下班

以上简历模板资源的排版可能不是最优,但工作经历可以借鉴 工作做完了,我能不能到点就下班? 答案:是,每个人都是自由的 ​ 工作完了,我能不能准点下班,背后真正的问题是:你有没有找到那件让你愿意…

Amazon CloudFront 部署小指南(六)- Lambda@Edge 基础与诊断

内容简介 本文适用于希望使用 Amazon CloudFront LambdaEdge 提升 Amazon CloudFront 边缘计算能力的用户,旨在帮助您更好的进行 CloudFront LambdaEdge 的开发、调试、测试、部署等工作。 首先我们会对 CloudFront LambdaEdge 做个简单的介绍,然后分七个…

kafka--kafka的基本概念-副本概念replica

三、kafka的基本概念-副本概念replica Broker 表示实际的物理机器节点 Broker1中的绿色P1表示主分片Broker2中的蓝色P1表示副本分片,其余类似,就是主从的概念,如果一个Broker挂掉了,还有其它的节点来保证数据的完整性 P可以看做分…

OpenCV实例(九)基于深度学习的运动目标检测(三)YOLOv3识别物体

基于深度学习的运动目标检测(三)YOLOv3识别物体 1.基于YOLOv3识别物体2.让不同类别物体的捕捉框颜色不同3.不用Matplotlib实现目标检测 目标检测,粗略地说就是输入图片/视频,经过处理后得到目标的位置信息(比如左上角和…

Android岗位技能实训室建设方案

一 、系统概述 Android岗位技能作为新一代信息技术的重点和促进信息消费的核心产业,已成为我国转变信息服务业的发展新热点:成为信息通信领域发展最快、市场潜力最大的业务领域。互联网尤其是移动互联网,以其巨大的信息交换能力和快速渗透能力…

leetcode做题笔记92. 反转链表 II

给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 思路一&#xff1a;头插法 struct ListNode *reverseBetween(struct ListNode *h…

河北人事档案管理系统

河北人事档案管理系统是一个集数字化管理、高效服务、安全可靠于一体的人事档案管理平台&#xff0c;可以集中管理机关事业单位人事档案、农村党员档案、参保职工档案、流动人才档案等&#xff0c;并实现高效、便捷的查阅和调阅服务。 河北人事档案管理系统的建设主要是为了更好…

成集云 | 电子签署集成腾讯云企业网盘 | 解决方案

源系统成集云目标系统 方案介绍 电子签署是通过电子方式完成合同、文件或其他文件的签署过程。相较于传统的纸质签署&#xff0c;电子签署具有更高效、更便捷、更安全的优势。 在电子签署过程中&#xff0c;使用电子签名技术来验证签署者的身份并确保签署文件的完整性。电子…

华为OD七日集训第1期 - 按算法分类,由易到难,循序渐进,玩转OD(文末送书)

目录 一、适合人群二、本期训练时间三、如何参加四、7日集训第一期 ~ 华为OD初体验五、精心挑选21道高频100分经典题目&#xff0c;作为入门。第1天、逻辑分析第2天、字符串处理第3天、数据结构第4天、双指针第5天、递归回溯第6天、二分查找第7天、贪心算法 && 二叉树 …

dirsearch目录扫描工具的使用

文章目录 工具下载及环境准备查看帮助信息进行目录扫描 官方介绍 &#xff1a;An advanced command-line tool designed to brute force directories and files in webservers, AKA web path scanner 一个高级命令行工具&#xff0c;用于暴力破解网络服务器中的目录和文件&…

C++中List的实现

前言 数据结构中&#xff0c;我们了解到了链表&#xff0c;但是我们使用时需要自己去实现链表才能用&#xff0c;但是C出现了list将这一切皆变为现。list可以看作是一个带头双向循环的链表结构&#xff0c;并且可以在任意的正确范围内进行增删查改数据的容器。list容器一样也是…

【JVM】运行时数据区——自问自答

Q:Java 运行时数据区解构&#xff0c;哪些数据线程独占&#xff0c;哪些是线程共享&#xff1f;每个区域会产生GC和异常吗&#xff1f; 运行时数据区&#xff1a; 1、PC寄存器 2、堆区 3、JVM栈 4、Native栈 5、方法区 其中&#xff0c;PC寄存器、Native栈、JVM栈是线程独占的…