隔壁老王seabiscuit-CSDN博客

原创什么是DOM？DOM常见的操作有哪些？

什么是DOM、DOM的作用、DOM Tree是如何形成、document顶层节点、html根节点以及根节点下的节点存在的三种关系

2024-04-04 11:23:46 814

前端js三大组成部分：DOM, BOM, ECMAScript1. 构造函的内部原理在函数预编译阶段把this的隐式指向一个空对象{}执行this.xxx = yyy隐式return this当显示设置return时，若：return引用值，则覆盖this；return原始值，则不覆盖this2. 什么是原型原型是构造函数创建对象的原始模型特点：原型也是对象，原型是函数对象的一个属性原型自带constructor属性，constructor指定构造函数

2021-12-02 11:26:10 682

原创 vsCode快捷键

Alt + up/down 移动行上下Shift + Alt up/down 在当前行上下复制当前行Ctrl + Shift + K 删除行Ctrl + Enter 在当前行下插入新的一行Ctrl + Shift + Enter 在当前行上插入新的一行Ctrl + Shift + | 匹配花括号的闭合处，跳转Ctrl + ] 或 [ 行缩进Home 光标跳转到行头End 光标跳转到行尾Ctrl + Home 跳转到页头Ctrl + End 跳转到页尾Ctrl +

2021-12-02 11:25:23 287

原创前端状态码

一些常见的状态码为：200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务不可用详细分解：11xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码。代码说明 100 （继续）请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。101 （切换协议）请求者已要求服务器切换协议，服务器已确认并准备切换。22xx （成功）表示成功处理了请求的状态代码。代码说明200 （成功）服务器已成功处理了请求。通常，

2021-12-02 11:24:04 1556

原创如何让一个div上下跳动

效果图:代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>div上下跳动</title></head><style> .bo

2021-12-02 10:45:31 862

原创 ES6（十八）Module

ModuleES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。export 命令模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口。import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。export输出变量的写法：// profile.jsexport var firstNam

2021-12-02 09:30:03 127

原创 ES6（十七）Class

Class用法class跟let、const一样：不存在变量提升、不能重复声明…es5面向对象写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。//es5functi

2021-12-02 09:29:30 169

原创 ES6（十六）async 函数

async 函数含义ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是 Generator 函数的语法糖。什么是语法糖？意指那些没有给计算机语言添加新功能，而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式，有益于更好的编码风格，更易读。不过其并没有给语言添加什么新东西。反向还有语法盐：主要目的是通过反人类的语法，让你更痛苦的写代码，虽然同样能达到避免代码书写错误的效果，但是编程效率很低，毕竟提高了语法学习门槛，让人齁到忧伤。。。

2021-12-02 09:28:58 147

原创 ES6（十五）Generator

Generator简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。跟普通函数的区别function关键字与函数名之间有一个星号；函数体内部使用yield表达式，定义不同的内部状态。Generator函数不能跟new一起使用，会报错。functio

2021-12-02 09:16:45 826

原创 ES6（十四）Iterator

Iterator概念迭代器是一种接口、是一种机制。为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator 的作用有三个：为各种数据结构，提供一个统一的、简便的访问接口；使得数据结构的成员能够按某种次序排列；主要供for...of消费。Iterator本质上，就是一个指针对象。过程是这样的：（1）创建一个指针对象，指向当前数据结构的起始位置。（2）第一次调用指针对象的next方法，可

2021-12-01 09:16:11 189

原创 ES6（十三）Promise

Promise概念Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所`Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。特点对象的状态不受外界影响。一旦状态改变，就不会再变，任何时候都可以得到这个结果。状态Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他

2021-12-01 09:15:55 3583

原创 ES6（十二）Reflect

Reflect概述Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。设计目的将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时

2021-12-01 09:15:29 216

原创 ES6（十一）Proxy

Proxy概述Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。var obj = new Proxy({}, { get: function (target, key, receiver) {

2021-12-01 09:15:11 187

原创 ES6（十）Set 和 Map 数据结构

Set 和 Map 数据结构Set基本用法ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4//通过add方法向 Set 结构加入成员，结果表明 Set 结构不会添

2021-12-01 09:14:07 239

原创 ES6（九）Symbol

Symbol为啥需要SymbolES5里面对象的属性名都是字符串，如果你需要使用一个别人提供的对象，你对这个对象有哪些属性也不是很清楚，但又想为这个对象新增一些属性，那么你新增的属性名就很可能和原来的属性名发送冲突，显然我们是不希望这种情况发生的。所以，我们需要确保每个属性名都是独一无二的，这样就可以防止属性名的冲突了。因此，ES6里就引入了Symbol，用它来产生一个独一无二的值。Symbol是什么Symbol实际上是ES6引入的一种原始数据类型，除了Symbol，JavaScript还有其他5种

2021-12-01 09:13:20 286

原创 ES6（八）函数的扩展

函数的扩展函数参数的默认值基本用法ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello与解构赋值默认值结合使用function foo({x, y = 5}) { console.log(x

2021-12-01 09:12:41 230

原创 ES6（七）对象的扩展

对象的扩展属性的简洁表示法ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};方法也可以简写。const o = { method() { return "Hello!"; }};// 等同于const o = { method: function() { re

2021-12-01 09:11:31 167

原创 ES6（六）数组的扩展

数组的扩展扩展运算符含义扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]该运算符将一个数组，变为参数序列。扩

2021-12-01 09:10:11 198

原创 ES6（五）字符串扩展

字符串扩展includes()、startWith()、endsWith()传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。let s = 'Hello world!';s.startsWith('Hell

2021-12-01 09:09:24 189

原创 ES6（四）数值的扩展

数值的扩展Number.isFinite()、Number.isNaN()ES6 在Number对象上，新提供了Number.isFinite()和Number.isNaN()两个方法。Number.isFinite()用来检查一个数值是否为有限的（finite）。Number.isFinite(15); // trueNumber.isFinite(0.8); // trueNumber.isFinite(NaN); // falseNumber.isFinite(Infinity); //

2021-11-30 15:15:27 189

原创 typescript(（九）ts中的泛型

函数中参数为变量的泛型的使用function join(first: number | string, second: number | string) { return `${first}${second}`}join(2, 7)如果要求第一个参数的类型和第二个参数的类型相同，那就是要泛型写泛型注意三个关键fn / <T,P> 函数的参数的个数决定泛型的个数 fn<T,P>(first:T,second:P){}调用函数时 fn<string,nu

2021-11-30 14:19:31 641

原创 typescript（八）ts中的Enum枚举

业务场景：根据不同数字做不同事初级程序员代码：function getResult1(num: number) { if (num == 1) { return '烫头' } else if (num == 2) { return 'rap' } else if (num == 3) { return '唱跳' }}const result = getResult1(1)console.log('结果是' + resu

2021-11-30 14:08:20 1152

原创 typescript（七）ts中的类class

先写一个简单的类class Girlclass { public name: string}const girlcA = new Girlclass()girlcA.name = '小红'console.log(girlcA.name) // 小红如果类中的属性模式是public属性，可以被外部访问，也可以在内部使用class Person1 { public name: string; constructor(name: string) { this

2021-11-30 14:01:55 1299

原创 typescript（六）ts中的接口

ts中的接口和类型别名很相似，从不同中学习认识接口。两者的区别接口只适用于对象类型定义，无论是单个对象还是函数参数为对象，数组元素为对象的定义，然而类型别名适用于任何变量，并且可以是基础类型。可以把这两个重复的类型注解，定义成统一的接口。2.接口的应用：interface Iob { unname: string, age: number}// 单个变量接口的应用const objA: Iob = { unname: '小红', age: 16 }// 函数中的参数为

2021-11-30 13:46:09 2071

原创 typescript（五）ts中数组类型的定义

上面已经做过数组内存在单个或多个类型一样的数组的类型定义，再复习下const arrA = [1, 2, 4] // 这里利用ts 的类型推断，arrA的数组类型定义为：const arrA: number[] = [1, 2, 4]数组汇总存在单个或者多个同类型的数组的类型定义还有很多，比如：const arrC: boolean[] = [true, false]const arrD: string[] = ['1', '3']const arrE: void[] = [undefined

2021-11-30 13:30:40 9524

原创 typescript（四）ts中函数的参数和返回值的类型定义

前面我们讲到过ts的静态类型定义中的函数类型定义，先来回顾下：const fnA: () => string = () => { return '1' }const fnB: () => number = () => 6const fnC: () => boolean = () => true拓展下：在接口中如何定义函数类型呢？接口后期会讲interface Ifn { (one: number, two: number): number}let

2021-11-30 11:29:30 27843 1

原创 typescript（三）ts中的类型注解和类型推断

ts的类型注解？哈哈，看到这个词是不是挺唬人的，我刚开始学习也是一样，其实类型注解就是ts为一个变量，或者一个对象，一个数组，一个函数，一个类等定义了类型，就是类型注解。就是声明了类型。let numA :numbernumA = 6这里声明变量numA为数字类型，这就叫做ts为numA做了类型注解。类型注解不仅仅限于基础类型，还有我们上一节学的对象类型的注解。ts的类型推断ts具备类型判断能力let numB = 6声明的变量numB我们在这里并没有声明类型，但是ts的类型推断可以将变

2021-11-30 10:39:35 2135

原创 typescript（二）ts的静态类型

什么是ts的静态类型ts可以定义静态类型，什么是静态类型呢？就是你一旦定义了，将这个类型赋予某个变量，那么这个变量至始至终永远都是这个类型。ts使用静态类型，意味着使用静态类型的变量今后类型无法改变，类型的属性和方法也跟着确定了。静态类型分类什么是ts的静态类型1.基础类型2.对象类型2-1.对象类型2-1.数组类型2-3.函数类型2-4.类类型1.基础类型基础的静态类型包括（number,string,null,undefinde,symbol,boolean,void等）,以这些类型为变量定义类

2021-11-30 10:20:41 2892

原创 typescript（一）全局安装typescript

typescript的简介ts是在2012年由微软公司发布的，距今已经维护了9年了，ts其实就是js的超集，也就是由js演变而来的，最后所有的ts都会转化成js来进行编译。typescript开发环境搭建1.安装node运行环境可以在node官网下载node.js来进行对node.js安装。如果已经安装完成了，就可以打开命令行输入node -v来检测是否安装成功。2.全局安装typescript这里可以使用npm或者yarn都可以进行安装npm install typescript -gy

2021-11-30 09:53:17 1858

原创 ES6（三）解构赋值

解构赋值写在最前面1.数组的解构赋值（1）基本用法（2）默认值2.对象的解构赋值（1）基本用法（2）默认值3.字符串的解构赋值（1）基本用法4.函数参数的解构赋值（1）基本用法（2）默认值5.用途写在最后面写在最前面1.ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。说白了就是在解构赋值给变量2.数组的解构赋值要点：必须结构一样3.对象的解构赋值要点：{ a: a, b: b } = { a: 1, b: 2 }，理论上也是结构一样，只是

2021-11-19 14:37:23 344

weixin_44959855的博客