数组挖掘
数组引用类型分析利用console.table()可以在控制台以表格的形式打印出数组
12345678910let a = [ { title: "标题1", name: "数氺哦速度符合速度符合哦" }, { title: "天文一号上天", name: "数氺哦速度符合速度符合哦" }, { title: "杭州赖女士失踪", name: "数氺哦速度符合速度符合哦" }, { title: "牛市来临", name: "数氺哦速度符合速度符合哦" }, { title: "中美关系紧张", name: "数氺哦速度符合速度符合哦" },];console.log(a);// 在控制台打印表格信息console.table(a);
数组的创建new Array(6)是往一 ...
宏任务和微任务
执行顺序:同步任务 > 宏任务 > 微任务
js 编译代码是先执行同步任务,遇到 settimeout、setInterval 等宏任务时会进入到宏任务队列中等待同步任务执行完毕后,在去宏任务队列中获取任务来执行。
12345678setTimeout(() => { console.log("宏任务");}, 0);Promise.resolve().then((res) => { console.log("微任务");});console.log("同步任务");// 返回的打印顺序为: 同步任务 微任务 宏任务
定时器的任务编排下面代码执行结果为:等待 10000 循环完毕后同时打印出: 倒计时,倒计时 2,倒计时 1
1234567891011121314151617181920212223// 浏览器在正常解析式遇到定时器会把定时器放在定时器的队列中去开始计时// 等待倒计时结束后会把任务放在宏任务队列中// 等待同步任务执行完毕后直接调 ...
Map 和 WeakMap
Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值
Map 和 Object 的区别
Map
Object
意外的键
Map 默认情况不包含任何键。只包含显式插入的键
一个 Object 有一个原型, 原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
键的类型
一个 Map 的键可以是任意值,包括函数、对象或任意基本类型。
一个 Object 的键必须是一个 String 或是 Symbol
键的顺序
Map 中的 key 是有序的。因此,当迭代的时候,一个 Map 对象以插入的顺序返回键值。
一个 Object 的键是无序的 注意:自 ECMAScript 2015 规范以来,对象确实保留了字符串和 Symbol 键的创建顺序; 因此,在只有字符串键的对象上进行迭代将按插入顺序产生键。
Size
Map 的键值对个数可以轻易地通过 size 属性获取
Object 的键值对个数只能手动计算
迭代
Map 是 iterable 的,所以可以直接被迭代
迭代一个 Object 需要以某种方式获 ...
Set 和 WeakSet
Set 和 WeakSetSet 对象是值的集合,你可以按照插入的顺序迭代它的元素。 Set 中的元素只会出现一次,即 Set 中的元素是唯一的
Set 类型与 Object 与 Array 类型对比分析12345678910111213141516// Object类型的声明和赋值let obj = {};obj.name = "张三";console.log(obj.name);// Array类型的声明和赋值let arr = [];arr.push(1, 2, 3, 4, 4, 3, 2, 1);console.log(arr);// Set类型的声明和赋值,其中set里面的值不会重复let set = new Set();set.add(1);set.add(1);set.add(2);console.log(set);
Set 的增删改查声明set类型
1let set = new Set();
set增加方法
12set.add(1);set.add(2);
set增加方法,单个删除,返回布尔类型,清空整个 set 数组, ...
Symbol 类型
Symbol 类型
ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
ES6 数据类型除了 Number 、 String 、 Boolean 、 Objec t、 null 和 undefined ,还新增了 Symbol 。
Symbol 定义方式123456789101112let sy = Symbol("这是第一个symbol");let newsy = Symbol();console.log(typeof sy); // symbolconsole.log(sy.toString()); // Symbol(这是第一个symbol)// 提取symbol的描述信息console.log(sy.description); // 这是第一个symbollet hd = Symbol.for("Symbol for 的方式定义symbol");console.log(Symbol.keyFor(hd));
Symbol 解决数据重复覆盖问题在对象中如果 key 名重复, ...
promise
promise 是什么
主要用于异步计算
可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
可以在对象之间传递和操作 promise,帮助我们处理队列
异步加载图片体验异步操作下面例子使用体验异步加载图片,图片加载成功后返回图片信息,否则返回失败没有使用 Promise 可以看到代码非常复杂
12345678910111213141516function loadimg(src, resolve, reject) { let image = new Image(); image.src = src; image.onload = resolve(image); image.onerror = reject;}loadimg( "./image/preview (1).jpg", (image) => { document.body.appendChild(image); }, () => { console.log("失败"); ...
类型判断
类型判断typeof 用来显示该字段为什么类型,instanceof 判断字段是否为某种类型
1234567891011121314151617let data = {};console.log(typeof data); // objectconsole.log(data instanceof Object); // truelet array = [];console.log(typeof array); // objectconsole.log(data instanceof Array); // trueconsole.log(data instanceof Object); // falselet name;console.log(typeof name); // undefinedlet num = 5;console.log(typeof num); // numberlet text = "文字";console.log(typeof text); // string
字符串转义和模板字面量12345678910111213 ...