- 博客(40)
- 收藏
- 关注
RSS订阅原创 32个手写JS，巩固你的JS基础（面试高频）
作为前端开发，JS是重中之重，最近结束了面试的高峰期，基本上offer也定下来了就等开奖，趁着这个时间总结下32个手写JS问题，这些都是高频面试题，希望对你能有所帮助。关于源码都紧遵规范，都可跑通MDN示例，其余的大多会涉及一些关于JS的应用题和本人面试过程01.数组扁平化数组扁平化是指将一个多维数组变为一个一维数组const arr = [1, [2, [3, [4, 5]]], 6];// => [1, 2, 3, 4, 5, 6]方法一：使用flat()const res1 =
2020-10-11 17:44:07
408
原创 32个手撕JS，彻底摆脱初级前端（面试高频）
作为前端开发，JS是重中之重，最近结束了面试的高峰期，基本上offer也定下来了就等开奖，趁着这个时间总结下32个手写JS问题，这些都是高频面试题，希望对你能有所帮助。关于源码都紧遵规范，都可跑通MDN示例，其余的大多会涉及一些关于JS的应用题和本人面试过程01.数组扁平化数组扁平化是指将一个多维数组变为一个一维数组const arr = [1, [2, [3, [4, 5]]], 6];// => [1, 2, 3, 4, 5, 6]方法一：使用flat()const res1 =
2020-09-29 22:12:21
1675
原创 最详细的Promise相关源码实现
写这篇文章的目的是解剖Promise源码，起因也是最近秋招被问到了让手写Promise，另外在网上看到的Promise源码或多或少有些小问题，也就是没有完全遵循Promise/A+规范。代码会完全使用ES6语法，主要分以下几个模块：整体分析（为代码书写铺路）实现初版（构造函数大致功能亿完善）支持异步和链式调用（完善then方法）实现catch方法实现Promise.resolve()实现Promise.reject()实现Promise.all()实现Promise.race()一、
2020-08-12 18:16:38
725
1
原创 mac egg连接mysql报错片ER_NOT_SUPPORTED_AUTH_MODE
egg连接mysql数据库报错ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client.这是因为mysql版本较高，最新的加密方式node还不支持。解决方法:进入系统便好设置里的mysql,...
2019-10-17 18:57:02
844
原创 页面布局详解(圣杯、双飞翼、弹性布局)
前言圣杯布局和双飞翼布局是页面布局的常用布局方式。两者都是为了实现两侧宽度固定，中间宽度自适应的三栏布局，但两者在实现方式上有一定的差别,不过都遵循了以下要点：两侧宽度固定，中间官渡自适应中间部分在DOM结构上优先，以便先行渲染允许三列中的任意一列成为最高列只需要一个额外的<div></div>标签一、圣杯布局实现方式：三者都设置向左浮动。设置...
2019-07-10 15:27:28
386
原创 ES6的10个重要特性
转下ES6的10个重要特性一、const和、let关键字const、let具有块级作用域，不会造成全局污染强制必须先定义再使用二、Array帮助函数forEachmapfilterfindeverysomereduce三、箭头函数箭头函数在定义时已经绑定了this四、ClassES6增加了Class类的继承，不过这不会改变原型继承的原理，这里的class其实是...
2019-05-22 19:41:26
334
原创 JavaScript数组常用算法操作~前端面试(二)
总结前端面试JS常用的数组操作，如扁平化数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。。。一、扁平化数组开始篇function flatten(arr){ while(arr.some(item=>Array.isArray(item))){ arr = [].concat(...arr) } return arr;}f...
2019-05-22 19:37:25
352
原创 JavaScript之高阶函数
高阶函数(Higher-order function),满足下两个任意一个条件即为高阶函数：接受一个或多个函数作为参数输入输出一个函数一、函数作为参数JavaScript语言中内置了一些高阶函数，比如:Array.prototype.map、Array.prototype.filter、Array.prototype.reduce，它们接收一个函数作为参数，并应用这个函数到列表的每一个...
2019-05-17 22:40:29
710
原创 数组扁平化去重~前端面试(一)
前端面试之常考题：将一个数组扁平化并去重，最终得到一个升序且不重复的数组。总结常用的三种方法：方法一const arr = [[1,2,3,],[3,4,5,5],4,6,7,[11,13,[12,14]],20];const arr2 = [...new Set(arr.flat(Infinity).sort((x,y)=>x-y))];console.log(arr2)...
2019-05-17 21:50:21
345
原创 前端面试必考之数据类型及其检测详解
数据类型及其检测可以说是前端面试必考的了，今天详细总结一下数据类型和检测的五种方法一、 JavaScript的数据类型JavaScript有两种数据类型,分别是基本数据类型和引用数据类型。基本数据类型：Undefined、Null、Number、String、Boolean、Symbol(ES6新增，表示独一无二的值)。引用数据类型：统称为Object对象，主要包括对象、数组和函数。基...
2019-05-16 22:26:00
388
原创 Taro开发微信小程序-TabBar实现(四)
TabBar有四个子页：Fitting(试衣间)、Wardrobe(衣橱)、Circle(圈子)、Mine(我的)。这四个页面存放在src/components/下为四个组件。在src/pages/main/index.js编写主页。代码如下：import Taro, { Component } from '@tarojs/taro'import { AtTabBar } from 't...
2019-05-16 21:04:40
5672
2
原创 Taro开发微信小程序-用户授权(三)
我们已经完成了用户的登录，现在我们来完成用户的授权页面。我们要先在src/app.js中，查看用户授权了没有，如果用户授权的话不需要再次确认授权。写在componentWillMount生命周期中：Taro.getSetting() .then(res=>{ if(res.authSetting["scope.userInfo"]){ r...
2019-05-16 20:39:49
7377
1
原创 Taro开发微信小程序-登录实现(二)
登录过程应该写在src/app.js中，这样才能最先获取用户的登陆状态。在src/app.js中的componentWillMount中书写代码：Taro.checkSession({ success() { return Taro.getStorage({key: 'session3rd'}) }, fail() { ret...
2019-05-16 20:23:09
9705
原创 Taro开发微信小程序 配置环境(一)
微信小程序提供的格式四不像，上手成本高。京东凹凸实验室开发出的Taro框架基于React语法，可以多终端使用：微信小程序、支付宝小程序、字节跳动小程序、H5、RN。不过最主要的还是适应微信小程序。本次实战使用Taro开发一个微信小程序，使用Taro UI库。第一章从基本的配置环境，安装Taro:# 使用 npm 安装 CLI$ npm install -g @tarojs/cli#...
2019-05-15 13:06:54
6100
原创 Mac下Java环境配置
Mac下配置Java环境，正式入坑。一、JDK配置JDK下载、安装JDK下载页面选择相应的版本进行下载，下载完成并双击安装。查看是否安装成功打开终端，输入java -version➜ ~ java -versionjava version "12.0.1" 2019-04-16Java(TM) SE Runtime Environment (build 12.0.1+12)...
2019-05-15 12:45:04
239
原创 Canvas入门
前言-什么是Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。Canvas画布绘图工具canvas 元素用于在网页上绘制图形。设置画布大小，使用属性方式设置。在css中设置大小可能会失真。//html:<canvas ...
2019-05-13 13:07:53
175
原创 HTML5新特性入门
HTML5基于上一代HTML的新迭代语言，设计HTML5的主要目的是为了在移动设备上支持多媒体，例如：video标签和audio标签及canvas标签一、了解新特性：取消了过时的显示效果标记新表单元素引入新语义标签引入canvas标签(图形设计)本地数据库(本地存储)一些API好处： 跨平台缺点： PC端浏览器支持不是特别友好新语义标签：nav、header、artic...
2019-05-13 13:07:18
170
原创 JavaScript中this指向的修改
已经介绍过JavaScript中this指向的原理，今天介绍一下this指向的几个复杂解析，和如何改变this的指向。关于this的指向，有几个点需要注意：this指向的，只能是对象。this指向谁，取决于函数的执行环境，而不是在创建时就决定了。匿名函数的执行环境具有全局性。对于普通函数调用，我们通常把this绑定为null一、this问题举个
2019-05-11 22:53:18
359
原创 JavaScript异步的四种方式
JavaScript的四种常用异步操作方式:callback、Primose、Generator、asnyc/await一、callback回调函数回调是一个函数作为参数传递到另一个函数里，在那个函数执行完后再执行。function f1 (callback) { setTimeout(function () { console.log("1") call...
2019-05-11 21:31:50
1225
原创 JavaScript的单线程和异步
前言提到JavaScript的单线程(single threaded)和异步(asynchronous)，很多初入JavaScript的会想到这是自相矛盾的。当然，单线程和异步不能同时成为一个语言的特性。JS语言的特性是单线程，所以本身是不可能异步的，但JS的宿主环境(比如浏览器,Node)是多线程的，宿主环境通过某种方式使得JS具备了异步的属性。浏览器JS是单线程语言，浏览器指分配给...
2019-05-09 20:07:16
199
转载 JavaScript7个实用技巧
记录分享下JavaScript7个简单实用的小技巧~数组去重const a = [...new Set([1,2,3,4,5,5,5])]//[1,2,3,4,5]过滤falsy值从数组中过滤掉0、false、undefined、null、''、NaN:const a = [1,2,3,4,0,undefined,null,false,''].filter(Boolean)//[ ...
2019-05-08 21:45:51
126
原创 云服务器Nginx配置
使用的是ubuntu云服务器，简单配置一下服务器一、连接到服务器上ssh @xx.xx.xxx.xxx //服务器外网IP地址然后按照提示输入密码即可二、使用Nginx：sudo apt-get update //更新软件源sudo apt-get install nginx //安装nginxnginx -v //检查是否安装成功登录阿里云，确认域名解析到了服务器I...
2019-05-06 21:50:53
3107
原创 React中三元运算符的坑
在React中state的定义中有一个坑不易被发现，主要是state属性未被定义就是使用，需要用到三位运算符：举个栗子：class App extends Component{ this.state={ } componentDidMount(){ 请求后端接口拿到数据data,data是一个对象数组 } // 然后将data保存在当前状态之中 this.se...
2019-04-21 22:22:02
4703
原创 Umi配置proxy解决跨域问题
解决跨域需要在webpack配置proxy，umi将webpack配置保存在.umirc.js的配置文件中。在.umirc.js文件加上：proxy: { '/api': { target: 'http://localhost:9093', pathRewrite: { '^/api': '' }, changeOrigin: true }...
2019-04-21 20:57:20
24061
2
原创 微信小程序开发框架的组成
小程序的开发框架由四部分组成： WXML、WXSS、WXS、JavaScript一、WXMLWXML是框架设计的一套标签语言，结合组件、WXS和事件系统，可以构建出页面的结构。Attention：WXML标签严格要求闭合，区分大小写。WXML数据绑定使用Mustache语法，动态数据用双括号包裹起来：<view> <text>{{message}}</te...
2019-04-09 21:31:40
2497
原创 微信小程序的项目目录
新建微信小程序的项目目录：+ pages //小程序页面 + index - index.js //页面逻辑 - index.json //页面配置 - index.wxml //页面结构 - indwx.wxss //页面样式表 + logs - logs.js - logs.json - lo...
2019-04-09 14:41:23
869
原创 Node.js入门
# Node.jsNode.js is a JavaScript runtime built on Chrome’s V8.Node.js uses an event-driven,non-blocking I/O model.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。非阻塞IO: I/O时函数立即运行，进程不等待I/O完成。glo...
2019-03-05 20:52:17
139
原创 JS-浏览器
浏览器不同的浏览器对于JavaScript支持的差异主要是，有些API的接口不一样，比如AJAX，File接口。对于ES6标准，不同浏览器对各个特性支持也不一样。浏览器对象windowwindow对象不但充当全局作用域，而且表示浏览器窗口。window.innerWidthwindow.innerHeight // 获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具...
2019-02-17 22:08:52
400
原创 JS-面向对象编程
面向对象编程JavaScript的对象模型是基于原型实现的，特点是简单，缺点是理解起来比传统的类－实例模型要困难，最大的缺点是继承的实现需要编写大量代码，并且需要正确实现原型链。新的关键字class从ES6被正式引入到JavaScript中，这让类的定义简单了许多：class Student { constructor(name) { this.name = name...
2019-02-10 22:22:14
140
原创 JS-标准对象
JS-标准对象在JS世界里，一切都是对象。可以用typeof操作符获取对象的类型，它总是返回一个字符串：typeof 123; // 'number'typeof NaN; // 'number'typeof 'str'; // 'string'typeof true; // 'boolean'typeof undefined; // 'undefined'typeof Math....
2019-02-09 21:38:16
531
原创 JS-函数
函数借助函数，我们才能不关心底层的计算问题，而是在更高的层次上思考问题。写计算机程序也是一样，函数就是最基本的而一种代码抽象方式。一、函数定义和调用函数定义的两种方式:function abs(x){ ...}var abs = function(x){ ...}; //匿名函数赋值给了变量abs函数内部的语句在执行时，一旦执行到return语句时...
2019-01-23 22:34:57
142
原创 JS-入门
利用寒假一个多月的时间，重新学习下JS。参考文献：廖雪峰的官方网站一步一步地学习并记下笔记复习。使用var申明的变量则不是全局变量，它的范围被限制在该变量被申明的函数体内（函数的概念将稍后讲解），同名变量在不同的函数体内互不冲突。不用var申明的变量会被视为全局变量，为了避免这一缺陷，所有的JavaScript代码都应该使用strict模式。转义字符\n 表示换行JavaScript把...
2019-01-19 11:05:31
200
原创 Redux入门
Redux入门Redux自述Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 (如果你需要一个 WordPress 框架，请查看 Redux Framework。)可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。Redux 除了和 React 一...
2019-01-13 21:17:18
216
原创 Git教程
Git教程Git是目前世界上最先进的分布式版本控制系统（没有之一）。现在的项目开发已经离不开Git了，其强大的分支管理令多人协同开发十分便捷。并且先在很多项目都选择在github上开源，学Git已是大势所趋。一、安装和创建版本库安装在Ubuntu上安装git，先在终端输入git，看看系统有没有安装git$ gitThe program 'git' is currently not...
2019-01-08 09:43:38
197
原创 CSS Moudles定义多个类名
React中用CSS Moudles时，定义类名使用的是:<div className={styles.header}></div>但我想定义多个类名，达到CSS样式统一和单独控制的效果，一直找不到解决方案,问了下强大的学长找到了解决方法，其中要是使用模板字符串<div className={[`${styles.nameOne}`,`abc`].join(' '...
2018-10-15 21:03:58
4653
4
原创 React导航栏的拉伸隐藏功能实现
React导航栏的拉伸隐藏功能的实现这个demo主要用的是ant-design里的库，使用其中的导航栏菜单的库：import { Menu, Icon } from 'antd';const SubMenu = Menu.SubMenu;const MenuItemGroup = Menu.ItemGroup;class Sider extends React.Component {...
2018-10-12 16:18:21
2875
原创 React ant-design走马图，CSSmoudles复用
ant-design走马图，CSSmoudles复用，跟后端请求因为写一个项目需要ant-design的轮播图，项目使用的是css-moudlesant-design复用css-moudlesimport { Carousel } from 'antd';ReactDOM.render( &lt;Carousel autoplay&gt; &lt;div&gt;&lt;h3&...
2018-10-12 15:05:15
1176
原创 React生命周期详解
生命周期函数的概念和使用是React当中比较重要的一部分，我会在这篇博客中详细地介绍React生命周期函数1、定义 生命周期函数指在某一个时刻组件会自动调用执行的函数。 看了这个定义，大家应该会想到render函数，当state或props改变时会自动执行，符合条件，所以render函数就是一个生命周期函数。constructor构造函数在组件被创建的时刻也会被自动调用，也...
2018-09-01 10:39:04
373
原创 React中setState的使用(跟ref搭配使用的一些坑)
基本用法React中不允许直接修改state，如：this.state={… }，这是错误的 而是使用setState方法 this.setState( { … } )，中括号内包含state的修改调用了setState方法后，组件的状态就会发生变化。当组件的state或props发生变化时，render函数就会重新执行，从而重新对页面进行渲染扩展重点强调：setS...
2018-08-31 11:55:31
1698
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人