Javascript 高级论述
关注
分享
扫一扫
龙龙老表
分享日常课件与学习心得！
展开
-
函数中的部分内置属性
argumentsarguments 本身是一个类数组类数组拥有 length 属性拥有数字下标索引(function () { // 类数组 let objArr = { 0: "a", 1: "b", 2: "c", length: 3, }; // 数组 console.log(Array.from(objArr));})();衍生的知识点【迭代器】一个数据结构只要部署了 Symbol.iterator 属性就能使原创 2020-07-10 11:53:59 · 205 阅读 · 0 评论 -
webpack 基础使用
webpack模块化打包工具哈希值通过一定的哈希算法，将一段较长的数据映射为较短小的数据,这段短小的数据就是大数据的哈希值。一旦原始数据发生变化，其哈希值也会变化。一般可以用于文件校验。MIME Type网络资源的媒体类型，告知浏览器当前文件是什么类型，浏览器会根据该类型选择合适的形式展现。占位符（ placeholders ）名称描述[ext]资源扩展名[name]资源的基本名称[path]资源路径[hash]哈希值入口 和 出原创 2020-06-18 21:48:38 · 199 阅读 · 0 评论 -
前端代码模块化
CommonJS 规范基于文件系统，不适用于浏览器node 端模块文件// m1.jsconst mod = { a: 1, b: 3, fn() { console.log("hello"); },};module.exports = { mod,};引入模块// m2.jsconst { mod } = require("./m1.js");mod.fn(); // helloAMD 规范requireJS 是 AMD 规范的原创 2020-06-15 00:09:09 · 235 阅读 · 0 评论 -
防抖和节流
防抖用一句话来表述，只要用户没有停止当前行为，就不会处理事件。【比如只要用户鼠标还在滑动，就不会将每一次滑动事件都去执行。】<html> <head> <style> #test { width: 300px; height: 300px; background: red; } </style> </head> <body>原创 2020-06-13 02:06:07 · 211 阅读 · 0 评论 -
移动端踩坑
事件点透原因：元素触碰之后，会立即执行 touch 事件，然后会有一段时间的延迟，延迟过后在点击的位置上寻找对应元素，看看是否有鼠标事件，如果有就会立即执行<!-- 事件点透案例 --><html> <head> <style> div { width: 100px; height: 100px; background-color: red; position:原创 2020-06-13 01:59:07 · 179 阅读 · 0 评论 -
JWT 认证
基于传统的 cookie 、session 认证的一些问题session 一般存储在应用的内存中，随着用户数量增加，服务端内存开销也比较大【这里也推荐使用 redis】如果是分布式服务应用，想要共享数据还得有一台中央服务器，这样会限制负载均衡的能力CSRF【跨站请求伪造】，只要截获 cookie ，用户信息很容易暴露再一个问题是，cookie 是可以在浏览器端设置的，一旦用户不小心禁用了 cookie ，那他可能再也登录不了系统了。基于 token 的鉴权token 的鉴权原创 2020-06-08 23:07:16 · 888 阅读 · 0 评论 -
再聊跨域
CORS 【跨域资源共享】// 当然可以指定域名访问（通配符存在安全问题）// 但是这种跨域方式是不可以携带凭证的（ withCredentials ）res.setHeader("Access-Control-Allow-Origin", "*");CORS 跨域拿不到 cookie// serverconst http = require("http");const fs = require("fs");http .createServer((req, res) =>原创 2020-06-08 13:40:13 · 173 阅读 · 0 评论 -
js 正则表达式
字面量创建正则// 匹配到所有数字let str = "abc123def456***789";/* \d 代表数字 \D 代表非数字 + 匹配一次至多次 g 全部匹配（不加g只会匹配一次） i 忽略大小写 s 可以让 . 点可以匹配换行 */let reg = /\d+/g;let arr = str.match(reg);console.log(arr);构造函数创建正则let str = "abc123def456***789".原创 2020-06-05 13:15:42 · 194 阅读 · 0 评论 -
迭代对象 和 Generator
迭代协议其实就是一个迭代逻辑，完全可定制，规定了迭代什么，返回什么，如果迭代等等信息迭代对象表示可被迭代的对象，具体来说就是实现了 [Symbol.iterator] 方法的对象// 一般可以在一个数组的原型中找到 [Symbol.iterator] 方法使用// 数组本身是实现了迭代器的（拥有 [Symbol.iterator] 方法）let arr = [1, 2, 3, 4];for (let val of arr) { console.log(val);}给对象原创 2020-06-04 23:35:01 · 137 阅读 · 0 评论 -
js 针对异步的处理
异步promise 的三种状态问题（pending、resolve、reject）在没有明确执行状态之前都是 pending（等待中）let p1 = new Promise((resolve, reject) => { // 这里还没有明确执行 已解决 resolve（成功） 还是 已拒绝 reject（失败） console.log("pending...");});console.log(p1);p1.then( () => { console.lo原创 2020-06-04 00:20:22 · 146 阅读 · 0 评论 -
js 面向对象
面向对象通过函数模拟对象的继承// 定义一个基类函数function Person(name, age) { this.name = name; this.age = age;}// 一般将方法写在原型中可以降低内存的占用率Person.prototype.info = function () { console.log("姓名：" + this.name + "年龄：" + this.age);};// 定义一个学生类函数function Student(name,原创 2020-06-03 14:51:46 · 164 阅读 · 0 评论 -
new 运算符
工厂函数function factory() { let obj = {}; obj.name = "小明"; obj.age = function () { return 13; }; return obj;}let t1 = factory();let t2 = factory();// 这其实说明了每一个创建出来的对象都有自己独有的空间，但是实际上公共函数模块没有必要复制多份console.log(t1.age == t2.age); // falseN原创 2020-05-31 14:47:53 · 746 阅读 · 0 评论 -
js 字符串常用方法
String全局对象是一个用于字符串或一个字符序列的构造函数返回特定位置的字符。var s = "abcdefg";var c = s.charAt(1);console.log(c); // b返回字符串长度。var s = "abcdefg";var c = s.length;console.log(c); // 7连接两个字符串文本，并返回一个新的字符串var s1 = "abc ";var s2 = "def";var c = s1.concat(s2,原创 2020-05-30 19:55:41 · 126 阅读 · 0 评论 -
js数组常用方法
数组常用方法数组转字符串var arr = [1, 3, 5];var str1 = arr.join(); // "1,3,5"var str2 = arr.join("~"); // "1~3~5"数组逆序var arr = [1, 3, 5];var arr1 = arr.reverse(); // [5,3,1]数组排序var arr = ["a", "c", "d", "b"];arr.sort(); // ["a","b","c","d"];// sort原创 2020-05-30 19:55:07 · 168 阅读 · 0 评论 -
js 数组操作
数组简单的数组创建// 纯数字数组var arr1 = [1, 2, 3, 4, 5];// 获取数组长度arr1.length;// 包含不同类型的数组var arr2 = [1, "a", 3, 4, "5"];// 数组的嵌套var arr3 = [1, 2, 3, [4, 5, 6], 7, { x: 1, y: 2 }, arr2];// 包含 undefined 的数组var arr4 = [1, , 3];// 数组中最后是可以包含一个 逗号 的var原创 2020-05-30 19:54:33 · 179 阅读 · 0 评论 -
探究箭头函数
箭头函数箭头函数本身 没有自己的 this，arguments，super 或 new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。调用箭头函数的 this ，指向的是其声明时所在作用域的 thisdocument.onclick = function () { function fn() { console.log(this); } fn(); // 这个函数是直接调用的，所以指向的是 window};作为对比docume原创 2020-05-30 10:01:16 · 169 阅读 · 0 评论 -
Map 跟 Set 常规操作
Set对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。存储的是类数组数据。不是键值对。var mySet = new Set();mySet.add(1); // Set [ 1 ]mySet.add(5); // Set [ 1, 5 ]mySet.add(5); // Set [ 1, 5 ]mySet.add({ a: 1, b: 2 }); // Set [ 1, 5, {a: 1, b: 2}]mySet.add({ a: 1, b: 2 }); // Set原创 2020-05-30 00:07:35 · 107 阅读 · 0 评论 -
扩展运算符的各种使用场景
扩展运算符扩展运算符一次只能展开一层数组const numbers = [2, 3, [1, 2], 4];console.log(...numbers); // 2 3 [1, 2] 4跟函数参数结合function sum(x, y, z) { return x + y + z;}const numbers = [1, 2, 3];// 等价于 console.log(sum(1,2,3))console.log(sum(...numbers));functio原创 2020-05-29 22:53:26 · 1369 阅读 · 0 评论 -
解构赋值的各种使用情况
解构赋值解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。let a, b;[a, b] = [10, 20];console.log(a); //10console.log(b); //20交换两个变量的值let a = 10, b = 20;[a, b] = [20, 10];console.log(a, b); // 20 10对象解构// 需要注意按照对象格式进行解构let obj =原创 2020-05-29 22:52:49 · 420 阅读 · 0 评论 -
ES6 变量 let、var、const 对比
letlet 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值let a = 1;var b = 1;console.log(a);// 再看块级作用域if (true) { let a = 1;}console.log(a); // 报错// 对比看看 var 的定义if (true) { var a = 1;}console.log(a); // 1与 var 关键字不同的是， var 声明的变量只能是全局或者整个函数块的。 var 和 let原创 2020-05-29 14:33:36 · 265 阅读 · 0 评论 -
js 垃圾回收与内存泄露
垃圾回收JavaScript 中的内存管理是自动执行的，而且是不可见的。当我们创建了变量，而且不再使用它们时，JavaScript 引擎 就会（按照固定的时间间隔周期性）检测回收清理这些变量。如果要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap垃圾回收算法标记-清除 法标记阶段：从根集合出发，将所有活动对象及其子对象打上标记清除阶段：遍历堆，将...原创 2019-11-04 21:25:00 · 153 阅读 · 0 评论 -
js 堆栈内存
变量JavaScript 中的变量分为基本类型和引用类型，对变量的存储主要有两种位置，堆内存和栈内存。栈内存栈内存主要用于存储各种基本类型的变量，包括 Boolean、Number、String、Undefined、Null，以及对象变量的指针。栈内存中的变量一般都是已知大小或者有范围上限的，算作一种简单存储。一般情况下，当函数执行完成，所形成的私有作用域（栈内存）都会自动释放掉，但是...原创 2019-11-04 16:35:12 · 457 阅读 · 0 评论 -
构造函数与原型
构造函数JS 中的函数既可以是普通函数也可以是构造函数，区别在于调用方式。通过对象调用就是普通函数，通过 new 操作符就是构造函数。var foo = function() { name: "小明";};// 此时的 foo 是一个普通函数foo();// 此时的 foo 是一个构造函数var bar = new foo();new 运算符对自定义的构造函数进行...原创 2019-10-31 22:43:37 · 210 阅读 · 0 评论 -
闭包
闭包那我们知道，在一个函数里面是可以定义另一个函数的，而且内部函数是可以访问外部函数变量的。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。闭包会导致内存占用过高,因为变量都没有释放内存function outerFn() { //外函数 var name = "小明"; function innerFn() { //内函数 consol...原创 2019-10-30 11:50:08 · 163 阅读 · 0 评论 -
作用域与this
作用域作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。其实每一个 javascript 都可以表示为一个对象，也可以说成是 Function 对象的一个实例。全局作用域在函数外层定义的变量具有全局作用域。var a = 123;function Fn() { console.log(a);}末定义直接赋值的变量自动声明为拥有全局作用域...原创 2019-10-29 00:36:27 · 276 阅读 · 0 评论 -
javascript 数据类型
数据类型javascript 是一种弱类型语言，意味着不用提前声明变量的数据类型，在程序的运行中，类型会被自动确定。最新的 ECMAScript 标准定义了 8 种数据类型:7 种原始类型:BooleanNull可以表示变量未指向任何对象，也可以把 null 作为尚未创建的对象（还没有创建）。Undefinedundefined 是全局对象的一个属性。一个没...原创 2019-10-28 00:24:13 · 382 阅读 · 0 评论 -
javascript 脚本的加载
脚本的位置当浏览器解析到 < script> 标签的时候，会停止解析网页的其他标签，转而先去执行 javascript 脚本代码，所以有时候将 script 标签放在 < head> 之内，对 dom 的操作会报错。当然这个也有解决方案，就是可以等待页面加载完成后再执行（使用 defer 属性，当然需要看浏览器是否支持，而且使用 defer 不会阻塞浏览器的其他进程）；...原创 2019-10-26 11:00:59 · 193 阅读 · 0 评论 -
跨域的处理方案
跨域的处理方案首先了解 同源策略限制了什么Cookie、LocalStorage 和 IndexDBJs 对象AJAX 请求在讲解这中跨域方式之前，先了解页面上的一些特性: 凡是拥有”src”这个属性的标签都拥有跨域的能力。比如 “<\script>、<\img>、<\iframe>” ，这些均不受同源策略影响。JSONP其简单实现就...原创 2019-10-24 21:09:50 · 190 阅读 · 0 评论 -
HTTP 请求与响应
HTTP 请求与响应HTTP 协议是 Hyper Text Transfer Protocol（超文本传输协议）的缩写，HTTP 是基于客户端/服务端（C/S）的架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。HTTP 是无连接的，意即每次连接只处理一个请求，服务器在处理完用户的请求后，就会断开连接。HTTP 是无状态的，也就是说对于事务的处理没有记忆能力。...原创 2019-10-24 21:07:58 · 148 阅读 · 0 评论 -
XMLHttpRequest 对象
XMLHttpRequest 对象 简介XMLHttpRequest 对象用于在后台与服务器交换数据，使得 Javascript 可以进行 HTTP(S)通信老版本的 XMLHttpRequest 对象老版本的缺点其实很明显，老版本只支持数据的传输，无法读取和上传二进制文件。受同源策略限制，只能向同一域名的服务器请求数据。<script> //新建一个XMLHt...原创 2019-10-20 17:00:56 · 140 阅读 · 0 评论 -
读取 XML 文件并解析
XML 简介XML 说简单点可以是一种数据存储格式，可以自定义各种标签。当然 HTML 其实也是一种 XML ，只是它的标签格式被浏览器所承认。使用 XML这里以 javascript 为例介绍 XML 的简单使用首先定义 XML 数据<?xml version='1.0' encoding='utf-8'?><root> <perso...原创 2019-10-20 16:37:15 · 827 阅读 · 0 评论 -
名词解释
ECMAscriptECMAscript (简称 es) 说到底其实 是一种 语言标准，javascript 则是基于这个标准实现的脚本语言JavaScriptJavaScript 是 ECMAScript 的一种实现JScriptJScript 是由微软公司开发的活动脚本语言，是微软对 ECMAScript 规范的实现，这是一门解释性语言。DOM文档对象模型（Docu...原创 2019-10-20 16:54:09 · 378 阅读 · 2 评论