This week study summary (original + algorithm)

Button

 button{
    width: 100px;
    height: 50px;
    border-radius:25px;
    color:#000;
    border:2px solid blue;
    background-color: transparent;
  }

overflow:scroll

Scroll bar

Memory function

const add = () => {
  let a = {}
  return num => {
    const result=num+10
    a[num]=result
    console.log(a)
    if (num in a) {
      return a[num]
    }else{
      return result
    }
  }
}
let a = add()
console.log(a(20))
console.log(a(10))

import 和require

import command is executed compilation phase, before the code is run, the module is meant to be imported will first run, and import the module after the file is run

require () to run code when run

BigInt (new basic types)

BigIntData object types than Numberlarger attribute types supported integer value larger than the mainly used for Numbera range of data types supported

To create BigInt, simply mantissa integer n can be added

orBigInt("9007199254740995")

9007199254740995n

console.log(typeof 10n);    // → bigint
10n==10  //true
与`BigInt`操作数一起使用时,算术运算符应该返回`BigInt` 值,因此,除法运算符的结果会自动向下舍入到最接近的整数
25n/10n;   // 2n
不能对混合使用`number`和`BigInt`  操作数执行算术操作
可以通过转化进行操作
BigInt(10)+10n
10+Number(10)

VDOM

VDOM is a data structure

vdom is used to abstract the DOM logically, on the underlying implementation is based on the universal vdom this hash table data structure

{
    type:'div',
    props:{
        name:'lucifer'
    },
    children:[{
        type:'span',
        props:{},
        children:[]
    }]    
}

So we DOM from oriented programming, switch to VDOM oriented programming, since the data VDOM in turn driven, i.e. the data driver

DOM dif algorithm

AST

AST (abstract syntax tree) is the theoretical basis compiler front-end (escape) of

AST much on the powerful in itself does not involve any syntax, so you only have to write the corresponding escape rules, any syntax can escape to any grammar, which is the babel,PostCSS,prettier,typescriptother principle, in addition, there are many scenarios , such as editor

Lodash source code analysis

** _. Chunk ** (not very understanding)

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]

console.log([1, 2, 3, 4].reduce((acc, val, i) => {
  return [...acc,[val]]
},[]))
//[[1],[2],[3],[4]]
i%2
输入: 0 1 2 3 4
输出: 0 1 0 1 0

const chunk = (arr, size) => {
  return arr.reduce((acc, val, index) => {
    if (index % size === 0) {
      return [...acc, [val]]
    } else {
      //[[1,2],[3,4],[5]]
      return [...acc.slice(0, -1), [...acc.slice(-1)[0], val]]
      //[[1,2],[3,4],[5,6]]
    }
  }, [])
}
console.log(chunk([0,1,2,3,4,5,6], 2));
//[ [ 0, 1 ], [ 2, 3 ], [ 4, 5 ], [ 6 ] ]

Find a different number of two-dimensional array

let arrays = [[1, 2, 3, 4, 5], [5, 2, 10]];
console.log(arrays.reduce((a, b) => a.filter(c => !b.includes(c))));
//a=>[1,2,3,4,5]
//b=>[5,2,10]
console.log([[1, 2, 3, 4, 5], [1, 2, 4]]
  .reduce((acc, val) => {
    //return val //[1,2,4]   
    return acc //[1,2,3,4,5]
  }))
// output: [1, 3, 4]

Depth dimension reduction

const flattenDeep = (arr) => Array.isArray(arr)
  ? arr.reduce( (a, b) => a.concat(flattenDeep(b)) , [])
  : [arr]

Intersection of multidimensional arrays

let arrays = [[1, 2, 3,10], [101, 1, 10], [2, 1,10]];
console.log(arrays.reduce((acc, val) => acc.filter(item => val.includes(item))))

The number of the array, arranged in an object

console.log(['one', 'two', 'three'].reduce((acc, val, index, array, k = val.length) => {
  (acc[k] || (acc[k] = [])).push(val)
  return acc
}, {}))
//{ '3': [ 'one', 'two' ], '5': [ 'three' ] }

Functional Programming

Functional programming function refers to the function of mathematics, rather than a function in javascript

Pure function is given input, the output is always the same function

柯里化
const add=x=>y=>x+y
add(1)(2)   //3

const g = x => x + 20
const f = x => x * 2
const compose = (f, g) => x => f(g(x))
console.log(compose(f, g)(10))  //40

**bind**
const add = (x, y, z) => x + y + z
const plus = add.bind(null, 10)
console.log(plus(10, 10))//30
console.log(plus(20, 20))//50

//[1, 2, 3]   =>   { 1: 1, 2: 4, 3: 9 }
const mapObject = (arr, fn) => {
  let itemArr = arr.map(fn);
  return arr.reduce((acc, val, index) => 
    (acc[val] = itemArr[index], acc), {})
}

//求最小值,最大值
const over=(...fns)=>(...args)=>fns.map(val=>val.apply(null,args))
over(Math.min, Math.max)(1, 2, 3, 4)

//输入(9,3)   输出 [81,6]   也就是第一个参数**2   第二个参数*2
//简单版
const over1 = (first, last) => [first ** 2, last * 2]
 console.log(over1(9, 3))//[81,6]
//封装版
const overArg=(fn,fns)=>(...args)=>args.map((val,i)=>fns[i](val))
console.log(overArg( [x => x ** 2, x => x * 2])(4,6)) //[ 16, 12 ]

//高阶函数
//自执行函数
(function (s) {
  return s*2
})(2);//4
(x => x * 2)(2);//4
//高阶
const add=fn=>x=>fn(x);
add(x => x + 2)(2)//4

Color interlaced

  li:nth-child(2n) {
    background-color: red;
  }
  li:nth-of-type(2n-1) {
    background-color: gold;
  }

More than one line ellipsis ...

.aaa{
   width: 200px;
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
}

Pseudo-element

.aaa{
    position:relative;
}
.aaa:after{
    content:'';
    position:absolute;
    right:0;
    bottom:0;
}

undefined

The default value is not assigned to a variableundefined

When uninitialized variable access, the absence of object attributes, the array elements and the like do not exist, receives a undefinedvalue

1138

U on

D under

L left

R right

! several

输入：target = "leet"
输出："DDR!UURRR!!DDD!"

输入：target = "code"
输出："RR!DDRR!UUL!R!"

const alphabet = target => {
  let res = '';
  let x = 0,
    y = 0;
  for (let item of target) {
    let x1 = Math.floor((item.charCodeAt() - 97) / 5),
      y1 = (item.charCodeAt() - 97) % 5;
    //当前的位置l  x轴的位置  c是y轴的位置
    let l = x1 - x;
    c = y1 - y;
      //记得x轴=>c   y轴=>l
    /*上*/
    if (l < 0) {
      for (let i = 0; i < -l; i++) {
        res += 'U'
      }
    }
    /*下*/
    if (l > 0) {
      for (let i = 0; i < l; i++) {
        res += 'D'
      }
    }
    /*左*/
    if (c < 0) {
      for (let i = 0; i < -c; i++) {
        res += 'L'
      }
    }
    /*右*/
    if (c > 0) {
      for (let i = 0; i < c; i++) {
        res += 'R'
      }
    }
    res += '!';
    x = x1, y = y1;

  }
  return res
}
console.log(alphabet('kb'))

LeetCode1128

The number seeking dominoes

dominoes[i] = [a, b] 和 dominoes[j] = [c, d]

It is equivalent to premise a == c and b == d, or a == d and b == c

Is [1,2], [2,1] or [1,2], [1,2]

E.g

Input [[1, 2], [2, 1], [3, 4], [3, 4], [6,5], [5, 6]]

Output 3

var numEquivDominoPairs = function (dominoes) {
  let arr = Array.from({ length: 100 }, v => 0);
  let res = 0;
  for (let item of dominoes) {
    //*10,是为了 [2,5]或者[3,4]不是相等的
    res += arr[Math.min(item[0], item[1])*10 + Math.max(item[0], item[1])]++
  }
  return res;
};
console.log(numEquivDominoPairs([[1, 2], [2, 1], [3, 4],[2,5],[6,5], [5, 6]]))
//3

724 find the center of the array index

We center is defined as an array index: left of center of the array index is equal to the sum of all the elements on the right side and the sum of all elements.

If the central index array does not exist, then we should return -1. If the array has a plurality of central index, then we should return the one closest to the left.

左边的和等于右边的和
简化为: 总和-右边的和-中间数=左边的和
const Solution = nums => {
  let sum = 0;
  leftSum = 0;
  sum = nums.reduce((acc, val) => acc + val)
  for (let i = 0; i < nums.length; i++) {
    if (leftSum == sum - leftSum - nums[i]) {
      return i;
    }
    leftSum += nums[i]
  }
  return -1
}
console.log(Solution([1,2,3,6,2,3,1]))

747 is at least twice the maximum number of other digital

In a given array numsin, there is always a maximum element.

Find whether the largest element in the array is an array of at least twice that of every other digital

If so, it returns the largest of the index, otherwise -1

Example 1

Input: nums = [3,6,1,0]

Output: 1

Ideas: 6 greater than twice that of other elements in the array. 6 index is 1, so we return 1

Example 2

Input: nums = [1, 2, 3, 4]
Output: -1
explanation: 4 No more than three large double, so we return -1.

找到最大和第二大的元素,看最大的是不是第二大的2倍,若不是直接返回-1,在数组中找到索引
const Solution = nums => {
  if (nums.length == 1) {
    return 0
  }
  //最大值
  let max = 0;
  //第二大的值
  let second = 0;
  //索引
  let index = 0;
  for (let i = 0; i < nums.length; i++) {
    if (max < nums[i]) {
      max = nums[i]
      index = i;
    }
  }
  for (let item of nums) {
    if (item < max && second < item) {
      second = item
    }
  }
  console.log(max, second)
  if (second * 2 <= max) {
    return index
  }
  return -1
}
console.log(Solution([1, 2, 3, 4, 9]))

283 Mobile Zero

To 0 in an array are all moved to the back, we can not change the relative positional relationship of the number of non-zero, and can not copy the additional array.

For example

Input: [0,1,0,3,5,0]

Output: [1,3,5,0,0,0]

//双指针
const Solution = nums => {
  let index = 0;
  for (let i = 0; i < nums.length; i++) {
    if (nums[i] != 0) {
      nums[index++] = nums[i]
    }
  }
  while (index < nums.length) {
    nums[index++] = 0;
  }
  return nums
}
console.log(Solution([0, 1, 1, 2, 3, 0, 0, 21]))
//[ 1, 1, 2, 3, 21, 0, 0, 0 ]

LeetCode 389 look different

输入：
s = "abcd"
t = "abcde"

Output:

'e'

运算性质:
A^B^B=A

//第一种位运算
const findThe = (s, t) => {
  let t1 = 0
  let index = 0;
  while (index < s.length) {
    t1 ^= s.charCodeAt(index)
    index++
  }
  let b = 0;
  while (b < t.length) {
    t1 ^= t.charCodeAt(b)
    b++
  }
  return String.fromCharCode(t1)
}
console.log(findThe('abc', 'bc'))
//'a'

//桶排序
const findThe = (s, t) => {
  const ans = Array.from({ length: 26 }, v => 0)
  let i = 0,
    j = 0,
    k = 0;
  while (i < s.length) {
    ans[s.charCodeAt(i) - 97]++
    i++
  }
  while (j < t.length) {
    ans[t.charCodeAt(j) - 97]++
    j++
  }
  while (k < ans.length) {
    if (ans[k] == 1) {
     return String.fromCharCode(k + 97)
    }
    k++
  }
  return -1

}

leetCode 455 distribute biscuits

Your goal is to meet as much as possible the greater the number of children, and the maximum output value

Example one

Input: [2,3], [1,1]

Output: 1

Explanation:
You have three children and two small biscuits, three children's appetite values are: 1,2,3.
Although you have two small biscuits because of their size are 1, you can only make the child appetite value 1 is satisfied.
So you should output 1.

Example Two

Input: [1,2], [2,3]

Output: 2

Explanation:
You have two children and three biscuits, two children's appetite values are 1,2.
The number and size of cookies that you have enough to make all children are met.
So you should output 2.

const findCount = (g, s) => {
  g.sort()
  s.sort()
  let i = 0,
    j = 0;
  while (i < g.length && j < s.length) {
    //满足就是s[j]>=g[i]
    //如果满足,饼干j++,结束判断后换个孩子(i++)
    if (s[j] >= g[i]) {
      j++
    }
    i++
  }
  return i
}
console.log(findCount([1, 2], [1,2,3]))
//满足2个孩子

48 rotation matrix

/*
* Given input matrix =
[
  [1,2,3],
  [4,5,6],
  [7,8,9]
],
rotate the input matrix in-place such that it becomes:
[
  [7,4,1],
  [8,5,2],
  [9,6,3]
]
*/
const rotate = (matrix) => {
  let arr = Array.from({ length: matrix.length }, v => [])
  for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
      arr[i][j]=matrix[matrix.length-1-j][i]
    }
  }
  return arr
}
let array1=[
    [1,2,3],
    [4,5,6],
    [7,8,9]
  ];
console.log(rotate(array1))

The number 136 appears only once

[1, 2, 3, 1, 1, 10, 2].filter(
  (val, index, array) =>
    array.indexOf(val) == array.lastIndexOf(val))


// 5^5=0  0^5=5
var singleNumber = function (nums) {
  let result=0;
  for (let i = 0; i < nums.length; i++) {
    result^=nums[i]
  }
  return result
};

const singleNumber = function (nums) {
  let set = new Set();
  for (let i = 0; i < nums.length; i++) {
    if (set.has(nums[i])) {
      set.delete(nums[i])
    } else {
      set.add(nums[i])
    }
  }
  return Array.from(set)
};

//2*(去重的数组的和)-原数组的和
//只考虑重复一次
const singleNumber = function (nums) {
  let set = new Set(nums);
  return Array.from(set).reduce((acc,val)=>acc+val)*2-nums.reduce((acc,val)=>acc+val)
};
console.log(singleNumber([1, 2, 4,1,2]))

79 Word Search

Given a two-dimensional grid and a word, to find out whether the word exists in the grid.

Words must, by the letters in adjacent cells constituting alphabetically, where "adjacent" cells that are adjacent horizontally or vertically adjacent cells. Letters within the same cell is not allowed to be reused.

board =
[
  ['A','B','C','E'],
  ['S','F','C','S'],
  ['A','D','E','E']
]

给定 word = "ABCCED", 返回 true.
给定 word = "SEE", 返回 true.
给定 word = "ABCB", 返回 false.

[
    ['A', 'B', 'C'],
    ['D', 'A', 'A'], 
    ['G', 'C', 'D']
]
'ABCAD'
// 要走的数组,给定的路径数组
//原路径,新路径
const exist = (thePath, newPath) => {
  for (let y = 0; y < thePath.length; y++) {
    for (let x = 0; x < thePath[0].length; x++) {
      //d是走了几步
      if (finds(thePath, newPath, y, x, d=0)) {
        return true
      }
    }
  }
}
const finds = (thePath, newPath, y, x, d) => {
  //走的长度等于要走的数组的长度
  if (d == newPath.length) return true;
  //x,y不能大于数据的长度,也不能少于0
  if (y < 0 || x < 0 || y == thePath.length || x == thePath.length) return fasle;
  //开始比较
  if (thePath[y][x] != newPath[d]) return false;
  //记录走过上一步的位置
  let temp = thePath[y][x]
  thePath[y][x]='*'
  //是否可以走下一步
  /*右*/
  let exist = finds(thePath, newPath, y, x + 1, d + 1)
    /*左*/
    || finds(thePath, newPath, y, x - 1, d + 1)
    /*下*/
    || finds(thePath, newPath, y + 1, x, d + 1)
    /*上*/
    || finds(thePath, newPath, y - 1, x, d + 1)
  //移动到上一步走的位置
  thePath[y][x]=temp
  return exist
}
console.log(exist([['A', 'B', 'C'], ['D', 'A', 'A'], ['G', 'C', 'D']], 'ABC'))

The first positive 41 deleted

Given an unsorted array of integers, find the smallest positive integer which does not arise.

Example 1:

输入: [1,2,0]
输出: 3

Example 2:

输入: [3,4,-1,1]
输出: 2

Example 3:

输入: [7,8,9,11,12]
输出: 1

const Solution=nums=>{
  let i=1;
  while (i) {
    if (nums.indexOf(i) < 0) {
      return i
    }
    i++
  }
}

var firstMissingPositive = function (nums) {
  let set = new Set();
  for (let i = 0; i < nums.length; i++) {
    //nums[i]>=1  且  每个数小于数组的个数
    if (nums[i] >= 1 && nums[i] <= nums.length) {
      set.add(nums[i])
    }
  }
  for (let i = 1; i <= nums.length; i++) {
    if (!set.has(i)) {
      return i
    }
  }
  return nums.length + 1
};
console.log(firstMissingPositive([3, 4, -1, 1]))