Hexo

Posted on Edited on

es6 Iterator 和 Generator

Iterator 基本概念

  1. 遍历器（Iterator）就是一种统一的接口机制，任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。
  2. Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。
  3. 遍历器本质上是一个指针对象
  4. 每一次调用next()方法，都会返回一个具有value和done属性的对象

基本概念

  1. generator 函数和 普通函数写法不同， 在 function 关键字和 函数名之间有个 * 号
  2. generator 函数的执行结果会返回一个遍历器对象，只有调用遍历器对象的 next() 方法
  3. yield 只能用在 generator 函数里使用。

Posted on Edited on

JS 的原型

对象原型

  1. 对象的原型可以通过 Object.getPrototypeOf(obj) 或者 obj.__proto__（弃用）得到

  2. 区别对象的原型 obj.__proto__ 和构造函数的 prototype 属性

    Object.getPrototypeOf(new Foobar()) 与 Foobar.prototype 指向同一个对象

  3. 对象原型 即 对象的原型 即 对象的原型对象，因为原型也是一个对象

  4. 区别 doSomething() 和 new doSomething()

  5. 原型对象：构造函数的prototype属性所指向的对象

  6. Object.create() 从指定的原型对象创建一个新的对象

    1
    var car = Object.create(Car.prototype)

  7. constructor 是构造函数自带的属性，可以通过 constructor.name 获取构造器名字

  8. js 通过原型链向上查找属性

  9. 原型的 constructor 属性指向构造函数，构造函数又通过 prototype 属性指回原型

new 操作符

  1. 用法：

    new constructor[([arguments])]

  2. new 原理

    • 创建一个空的对象(即 {} )
    • 将对象的 __proto__ 指向构造函数的prototype，即继承
    • 带参数调用构造函数的constructor（即构造函数本身），但是this的值指向刚创建的那个对象
    • 如果constructor有返回，则 new 的结果就用他的返回值，如果没有就使用this

Posted on Edited on

sublime 和 vscode 编辑器单行支持的最大长度

sublime 当行支持最大长度为 2^14 (即16384)

在输入第16485个字符的时候，sublime失去了色彩。

而在vscode中，当一行超过1万个字符的时候会显示省略号

Posted on Edited on

es6 之 Symbol

  1. Symbol 是 es6 引入的新的一种原始数据类型

  2. 他是一个独一无二的值

  3. 不能使用 new Symbol()

  4. Symbol() 可以接收一个字符串参数，但是只作为描述

  5. Symbol不能和其他值做运算，但是可以显式地转为字符串

  6. 也能转为boolean类型，为true

  7. Symbol.prototype.description

    1
    2
    const sym = Symbol('foo')
    sym.description // 'foo'

  8. 作为属性名的symbol必须加方括号，和字符串属性名区分

  9. Symbol 作为属性名时不会被 for…in for…of 等 遍历到，但是可以被Object.getOwnPropertySymbols 取到，返回一个数组。

  10. 奇怪的是，虽然不会被遍历到，但是symbol作为属性名是公有的。

  11. Object.getOwnPropertyNames 可以获得enumerable 和 inenumerable的属性，但是拿不到Symble属性

  12. Symbol.for() 可以重复利用Symbol

  13. Symbol.keyFor(s1: Symbol): string | undefined 返回已登记的 Symbol 类型值的key

  14. Symbol 用于单例模式，将Symbol.for(‘foo’)作为global的一个字段，可以防止被误篡改

  15. ES6 有11个内置的Symbol值

    • Symbol.hasInstance
    • Symbol.isConcatSpreadable，当定义在类上时，定义在实例和类上效果一样
    • Symbol.species
    • Symbol.match
    • Symbol.replace
    • Symbol.search
    • Symbol.split
    • Symbol.iterator
    • Symbol.toPrimitive
    • Symbol.toStringTag
    • Symbol.unscopables

Posted on Edited on

记录使用nginx过程中遇到的一些问题和解决方法

403 Forbidden

系统ubuntu

修改文件/etc/nginx/nginx.conf

1
vim /etc/nginx/nginx.conf

将第一行的

1
user www-data;

改为

1
user root;

重启nginx

1
nginx -s reload

Posted on Edited on

VScode下搭配ESLint、typescript-eslint的代码检查配方

使用eslint监测ts文件

typescript的全局使用

1
npm i -g typescript

通过tsc命令查看全局ts版本

1
tsc -v

新建node项目

  1. 建一个空的文件夹ts-eslint

  2. 在文件夹下执行node初始化命令

    1
    npm init

    一路回车后，node项目就初始化完毕了

  3. 通过命令 tsc –init 初始化一个tsconfig.json文件

Read more »

Posted on Edited on

跨域知识点梳理

问题

  1. 什么是跨域和跨域资源共享（CORS）？两者有何关系？
  2. 为什么会发生跨域？跨域会产生什么危险？
  3. 跨域能不能被解决？
  4. 在跨域的情况下，我们如何正确请求数据？
  5. 在跨域的情况下，我们如何正确地进行dom查询？

一、什么是跨域和跨域资源共享（CORS）？两者的关系？

跨域：只要协议、域名、端口中有任何一个不同，都会被当作是不同的域（即不同的源），不同的域之间的请求就是跨域请求。

（CORS）是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。是跨域的一个解决方案。

MDN:

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

CORS 只是跨域的一种解决方案，其他的方案还有诸如（JSONP，代理等）

Read more »

Posted on Edited on

js 的 apply, call 和 bind

  1. call

    call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。

  2. apply

    apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数

  3. bind

    **bind()**方法创建一个新的函数，在调用时设置this关键字为提供的值。并在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。

一些有趣的栗子

  1. 给定一个数组，通过 Math.max 找到最大值

    1
    2
    3
    const numbers = [5, 458 , 120 , -215 ] 
    Math.max.apply(Math, numbers)   //458
    Math.max.call(Math, 5, 458 , 120 , -215) //458

    当然这里可以通过es6的结构语法

    1
    Math.max(...numbers)

  2. 数组之间追加

    1
    2
    3
    const array1 = [12 , "foo" , {name: "Joe"} , -2458]
    const array2 = ["Doe" , 555 , 100]
    Array.prototype.push.apply(array1, array2)

总结：

  • apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
  • apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
  • apply 、 call 、bind 三者都可以利用后续参数传参；
  • bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

Posted on Edited on

前端面试题总结

JS基础知识点及常考面试题（一）

原始类型（Primitive）

  1. 原始类型共6种：

    • undefined

    • null

    • boolean

    • string

    • number

    • symbol

  2. 原始类型没有函数可以调用，但是在必要的情况下会进行强转为对象类型。

  3. number为浮点类型，0.1 + 0.2 !== 0.3

  4. string 类型是不可变的，无论在string类型上调用何种方法，都不会对值有改变。

  5. null 不是对象，（typeof null === ‘object’ 是个历史遗留bug）

    JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。

对象类型

  1. 在JS中，除了原始类型，其他的都是对象类型。
  2. 原始类型存储的是值，而对象类型存储的是地址（指针）
  3. 函数传参是传递对象指针的副本

typeof vs instanceof

  1. typeof 对于原始类型来说，除了null都可以显示正确的类型

  2. typeof 对于对象来说，除了函数都显示object，所以typeof并不能准确判断变量到底是什么类型

  3. instanceof 可以判断一个对象的正确类型，但是无法判断原始类型（原理是原型链

  4. instanceof 虽然无法直接判断原始类型，但是可以自己实现

    1
    2
    3
    4
    5
    6
    class PrimitiveString {
      static [Symbol.hasInstance](x) {
        return typeof x === 'string'
      }
    }
    console.log('hello world' instanceof PrimitiveString) // true

类型转换

  1. JS 中类型转换只有三种情况，分别是：
    • 转换为布尔值
    • 转换为数字
    • 转换为字符串
  2. 详情见下图类型转换表：

  1. 对象类型的转换，会调用内置的[ToPrimitive]函数，对于该函数来说，算法逻辑一般来说如下：

    • 如果已经是原始类型了，那就不需要转换了
    • 调用 x.valueOf()，如果转换为基础类型，就返回转换的值
    • 调用 x.toString()，如果转换为基础类型，就返回转换的值
    • 如果都没有返回原始类型，就会报错

    当然我们也可以重写Symbol.toPrimitive，该方法在转原始类型时调用优先级最高。

    (待学习：toPrimitive 的 PreferredType 参数)

  2. 四则运算时，有字符串则都为字符串，没字符串，就转为数字或字符串。

  3. 字符串比较通过unicode字符索引进行比较

this

  1. bind:

    MDN的解释是：bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

JS基础知识点及常考面试题（二）

== vs ===

ES6知识点：

var、let、const的区别

  1. var会发生提升（hoisting），提升的是声明，函数也会被提升，并且优先于变量提升。

  2. 函数的提升会把整个函数挪到作用域顶部，而变量提升只会把声明挪到作用域顶部。

  3. 提升的存在是为了解决函数相互调用的情况。

  4. let、const因为暂时性死区（ temporal dead zone，简称 TDZ）的原因，不能在声明前使用。

    以下是es6对let/const声明中的解释：

    The variables are created when their containing Lexical Environment is instantiated but may not be accessed inany way until the variable’s LexicalBinding is evaluated.

原型继承和Class继承

  1. JS中不存在类，Class只是语法糖，本质还是函数

Posted on Edited on

如果优美地实现加载更多

前言

在小程序或者原生app开发的时候，为了更好的体验，需要翻页的列表往往在触底的时候需要显示加载中，在没有数据后显示没有更多了。

分析

  1. 一直在底部显示”加载中”，但是在视窗范围内看不到，在触底的时候发起翻页请求（此时可以看到”加载中”），等数据返回后，将”加载中”顶到最下面。
  2. 判断count数和list长度相等时隐藏”加载中”，显示”没有更多了”，并且不再请求
Read more »
0%