likes
comments
collection
share

js基本功修炼，巩固知识点

作者站长头像
站长
· 阅读数 19

js数据传递

function increase(a) {
  a++;
}
var a = 1;
increase(a);
increase(a);

console.log(a);

函数里面给形参重新赋值不会影响外面的变量，形参自己有个内存地址，保存外面传进来的值

function increase(a) {
  a = { n: 2 };
}
var a = { n: 1 };
increase(a);

console.log(a);

形参是对象时，重新赋值为一个地址，也不影响外面的变量

function increase(a) {
  a.n = 2;
}
var a = { n: 1 };
increase(a);

console.log(a);

这种情况会影响外面的变量，形参对象没有重新赋值，函数里面操作的形参地址是外面变量的地址

promise分析

promise题一

Promise.resolve()
  .then(() => {
    console.log(0);
    return Promise.resolve(4);
  })
  .then((res) => console.log(res));

Promise.resolve()
  .then(() => {
    console.log(1);
  })
  .then(() => {
    console.log(2);
  })
  .then(() => {
    console.log(3);
  })
  .then(() => {
    console.log(5);
  })
  .then(() => {
    console.log(6);
  });

当同步代码执行一遍后，Promise.resolve()是完成状态，then里面的回调会加入微任务队列,

微任务队列： [() => { console.log(1) }，() => { console.log(0); return Promise.resolve(4)} ]

然后从微队列取函数执行，先进先出，首先打印1，这个函数返回一个Promise.resolve()，Promise.resolve()返回的是一个新的promise，当出现then里面的回调函数返回一个新的promise的情况，

此时，这个 then(() => { console.log(0); return Promise.resolve(4) })方法产生的promise（记作p0）状态与Promise.resolve(4)产生的promise（记作p4）状态一致，也就是p4状态完成，p0状态就完成，并且放到微任务队列中，

微任务队列： [()=>p4.then(()=>p0完成状态)，() => { console.log(1) } ]

接着取任务执行，打印1，then(() => { console.log(1); })完成，接着把它产生的promise的then里面的方法放到微队列

微任务队列： [() => { console.log(2) }，()=>p4.then(()=>p0完成状态) ]

执行()=>p4.then(()=>p0完成)，

微任务队列： [()=>p0完成状态，() => { console.log(2) } ]

打印2，添加() => { console.log(3); }到微队列

微任务队列： [() => { console.log(3), }，()=>p0完成状态 ]

执行 ()=>p0完成昨态，添加(res) => console.log(res)到微队列，

微任务队列： [(res) => console.log(res)，() => { console.log(3), } ]

接下来顺序就是打印3，添加5，打印4，打印5，添加6，打印6

迭代器，生成器

怎么使 const [a, b] = { a: 1, b: 1 }成立

目前这行代码会报错

a.js:1 Uncaught TypeError: {(intermediate value)(intermediate value)} is not iterable

通过报错，可以知道，就是把等式右边的对象变成可迭代的，

1.如果要实现一个可迭代的对象，就要满足可迭代协议，这意味着对象（或者它原型链上的某个对象）必须有一个属性 Symbol.iterator ，

2.它是一个无参数的函数，其返回值为一个符合迭代器协议的对象，也就是返回一个迭代器对象，迭代器对象里面有next方法，nex方法返回对象{ done:boolean, value:值}

思路就是给右边对象加方法[Symbol.iterator]，让它返回一个迭代器

const [a, b] = {
  a: 1,
  b: 2,
  [Symbol.iterator]() {
    // 数组的[Symbol.iterator]方法返回迭代器
    return Object.values(this)[Symbol.iterator]();
  },
};

// 或者写在原型上
Object.prototype[Symbol.iterator] = function () {
  return Object.values(this)[Symbol.iterator]();
};

另一种思路使用生成器， 执行 生成器 函数会返回一个迭代器对象，该对象本身也具有Symbol.iterator属性，执行后返回自身

function* gen() {}
var g = gen();
g[Symbol.iterator]() === g; //true

所以使用生成器来实现Symbol.iterator属性，是非常妙的

Object.prototype[Symbol.iterator] = function* () {
  for (const n of Object.values(this)) {
    yield n;
  }
};

更妙的是使用 yield*表达式，yield*后面跟的是一个可迭代的对象，它会调用该对象的Symbol.iterator方法

数组是可迭代的，放在yield*后面，将返回这个数组的迭代器对象

Object.prototype[Symbol.iterator] = function* () {
   yield* Object.values(this);
};

js 加法运算规则

js基本功修炼，巩固知识点

js 赋值（=）

如：const a = 1，有四个步骤：

  1. 找到a的地址，准备赋值
  2. 运算右侧得到要赋值的数据
  3. 将右侧运算数据放到之前的地址中
  4. 返回整个表达式的结果为右侧运算数据
var a = { n: 1 };
var b = a;
a.x = a = { n: 2 };

console.log(a.x);
console.log(b.x);

前两行运行后

js基本功修炼，巩固知识点

第三行，先找到a.x的位置，没有，给a加个属性

js基本功修炼，巩固知识点

接着算右边 a = { n: 2 }，首先定位a的位置，然后把右边结果赋值给a

js基本功修炼，巩固知识点

然后把 a = { n: 2 } 的运行结果 {n:2} 给a.x这个地址

js基本功修炼，巩固知识点

统计字符串中每个字符出现频率

随便给一个字符串：'dsjdkjdjfdgrekjjh'

普遍写法

function countFrequency(str) {
  const resObj = {};

  for (let i = 0; i < str.length; i++) {
    if (resObj[str[i]]) {
      resObj[str[i]]++;
    } else {
      resObj[str[i]] = 1;
    }
  }
  return resObj;
}

使用数组的reduce函数

function countFrequency(str) {
  return str.split("").reduce((a, b) => (a[b]++ || (a[b] = 1), a), {});
}

reduce 一般用的比较多的是求和，它接收两个参数。

第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被用作初始值，迭代器将从第二个元素开始执行（即从索引为 1 而不是 0 的位置开始）

这里第一次执行，a就是对象{}，b就是第一个字符，如果a[b]没有，就是undefined，undefined++就是NaN，转成boolean就是false，通过 逗号运算符 函数返回a，继续循环累计

只要是遍历累计的都可以使用reduce来尝试一下

input输入中文拼音触发事件

 <body>
    <input type="text" />
  </body>

const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener("input", (event) => {
  console.log(`input: ${event.target.value}`);
});

inputElement.addEventListener("change", (event) => {
  console.log(`change: ${event.target.value}`);
});

inputElement.addEventListener("compositionstart", (event) => {
  console.log(`composition开始: ${event.data}`);
});

inputElement.addEventListener("compositionupdate", (event) => {
  console.log(`composition更新: ${event.data}`);
});

inputElement.addEventListener("compositionend", (event) => {
  console.log(`composition结束: ${event.data}`);
});

输入数字或者英文的时候，input事件 会随着输入value值变化触发，change事件 会在值被修改后提交value时(比如：失去焦点或者按回车时)触发；

输入中文拼音，input事件触发时机不变，输入一个拼音就触发一次，change事件也是提交值触发， compositionstart 是第一次输入拼音触发，compositionupdate 是每输入一个拼音触发，compositionend 输入最后一个拼音触发

但是输入中文拼音有时候不需要触发事件，想要的是输入完后触发，可以通过composition事件来控制

如何在chrome浏览器设置小于12px的字体

谷歌浏览器最小字体限制为12px

一种方式是去浏览器设置改

js基本功修炼，巩固知识点

另一种方式就是用css去调整，使用 transform:scale()去设置，但它只对块级盒子有效，如果是span这种行内元素，可以再加一下dispaly:inline-block

使元素滚动到可视区域

  1. 设置hash，给元素一个id，地址栏中设置一个hash值，就可以实现，但是有缺点，滚动条必须是整个页面的滚动条，不能是某个区域的，如果项目中使用了路由的hash模式，就会冲突

js基本功修炼，巩固知识点 2. scrollIntoView 一个非常好用的api，它会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见，还提供多个配置，可以用来做轮播图