【亡羊补牢】JS灵魂之问
经过面试,发现JS这块确实不太扎实,想着初中那会班主任提到的一个成语:亡羊补牢,在这个专栏,我会坚持写作,一方面自己查漏补缺,另一方面教会大家。
一百个Chocolate
一个小帅哥和某厂前端搬砖。
频道内容: 前端技术,编程,我的思考。
用心去做自己热爱的事情️
座右铭: 学如逆水行舟,不进则退。
展开
-
「高频面试题」女友:消息队列 和 事件循环系统终于弄明白了!(内附思维导图)
最近又和女友,咳咳…(说出来可能又会被打s)学习事件循环,这不,学会(废)了之后,赶紧写一篇博客复盘总结一下~接上一期「数组方法」写给女友的一系列 JS 数组操作(建议收藏 | 内附思维导图) 文章发出去之后,有些小伙伴还真发给自己女友了,不知道“感动”了没有哈(手动滑稽)。那么,这次女友直接说明白了,那么我就从“头”开始讲讲事件循环系统,通过一篇文章搞定这一块知识点。事件循环非常底层且非常重要,学会它能让你理解页面到底是如何运行的。话说女友会点开这篇文章么?我“啪”地一下就醒过来了,原创 2020-12-06 09:21:44 · 695 阅读 · 2 评论 -
「数组方法」写给女友的一系列 JS 数组操作(建议收藏 | 内附思维导图)
前言最近和女友,咳咳…(说出来可能会被打s)学习JS数组方法,用几个字形容的话就是听说过,实际使用、遇到的时候就分不清具体方法会得到怎样的结果。今天我将通过这篇文章好好整理一下关于JS数组的方法,让大家通过这一篇文章 掌握 数组一系列操作,同时,在面试或者工作的时候也能写出简洁、优雅、美观、高效的代码。其次,这篇写给女友,她看到会感动到哭嘛?会吗会吗会吗?话说我有女友吗?啊这,这…这重要吗?文章目录前言阅读须知数组的遍历for 循环for..of 循环for...in 循环array.forE原创 2020-12-02 19:39:06 · 3346 阅读 · 22 评论 -
【亡羊补牢】JS灵魂之问 第28期 es6中箭头函数与普通函数的区别
背景关于es6中箭头函数与普通函数的区别是面试常考的题目,今天来简单总结一下,下次遇到就好解决了。箭头函数与普通函数的区别1、语法更加简洁、清晰// 例子一// 正常函数写法[1,2,3].map(function (x) { return x * x;});// 箭头函数写法[1,2,3].map(x => x * x);// 例子二// 正常函数写法var result = [2, 5, 1, 4, 3].sort(function (a, b) { retur原创 2020-11-14 10:21:25 · 409 阅读 · 0 评论 -
「JavaScript灵魂之问」前端知识梳理之 JS 篇(中秋特别篇)
JS 错误信息类型语法错误1、SyntaxError 语法错误// 变量名不规范var 1 = 1;SyntaxError: Unexpected number 意外的数字var 1ab = 1;SyntaxError: Invalid or unexpected token 其中token指代标记的意思。// 关键字不可赋值new = 5;SyntaxError: Unexpected token '='// 基本语法错误var a = 5:SyntaxError: U原创 2020-09-22 16:48:57 · 378 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第27期 自己实现一个 Proxy
引言本篇要讲解的内容是关于 自己实现一个 Proxy ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言自己实现一个 Proxy最后自己实现一个 Proxy其实,有了前置知识,我们不难发现,Proxy 和 Object.defineProperty 实现效果是一样的,但其实两个原理上是有挺大差别的。defineProperty 操作的是空对象,而 proxy 操作的是现有对象。defineProperty 原本目的是对一个对象赋予对应属性,而 pro原创 2020-09-22 08:07:27 · 385 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第26期 修炼内功 ES 14种操作对象的方法
引言本篇要讲解的内容是关于 ES 14种操作对象的方法 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言ES 14种操作对象的方法获取原型设置原型获取对象的可拓展性获取自有属性禁止拓展对象拦截对象操作判断是否是自身属性获取对象属性设置对象属性删除对象属性枚举对象属性获取键集合调用函数new实例化对象最后ES 14种操作对象的方法获取原型var obj = {a:1,b:2};// 1.获取原型 [[GetPrototypeOf]]var proto原创 2020-09-21 19:26:50 · 474 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第25期 修炼内功 重新探究 this 指向问题
引言本篇要讲解的内容是关于 重新探究 this 指向问题 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言垃圾回收机制重新探究 this 指向问题第一题第二题第三题第四题第五题第六题第七题最后垃圾回收机制垃圾回收机制就是负责管理代码执行过程中使用的内存。原理:第一步,找出不再使用的变量第二步,释放其占用内存第三部,固定的时间间隔运行重新探究 this 指向问题第一题开门见山,我们来看看下面会打印什么?function test(){原创 2020-09-19 15:52:37 · 358 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第24期 修炼内功 JS错误信息类型知多少
引言有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 JS错误信息类型 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言JS 错误信息类型语法错误引用错误范围错误类型错误URI 错误eval 函数执行错误try / catch严格模式最后JS 错误信息类型语法错误1、SyntaxError 语法错误// 变量名不规范var 1 = 1;SyntaxError: Unexpe原创 2020-09-19 15:51:39 · 370 阅读 · 1 评论 -
【亡羊补牢】JS灵魂之问 第23期 修炼内功 关于闭包的回顾
引言有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 闭包的回顾 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言闭包回顾第一题第二题第三题最后闭包回顾第一题function Test(a, b, c) { var d = 0; this.a = a; this.b = b; this.c = c; function e() { d++; con原创 2020-09-19 10:20:10 · 1010 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第22期 修炼内功 数组的一系列操作
引言有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 数组的一系列操作 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言数组创建数组在原数组上修改push / unshift重写 push 方法pop / shiftreversesplicesort()新建数组(不对原数组产生影响)concattoString()slicejoinsplit最后数组先来一些前置知识,后续我们会把数组原创 2020-09-19 10:19:11 · 303 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第21期 修炼内功 深浅拷贝知多少
引言有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 深浅拷贝 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言浅拷贝深拷贝最后浅拷贝var person1 = { name: 'Chocolate', age: 21, child: { car: ['Benz', 'Mazda'], first: { name: 'cc', ag原创 2020-09-19 10:16:54 · 234 阅读 · 0 评论 -
「JavaScript灵魂之问」前端知识梳理之 JS 篇(下篇)
三元运算基础开门见山,三元运算,我想对于很多编程语言都有提到,下面就简单一个例子来讲解一下好了。var str = 89 > 9? ('89' > '9'? '通过了': '内层未通过') : '外层未通过';console.log(str);答案是 内层未通过,注意 '89' > '9'的比较,由于都是字符串,会从第一位以 ASCII码来进行比较。由于89第一位为8,于是小于 9,返回 false,走后面那个,最后打印了 内层未通过。浅拷贝var person1 = {原创 2020-09-19 10:03:08 · 421 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第20期 一道经典的JS输出题 一共七连问,你能答到第几问?
引言一道经典的阿里考察输出题目,连续七问,你能闯到第几问?仰望星空的人,不应该被嘲笑文章目录引言经典题最后经典题下面来一道最经典的题,特别容易出错,注意!function Foo(){ getName = function(){ console.log(1); } return this;}Foo.getName = function(){ console.log(2);}Foo.prototype.getName = function(){ conso原创 2020-09-18 11:12:35 · 285 阅读 · 0 评论 -
「JavaScript灵魂之问」前端知识梳理之 JS 篇(中篇)
对象基础对象前置知识/* 对象基础知识 */var teacher = { name: '张三', age: 32, sex: 'male', height: 176, weight: 130, teach: function(){ console.log('I am teaching JS'); }, smoke: function(){ console.log('I am smoking'); }, eat: function(){原创 2020-09-17 21:01:30 · 427 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第19期 修炼内功 对象枚举知多少
引言有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 对象枚举 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言对象枚举最后对象枚举开门见山,我们直接来一道题,看看下面两种方式打印有区别吗?还是都可以打印?var car = { brand: 'Benz', color: 'red', displacement: '3.0', lang: '5', width:原创 2020-09-17 18:37:51 · 271 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第18期 修炼内功 Object.creat()基础
引言有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 Object.creat()基础 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言Object.creat()基础最后Object.creat()基础之前了解到了 Object,现在我们探讨一下底下的一个方法 create(),它仍然可以创建对象,但是和普通创建对象又不太一样。下面来简单分析一下:Obeject.create(x原创 2020-09-17 18:36:18 · 326 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第17期 修炼内功 原型和原型链基础
引言有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 原型和原型链基础 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言原型基础原型链基础最后原型基础原型 prototype 其实是 function对象的一个属性,但是打印出来结果它也是对象。那我们直接看下面这个例子吧function Foo(name,age){ this.name = name; this.age原创 2020-09-17 18:34:21 · 281 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第16期 修炼内功 对象和构造函数基础
引言有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 函数基础 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言对象基础构造函数基础最后对象基础对象前置知识/* 对象基础知识 */var teacher = { name: '张三', age: 32, sex: 'male', height: 176, weight: 130, teach: funct原创 2020-09-17 18:32:20 · 278 阅读 · 2 评论 -
【亡羊补牢】JS灵魂之问 第15期 修炼内功 让人费解的 GO 和 AO,一大串输出题,你接得住吗?
引言有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 函数基础 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言函数基础函数种类、字面量形参实参映射让人费解的 GO 和 AO作用域引入函数默认参数预编译最后函数基础函数种类、字面量开门见山,下面代码会输出什么,不知道小伙伴平常有咩有想过这类问题var test = function test1() { var a = 1;原创 2020-09-14 22:17:27 · 282 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第14期 修炼内功 函数基础 形参实参映射关系,是什么?
引言有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 函数基础 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言函数基础函数种类、字面量形参实参映射作用域引入函数默认参数最后函数基础函数种类、字面量开门见山,下面代码会输出什么,不知道小伙伴平常有咩有想过这类问题var test = function test1() { var a = 1; console.log(a);原创 2020-09-14 18:35:16 · 387 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第13期 修炼内功 JS基础 显示 / 隐式类型转换,你能冲到第几层?
引言有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 JS基础 ,那今天这篇看能不能问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑文章目录引言基础typeof 知多少显示、隐式类型转换显示转换隐式转换最后基础typeof 知多少前置知识:typeof 判断数据类型会输出如下这些:number string boolean object undefined function需要注意的:console.l原创 2020-09-14 11:13:25 · 321 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第12期 你知道offset家族吗?
引言有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 offset ,什么,你还不知道这玩意是什么?那今天这篇算是问倒你了,一起来探索一下吧。仰望星空的人,不应该被嘲笑探索知识话不多说,先上一张图给大伙瞧瞧:看完如何?瞬间懵逼有没有… 今天我们就只讲 offset ,图中还有家族中其它属性,后续文章会继续分析,大家不要着急哈。关于 offsetw3中offset相关页面是:http://www.w3.org/TR原创 2020-09-12 15:00:15 · 521 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第11期 一道快手面试JS题引发的血案(居然又扯到了事件代理...)
引言有几天没有更新灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,一道容易忽略的JS题,一起来看看吧。仰望星空的人,不应该被嘲笑题目描述实现如下效果:当你点击 ul 下面某个 li后,打印对应索引值(可以为 0 或 1)解决问题一开始我就想,这不是挺简单嘛,我直接先查到所有的 li,得到所有包含 li的 list,遍历,然后给每一个 li绑定一个事件,打印当前遍历的 i 值,不就是索引了吗?在我写完之后,面试官来了一句:那我是下面这种情况呢,有多个 ul,原创 2020-09-11 08:41:37 · 491 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第10期 BOM对象知多少
引言面试官:你知道BOM吗?我:我知道DOM…面试官:好了,我没啥要问的了我:…(上文仅供娱乐,并非真实场景)仰望星空的人,不应该被嘲笑BOM对象知多少BOM,其实就是浏览器对象模型,比如浏览器前进,后退,刷新按钮,地址栏信息,关闭按钮,整个窗口等都是我们的浏览器对象,常见的有这几个对象:1、window 对象alert()confirm()prompt()setInterval()setTimeout()2、location 对象(地址栏、关闭、跳转等)href原创 2020-09-07 21:52:52 · 396 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第9期 如何获取随机验证码
引言对于获取某个范围的随机整数,核心部分就是调用 Math 中的random() 函数,那么有了这个随机函数,我们可以模拟实现来获取随机验证码,话不多说,见下文。如何获取随机验证码/* 获取某个范围的随机整数 */let myRandom = (min, max) => { return Math.floor(Math.random() * (max - min + 1) + min)}/* 如何获取随机验证码 (四位,数字+字母(大写))*/let createCode = ()原创 2020-09-07 19:45:13 · 823 阅读 · 2 评论 -
【亡羊补牢】JS灵魂之问 第8期 如何来获取随机颜色
引言对于获取某个范围的随机整数,核心部分就是调用 Math 中的random() 函数,那么有了这个随机函数,我们可以模拟实现来获取随机颜色,话不多说,见下文。如何来获取随机颜色/* 获取某个范围的随机整数 */let myRandom = (min, max) => { return Math.floor(Math.random()*(max-min+1) + min)}/* 如何来获取随机颜色 */let randomColor = () => { let r = m原创 2020-09-07 19:31:11 · 240 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第7期 获取某个范围的随机整数
引言对于获取某个范围的随机整数,核心部分就是调用 Math 中的random() 函数,下面用实例展示一波吧!获取某个范围的随机整数/* 获取某个范围的随机整数 */let myRandom = (min, max) => { return Math.floor(Math.random()*(max-min+1) + min)}let cnt = 10while (cnt--) { console.log(myRandom(1, 100))}最后文章产出不易,还望各位小伙原创 2020-09-07 19:20:08 · 261 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第6期 global对象的编码和解码方法
引言对于global对象的编码和解码问题,是我们平常见到的,比如一个get请求方法,你把地址发送给你的qq好友后,会发现有一长串的字符串,还有%20等一些奇奇怪怪的编码。此时就有一个问题了,那我发送给那位好友,他去访问这个地址会正确访问那个网页嘛?浏览器会识别嘛?会识别是怎样的转换的呢?提出问题我们假设拿到的地址如下所述,那浏览器是怎样进行编码和解码过程呢?调用什么方法?(见后文)/* global对象的编码和解码方法 */let uri = 'http://www.yangchaoyi.vip/原创 2020-09-07 15:01:12 · 305 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第5期 字符串和数值类型相互转换
引言对于字符串和数值类型相互转换问题,对于一些算法题来说,常常见到,现整理一下常见的几种方法。字符串转数值/*字符串转数值 */let str = '1314.520'console.log(parseInt(str))console.log(typeof parseInt(str))console.log(parseFloat(str))console.log(typeof parseFloat(str))console.log(Number(str))输出结果:1314nu原创 2020-09-07 14:42:20 · 289 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第4期 如何显示数字时钟的格式时间
引言对于日期格式化问题,也是面试中要考察的一个点,今天就学习探讨一下!提出问题如何显示数字时钟的格式时间常见日期格式化方法在实际格式化之前,我们先来了解一下常用的格式化方法/* 常见日期格式化方法 */let now = new Date()console.log(now.toLocaleDateString()) // 获取年月日console.log(now.toLocaleTimeString()) // 获取时分秒console.log(now.toLocaleString(原创 2020-09-07 14:21:15 · 328 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第3期 查找当前字符 e 在字符串中的所有位置
JavaScript介绍主要是了解 JavaScript 与 ECMAScript 关系。ECMAScript是一种语言标准,而 JavaScript 是对 ECMAScript 的一种实现。原创 2020-09-07 11:58:21 · 426 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第2期 JS的继承(ES6)
引言原型和原型链这块是必备知识,今天我们就好好探讨一波!探讨问题ES6 extends 继承 怎么做的我们先来看下面这段简单代码:class Father { constructor(name){ this.name = name } sayHi() { console.log('Hello ' + this.name) }}class Son extends Father { constructor(name,age){ super(name)原创 2020-09-05 10:04:53 · 981 阅读 · 0 评论 -
【亡羊补牢】JS灵魂之问 第1期 怎样给一个新增的dom节点绑定事件?
【亡羊补牢】JS灵魂之问 第1期 怎样给一个新增的dom节点绑定事件?原创 2020-09-04 09:20:22 · 568 阅读 · 1 评论