
JavaScript
程序员通通
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【JavaScript】前端必会的代码整理(包含leetcode题解)
更多leetcode题解在我的github上面:点击这里后面还会持续进行更新~常用数据结构和算法这些代码都在leetcode上AC了题目二分查找const binarySearch = function (nums, target) { if(nums === null || nums.length === 0) { return -1 } let left = 0,...原创 2019-04-19 13:41:42 · 1051 阅读 · 1 评论 -
【react】在create-react-app项目中使用图片路径的三种方式,亲测有效
1.引入图片:import imgUrl from ‘…/src/a.jpg’,render() { return ( <div > <img src={imgUrl } /> </div> ); }2.利用webpa...原创 2019-02-26 15:22:17 · 5260 阅读 · 2 评论 -
【JavaScript】实现两个jQuery API
window.jQuery = function(nodeOrSelector) { var nodes = {} //包装这个要返回的jQuery对象 if(typeof nodeOrSelector === 'string') { var temp = document.querySelectorAll(nodeOrSelector) //伪数组 for(let...原创 2018-12-15 21:50:10 · 248 阅读 · 0 评论 -
【JavaScript】JS 里的数据类型转换和内存图
类型转换&五个falsy值先来看一下js里面的七种数据类型:number string boolean null undefined object symbol。那么这些类型之间是如何转换呢?//number 转stringvar n = 1n.toString() // '1'1 + '' // '1' 老司机经常用这种方法 . 加号发现左右任意一边有字符串...原创 2018-12-02 00:00:26 · 756 阅读 · 1 评论 -
【JavaScript】js数据类型那些事儿
基本类型:number string boolean null undefined symbol复杂类型(引用类型),由基本类型组成,object看一个例子:var name = 'zhangsan'var age = 18var sex = 'male'这是三个基本类型,但三个变量之间有一些关系,这个时候就可以用一个对象表示:var person = { name = '...原创 2018-11-26 18:11:57 · 240 阅读 · 1 评论 -
【JavaScript】图解JavaScript原型和原型链
来看一个例子:var n = new Number(1)var s = new String('s')var b = new Boolean(true)var o = new Object()这几个对象在内存中是这个样子:大家都知道js中的对象有一些共有的方法,如valueOf(),toString()如下图:想一个问题,咱们只是声明了一个对象,没有添加这些方法,那么这些方法...原创 2018-11-29 16:49:32 · 332 阅读 · 1 评论 -
【JavaScript】JS红宝书笔记
1,离线检测 1,开发离线应用的第一步是要知道设备是在线还是离线,HTML5为此定义了一个 navigator.onLine属性,这个属性值为 true 表示设备能上网,值为 false 表示设备离线。 2,除 navigator.onLine 属性之外,为了更好地确定网络是否可用,HTML5 还定义了两个事件:online 和 offline 。当网络从离线变为在线或者从在线变为...原创 2018-11-18 14:58:49 · 558 阅读 · 1 评论 -
【JavaScript】牛客编程:查找两个节点的最近的一个共同父节点,可以包括节点自身
思路:使用递归的思路往上查找,找到一个节点的父节点,看他是否包含另一个DOM节点function commonParentNode(oNode1, oNode2) { for(; ; oNode1 = oNode1.parentNode) { if(oNode1.contains(oNode2)) { return oNode1 }...原创 2018-10-27 20:53:46 · 986 阅读 · 0 评论 -
【JavaScript】牛客编程:在数组 arr 中,查找值与 item 相等的元素出现的所有位置
function findAllOccurrences(arr, target) { var a = [] arr.forEach(function(item, index) { if(item === target) { a.push(index) } }) return a}function find...原创 2018-10-27 15:03:11 · 782 阅读 · 1 评论 -
【JavaScript】牛客编程: 为数组 arr 中的每个元素求二次方。不要直接修改数组 arr,结果返回新的数组
function square(arr) { var arr2 = [] for(var i=0; i<arr.length; i++) { arr2[i] = arr[i]*arr[i] } return arr2}function square(arr) { return arr.map(function(elem, inde...原创 2018-10-27 14:51:22 · 947 阅读 · 0 评论 -
【JavaScript】牛客编程练习:删除数组最后一个元素
1, 利用slice复制一个新数组function truncate(arr) { var arr1 = arr.slice(0) arr1.pop(arr[arr1.length-1]) return arr1}2, 用filter过滤掉最后一个元素function truncate(arr) { return arr.filter(function(...原创 2018-10-22 22:50:07 · 338 阅读 · 1 评论 -
【Vue】我对Vue双向绑定的理解
v-model从 Vue 0.x 开始,Vue 就用 v-model 来实现「双向绑定」。如data: { user: { name: 'frank'}}<input v-model="user.name">能实现以下两个绑定:user.name 的变化自动同步到 input.valueinput.value 的变化自动同步到 user.name但是当 F...原创 2019-03-06 12:55:25 · 296 阅读 · 1 评论 -
【Vue】Vue中methods,computed(计算属性),watch(监听数据)的区别
触发时机watch: 被 watch 的值变化的时候执行一个函数methods: getMessage() 出现在视图里的时候,或视图更新的时候调用 getMessagecomputed: 两个调试同时满足的时候:一、依赖的属性变化了 二、message 出现在视图里了或视图更新了使用形式watch 的值需要用 data 承载,本身返回值没有用methods 的返回值可以直接展示在视图...原创 2019-03-06 13:30:30 · 433 阅读 · 1 评论 -
【JavaScript】自己动手封装一个ajax函数
我们在jquery中一般是这样是用ajax函数的:xxx.addEventListener('click', function(){ window.ajax({ url:'/xxx', method: 'get', body: '', //请求体,method为get可以为空 headers: { //请求头 'content-type'...原创 2019-03-06 14:07:25 · 296 阅读 · 1 评论 -
【leetcode-102】JavaScript版本 二叉树层序遍历
/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** * @param {TreeNode} root * @return {number[][]} */va...原创 2019-04-15 14:09:07 · 653 阅读 · 1 评论 -
【leetcode733】JavaScript-图像渲染
var floodFill = function(image, sr, sc, newColor) { let Len1 = image.length, Len2 = image[0].length let dir = [[1, 0], [-1, 0], [0, 1], [0, -1]] let visited = [] let color = image[sr][sc] ...原创 2019-04-15 11:25:29 · 581 阅读 · 1 评论 -
【JavaScript】设计模式-单例模式
let Single = (function() { let _instance = null function init(props) { return { publickMethod: function(){ }, value: props.value } } return function(props) { if(...原创 2019-04-09 21:24:57 · 340 阅读 · 0 评论 -
【JavaScript】设计模式-发布订阅模式
var Observer = (function() { var _message = {} return { //将订阅者注册的消息推到消息队列中,接收的参数时消息的类型和如何处理消息 regist(type, fn) { if(typeof _message[type] === 'undefined') { _message[type] = ...原创 2019-04-09 20:58:39 · 243 阅读 · 0 评论 -
【JavaScript】leetcode89,格林编码
思路:利用格林编码的对称性/** * @param {number} n * @return {number[]} */var grayCode = function(n) { function getCode(n) { if(n === 0) { return ['0'] } if(n === 1) { return ['0', ...原创 2019-03-29 11:49:08 · 478 阅读 · 1 评论 -
【JavaScript】leetcode605,种花问题
var canPlaceFlowers = function(flowerbed, n) { var count = 0 for(var i = 0; i < flowerbed.length; i++) { if(flowerbed[i-1] !== 1 && flowerbed[i] === 0 && flowerbed[i+1] !== ...原创 2019-03-29 10:29:37 · 384 阅读 · 0 评论 -
【JavaScript】浏览器的缓存策略:强缓存和协商缓存
通常浏览器缓存策略分为两种:强缓存和协商缓存,并且缓存策略都是通过设置 HTTP Header 来实现的。强缓存(如果命中就不会去请求服务器,返回状态码200)如何设置强缓存?1,设置http头:Cache-Control,以客户端相对时间为准Cache-Control:max-age=3600(单位是秒)。2,expires(http1.0产物)会将资源的实效日期告知客户端。Exp...原创 2019-03-24 10:52:19 · 1740 阅读 · 1 评论 -
【react】react单元测试初探,小白的采坑之路
第一次在react中使用单元测试,没想到遇到这么多坑我使用create-react-app创建的react项目,单元测试工具Jest已经集成在项目中了,所以直接运行:npm run test就可以运行测试样例第一个坑:找不到测试样例,命令行提示如下图:项目结构如下:经过一番google,发现react项目的测试文件夹必须放在src下面,且测试的文件名必须是:下划线下划线tes...原创 2019-03-26 20:20:36 · 325 阅读 · 0 评论 -
【JavaScript】封装一个jsonp函数
function jsonp({url, params, callback}) { return new Promise ((resolve, reject) => { let script = document.createElement ('script'); window[callback] = function (data) { //声明这个全局函数,scrip...原创 2019-04-04 11:12:47 · 370 阅读 · 0 评论 -
【JavaScript】给定一个字符串,请统计字符串中出现最多的字母和次数
//给定一个字符串,请统计字符串中出现最多的字母和次数function fn(str) { var hash = {} for(let i = 0; i < str.length; i++) { if(hash[str[i]]) { hash[str[i]]++ } else { hash[str[i]] = 1 } } le...原创 2019-03-20 20:23:34 · 1587 阅读 · 0 评论 -
【JavaScript】 异步的终极方案async,await
看一个最简单例子:function x() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('hello js') }, 3000) })}async function test() { let n = await x() console.lo...原创 2019-03-11 17:02:45 · 285 阅读 · 1 评论 -
【JavaScript】ES6新增的数据类型(Symbol,Set,Map,weakSet,weakMap)
回顾一下js中七种数据类型:number, string, bool,null,undefined,symbol, Object。前面六种是基本数据类型,Object是复杂数据类型Object里面又分为:Array Function Date objectES6新增的数据类型(Set,Map,weakSet,weakMap)都属于ObjectSymbolSymbol的使用:var a ...原创 2019-03-11 15:43:15 · 1209 阅读 · 0 评论 -
【JavaScript】三种方式实现JavaScript继承
1,组合继承function Parent(value) { this.val = value}Parent.prototype.getValue = function() { console.log(this.val)}function Child(value) { Parent.call(this, value)}Child.prototype = new Paren...原创 2019-03-10 14:25:56 · 242 阅读 · 1 评论 -
【JavaScript】牛客编程练习:移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr,结果返回新的数组
1,function remove(arr, item) { return arr.filter(function(value) { return value !== item })}2,function remove(arr, item) { var a = [] for(var i=0; i<arr.length; i+...原创 2018-10-22 15:51:29 · 3318 阅读 · 1 评论 -
【JavaScript】牛客编程练习:找出元素 item 在给定数组 arr 中的位置
function indexOf(arr, item) { if (Array.prototype.indexOf){ //判断是否支持indexOf方法 return arr.indexOf(item); } else { for (var i = 0; i < arr.length; i++){ if (arr[i] === it...原创 2018-10-22 15:22:01 · 489 阅读 · 0 评论 -
【JavaScript】freecodecamp------Seek and Destroy
摧毁数组 金克斯的迫击炮! 实现一个摧毁(destroyer)函数,第一个参数是待摧毁的数组,其余的参数是待摧毁的值。function destroyer(arr) { // 请把你的代码写在这里 var a = arguments; function judge(item) { for(var i = 1; i < a.length; i++) { ...原创 2018-08-21 15:33:43 · 257 阅读 · 0 评论 -
【JavaScript】freecodecamp---Where art thou
题目:写一个 function,它遍历一个对象数组(第一个参数)并返回一个包含相匹配的属性-值对(第二个参数)的所有对象的数组。如果返回的数组中包含 source 对象的属性-值对,那么此对象的每一个属性-值对都必须存在于 collection 的对象中。解题思路: 1. 拿到source对象的key值,再拿到collection数组里面每一个对象的key值 2. 遍历collection...原创 2018-08-30 17:10:19 · 265 阅读 · 0 评论 -
【JavaScript】freecodecamp------Mutations
比较字符串 (蛤蟆可以吃队友,也可以吃对手) 如果数组第一个字符串元素包含了第二个字符串元素的所有字符,函数返回true。 举例,[“hello”, “Hello”]应该返回true,因为在忽略大小写的情况下,第二个字符串的所有字符都可以在第一个字符串找到。 [“hello”, “hey”]应该返回false,因为字符串”hello”并不包含字符”y”。 [“Alien”, “line”...原创 2018-08-19 20:26:39 · 193 阅读 · 0 评论 -
【JavaScript】freecodecamp-----Slasher Flick
截断数组 返回一个数组被截断n个元素后还剩余的元素,截断从索引0开始。function slasher(arr, howMany) { // 请把你的代码写在这里 if(howMany === 0) { return arr; } var myArr = arr.slice(howMany); return myArr;}slasher([1, 2, 3]...原创 2018-08-19 20:01:10 · 214 阅读 · 0 评论 -
【JavaScript】freecodecamp---------Chunky Monkey
猴子吃香蕉, 分割数组(猴子吃香蕉可是掰成好几段来吃哦) 把一个数组arr按照指定的数组大小size分割成若干个数组块。 例如:chunk([1,2,3,4],2)=[[1,2],[3,4]]; chunk([1,2,3,4,5],2)=[[1,2],[3,4],[5]]; function chunk(arr, size) { // 请把你的代码写在这里 ...原创 2018-08-19 19:46:47 · 228 阅读 · 0 评论 -
【JavaScript】深入理解ES6,var,let,const的区别
1,var 声明与变量提升 (Var Declarations and Hoisting)使用 var 关键字声明的变量,不论在何处都会被视作在函数级作用域内顶部的位置发生(如 果不包含在函数内则为全局作用域内)什么是变量提升? 看看下面一段代码function getValue(condition) { if (condition) { var val...原创 2018-08-18 13:23:33 · 251 阅读 · 1 评论 -
【性能优化】单页面应用(SPA)
1,传统的web应用(多页面应用)传统多页面是由后端控制一个 url 对应一个 html 文件,页面之间的跳转需要根据后端给出的 url 跳转到新的 html 上,几乎每一个响应动作都会刷新整个页面。由多个完整页面构成页面之间的跳转需要重新加载资源,这样就不能很好的重用公共文件页面切换加载缓慢,流畅度不够,用户体验比较差2,单页面应用(SinglePage Web Applic...原创 2018-08-18 12:40:50 · 920 阅读 · 0 评论 -
解决VScode不能在线安装插件的问题
进入VScode官网:https://marketplace.visualstudio.com/找到对应的插件,点击如图所示的位置 下载完成之后,进入VScode,点击拓展,点击右边的三个…进行安装即可。 ...原创 2018-06-01 14:13:00 · 35422 阅读 · 2 评论 -
【JavaScript】ES6中的箭头函数是什么?
正如其名,箭头函数由 “箭头”(=&gt;)这种新的语法来定义。箭头函数的特点没有 this,rguments 绑定 -,this,argumentst 的值 由最近的不包含箭头函数的作用域决定。不能被 new 调用 - 箭头函数内部没有 [[Construct]] 方法,因此不能当作构造函数使用。使用 new 调用箭头函数会抛出错误。没有 prototype - 既然你不能使用 n...原创 2018-05-31 13:32:04 · 763 阅读 · 1 评论 -
Javascript实现简单进度条
<html><head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="JSjindutiao.css"> <script src="JS%E8%BF%9B%E5%BA%A6%E6%9D%A1.js"> </script></head><body> <h1>Java原创 2017-11-22 12:45:29 · 7858 阅读 · 0 评论 -
HTML+CSS+Javascript 实现简单计算器
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>简单计算器</title> <style> *{ box-sizing: border-box; } .mycalculator{ border: 2px sol原创 2017-11-22 12:42:24 · 1054 阅读 · 0 评论