一起养成写作习惯!5月4/31
- 对象的键是字符串和符号; Map是任何值,包括函数、对象等。
- Map 中的键是有序的,而添加到 Object 中的键不是。因此,在对其进行迭代时, Map 对象会按插入顺序返回键。
- 使用 size 属性轻松获取 Map 的大小,而 Object 中的属性数量必须手动确定。
- Map 是可迭代的,因此可以直接迭代,而对 Object 进行迭代则需要以某种方式获取其键并对其进行迭代。
- 在涉及频繁添加和删除密钥对的场景中,Map 可能会表现得更好。
Object(大多数引用值的示例使用的是Object类型)
显示地创建Object的示例有两种方式:第一种使用new操作符和Object构造函数;另外一种使用对象字面量表示法。
对象字面量是对象定义的简写形式,目的是为了简化包含大量属性的对象的创建。
对象、类与面向对象编程
ECMA-262 将对象定义为一组属性的无序集合。创建自定义对象的通常方式是创建 Object 的一个新实例,然后再给它添加属性和方法。(目前流行使用对象字面量方式)
ECMA-262 使用一些内部特性来描述属性的特征。
为了将某个特性标识为内部特性,规范会用两个中括号把特性的名称括起来,比如[[Enumerable]]
。
属性分两种:数据属性和访问器属性。
- 数据属性
数据属性有 4 个特性描述它们的行为。
[[Configurable]]
:表示属性是否可以通过 delete 删除并重新定义,是否可以修改它的特 性,以及是否可以把它改为访问器属性。[[Enumerable]]
:表示属性是否可以通过 for-in 循环返回。[[Writable]]
:表示属性的值是否可以被修改。[[Value]]
:包含属性实际的值。默认值为 undefined。
要修改属性的默认特性,就必须使用 Object.defineProperty()方法。这个方法接收 3 个参数:要给其添加属性的对象、属性的名称和一个描述符对象。
一个属性被定义为不可配置之后,就不能再变回可配置的了。虽然可以对同一个属性多次调用 Object.defineProperty(),但在把 configurable 设置为 false 之后就会受限制了。
- 访问器属性
访问器属性不包含数据值。相反,它们包含一个获取(getter)函数和一个设置(setter)函数,不过这两个函数不是必需的。在读取访问器属性时,会调用获取函数,这个函数的责任就是返回一个有效的值。
访问器属性有 4 个特性描述它们的行为。
[[Configurable]]
:表示属性是否可以通过 delete 删除并重新定义,是否可以修改它的特性,以及是否可以把它改为数据属性。[[Enumerable]]
:表示属性是否可以通过 for-in 循环返回。[[Get]]
:获取函数,在读取属性时调用。[[Set]]
:设置函数,在写入属性时调用。
访问器属性是不能直接定义的,必须使用 Object.defineProperty()。
定义多个属性
ECMAScript 提供了 Object.defineProperties()方法。这个方法可以通过多个描述符一次性定义多个属性。它接收两个参数:要为之添加或修改属性的对象和另一个描述符对象,其属性与要添加或修改的属性一一对应。
读取属性的特性
使用 Object.getOwnPropertyDescriptor()方法可以取得指定属性的属性描述符。这个方法接收两个参数:属性所在的对象和要取得其描述符的属性名。返回值是一个对象,对于访问器属性包含configurable、enumerable、get 和 set 属性,对于数据属性包含 configurable、enumerable、writable 和 value 属性。
ECMAScript 2017 新增了 Object.getOwnPropertyDescriptors()静态方法。
这个方法实际上会在每个自有属性上调用 Object.getOwnPropertyDescriptor()并在一个新对象中返回它们。
合并对象
ECMAScript 6为合并对象提供了 Object.assign()方法。这个方法接收一个目标对象和一个或多个源对象作为参数,然后将每个源对象中可枚举(Object.propertyIsEnumerable()返回 true)和自有(Object.hasOwnProperty()返回 true)属性复制到目标对象。
以字符串和符号为键的属性会被复制。对每个符合条件的属性,这个方法会使用源对象上的[[Get]]
取得属性的值,然后使用目标对象上的[[Set]]
设置属性的值。
let dest, src, result;
/**
* 简单复制
*/
dest = {};
src = { id: 'src' };
result = Object.assign(dest, src);
// Object.assign 修改目标对象
// 也会返回修改后的目标对象
console.log(dest === result); // true
console.log(dest !== src); // true
console.log(result); // { id: src }
console.log(dest); // { id: src }
复制代码
/**
* 多个源对象
*/
dest = {};
result = Object.assign(dest, { a: 'foo' }, { b: 'bar' });
console.log(result); // { a: foo, b: bar }
/**
* 获取函数与设置函数
*/
dest = {
set a(val) {
console.log(`Invoked dest setter with param ${val}`);
}
};
src = {
get a() {
console.log('Invoked src getter');
return 'foo';
}
};
/**
* 获取函数与设置函数
*/
dest = {
set a(val) {
console.log(`Invoked dest setter with param ${val}`);
}
};
src = {
get a() {
console.log('Invoked src getter');
return 'foo';
}
};
Object.assign(dest, src);
// 调用 src 的获取方法
// 调用 dest 的设置方法并传入参数"foo"
// 因为这里的设置函数不执行赋值操作
// 所以实际上并没有把值转移过来
console.log(dest); // { set a(val) {...} }
复制代码
Object.assign()实际上对每个源对象执行的是浅复制。
对象标识及相等判定
在 ECMAScript 6 之前
// 这些是===符合预期的情况
console.log(true === 1); // false
console.log({} === {}); // false
console.log("2" === 2); // false
// 这些情况在不同 JavaScript 引擎中表现不同,但仍被认为相等
console.log(+0 === -0); // true
console.log(+0 === 0); // true
console.log(-0 === 0); // true
// 要确定 NaN 的相等性,必须使用极为讨厌的 isNaN()
console.log(NaN === NaN); // false
console.log(isNaN(NaN)); // true
复制代码
ECMAScript 6 规范新增了 Object.is()
console.log(Object.is(true, 1)); // false
console.log(Object.is({}, {})); // false
console.log(Object.is("2", 2)); // false
// 正确的 0、-0、+0 相等/不等判定
console.log(Object.is(+0, -0)); // false
console.log(Object.is(+0, 0)); // true
console.log(Object.is(-0, 0)); // false
// 正确的 NaN 相等判定
console.log(Object.is(NaN, NaN)); // true
复制代码
增强的对象语法
- 属性值简写
- 可计算属性
- 简写方法名
对象解构
ECMAScript 6 新增了对象解构语法
- 嵌套解构
- 部分解构
- 参数上下文匹配
Map
作为 ECMAScript 6 的新增特性,Map 是一种新的集合类型.
const m = new Map();
// 使用嵌套数组初始化映射
const m1 = new Map([
["key1", "val1"],
["key2", "val2"],
["key3", "val3"]
]);
alert(m1.size); // 3
// 使用自定义迭代器初始化映射
const m2 = new Map({
[Symbol.iterator]: function*() {
yield ["key1", "val1"];
yield ["key2", "val2"];
yield ["key3", "val3"];
}
});
alert(m2.size); // 3
// 映射期待的键/值对,无论是否提供
const m3 = new Map([[]]);
alert(m3.has(undefined)); // true
alert(m3.get(undefined)); // undefined
复制代码
初始化之后,可以使用 set()方法再添加键/值对。另外,可以使用 get()和 has()进行查询,可以通过 size 属性获取映射中的键/值对的数量,还可以使用 delete()和 clear()删除值。
set()方法返回映射实例,因此可以把多个操作连缀起来。
const m = new Map();
const functionKey = function() {};
const symbolKey = Symbol();
const objectKey = new Object();
m.set(functionKey, "functionValue");
m.set(symbolKey, "symbolValue");
m.set(objectKey, "objectValue");
alert(m.get(functionKey)); // functionValue
alert(m.get(symbolKey)); // symbolValue
alert(m.get(objectKey)); // objectValue
// SameValueZero 比较意味着独立实例不冲突
alert(m.get(function() {})); // undefined
const m = new Map();
const objKey = {},
objVal = {},
arrKey = [],
arrVal = [];
m.set(objKey, objVal);
m.set(arrKey, arrVal);
objKey.foo = "foo";
objVal.bar = "bar";
arrKey.push("foo");
arrVal.push("bar");
console.log(m.get(objKey)); // {bar: "bar"}
console.log(m.get(arrKey)); // ["bar"]
复制代码
顺序与迭代
映射实例可以提供一个迭代器(Iterator),能以插入顺序生成[key, value]形式的数组。可以通过 entries()方法(或者 Symbol.iterator 属性,它引用 entries())取得这个迭代器。
const m = new Map([
["key1", "val1"],
["key2", "val2"],
["key3", "val3"]
]);
alert(m.entries === m[Symbol.iterator]); // true
for (let pair of m.entries()) {
alert(pair);
}
// [key1,val1]
// [key2,val2]
// [key3,val3]
for (let pair of m[Symbol.iterator]()) {
alert(pair);
}
// [key1,val1]
// [key2,val2]
// [key3,val3]
复制代码
const m = new Map([
["key1", "val1"],
["key2", "val2"],
["key3", "val3"]
]);
console.log([...m]); // [[key1,val1],[key2,val2],[key3,val3]]
m.forEach((val, key) => alert(`${key} -> ${val}`));
// key1 -> val1
// key2 -> val2
// key3 -> val3
复制代码
const m1 = new Map([
["key1", "val1"]
]);
// 作为键的字符串原始值是不能修改的
for (let key of m1.keys()) {
key = "newKey";
alert(key); // newKey
alert(m1.get("key1")); // val1
}
const keyObj = {id: 1};
const m = new Map([
[keyObj, "val1"]
]);
// 修改了作为键的对象的属性,但对象在映射内部仍然引用相同的值
for (let key of m.keys()) {
key.id = "newKey";
alert(key); // {id: "newKey"}
alert(m.get(keyObj)); // val1
}
alert(keyObj); // {id: "newKey"}
复制代码
ECMAScript 6 新增的“弱映射”(WeakMap)是一种新的集合类型。不可迭代键。
弱映射中的键只能是 Object 或者继承自 Object 的类型,尝试使用非对象设置键会抛出TypeError。值的类型没有限制。
WeakMap 中“weak”表示弱映射的键是“弱弱地拿着”的。
使用弱映射: 1. 私有变量 ; 2. DOM 节点元数据
未完结!更多内容尽情期待下一节~
【深入理解JS核心技术】欢迎各位观众老爷,求点赞,求关注,求转发~
低调务实优秀中国好青年 (简介) && 附加答案
一个 ☝️ 正经的前端学习 开源 仓库,启发来自 淘宝大佬 @冴羽 ,初心做一个真正能帮助到大家的仓库。一个人可以走的更快,但一群人才能走的更远。(非常口语化的,手写总结)
欢迎大家前来讨论,如果觉得对你的学习有一定的帮助,欢迎点个Star (此仓库每天都会准时更新)- vx联系: xiaoda0423
👤:我是哪吒: 如果你所学的东西 处于喜欢 才会有强大的动力支撑。
地址 ⬇️
🐤 交流讨论 && 如何学习 && 转载声明 && 帮忙修正以及补充
第一:你可以直接在本仓库阅读即可,阶段性学习。 (可以转载里面的所有知识点用到任何地方,但请添加仓库的地址)有问题欢迎提交issues
🐂 阶段三十一(648)
展开查看
- 624.220.存在重复元素III
- 625.compare_react_life
- 626.creat_react_app
- 627.higher_order_fn
- 628.jsonp
- 629.Object.defineProperty
- 630.react_component
- 631.react_createRef
- 632.react_domdiffing
- 633.react_eventhandler
- 634.react_life_cycle
- 635.react_lift_process
- 636.Route
- 637.setTimeoutTosetInterval
- 638.react
- 639.code1
- 640.code2
- 641.code3
- 642.code4
- 643.code5
- 644.code6
- 645.code7
- 646.code8
- 647.code9
- 648.code10
🐂 阶段三十(623)
展开查看
- 599.前K个高频单词
- 600._reverse
- 601.dateFormat
- 602.formatNumber
- 603.repeat
- 604.Text类型
- 605.add
- 606.argumentsNum
- 607.asynclight
- 608.callbacklight
- 609.code1
- 610.EventCenter
- 611.expansion-operator
- 612.extendPrototype
- 613.fetch-async-await
- 614.findMostWord
- 615.likeToArr
- 616.objectToTree
- 617.promiseImg
- 618.promiselight
- 619.reduce
- 620.react_min_setState
- 621.react_setState
- 622.react-props
- 623.react-props-test
🤨 阶段二十九(598)
展开查看
- 573.全排列II
- 574._filter
- 575._flat
- 576._map
- 577._push
- 578.ajax
- 579.apply
- 580.bind
- 581.call
- 582.copy
- 583.curry
- 584.dateFormat
- 585.debounce
- 586.deepcopy
- 587.flatten
- 588.getType
- 589.instanceof
- 590.new
- 591.Object.create.js
- 592.promise-ajax
- 593.Promise.all
- 594.promise.js
- 595.Promise.race
- 596.Promise.then
- 597.setArr
- 598.throttle
🤨 阶段二十九(572)
😛 阶段二十八(565)
展开查看
- 556.859. 亲密字符串
- 557.860. 柠檬水找零
- 558.969. 煎饼排序
- 559.621. 任务调度器
- 560.面试题 03.04. 化栈为队
- 561.682. 棒球比赛
- 562.844 比较含退格的字符串
- 563.946. 验证栈序列
- 564.20 有效的括号
- 565.1021. 删除最外层的括号
😛 阶段二十七(555)
展开查看
- 545.92. 反转链表 II
- 546.206. 反转链表
- 547.202. 快乐数
- 548.142. 环形链表 II
- 549.141. 环形链表
- 550.Node类型-节点关系
- 551.25. K 个一组翻转链表
- 552.61. 旋转链表
- 553.24 两两交换链表中的节点
- 554.933. 最近的请求次数
- 555.面试题 17.09. 第 k 个数
😛 阶段二十六(544)
展开查看
- 533.23. 合并K个升序链表
- 534.224. 基本计算器
- 535.122. 买卖股票的最佳时机 II
- 536.309. 最佳买卖股票时机含冷冻期
- 537.123. 买卖股票的最佳时机 III
- 538.188. 买卖股票的最佳时机 IV
- 539.714. 买卖股票的最佳时机含手续费
- 540.2226. 每个小孩最多能分到多少糖果
- 541.139. 单词拆分
- 542.suspense-and-lazy
- 543.日志功能
- 544.token
😛 阶段二十五(532)
展开查看
- 526.2135. 统计追加字母可以获得的单词数
- 527.1312. 让字符串成为回文串的最少插入次数
- 528.面试题 08.09. 括号
- 529.3. 无重复字符的最长子串
- 530.316. 去除重复字母
- 531.节点层级
- 532.Node 类型
😛 阶段二十四(525)
展开查看
- 515.剑指 Offer 38. 字符串的排列
- 516.剑指 Offer 46. 把数字翻译成字符串
- 517.剑指 Offer 47. 礼物的最大价值
- 518.剑指 Offer 59 - I. 滑动窗口的最大值
- 519.leetcode 35. 搜索插入位置
- 520.DOM
- 521.剑指 Offer 53 - I. 在排序数组中查找数字 I
- 522.剑指 Offer 60. n个骰子的点数
- 523.26. 删除有序数组中的重复项
- 523.122. 买卖股票的最佳时机 II
- 524.axios.all和axios.spread
- 525.关于Axios篇
😛 阶段二十三(514)
展开查看
- 501.剑指 Offer 07. 重建二叉树
- 502.剑指 Offer 10- I. 斐波那契数列
- 503.剑指 Offer 12. 矩阵中的路径
- 504.剑指 Offer 13. 机器人的运动范围
- 505.剑指 Offer 14- I. 剪绳子
- 506.剑指 Offer 14- II. 剪绳子 II
- 507.剑指 Offer 16. 数值的整数次方
- 508.剑指 Offer 24. 反转链表
- 509.剑指 Offer 26. 树的子结构
- 510.剑指 Offer 32 - I. 从上到下打印二叉树
- 511.生成器基础
- 512.通过 yield 中断执行
- 513.生成器作为默认迭代器
- 514.提前终止生成器
📕 阶段二十二(500)
展开查看
- 481.46. 全排列
- 482.15. 三数之和
- 483.1. 两数之和
- 484.剑指 Offer 10- II. 青蛙跳台阶问题
- 485.剑指 Offer 48. 最长不含重复字符的子字符串
- 486.剑指 Offer 04. 二维数组中的查找
- 487.34. 在排序数组中查找元素的第一个和最后一个位置
- 488.说说你对arguments的理解,它是数组吗?
- 489.怎样修改chrome记住密码后自动填充表单的黄色背景?
- 490.css的属性content有什么作用呢?
- 491.写一个获取数组的最大值、最小值的方法
- 492.请描述css的权重计算规则
- 493.rgba()和opacity这两个的透明效果有什么区别呢?
- 494.meta
- 495.写一个验证身份证号的方法
- 496.什么是无障碍web
- 497.写一个方法把0和1互转
- 498.让网页的字体变得清晰,变细用CSS怎么做?
- 499.解释下CRLF是什么?
- 500.网页上的验证码是为了解决什么问题?
😋 阶段二十一(480)
展开查看
- 471.Promise
- 472.413. 等差数列划分
- 473.377. 组合总和 Ⅳ
- 474.312. 戳气球
- 475.322. 零钱兑换
- 476.64. 最小路径和
- 477.1343. 大小为 K 且平均值大于等于阈值的子数组数目
- 478.Promise术语
- 479.Promise承诺状态
- 480.Promisethen
✔ 阶段二十(470)
展开查看
- 461.526. 优美的排列
- 462.216. 组合总和 III
- 463.133. 克隆图
- 464.101. 对称二叉树
- 465.理解迭代
- 466.129. 求根节点到叶节点数字之和
- 467.迭代器模式
- 467.可迭代协议
- 468.迭代器协议
- 469.自定义迭代器
- 470.提前终止迭代器
😗 阶段十九(460)
展开查看
- 451.Object和Array复习
- 452.定型数组,Map,Set,迭代与扩展复习
- 453.基本引用类型复习
- 454.402. 移掉 K 位数字
- 455.328. 奇偶链表
- 456.数据类型复习
- 457.735. 行星碰撞
- 458.239. 滑动窗口最大值
- 459.三次握手
- 460.四次挥手
🐉 阶段十八(450)
展开查看
- 441.react jsx
- 442.React 组件
- 443.47. 全排列 II
- 444.692. 前K个高频单词
- 445.220. 存在重复元素 III
- 446.let和const
- 447.jsx是怎么变成dom的
- 448.数组的扩展
- 449.宏任务与微任务
- 450.301与302
🐔 阶段十七(440)
展开查看
- 426.说说浏览器解析CSS选择器的过程
- 427.手动实现一个new方法
- 428.属性data-的理解
- 429.用过CSS预处理器
- 430.如何快速让一个数组乱序
- 431.form标签的enctype属性
- 432.::before和:after中单冒号和双冒号的区别是什么 这两个伪元素有什么作用
- 433.script script async script defer
- 434.在页面中的应该使用奇数还是偶数的字体
- 435.写一个判断设备来源的方法
- 436.GBK和UTF-8
- 437.Git的branch及工作流的理解是什么
- 438.Symbol使用场景
- 439.延长作用域链
- 440.z-index的理解
🐟 阶段十六(425)
展开查看
- 402.React安装
- 403.npm
- 404.文件夹结构
- 405.指数运算符 (ES2016)
- 406.Async/await (ES2017)
- 407.table的作用和优缺点
- 408.table的作用和优缺点
- 409.在页面上实现一个圆形的可点击区域
- 410.typeof是操作符还是函数
- 411.use strict
- 412.CSS sprites的原理和优缺点分别是什么
- 413.对SVN和GIT的理解和区别
- 414.什么是FOUC?你是如何避免FOUC的?
- 415.margin边界叠加是什么及解决方案
- 416.html中的置换元素和非置换元素的理解
- 417.javascript的作用域
- 418."attribute"和"property"有什么不同
- 419.HTML元素的显示优先级
- 420.要让Chrome支持小于12px的文字怎么做
- 421.重绘和重排
- 422.写一个方法验证是否为中文
- 423.line-height是如何理解的
- 424.line-input元素中readonly和disabled属性的理解
- 425.js放在html的body和head有什么区别
🦐 阶段十五(401)
展开查看
- 385.Vue 动态添加路由及生成菜单
- 386.数组排序方法
- 387.数组操作方法
- 388.数组搜索和位置方法
- 389.数组迭代方法
- 390.数组归并方法
- 391.定型数组
- 392.ArrayBuffer
- 393.DataView
- 394.ArrayBuffer 视图
- 395.迭代与扩展操作
- 396.Map
- 397.WeakMap
- 398.Set
- 399.WeakSet
- 400.Map顺序与迭代
- 401.选择 Object 还是 Map
🦂 阶段十四(384)
展开查看
- 371.集合引用类型
- 372.Object
- 373.Array
- 374.数组空位
- 375.数组索引
- 376.检测数组
- 377.迭代器方法
- 378.复制和填充方法
- 379.Vue Router
- 380.Vue Router入门
- 381.带参数的动态路由匹配
- 382.转换方法
- 383.栈方法
- 384.队列方法
😘 阶段十三(370)
展开查看
- 341.作用域链增强
- 342.变量声明
- 343.垃圾回收
- 344.标记清理
- 345.引用计数
- 346.性能
- 347.内存管理
- 348.基本引用类型
- 349.Date
- 350.Date继承的方法
- 351.Date日期格式化方法
- 352.Date组件方法
- 353.RegExp
- 354.RegExp实例属性
- 355.RegExp实例方法
- 356.RegExp构造函数属性
- 357.RegExp模式局限
- 358.原始值包装类型
- 359.Boolean
- 360.Number
- 361.String
- 362.字符串操作方法
- 363.字符串包含方法
- 364.trim
- 365.repeat
- 366.padStart()和 padEnd()方法
- 367.字符串迭代与解构
- 368.字符串模式匹配方法
- 369.localeCompare()方法
- 370. HTML 方法
🥰 阶段十二(340)
展开查看
- 325.最佳实践
- 326.typeof 操作符
- 327.Undefined 类型
- 328.Null 类型
- 329.Boolean 类型
- 330.Number 类型
- 331.String 类型
- 332.Symbol 类型
- 333.Object 类型
- 334.函数
- 335.原始值与引用值
- 336.动态属性
- 337.复制值
- 338.传递参数
- 339.typeof 操作符
- 340.执行上下文与作用域
- 341.Global
- 342.Math
😉 阶段十一(324)
展开查看
🙃 阶段十(306)
展开查看
- 286.HTTP工作原理
- 287.cookie和session区别
- 288.get和post的区别
- 289.xss
- 290.Symbol 语法
- 291.响应式原理
- 292.computed和data
- 293.MVVM
- 294.路由缓存
- 295.v-model的原理
- 296.模版引擎
- 297.SEO优化
- 298.重置data
- 299.Observable
- 300.this.parent
- 301.data和属性名
- 302.生命周期
- 303.SPA单页面
- 304.location.href
- 305.计算属性和监听器
- 306.v-show, v-if
😍 阶段九(285)
展开查看
- 251.元素的alt和title有什么区别
- 252.new
- 253.call
- 254.防抖
- 255.flex
- 256.节流
- 257.柯里化
- 258.promise
- 259.字符串编号
- 260.模拟forOf
- 261.super原理分析
- 262.promise的单一状态与中转
- 263.promise.then
- 264.then返回值的处理技巧
- 265.promise封装ajax
- 266.封装setTimeout定时器
- 267.promise队列原理
- 268.异步封装到类内部
- 269.class和await的结合
- 270.用reduce实现promise队列
- 271.BFC
- 272.重绘与重排
- 273.动画
- 274.inline-block
- 275.左固定右适应
- 276.三角形
- 277.flex属性
- 278.visibility
- 279.position
- 280.清除浮动
- 281.弹性布局
- 282.什么是语义化与新特性
- 283.cookie和token
- 284.cookie是如何工作的
- 285.测试promise例子
🧑🏻 阶段八(250)
展开查看
- 216.事件循环Event Loop
- 217.知识点
- 218.html-css
- 219.0.1+0.2==0.3?
- 220.ES新特性
- 221.模块化
- 222.JS方法源码实现
- 223.用CSS创建一个三角形,并简述原理
- 224.写一个去除制表符和换行符的方法
- 225.圣杯布局和双飞翼布局的理解和区别
- 226.iframe框架都有哪些优缺点
- 227.BFC规范的理解
- 228.统计某一字符或字符串在另一个字符串中出现的次数
- 229.清除浮动的方式有哪些及优缺点
- 230.写一个加密字符串的方法
- 231.写一个判断数据类型的方法
- 232.优雅降级和渐进增强
- 233.浏览器内多个标签页之间的通信方式有哪些
- 234.viewport常见设置都有哪些
- 235.对比下px、em、rem有什么不同
- 236.http都有哪些状态码
- 237.标签语义化的理解
- 238.css常用的布局方式有哪些
- 239.简要描述下JS有哪些内置的对象
- 240.浏览器内核都有哪些
- 241.写一个获取当前url查询字符串中的参数的方法
- 242.html5中的form怎么关闭自动完成
- 243.什么是回调函数
- 244.网页应用从服务器主动推送到客户端有哪些方式
- 245.为什么HTML5只需要写就可以
- 246.写一个数组去重的方法
- 247.title与h1的区别、b与strong的区别、i与em的区别
- 248.style标签写在body前和body后的区别是什么
- 249.什么是闭包
- 250.返回到顶部的方法有哪些
🧑🏻💻 阶段七(215)
展开查看
- 191.new关键字
- 192.call
- 193.apply
- 194.bind
- 195.js
- 196.防抖与节流
- 197.原型链继承prototype
- 198.使用构造函数继承call
- 199.原型式继承Object.create.js
- 200.寄生式继承
- 201.寄生组合式继承
- 202.静态方法的实现原理
- 203.protected
- 204.class属性继承原理
- 205.class方法继承原理
- 206.https加密原理
- 207.总结原型链
- 208.原型链实例
- 209.call,apply借用原型链
- 210.原型继承
- 211.原型工厂封装
- 212.__proto__属性访问器
- 213.DataView视图
- 214.TypedArray
- 215.iterator使用场景
😇 阶段六(190)
展开查看
- 176.事件冒泡和事件捕获到底有何区别
- 177.用递归算法实现,数组长度为5且元素的随机数在2-32间不重复的值
- 178.写一个方法去掉字符串中的空格
- 179.CSS3有哪些新增的特性
- 180.html的元素有哪些
- 181.HTML全局属性(global attribute)有哪些
- 182.在页面上隐藏元素的方法有哪些
- 183.去除字符串中最后一个指定的字符
- 184.CSS选择器有哪些?哪些属性可以继承?
- 185.写一个方法把下划线命名转成大驼峰命名
- 186.HTML5的文件离线储存怎么使用,工作原理是什么
- 187.简述超链接target属性的取值和作用
- 188.CSS3新增伪类有哪些并简要描述
- 189.写一个把字符串大小写切换的方法
- 190.label都有哪些作用
🧑🏻💻 阶段五(175)
展开查看
- 151.数据绑定的容器更新
- 152.理解对象
- 153.箭头函数
- 154.高阶函数
- 155.静态属性的使用
- 156.instanceof
- 157.promise原理
- 158.数组的扩展
- 159.reduce
- 160.迭代器与for of
- 161.结构赋值
- 162.盒模型
- 163.权重和优先级
- 164.Flex实现垂直居中
- 165.一个大小为父元素宽度一半的正方形
- 166.左右固定中间自适应
- 167.flex左侧固定右侧自适应
- 168.函数有多个长辈
- 169.原型方法与对象方法优先级
- 170.使用父类构造函数初始属性
- 171.hasOwnProperty属性检测
- 172.isPrototypeOf原型检测
- 173.原型中的constructor引用
- 174.那些对象没有原型
- 175.instanceof
🥲 阶段四(150)
展开查看
🧑🏻💻 阶段三(145)
展开查看
- 101.闭包语义
- 102.构造函数的作用和使用形态
- 103.延伸函数生命周期
- 104.传递参数
- 105.对象的含义
- 106.浅拷贝
- 107.加解密
- 108.发送消息
- 109.深拷贝
- 110.对象api
- 111.计算机的组成
- 112.进程和线程
- 113.访问器
- 114.代理对象
- 115.代理函数
- 116.原型链
- 117.nodeEvent
- 118.websocket
- 119.HTTPS工作流程
- 120.三次挥手
- 121.缓存
- 122.数组使用代理拦截操作
- 123.创建对象
- 124.解构赋值
- 125.Object.assign
- 126.四次挥手
- 127.浏览器输入URL后回车
- 128.webpack实践
- 129.mustache
- 130.set语法
- 131.map语法
- 132.箭头函数
- 133.模板字符串
- 134.模板字符串
- 135.构造函数
- 136.声明类的语法
- 137.在类里面使用访问器
- 138.public属性
- 139.scoped
- 140.keep-alive
- 141.vue-router
- 142.vue-loader
- 143.修饰符
- 144.Vue.delete
- 145.OSI七层网络模型
🤣 阶段二(100)
展开查看
- 51.简述Chome盒模型与IE盒模型的区别
- 52.行内元素和块级元素都有哪一些
- 53.BFC
- 54.什么是弹性布局
- 55.html5有哪些新特性
- 56.position有哪些属性
- 57.请说出1px,1rem,1vh,1em各自代表的含义
- 58.什么是SPA
- 59.简述优雅降级与渐进增强
- 60.重绘与重排
- 61.解释下浮动和它的工作原理和清除浮动的方法
- 62.如何让一个盒子在页面垂直水平居中
- 63.前端性能优化方案
- 64.css选择器优先级顺序
- 65.CSS3有哪些新特性
- 66.什么是空元素
- 67.如何实现浏览器内多个标签页之间的通讯
- 68.为什么要初始化css样式
- 69.CSS3新增的伪类有哪些
- 70.说说对canvas,svg,webgl的理解
- 71.浏览器是如何渲染UI的
- 72.em、rem的区别
- 73.解释csssprites,如何使用
- 74.浏览器是如何渲染UI的
- 75.浏览器工作原理
- 76.伪类和伪元素的区别
- 77.介绍一下你对浏览器内核的理解
- 78.常见的浏览器内核有哪些
- 79.优化这些图片的加载
- 80.如何进行seo优化
- 81.如何实现0.5px边框
- 82.less和sass的区别
- 83.xhtml和html有什么区别
- 84.img标签上title与alt属性的区别是什么
- 85.a标签中 active hover link visited 正确的设置顺序是什么
- 86.如何处理HTML5新标签的浏览器兼容性问题
- 87.HTML5的离线储存怎么使用
- 88.页面导入样式时,使用link和@import有什么区别
- 89.git reset、git revert和git checkout
- 90.git pull 和 git fetch 之间有什么区别
- 91.如何在 Git 恢复先前的提交
- 92.使用箭头函数应注意什么
- 93.介绍下 Set、Map的区别
- 94.Promise构造函数是同步执行还是异步执行,那么 then 方法呢
- 95.setTimeout、Promise、Async/Await 的区别
- 96.下面的输出结果是多少
- 97.请写出以下代码的答案,并解释为什么要提升
- 98.var、let、const之间的区别
- 99.async 和 await
- 100.get和post的区别
🧑🏻💻 阶段一(50)
展开查看
- 1.xss总结
- 2.csrf
- 3.html加载过程
- 4.defer和async的区别
- 5.输入一个url后
- 6.浏览器线程线程模型
- 7.浏览器缓存
- 8.BFC
- 9.vue-DIFF算法
- 10.箭头函数和普通函数的区别
- 11.vue框架好在哪里
- 12.vue双向绑定弊端set实现
- 13.vue-router原理
- 14.跨域问题解决方案
- 15.ObjectdefinePropery和proxy
- 16.vue组件通信
- 17.vue双向绑定
- 18.三次握手和四次挥手
- 19.Axios
- 20.跨域
- 21.websocket
- 22.osi七层模型
- 23.模块加载方案
- 24.隐式类型转换
- 25.单向数据流与双向数据绑定
- 26.项目难点
- 27.EventBus订阅发布模式
- 28.http请求头
- 29.TCP
- 30.vue-router原理2
- 31.清除浮动的方式
- 32.发布订阅模式
- 41.闭包和作用域链
- 42.前端性能优化
- 43.模块化
- 44.http各版本
- 45.commonjs和es6
- 46.BFC
- 47.左侧固定右侧自适应
- 48.三角形
- 49.vuex核心原理
- 50.圣杯布局
全栈架构师
展开查看
- 33.vue源码解读
- 34.webpack原理剖析
- 35.vue-router前端路由原理剖析
- 36.React16虚拟dom原理剖析
- 37.koa2源码剖析
- 38.Flutter
- 39.vue组件设计
- 40.Taro框架
深入理解JS核心技术
👩🏻💻:webVueBlog的leetcode刷题📒
Number
题号Title
题目Difficulty
难度Navigation
解答
Number | Title | Difficulty | Navigation |
---|---|---|---|
1. | 两数之和 | 两数之和 | |
2. | 两数相加 | 两数相加 | |
3. | 无重复字符的最长子串 | 无重复字符的最长子串 |
以 「早起」、「运动」、「冥想」、「写作」、「阅读」这五件能够快速改变人生的事情为切入点,帮助大家建立良好的生活习惯,技术的成长绝不是一朝一夕,良好的习惯将会帮助我们更快的进步,但在技术之外,我更希望大家能在这些事情的坚持中,收获一份自信,多一份底气,对人生多一份积极。 --- (来源:低调务实优秀中国好青年群)