Hexo

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 »

Posted on Edited on

Nginx 配置 alias和root

  1. 配置root：

    1
    2
    3
    location /static {
        root /home/ameng/static/;
    }

    如果访问 http://xxx.com/static/test.png，则会解析到

    /home/ameng/static/static/test.png

    root 指令 会把url后的路径全部拼接到root声明的路径后。

  2. 配置alias

    1
    2
    3
    location /static {
        alias /home/ameng/static/;
    }

    如果访问http://xxx.com/static/test.png，则会解析到

    /home/ameng/static/test.png

    alias 指令 会忽略url中 location 匹配到的部分，再拼接到申明的路径后面

    即：它将 /test.png 拼接到了/home/ameng/static/ 后

PS：参考文章 https://www.jianshu.com/p/4be0d5882ec5

Posted on Edited on

临时解决gitalk插件 cdn 地址挂掉的问题

  1. 进入主题目录，执行下面的命令，找到对应的url配置的文件

    1
    find . -path './node_modules' -prune -o -print | xargs grep -r 'https://unpkg.com/gitalk/dist/gitalk.css'

    Read more »

Posted on Edited on

一、搜索文件夹内所有文件包含的一个字符串

目录下的所有文件中查找字符串

1
find . | xargs grep -r "class"

目录下的所有文件中查找字符串,并且只打印出含有该字符串的文件名

1
find . | xargs grep -r "class" -l

xargs 将 find . 的结果拼成一行，以空格为分隔，拆成多个参数，传给grep（注：如果文件名中有空格，会出bug。

grep -r （同rgrep 弃用）打印出匹配正则的行

二、搜索文件夹内某后缀名的文件，排除某个文件夹

1
find . -path ./node_modules -prune -o -name '*.json' -print
0%