JavaScript
关注
分享
扫一扫
文章平均质量分 59
Learn-anything
追求极简语言，说明事物因果！
展开
-
怎么用JavaScript启动浏览器的后台线程？
一、简介Worker 对象用于创建独立后台线程，可以处理一些耗时的操作且不会阻塞主线程(通常是UI线程)。可用的 Worker有：专用worker、共享worker、Service Worker。二、专用worker只能被单一脚本调用创建后台线程。但在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性，可用方法和对象，看这里!1、worker 实例创建 work 线程并与主线程进行通讯。主线程和 worker 线程之间通过postMessage() 发送信息并用o原创 2021-12-27 19:51:44 · 1147 阅读 · 0 评论 -
除了缓存，浏览器还有哪些存储数据的方式？
一、简介浏览器提供3种用于数据存储的 JavaScript APIs：cookie 、Web Storage API、IndexedDB。二、cookiecookie 是最早期 用于存储 键/值对 数据的解决方案，但由于各种安全、无法存储复杂数据等问题，请使用另外两种方案。// cookie 使用方法document.cookie = "name=oeschger";document.cookie = "favorite_food=tripe";alert(document.cookie);原创 2021-12-27 13:17:31 · 1306 阅读 · 0 评论 -
详解JavaScript事件处理程序
一、事件是什么？事件是用户与浏览器进行交互的方式。譬如用户点击按钮就会产生click事件，浏览器会找到相应js代码并执行，我们要做的就是按照规则编写js代码放在指定位置即可。二、怎么使用事件功能？两种方式使用事件功能：1、增加元素的事件属性；2、调用内置对象的方法addEventListener。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Ran原创 2021-12-26 19:26:39 · 570 阅读 · 1 评论 -
怎么使用JavaScript代码？
一、简介HTML 文件使用 JavaScript 代码，有三种方式。1、直接写入<!DOCTYPE html><html lang='zh-CN'><head> <meta charset="utf-8"> <title>加载 JavaScript 的方法</title> <script> // 法一：加载 JavaScript 代码 document原创 2021-12-26 15:59:41 · 676 阅读 · 0 评论 -
详解JavaScript的正则表达式
一、正则表达式正则表达式是用于匹配字符串的语法。在 JavaScript中，被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、matchAll、replace、search 和 split 方法。正则表达式语法，看这里！1、创建正则表达式法一 在加载脚本时就会被编译，性能高于法二。如果正则表达式不会改变，推荐使用法一。// 法一：var re = /ab+c/[flags];// 法二：var re = new RegExp("ab+c"[,fl原创 2021-12-26 11:57:40 · 251 阅读 · 0 评论 -
详解JavaScript的new表达式
一、new用于创建用户定义的对象实例 或 创建具有构造函数的内置对象实例。// 语法new constructor[([arguments])]1、使用规则当执行 new Foo(…) 时，会发生以下事情：创建一个继承自 Foo.prototype 的新对象；使用指定参数调用构造函数，并将 this 绑定到新对象（new Foo 等同于 new Foo()，表示没有指定参数）。构造函数返回值就是 new 表达式结果。如果构造函数没有显式返回，则使用步骤1创建的对象（通常构造函数没有re原创 2021-12-26 09:59:12 · 370 阅读 · 0 评论 -
详解JavaScript的class对象
一、class 是什么？class 是 ECMAScript 2015 引入的类对象，其继承特性也是基于原型链。1、定义类// 语法一class name [extends] { // class body}// 语法二const MyClass = class [className] [extends] { // class body};2、简单实例let Foo = class { constructor() {} bar() { return "Hell原创 2021-12-26 09:56:06 · 767 阅读 · 0 评论 -
JavaScript一统江湖的野心
一、遐想如今编程语言是百家齐放、万家争鸣，犹如战国时代的群雄割据，各占一隅，逍遥度日。编程语言本质上就是定义一套自己的语法规则，然后通过编译器转换成机器可以运行指令，没有孰好孰坏，使用场景不同，没有必要上纲上线，只要能帮你解决问题，就是好语言，好工具。程序员之苦，在于每天都会有新的语言、新的规则被制定，要想程序能够良好运行，就必须去了解这些规则；程序员之幸，在于每天都有人在挠破头创造新语言，帮你解决一些编程极限问题，或是运行效率、或是运行bug…最新被逼无奈学习了 JavaScript，越深入越觉得原创 2021-12-25 17:52:13 · 353 阅读 · 0 评论 -
JavaScript运算符列表
一、运算符包含 JavaScript 所有运算符及其详细使用说明。1、一元运算符只对一个操作数进行调整。符号含义详情delete用于删除对象属性，成功返回true，失败返回false查看void可以把语句变成表达式查看typeof返回操作数的类型字符串查看+ +自增查看- -自减查看+1、转换为数字；2、加法；3、连接字符串查看-1、转换成数字；2、减法查看~按位进行非操作，反转其操作数的位查看!原创 2021-12-25 16:00:35 · 273 阅读 · 0 评论 -
详解JavaScript的Proxy对象
一、Proxy 是什么？Proxy 对象用于拦截并修改目标对象的指定操作。// 语法const p = new Proxy(target, handler)target ：目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。handler ：以函数作为属性的对象，实现拦截和自定义操作。二、怎么用？1、使用 Proxy 的简单实例访问不存在的属性，设置默认值返回而不返回 undefined ，get handler 有其具体语法规则，看这里!// 1、找到合适的 h原创 2021-12-23 23:57:23 · 2459 阅读 · 0 评论 -
详解JavaScript的this对象
一、this 是什么？this 是当前运行环境的一个属性，指向最近的对象实例。二、怎么用？1、全局<!DOCTYPE html><html lang='zh-CN'><head> <meta charset="utf-8"> <title>this</title> <script> // 全局环境下，等同于 window 对象 console.log(th原创 2021-12-23 23:32:08 · 779 阅读 · 0 评论 -
详解JavaScript的Object对象
一、Object 是什么？Object 是 JavaScript 的一种 数据类型 ，用于存储各种键值集合和更复杂的实体，几乎所有对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法，虽然大部分属性都会被覆盖（shadowed）或者说被重写了（overridden）。一个对象就是一系列属性的集合，属性包括名字和值。如果属性值是函数，那么称之为方法。1、创建新对象法一：使用 对象初始化器 创建对象var myCar = { name: "原创 2021-12-22 17:09:55 · 3298 阅读 · 0 评论 -
详解JavaScript的继承和原型链(prototype)
一、原型链 是什么？JavaScript 的每个实例对象都有一个指向上一层对象的私有属性（称之为 __proto__） ，上一层对象又指向再上一层对象，就这样层层向上直至 __proto__ 属性为 null ，最后这个对象就是 Object 。这种通过 __proto__ 属性来链接对象的方法，称之为 原型链 。var o = {a: 1};// 原型链如下:// o ---> Object.prototype ---> nullvar a = ["yo", "whadup原创 2021-12-22 13:35:45 · 782 阅读 · 0 评论 -
详解JavaScript的Generator对象
一、Generator 对象是什么？Generator对象不能直接实例化，只能由生成器函数返回生成，具有迭代功能。function* infinite() { let index = 0; while (true) { yield index++; }}const generator = infinite(); // "Generator { }"console.log(generator.next().value); // 0console.log原创 2021-12-21 22:19:49 · 542 阅读 · 0 评论 -
详解JavaScript的Function对象
一、Function 对象Function 对象是全局对象，可以动态创建函数，实际上每个函数都是一个 Function 对象。1、函数是Function类型对象// 下面代码可以判断，函数是Function类型对象(function(){}).constructor === Function // true2、创建 函数const sum = new Function('a', 'b', 'return a + b');console.log(sum(2, 6));// expected原创 2021-12-21 22:11:47 · 1793 阅读 · 0 评论 -
JavaScript的Symbol是什么？
一、Symbol 是什么？Symbol 是 ECMAScript 2015 中新添加的特性，生成一个唯一标识符，可用于属性名称、也可用于属性值。目的是消除属性名称冲突。二、怎么用？1、新建 symbol用 Symbol() 函数来创建 symbol，可用字符串作为其参数，但只能用于调试。// 1、创建新 symbollet sym1 = Symbol()let sym2 = Symbol('foo')// 2、每次调用都创建新的 symbolSymbol('foo') === Symb原创 2021-12-20 16:04:34 · 1045 阅读 · 0 评论 -
JavaScript对象怎么实现迭代(iterator)功能？
一、迭代功能是什么？可迭代对象， 需要具备 Symbol.iterator 和 next 这两个函数，即可用 for...of 进行迭代。譬如：String、Array、TypedArray、Map 和 Set，都是可迭代对象。var myIterator = { next: function() { // ... }, [Symbol.iterator]: function() { return this }}二、怎么用？1、转换 class原创 2021-12-20 16:01:27 · 977 阅读 · 0 评论 -
JavaScript中Boolean是什么？
一、Boolean 是什么？bool 是表示 true 或 false 的基础数据类型。Boolean 是表示 true 或 false 的对象数据类型，可以把其他类型转换为 Boolean 类型。1、bool 与 Boolean 区别bool 是基础类型，Boolean 是对象类型；bool 使用场景：所有需要做 true 或 false 判断的地方，优先使用 bool 类型；Boolean 使用场景：无法直接判断 true 或 false 的类型，可转换为 Boolean 类型后，再做 tr原创 2021-12-20 15:56:35 · 4813 阅读 · 0 评论 -
JavaScript中Array怎么用？
一、ArrayArray 是 JavaScript 的全局数组对象，其元素可以是不同类型，如果需要元素是同一类型，可使用 TypedArray。二、怎么用？<!DOCTYPE html><html lang='zh-CN'><head> <meta charset="utf-8"> <title>Symbol</title> <script> // 创建数组原创 2021-12-20 15:52:24 · 250 阅读 · 0 评论 -
JavaScript的异步操作（Promiseasyncawait）
一、Promise 是什么？Promise 是一个用于绑定异步操作与回调函数的对象，让代码更易读且更合理。1、简单实例<!-- index.html --><!DOCTYPE html><html lang='zh-CN'><head> <meta charset="utf-8"> <title>异步调用</title> <script> let myFir原创 2021-12-17 15:33:34 · 785 阅读 · 0 评论 -
JavaScript中怎么使用JSON?
一、JSON 是什么？JSON 是一种语法，是一种完全独立于编程语言的文本格式。可以把 任意编程语言表示的数据类型 转换成 JSON格式的字符串，也可以反向转换。这样不同编程语言，就可以通过 JSON 格式来共享数据。JSON 的详细语法规则，可以看下官网介绍！二、JavaScript 中使用 JSONJSON 是 浏览器 内置对象，无需下载，可以直接使用，有两个方法：JSON.stringify 和 JSON.parse.1、js数组类型 转 json字符串<script>原创 2021-11-26 14:32:40 · 2767 阅读 · 0 评论 -
学习fetch，从这里开始
一、fetch() 是什么？fetch() 是 浏览器内置的 全局 JavaScript 方法，用于发出 http 请求，无需下载安装，可以直接使用。// 一个简单 http 请求fetch('http://example.com/movies.json') .then(function (response) { return response.json(); }) .then(function (myJson) { console.log(my原创 2021-11-24 09:12:51 · 434 阅读 · 0 评论 -
学习axios，从这里开始
一、Axios 是什么？Axios 是可以发出 http 请求的 JavaScript 库，在 浏览器 和 node.js 环境中都可以运行。二、axios 与 fetch 的区别1、相同点：都是可以发出 http 请求的 JavaScript 库。2、不同点fetch 是 JavaScript 原生库，浏览器都支持，无需安装直接使用；axios 不是原生库，需要安装才能使用；fetch 只能在浏览器环境中运行；axios 既可以在浏览器、也可以在node.js 环境中运行。3、原创 2021-11-21 10:23:39 · 272 阅读 · 0 评论 -
html页面跳转的5中方式
法一：<a/>// target="_blank"表示保留当前页面，用新标签页打开<a href="https://smallpdf.cn" target="_blank" rel="noreferrer">收集优质网站资源</a>法二：window.location.hrefwindow.location.href="https://smallpdf.cn";法三：window.open()// "_blank" 表示保留当前页面，用新标签页打开wi原创 2021-11-21 08:08:41 · 2113 阅读 · 0 评论 -
溢出文字用省略号代替
一、问题说明文字太多，溢出部分用省略号表示。二、解决方案1、单行文本设置下面 css 即可：white-space: nowrap;overflow: hidden;text-overflow: ellipsis;2、多行文本React项目中可以使用 react-lines-ellipsis 插件解决，非常方便。// 1、安装npm install --save react-lines-ellipsis// 2、使用import LinesEllipsis from原创 2021-11-21 08:08:18 · 389 阅读 · 0 评论 -
让你的网站从http免费升级为https
一、问题让网站（http://www.example.com ）支持 https 协议，能正常访问（ https://www.example.com）这个链接。二、解决方案https 其实就是通过 ca 证书，对服务器和域名进行实名认证。这里使用公益组织 Let's Encrypt 提供的工具 certbot 免费生成 ca 证书。1、服务器环境：Ubuntu：服务器操作系统；nginx：用于部署运行网站的服务器；www.example.com ：经过备案且能正常解析到服务原创 2021-11-21 08:07:57 · 3732 阅读 · 0 评论 -
SSL TLS HTTP HTTPS SSH 分别是什么意思？
HTTP + SSL/TLS = HTTPSSSL(Secure Sockets Layer，安全套接字协议)TLS(Transport Layer Security，传输层安全协议)HTTP(HyperText Transfer Protocol ，超文本传输协议)，让计算机之间可以进行明文数据交换，默认端口80.HTTPS(HyperText Transfer Protocol Secure，超文本传输安全协议)，用SSL/TLS对数据加密，再通过HTTP传输，保证数据的安全性，默认端口443原创 2021-11-21 08:07:39 · 1122 阅读 · 0 评论 -
JavaScript中new Date对象，在safari和iphone上出现NaN(invalid Date)
一、问题如下JavaScript中使用Date对象时，在safari、iphone等浏览器上，不能正确显示时间，而显示 “NaN”。var date = new Date("2018-11-30T03:04:01+0100");二、解决方案使用node.js中的moment.js对时间进行处理，如下：const moment = require('moment') moment("2018-11-30T03:04:01+0100").format('YYYY年MM月DD日 HH:mm:ss')原创 2021-11-21 08:07:20 · 423 阅读 · 0 评论 -
JavaScript展开语法详解
一、简介展开语法(Spread syntax)，是将数组、string或者（key-value）对象在语法层面展开，用在函数调用和数组构造时，关键字是：...1、数组function sum(x, y, z) { return x + y + z;}const numbers = [1, 2, 3];console.log(sum(...numbers));// 用上面的写法，代替下面console.log(sum(numbers[0], numbers[1], numbers[原创 2021-11-21 08:06:34 · 777 阅读 · 0 评论 -
JavaScript的prototype是什么？
一、prototype 是什么？prototype 是每个函数(不包括箭头函数)都默认具有的属性，默认值为：指向函数本身的 constructor 对象。1、查看 prototype// 缺省值为：Rabbit.prototype = { constructor: Rabbit }function Rabbit() { }alert(Rabbit.prototype.constructor == Rabbit)// rabbit继承了constructorlet rabbit = new原创 2021-11-21 08:06:14 · 631 阅读 · 0 评论 -
JavaScript的箭头函数与普通函数区别？
一、什么是箭头函数？箭头函数用更简洁的方式，来完成普通函数的功能，但是不具备普通函数拥有的属性： this 、 arguments 、 super 、 new.target，有两种表达形式：1、(...args) => expressionargs表示参数有0个、1个、多个；expression表示一个js表达式，只有一行代码。2、 (...args) => { body }args表示参数有0、1、多个；body表示有多行代码，最后一行必须是 return 语句。原创 2021-11-21 08:05:50 · 258 阅读 · 0 评论 -
JavaScript的闭包(closure)是什么？
一、闭包是什么？闭包（closure）就是通过嵌套函数的方式，缓存嵌套函数及其执行环境，等待下一次调用。直观的说就是形成一个不销毁的栈环境。这样可以保护变量和方法，使其私有化。1、私有化变量function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName;}// 闭包隐藏了变量name，myFunc无法直接访问原创 2021-11-21 08:05:18 · 149 阅读 · 0 评论 -
JS中export怎么用
一、export 用法有两种不同的导出方式：命名导出和默认导出。命名导出可以导出多个接口，而默认导出，只能导出一个。1、命名导出：导入时，必须使用导出接口的名字。// 导出事先定义的特性export { myFunction，myVariable };// 导出单个特性（可以导出var，let，const,function,class）export let myVariable = Math.sqrt(2);export function myFunction() { ... };原创 2021-11-20 08:59:53 · 7751 阅读 · 0 评论 -
JS中import怎么用？
一、import 用法1、导入整个模块// 导入my-module的所有接口，并制定模块名称为myModuleimport * as myModule from '/modules/my-module.js';// 使用时，需要通过新的模块名myModule，来访问即可myModule.doAllTheAmazingThings();2、导入单个接口// 导入单个接口import {myExport} from '/modules/my-module.js';// 导入多个接口i原创 2021-11-20 08:59:31 · 38734 阅读 · 4 评论