JavaScript
关注
分享
扫一扫
文章平均质量分 60
火星飞鸟
学习前端ing...
展开
-
Web Workers：在后台线程执行指定脚本
使用Web Worker可以在后台线程中运行 JavaScript，线程可以执行任务而不会干扰用户界面。使用规则worker是使用Worker()构造出的实例对象，在后台线程中运行一个命名的 JavaScript 脚本。worker实例对象可以通过将信息发送到创建它的 JavaScript 代码。worker运行在另一个全局上下文中，而非window对象。worker中不能直接操作 DOM 节点，也不能使用window对象的默认方法和属性。worker和主线程之间，通过postMessage(原创 2022-04-11 15:05:19 · 1323 阅读 · 0 评论 -
学习 redux 源码笔记：redux 是如何工作的？
最近学习了状态管理库 redux 的源码，简单记录一下学习笔记。redux 简介redux是 JavaScript 的状态管理库，提供可预测的状态管理。redux有几个核心概念：store：唯一存放状态的容器state：状态action：状态更新的动作reducer：action对应的更新状态的动作函数dispatch：通过action找到对应的reducer，更新stateredux的使用有三大原则：单一数据源整个应用的state存储在一个状态树中，整个状态树只存在于唯一的s原创 2022-04-07 15:48:33 · 1203 阅读 · 0 评论 -
JavaScript关于JSON字符串的相关操作
JSON.stringify语法JSON.stringify(value[, replacer [, space]])value：将要序列化成 一个 JSON 字符串的值replacer：如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。space：指定缩进用的空白字符串，美化输出。举例如下原创 2022-04-01 16:55:02 · 1909 阅读 · 0 评论 -
JavaScript 中null和undefined的区别
JavaScript 中的基本数据类型包括：String、Number、Boolean、null、undefined、BigInt，其中null和undefined都表示“无”这层含义，一般情况下，两者几乎没有区别。1. 相似之处在全局定义两个变量，一个是null，另一个是undefined，最终他们都被挂载到全局对象上了，且值都为undefined：var a = null;var b = undefined;console.log(global.a, global.b); // undefi原创 2021-12-16 16:23:15 · 1085 阅读 · 1 评论 -
JavaScript 6种继承方式详解
1. 原型链继承// 定义父类function Parent() { this.name = 'Jack';}// 父类原型添加方法Parent.prototype.getName = function () { return this.name;};// 子类function Child() {}// 子类的原型设置为父类Parent的实例Child.prototype = new Parent();// 实例化子类const child = new Child原创 2021-08-03 15:04:28 · 262 阅读 · 0 评论 -
JavaScript 迭代、迭代器模式详解
1. 什么是迭代循环是迭代机制的基础，因为它可以指定迭代的次数，以及每次迭代要执行什么操作。每次循环都会在下一次迭代开始之前完成，而每次迭代的顺序都是事先定义好的。迭代会在一个有序集合上进行。数组是 JavaScript 中有序集合的最典型例子。const arr = ['foo', 'bar', 'baz'];for (let i = 0; i < arr.length; i++) { console.log(arr[i]);}但由于如下原因，通过这种循环来执行例程并不理想：原创 2021-07-30 16:02:09 · 352 阅读 · 0 评论 -
JavaScript forEach、for-in和for-of的区别总结
for-infor...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。for (variable in object){ ...}variable：在每次迭代时，variable会被赋值为不同的key，即属性名。object：非Symbol类型的可枚举属性被迭代的对象。for ... in更适合遍历对象，不建议与数组一起使用，因为遍历顺序有可能不是按照实际数组的索引顺序。for ... in会遍历所有的可枚举属性，包括原型：const obj = { a: 1, b原创 2021-07-19 16:10:22 · 357 阅读 · 1 评论 -
JavaScript 判断一个数组是否包含了另一个数组的全部元素
定义函数判断一个数组是否包含了另一个数组的全部元素，话不多说，直接上代码：代码// 定义函数const isContained = (a, b) => { // a和b其中一个不是数组，直接返回false if (!(a instanceof Array) || !(b instanceof Array)) return false; const len = b.length; // a的长度小于b的长度，直接返回false if (a.length &l原创 2021-07-10 09:35:24 · 6336 阅读 · 1 评论 -
JavaScript JSON对象和字符串互相转化
1. JSON对象 → JSON字符串JSON.stringify()const obj = { id: '0', name: 'Jack', age: '18',};const str = JSON.stringify(obj);console.log(str); // {"id":"0","name":"Jack","age":"18"}2. JSON字符串 → JSON对象JSON.parse()const str = '{"id":"0","name":原创 2021-05-06 21:24:06 · 362 阅读 · 0 评论 -
JavaScript 数组迭代方法笔记
在JavaScript中操作数组，可以使用for、while循环，也可以使用数组数组迭代方法，更方便地完成。1. forEachforEach()方法没有返回值，运行时为每个数组元素调用一次回调函数。arr.forEach(callback, [thisArg]);该方法需要传入一个回调函数callback，函数参数：项目值`value项目索引index数组本身arraythisArg为可选参数，表示执行callback时的 this 的值。如果给forEach传递了第二个参数，回调函原创 2021-04-26 19:36:24 · 287 阅读 · 0 评论 -
【前端面试题】一文搞懂JavaScript this指向问题
JavaScript中的this代表的是当前行为执行的主体，在JavaScript中主要研究的都是函数中的this，但并不是说只有在函数里才有this，this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。1. 函数调用函数执行时首先看函数名前面是否有.，若有，.前面是谁，this就是谁。没有的话this就是window。function fn() { console.log(this);}let obj = { fn: fn };fn(); // this原创 2021-04-16 10:23:18 · 566 阅读 · 0 评论 -
JavaScript实现颜色查看器
实现效果方框中初始为白色输入框中输入颜色代码，点击查看颜色，在上方即可出现对应颜色点击复原，复原到初始的白色，同时清空输入框的内容实现代码<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>颜色查看器</title> <style>原创 2021-04-11 20:48:30 · 414 阅读 · 0 评论 -
JavaScript使用递归遍历json所有节点值
深度优先遍历一个json对象中所有的节点值，并打印出路径。实现代码const json = { a: { b: { c: 1, d: 2, }, }, e: [3, 4],};// 深度优先遍历const dfs = (n, path) => { console.log(n, path); // 获取所有的子节点，并遍历 Object.keys(n).forEac原创 2021-02-26 14:01:44 · 1058 阅读 · 0 评论 -
JavaScript中的变量提升
当执行 JS 代码时，会生成执行环境。如果代码写在函数中，会产生函数执行环境，否则就是在全局执行环境中。只有这两种执行环境。看下面一段代码：b(); // call bconsole.log(a); // undefinedvar a = 'Hello world';function b() { console.log('call b');}这是因为函数和变量提升的原因，通常提升的解释是说将声明的代码移动到了顶部。但更准确的解释是，在生成执行环境时，会有两个阶段：第一个阶段原创 2020-12-29 16:38:25 · 242 阅读 · 4 评论 -
JavaScript 实现一个sleep()延迟函数
实现效果实现一个sleep()延迟函数，例如，sleep(2000)表示等待2000毫秒，再执行后面的操作。实现过程利用Promise：const sleep = (time) => { return new Promise(resolve => setTimeout(resolve, time));}验证console.log(1);sleep(2000).then(() => { console.log(2);});console.log(3)原创 2020-12-20 18:22:40 · 1519 阅读 · 0 评论 -
JavaScript 实现(4).add(2).minus(1)功能
实现效果// 4+2-1=5console.log((4).add(2).minus(1)); // 5实现过程使用Number对象的prototype属性，为对象添加方法即可。Number.prototype.add = function(n) { // this为 Number {4} 实例对象 // this.valueOf()为Number {4}的基本数字值4 return this.valueOf() + n;};Number.prototype.minu原创 2020-12-16 12:49:05 · 677 阅读 · 0 评论 -
JavaScript 实现Array.isArray
实现效果：实现原生 JavaScript 中的Array.isArray()方法，使用如下：console.log(Array.isArray([])); // trueconsole.log(Array.isArray({})); // falseconsole.log(Array.isArray(123)); // falseconsole.log(Array.isArray('123')); // false实现过程：通过Object.prototype.toString.call()原创 2020-12-15 11:57:59 · 2089 阅读 · 0 评论 -
JavaScript 实现一个判断数据类型的函数
实现效果：console.log(getType(123)); // numberconsole.log(getType('string')); // stringconsole.log(getType(true)); // booleanconsole.log(getType(undefined)); // undefinedconsole.log(getType(null)); // nullconsole.log(getType({})); // objectconsole.log(ge原创 2020-12-14 21:28:39 · 1304 阅读 · 3 评论 -
JavaScript 数组方法
1. 数组变异方法变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展push()往数组最后面添加一个元素，成功返回当前数组的长度pop()删除数组的最后一个元素，成功返回删除元素的值shift()删除数组的第一个元素，成功返回删除元素的值unshift()往数组最前面添加一个元素，成功返回当前数组的长度splice()有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值s原创 2020-12-09 21:36:19 · 302 阅读 · 1 评论 -
JavaScript 查找字符串中出现最多的字符和个数
思路：利用charAt()遍历这个字符串把每个字符都存储给对象，如果对象没有该属性，就先幅值为1，如果存在了就+1遍历对象，得到最大值和该字符在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象中，对应的属性值是该字符出现的次数代码实现：var str = 'abdgdbcaethbganmugthaesqszaphfdvwd';// 1.统计次数// 创建了一个空的对象，存储字符串中的每个字符。属性：每个字符，属性值：该字符出现的次数var obj = {};for (原创 2020-12-08 20:21:12 · 1973 阅读 · 0 评论 -
JavaScript 实现数组去重的几种方法
原始数组：[1, 1, 1, 2, 2, 3, 3]去重后数组：[ 1, 2, 3 ]1. 双重for循环function distinct(arr) { for (let i = 0, len = arr.length; i < len; i++) { for (j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1);原创 2020-12-07 20:16:32 · 281 阅读 · 1 评论 -
JavaScript 使用链表指针获取JSON的节点值
代码：const json = { a: { b: { c: 1 } }, d: { e: { f: { h: 2 }, g: { i: 3 } } }}// 遍历json对象的路径const path1 = ['a',原创 2020-12-01 20:46:18 · 441 阅读 · 0 评论 -
前端学习 FormData 对象的方法
1. 常用的FormData对象方法获取表单对象中属性的值formData.get('key');设置表单对象中属性的值formData.set('key', 'value');删除表单对象中属性的值formData.delete('key');向表单对象中追加属性值formData.append('key', 'value');注意：set()方法与append()方法的区别是，在属性名已存在的情况下，set()会覆盖已有键名的值，append()会保留两个值。2. 其他Form原创 2020-11-17 19:43:33 · 1296 阅读 · 1 评论 -
前端学习 FormData 对象的基本用法
1. FormData对象的作用模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。异步上传二进制文件。2. FormData对象的使用准备HTML表单<form id="form"> <input type="text" name="username"> <input type="password" name="password"> <input type="button"&g原创 2020-11-17 19:29:16 · 1268 阅读 · 0 评论 -
JavaScript 实现上传图片预览功能
实现效果：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box原创 2020-11-15 21:08:35 · 168 阅读 · 0 评论 -
ES6 新增语法
1. letES6 中新增了用于声明变量的关键字1.1 let声明的变量只在所处于的块级有效 if (true) { let a = 10; }console.log(a) // a is not defined注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。1.2 不存在变量提升console.log(a); // a is not defined let a = 20;1.3 暂时性死区利用let声明的变量会绑定在这个块级原创 2020-11-02 08:29:59 · 1045 阅读 · 1 评论 -
JavaScript 递归的3个小应用
递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解：函数内部自己调用自己，这个函数就是递归函数。注意：递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return。1. 利用递归求1~n的阶乘// 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..nfunction fn(n) { if (n == 1) { return 1; } return n *原创 2020-11-02 07:38:59 · 186 阅读 · 0 评论 -
JavaScript 闭包
1. 变量的作用域变量根据作用域的不同分为两种：全局变量和局部变量。函数内部可以使用全局变量。函数外部不可以使用局部变量。当函数执行完毕，本作用域内的局部变量会销毁。2. 闭包闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。**作用：**延伸变量的作用范围。function fn1() { // fn1 就是闭包函数 var num = 10; function fn2() {原创 2020-11-02 07:38:44 · 117 阅读 · 0 评论 -
JavaScript 高阶函数
高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。function fn(callback){ callback&&callback();} fn(function(){alert('hi')}function fn(){ return function() {}}fn(); 此时fn就是一个高阶函数 。函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。 最典型的就是作为回调函数。同理函数也可以作为返回值传递回来。原创 2020-11-02 07:38:29 · 117 阅读 · 0 评论 -
JavaScript 严格模式
1. 什么是严格模式JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。严格模式对正常的 JavaScript 语义做了一些更改：消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。消除代码运行的一些不安全之处，保证代码运行的安全。提高编译器原创 2020-11-01 20:28:06 · 153 阅读 · 0 评论 -
JavaScript 改变函数内部this指向
JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部this的指向问题，常用的有 bind()、call()、apply()三种方法。1. call()方法call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的this指向fun.call(thisArg, arg1, arg2, ...);thisArg：在fun函数运行时指定的this值arg1，arg2：传递的其他参数返回值就是函数的返回值，因为它就是调用函数因此当我们想改变this指向原创 2020-11-01 20:17:23 · 905 阅读 · 0 评论 -
JavaScript 函数内部的this指向
这些this的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同。调用方式this指向普通函数调用window构造函数调用实例对象，原型对象里的方法也指向实例对象对象方法调用该方法所属对象事件绑定方法绑定事件的对象定时器函数window立即执行函数window...原创 2020-11-01 19:51:44 · 152 阅读 · 0 评论 -
JavaScript 函数的定义和调用
1. 函数的定义方式函数声明方式function关键字 (命名函数)function fn(){}函数表达式（匿名函数）var fn = function(){}new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);// var fn = new Function('参数1','参数2'..., '函数体');/*Function 里面参数都必须是字符串格式第三种方式执行效原创 2020-11-01 19:47:10 · 334 阅读 · 0 评论 -
ES5 新增方法
ES5 中新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括：数组方法字符串方法对象方法1. 数组方法迭代(遍历)方法：forEach()、map()、filter()、some()、every()；1.1 forEach()arr.forEach(function(value, index, array) { //参数1:数组当前项的值 //参数2:数组元素的索引 //参数3:数组对象本身})//相当于数组遍历的 for循环 没有返回值1.2原创 2020-11-01 19:40:35 · 249 阅读 · 0 评论 -
JavaScript 继承
1. call()call()可以调用函数call()可以修改this的指向，使用call()的时候，参数一是修改后的this指向，参数2，参数3…使用逗号隔开连接function fn(x, y) { console.log(this); console.log(x + y);}var usr = { name: 'Jack'};fn(); // 原来的this指向的是windowfn.call(usr, 1, 2); // 使用call()此时的this指向了原创 2020-11-01 19:08:01 · 130 阅读 · 0 评论 -
JavaScript 原型对象和对象原型
1. 构造函数原型prototype构造函数通过原型分配的函数是所有对象所共享的。JavaScript 规定，每一个构造函数都有一个prototype属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。function Star(uname, age) { this.uname = uname; this.age = age;原创 2020-11-01 18:43:53 · 1105 阅读 · 0 评论 -
JavaScript 原型继承链
每一个实例对象又有一个__proto__属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有__proto__属性，这样一层一层往上找就形成了原型链。原型链查找机制：当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。如果没有就查找它的原型（也就是__proto__指向的prototype原型对象）。如果还没有就查找原型对象的原型（Object的原型对象）。依此类推一直找到Object为止（null）。__proto__对象原型的意义就在于为对象成员查找机制原创 2020-11-01 18:42:25 · 127 阅读 · 0 评论 -
JavaScript 构造函数、实例、原型对象 三角关系
构造函数的prototype属性指向了构造函数原型对象实例对象是由构造函数创建的，实例对象的__proto__属性指向了构造函数的原型对象构造函数的原型对象的constructor属性指向了构造函数，实例对象的原型的constructor属性（usr1. __proto__.constructor）也指向了构造函数...原创 2020-11-01 18:41:47 · 253 阅读 · 0 评论 -
JavaScript 构造函数和原型
1. 对象的三种创建方式（1）字面量方式var obj = {};（2）new关键字var obj = new Object();（3）构造函数方式function Person(name,age){ this.name = name; this.age = age;}var obj = new Person('zs',12);2. 静态成员和实例成员2.1 静态成员静态成员是在构造函数本身上添加的成员，如下列代码中sex就是静态成员，静态成员只能通过构造函数来访问fu原创 2020-11-01 17:30:30 · 175 阅读 · 0 评论 -
JavaScript 面向对象
1. 面向过程与面向对象1.1 面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个依次调用就可以了。1.2 面向对象面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。1.3 面向过程与面向对象对比面向过程面向对象优点性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护原创 2020-10-31 12:05:05 · 780 阅读 · 2 评论