箭头函数与call

发表于 2020-11-08 更新于 2024-07-11 分类于零散知识

在看阮一峰大佬的ES6时，看到一个关于箭头函数和this的例子

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

输出结果竟然是42，我一直以为箭头函数的this从函数定义时就已经固定不变了，es6的教程也看过几遍，还是看书不仔细漏过了这个问题

在疑惑后也思考研究了一下，结合搜索到的例子，得出一下结论：
首先不使用箭头函数

function foo() {
  console.log('this.id:',this.id); // this.id: 42
  setTimeout( function () {
      console.log('this.id:',this.id); // this.id: 21
  },100);
}

var id = 21;

foo.call({ id: 42 });

此时结果都是可以预期的，第一行输出42，是因为call函数改变了foo的指针执行，指向为{id: 42}
第二行输出21，是因为setTimeout是挂载在window下面的。setTimeout实际上又改变了this的指针指向，将this又指向了window。因此输出21。

将函数改为箭头函数

function foo() {
  console.log('this.id:',this.id); // this.id: 42
  setTimeout( () => {
      console.log('this.id:',this.id); // this.id: 42
  },100);
}

var id = 21;

foo.call({ id: 42 });

此时第一行依旧输出42，这一点是肯定的
分析第二行，箭头函数导致this总是指向函数（箭头函数）定义生效时所在的对象，这句话换个方式理解比较容易理解和记忆，即箭头函数的this指向和将箭头函数的内容拿到函数外层的this指向是一致的
结合上面的例子就是第二行的this应该和第一行的this是一致的

看到闭包以后，我觉得箭头函数既然没有自己的this，是不是相当于普通函数获取上一级的变量一样。。。？

再看一下这个例子

var myObj = {
  name : "myObj", 
  showThis: function(){
	console.log(this); // 可以更清晰的看到发生了什么
    return () => {
      console.log(this.name);
    }
  }
}
var obj = {
  name: "obj"
}

var fnc1 = myObj.showThis()
// {name: 'myObj', showThis: ƒ}
fnc1.call(obj)
fnc1()

var fnc2 = myObj.showThis.call(obj)
// {name: 'obj'}
fnc2()

// myObj
// myObj
// obj

可以看到 call apply 和bind 也无法改变箭头函数的this，始终取决于上层上下文的this

“蝉原则”与CSS3随机多背景随机圆角等效果

什么是“蝉原则”？

“蝉原则”，英文称作“cicada principle”，是一种让事物的重复出现符合“自然随机性”的规则，为什么这么说呢？

“蝉原则”源自于北美，中国似乎并未有这样的说法，这背后是有有故事的：

北美和东亚蝉的种群是不一样的，在东亚蝉的幼虫生活在土中3年5年或7年；但是北美有一种周期蝉（Magicicada），其生命周期为十三年或十七年，也被称为十七年蝉或十三年蝉。东亚的蝉生命周期短，因此，给人感觉好像每年都有很多蝉，而北美的周期蝉的生命周期很长，因此能够让人明显感觉到每隔十几年蝉的数量就会大规模爆发一下，于是就会引发一些科学家的好奇，为什么生命周期是十三年或者十七年呢？
蝉的天敌鸟类其繁荣萧条周期是具有规律性的（一般2至6年），然后不断重复。十三年或者十七年中的13和17都是质数，而吃蝉的鸟类一般寿命都不超过13年，因此就不会遇到上一世代所遇到的天敌。
东亚蝉的幼虫生活的年限比较短，可能与东亚的主要鸟类种群寿命不长有关，例如麻雀就2年寿命。还有一个很重要的原因，就是一片区域的蝉他不止一个种群，而使用质数作为生命周期年数就可以避免钻出泥土时可以和别种群的蝉类一起钻出，这样竞争压力就会小。例如，北美的十七年蝉和十三年蝉每221年才会出现同时爆发的情况。

这种以质数作为循环周期来增加“自然随机性”的策略就称之为“蝉原则”。
那“蝉原则”对我们网页设计有什么启示呢？那就是可以以最小成本实现更自然的随机效果。
本文就演示两个借助“蝉原则”和CSS3特性实现随机效果的例子。

“蝉原则”下的CSS3 multiple Backgrounds随机多背景

在著名的CSS3背景底纹站点有这么一个案例，如下截图：

效果展示

从名称就可以看出其背后的原理，Cicada stripes是“蝉条纹”的意思，意思是说这里的随机背景线条实际上是使用“蝉原则”实现的。代码如下：

.stripes {
  background-color: #026873;
  background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
    linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
  background-size: 13px, 29px, 37px, 53px;
}

上面CSS代码显示总共有4个渐变背景图，然后每个背景图的颜色透明度以及区域范围都不一样，然后最终的随机效果，最关键的就是控制4个背景图循环尺寸的background-size属性，其对应的4个尺寸值13px, 29px, 37px, 53px全部都是质数，于是保证了最大的自然随机，最终的随机线条效果更自然。

“蝉原则”下的CSS3 border-radius随机圆角效果

这里随机圆角效果可以参见这个站点：http://2016.uxlondon.com/speakers，效果截图如下：

效果展示
可以看到嘉宾的头像的圆角的大小都是随机的，不规则的，有的这里扁，又是那里歪，其实现也利用的“蝉原则”。

其实现的原理是对:nth-child进行自然随机，按照原作者的话说，其原本是想类似下面实现：

list:nth-child(2n) {}
list:nth-child(3n) {}
list:nth-child(5n) {}
list:nth-child(7n) {}
list:nth-child(11n) {}

但是发现不能覆盖所有的列表项，反而有些不自然，因此，进行了如下的改进：

list:nth-child(2n + 1) {}
list:nth-child(3n + 2) {}
list:nth-child(5n + 3) {}
list:nth-child(7n + 4) {}
list:nth-child(11n + 5) {}

也就是后面再加一个小一号的质数值，于是，再配合默认效果，天衣无缝的随机列表交互就实现了，拿2n+1项举例：

list {
  border-radius: 87% 91% 98% 100%;
}
list:hover {
  border-radius: 95% 70% 100% 80%;
  transform: rotate(-2deg);
}
.list:nth-child(2n+1) {
  border-radius: 59% 52% 56% 59%;
  transform: rotate(-6deg);
}
.list:nth-child(2n+1):hover {
  border-radius: 51% 67% 56% 64%;
  transform: rotate(-4deg);
}

于是效果达成！

质数表

2 3 5 7 11 13 17
19 23 29 31 37 41
43 47 53 59 61 57 
71 73 79 83 89 97

防抖和节流

发表于 2020-10-18 更新于 2024-07-11 分类于零散知识

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。
用一句比较剪短的话形容两者的区别：
防抖是控制次数，节流是控制频率

防抖

非立即执行版：
触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

function debounce(func, wait) {
  let timeout;
  return function () {
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      // 直接用箭头函数就可以解决this指向
      func.apply(this, args)
    }, wait);
  }
}

立即执行版：
立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

function debounce(func,wait) {
  let timeout;
  return function () {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    let callNow = !timeout;
    timeout = setTimeout(() => {
      timeout = null;
    }, wait)
    if (callNow) func.apply(context, args)
  }
}

节流

function throttle(func, wait) {
  let timeout;
  return function() {
    let args = arguments;
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, args)
      }, wait)
    }
  }
}

leetCode

发表于 2020-09-24 更新于 2024-07-13 分类于算法

卡牌分组

给定一副牌，每张牌上都写着一个整数。

此时，你需要选定一个数字 X，使我们可以将整副牌按下述规则分成 1 组或更多组：

每组都有 X 张牌。组内所有的牌上都写着相同的整数。
仅当你可选的 X >= 2 时返回 true。

示例 1：

输入：[1,2,3,4,4,3,2,1]
输出：true
解释：可行的分组是 [1,1]，[2,2]，[3,3]，[4,4]
示例 2：

输入：[1,1,1,2,2,2,3,3]
输出：false
解释：没有满足要求的分组。
示例 3：

输入：[1]
输出：false
解释：没有满足要求的分组。
示例 4：

输入：[1,1]
输出：true
解释：可行的分组是 [1,1]
示例 5：

输入：[1,1,2,2,2,2]
输出：true
解释：可行的分组是 [1,1]，[2,2]，[2,2]

涉及点

辗转相除法求最大公约数
利用哈希表计算元素出现次数

自己的解答

首先利用 ES6 新数据结构 Map ，计算元素出现的次数
使用...运算符将其转为数组，不要忘记利用 (Map.protype.values()返回的是一个新的Iterator对象)
然后遍历数组，取当前项与后一项做辗转相除法，求出最大公约数后赋值给后一项，直到运算完成
这里需要考虑[1,1]的这种情况，由于次数数组程度为 1 ，所以做了特殊处理
然后只要判断最后的最大公约数是否大于 2 即可

var hasGroupsSizeX = function(deck) {
  if(deck.length<2){
    return false
  }
  const countMap = new Map()
  for (let i = 0; i < deck.length; i++) {
    countMap.set(deck[i],countMap.has(deck[i]) ? countMap.get(deck[i]) + 1 : 1)
  }
  const countArray = [...countMap.values()] 
  console.log(countArray);
  let g;
  if(countArray.length === 1 && countArray[2] >=2 ){
    return true
  }
  for (let i = 0; i < countArray.length - 1; i++) {
    g = ojld(countArray[i], countArray[i+1])
    countArray[i+1] = g
  }
  return g >= 2
};
function ojld(chushu, yushu) {
  if(chushu % yushu === 0){
    return yushu
  }else{
    return ojld(yushu, chushu % yushu)
  }
}

网上的解答,在此仅展示部分代码，代码取第一位做了一次重复运算，所有不需要考虑特殊情况

/*
最大公约数
因为该数组是出现次数数组，最小值至少为1（至少出现1次），所以默认赋值为数组首位对公约数计算无干扰
*/
let g = timeAry[0];

// 遍历出现次数，计算最大公约数
timeAry.forEach(time => {
  // 因为需要比较所有牌出现次数的最大公约数，故需要一个中间值
  g = gcd(g, time);
});

605 种花问题

假设你有一个很长的花坛，一部分地块种植了花，另一部分却没有。可是，花卉不能种植在相邻的地块上，它们会争夺水源，两者都会死去。

给定一个花坛（表示为一个数组包含0和1，其中0表示没种植花，1表示种植了花），和一个数 n 。能否在不打破种植规则的情况下种入 n 朵花？能则返回True，不能则返回False。

示例 1:
输入: flowerbed = [1,0,0,0,1], n = 1
输出: True

示例 2:
输入: flowerbed = [1,0,0,0,1], n = 2
输出: False

注意:

数组内已种好的花不会违反种植规则。
输入的数组长度范围为 [1, 20000]。
n 是非负整数，且不会超过输入数组的大小。

官方解答, 有几个缺点

边界条件过于负责
遍历次数较多

var canPlaceFlowers = function(flowerbed, n) {
  let count = 0
  for (let i = 0,length = flowerbed.length; i < length; i++) {
    const item = flowerbed[i];
    if(item!=1){
      if((i==0||flowerbed[i-1]==0)&&(i==flowerbed.length-1||flowerbed[i+1]==0)){
        flowerbed[i] = 1
        count++
      }
    }
  }
  return count>=n
};

较好的解答, 通俗易懂

两边不为1，隐含着最左和最右的边界条件
当符合种花条件时，将遍历序号 +1 取代赋值，减少了遍历次数

var canPlaceFlowers = function (flowerbed, n) {
  var num = 0
  for (var i = 0, length = flowerbed.length; i < length; i++) {
    if (flowerbed[i] === 0 && flowerbed[i - 1] !== 1 && flowerbed[i + 1] !== 1) {
      num++
      i++
    }
  }
  return n <= num
};

格雷编码

优秀解题思路-附带图解
主要就是找规律，据说数字电路课有讲解

我的解答

84 柱状图中最大的矩形

给定 n 个非负整数，用来表示柱状图中各个柱子的高度。每个柱子彼此相邻，且宽度为 1 。

求在该柱状图中，能够勾勒出来的矩形的最大面积。
最大矩形

我的解法，用最原始的方法进行解答，理论上可行，但是空间复杂度和时间复杂度太复杂了

var largestRectangleArea = function(heights) {
  let maxArea = 0
  while (heights.length !== 0) {
    const lengths = [...heights];
    while(lengths.length !== 0){
      let area = Math.min(...lengths) * lengths.length
      if(area>maxArea){
        maxArea = area
      }
      lengths.pop()
    }
    heights.shift()
  }
  return maxArea
};

单调栈应用优秀讲解

const largestRectangleArea = (heights) => {
  let maxArea = 0
  const stack = []
  heights = [0, ...heights, 0]         
  for (let i = 0; i < heights.length; i++) { 
    while (heights[i] < heights[stack[stack.length - 1]]) { // 当前bar比栈顶bar矮
      const stackTopIndex = stack.pop() // 栈顶元素出栈，并保存栈顶bar的索引
      maxArea = Math.max(               // 计算面积，并挑战最大面积
        maxArea,                        // 计算出栈的bar形成的长方形面积
        heights[stackTopIndex] * (i - stack[stack.length - 1] - 1)
      )
    }
    stack.push(i)                       // 当前bar比栈顶bar高了，入栈
  }
  return maxArea
}

面试中遇到的算法题两个有序数组合并为一个有序数组

两个数组
let arr1 = [0, 3, 5, 8, 15, 19]
let arr2 = [1, 2, 7, 13, 16, 17, 18]
结果输出为
[0, 1, 2, 3, 5, 7, 8, 13, 15, 16, 17, 18]
假设两个数组都为升序排列

let arr1  = [-1, 0, 1, 5, 8, 15, 19, 22, 33]
let arr2 =  [3, 4, 7, 13, 15, 16, 17, 18, 19, 20, 33, 34, 35]
for (let i = 0; i < arr1.length; i++) {
  for (let j = 0; j < arr2.length; j++) {
    if(arr1[i]<arr2[j]){
      arr2.splice(j, 0, arr1[i]);
      break;
    }else if(j === arr2.length -1){
      arr2.splice(j + 1, 0, arr1[i]);
    }
  }
}
```  

引申，如果不让使用for循环、sort  
**下边这个方法问题不大，测试了很多数据，还拥有优化空间**

let arr1 = [-1, 0, 1, 5, 8, 15, 19, 22, 33]
let arr2 = [3, 4, 7, 13, 15, 16, 17, 18, 19, 20, 33, 34, 35]
function handle(arr1, arr2) {
if(arr1.length === 0){
return
}else{
var v1 = arr1.shift()
addPosition(v1, arr2, 0)
return handle(arr1, arr2)
}
}
function addPosition(v1, arr2, index){
if(index >= arr2.length){
return
}else{
if(v1 <= arr2[index] && (index === 0 || v1 > arr2[index - 1])){
arr2.splice(index, 0, v1)
return
} else if(index === arr2.length - 1) {
if(v1 > arr2[index]){
arr2.splice(index + 1, 0, v1)
return
}
}
return addPosition(v1, arr2, index + 1)
}
}
handle(arr1, arr2)
console.log(arr2);


***
其实升序排列 还隐藏着一些条件，上述代码优化如下

let arr1 = [-1, 0, 1, 5, 8, 15, 19, 22, 33]
let arr2 = [3, 4, 7, 13, 15, 16, 17, 18, 19, 20, 33, 34, 35]
function handle(arr1, arr2) {
if(arr1.length === 0){
return
}else{
var v1 = arr1.shift()
addPosition(v1, arr2, 0)
return handle(arr1, arr2)
}
}
function addPosition(v1, arr2, index){
if(index >= arr2.length){
return
}else{
// 优化了下列代码
if(v1 <= arr2[index]){
arr2.splice(index, 0, v1)
return
} else if(index === arr2.length - 1) {
arr2.splice(index + 1, 0, v1)
return
}
// 优化结束
return addPosition(v1, arr2, index + 1)
}
}
handle(arr1, arr2)
console.log(arr2);

正则疑难点记录

发表于 2020-08-28 更新于 2024-07-13 分类于正则

正则疑难点记录

贪婪、非贪婪与独占模式

1
2
3

// 贪婪匹配
"c.*t" => The fat cat sat on the mat.
//匹配： cat sat on the mat

在字符后加上一个问号（?）则可以开启懒惰模式，在该模式下，正则引擎尽可能少的重复匹配字符，匹配成功之后它会继续匹配剩余的字符串

1
2
3

// 非贪婪匹配  则可以开启懒惰模式，在该模式下，正则引擎尽可能少的重复匹配字符，匹配成功之后它会继续匹配剩余的字符串
"c.*?t" => The fat cat sat on the mat.
//匹配： cat

在表达式后加上一个加号（+），则会开启独占模式。同贪婪模式一样，独占模式一样会匹配最长。不过在独占模式下，正则表达式尽可能长地去匹配字符串，一旦匹配不成功就会结束匹配而不会回溯。

1 2	"c.*+t" => The fat cat sat on the mat. //匹配：空

淘宝大佬笔记-贪婪、懒惰与独占-回溯问题

0次匹配 * ？

匹配>=0个重复的在号之前的字符。
- - 匹配>=1个重复的+号前的字符。
? 标记?之前的字符为可选(代表0次或者1次).

看一下下列代码,匹配模式是/[a-z]*/

1
2
3

var str = "The fata catqq sat on the mat.";
var reg = /[a-z]*/;
console.log(str.match(reg));

结果如下,替换为/[a-z]?/结果也是一样的
疑难点记录
匹配到了一个""

现在添加一个全局搜索符 g

1
2
3

var str = "The fata catqq sat on the mat.";
var reg = /[a-z]*/g;
console.log(str.match(reg));

结果如下图：
疑难点记录
我非常疑惑为什么会匹配到 "" 下面是来自正则匹配的示意图

蓝色虚线表示""

如果把正则换成/[a-z]?/g结果如下所示
疑难点记录
这是因为?开启了懒惰模式，正则引擎尽可能少的重复匹配字符，匹配成功之后它会继续匹配剩余的字符串

正则疑难点记录

发表于 2020-08-28 更新于 2024-07-13 分类于正则

转载自

什么是正则表达式？

正则表达式是一组由字母和符号组成的特殊文本，它可以用来从文本中找出满足你想要的格式的句子。

一个正则表达式是一种从左到右匹配主体字符串的模式。
“Regular expression”这个词比较拗口，我们常使用缩写的术语“regex”或“regexp”。
正则表达式可以从一个基础字符串中根据一定的匹配模式替换文本中的字符串、验证表单、提取字符串等等。

想象你正在写一个应用，然后你想设定一个用户命名的规则，让用户名包含字符、数字、下划线和连字符，以及限制字符的个数，好让名字看起来没那么丑。
我们使用以下正则表达式来验证一个用户名：

以上的正则表达式可以接受 john_doe、jo-hn_doe、john12_as。
但不匹配Jo，因为它包含了大写的字母而且太短了。

元字符	描述
.	句号匹配任意单个字符除了换行符。
[ ]	字符种类。匹配方括号内的任意字符。
[^ ]	否定的字符种类。匹配除了方括号里的任意字符
*	匹配>=0个重复的在*号之前的字符。
+	匹配>=1个重复的+号前的字符。
?	标记?之前的字符为可选.
{n,m}	匹配num个大括号之前的字符或字符集 (n <= num <= m).
(xyz)	字符集，匹配与 xyz 完全相等的字符串.
\|	或运算符，匹配符号前或后的字符.
\	转义字符,用于匹配一些保留的字符 `[ ] ( ) { } . * + ? ^ $ \ \|`
^	从开始行开始匹配.
$	从末端开始匹配.

2.1 点运算符 `.`

.是元字符中最简单的例子。
.匹配任意单个字符，但不匹配换行符。
例如，表达式.ar匹配一个任意字符后面跟着是a和r的字符串。

".ar" => The car parked in the garage.

简写	描述
.	除换行符外的所有字符
\w	匹配所有字母数字，等同于 `[a-zA-Z0-9_]`
\W	匹配所有非字母数字，即符号，等同于： `[^\w]`
\d	匹配数字： `[0-9]`
\D	匹配非数字： `[^\d]`
\s	匹配所有空格字符，等同于： `[\t\n\f\r\p{Z}]`
\S	匹配所有非空格字符： `[^\s]`
\f	匹配一个换页符
\n	匹配一个换行符
\r	匹配一个回车符
\t	匹配一个制表符
\v	匹配一个垂直制表符
\p	匹配 CR/LF（等同于 `\r\n`），用来匹配 DOS 行终止符

符号	描述
?=	正先行断言-存在
?!	负先行断言-排除
?<=	正后发断言-存在
?<!	负后发断言-排除

标志	描述
i	忽略大小写。
g	全局搜索。
m	多行修饰符：锚点元字符 `^` `$` 工作范围在每行的起始。

“蝉原则”与CSS3随机多背景随机圆角等效果

什么是“蝉原则”？

“蝉原则”下的CSS3 multiple Backgrounds随机多背景

“蝉原则”下的CSS3 border-radius随机圆角效果

质数表

防抖

节流

卡牌分组

605 种花问题

格雷编码

84 柱状图中最大的矩形

面试中遇到的算法题 两个有序数组合并为一个有序数组

正则疑难点记录

贪婪、非贪婪与独占模式

0次匹配 * ？

什么是正则表达式？

目录

1. 基本匹配

2. 元字符

2.1 点运算符 .

2.2 字符集

2.2.1 否定字符集

2.3 重复次数

2.3.1 * 号

2.3.2 + 号

2.3.3 ? 号

2.4 {} 号

2.5 (...) 特征标群

2.6 | 或运算符

2.7 转码特殊字符

2.8 锚点

2.8.1 ^ 号

2.8.2 $ 号

3. 简写字符集

4. 零宽度断言（前后预查）

4.1 ?=... 正先行断言

4.2 ?!... 负先行断言

4.3 ?<= ... 正后发断言

4.4 ?<!... 负后发断言

5. 标志

5.1 忽略大小写（Case Insensitive）

5.2 全局搜索（Global search）

5.3 多行修饰符（Multiline）

6. 贪婪匹配与惰性匹配（Greedy vs lazy matching）

贡献

许可证

词法作用域

动态作用域

变量的声明

var() 函数

变量值的类型

作用域

响应式布局

兼容性处理

闭包和this

控制台看闭包

面试中遇到的算法题两个有序数组合并为一个有序数组

2.1 点运算符 `.`

2.3.1 `*` 号

2.3.2 `+` 号

2.3.3 `?` 号

2.4 `{}` 号

2.5 `(...)` 特征标群

2.6 `|` 或运算符

2.8.1 `^` 号

2.8.2 `$` 号

4.1 `?=...` 正先行断言

4.2 `?!...` 负先行断言

4.3 `?<= ...` 正后发断言

4.4 `?<!...` 负后发断言