看完这篇文章，你将了解:

  • document.write 什么时候是重写，什么时候追加
  • 变量提升的坑
  • 给页面添加 js 的方式
  • @import 用法
  • instanceof 的陷阱
  • length 是函数对象一个属性
  • 隐式类型转换参考
  • Javascript 代码技巧

document.write 解析

发现一个问题，在一个加载完毕的页面执行 document.write 会重写文档。

而继续 document.write，却是追加元素。

为此查了以下 MDN

注意: 因为 document.write 需要向文档流中写入内容，所以，若在一个已关闭（例如，已完成加载）的文档上调用 document.write，就会自动调用 document.open，这将清空该文档的内容。

就是说：其实 document.write 原本应该在：

  • document.open()
  • document.write()
  • document.close()

三个方法顺序执行

open 方法会清空文档，write 方法会追加文档。

  • 如果我们修改文档后没有 close，write 方法就会一直追加
  • 如果我们 close 后再 write，就会先 open，再修改，这时候 write 表现为重写

从结论上讲：看文档的状态是不是 document.close，如果是，write 方法表现为重写，否则是追加。

变量提升

变量提升仅提升声明，不提升初始化

比如

document.write(a)
var a = 1

不等价于

var a = 1
document.write(a)

而等价于

var a
document.write(a)
a = 1

所以结果不输出 1，而输出 undefined

这是一个 demo

给页面添加 js 的方式

  • script 内部
  • script 外链

  • "行内 js"

    <input type="button" value="点击有惊喜" οnclick="javascript:alert('something')">

写这一点主要是提醒自己 js 代码还可以通过 onclick 函数引入

@import

这是在一个 css 文件中引用另一个 css 文件的用法

语法如下：

@import "css文件路径";
@import url("网址");
@import "css文件路径" 媒体查询;
@import url("网址") 媒体查询;

比如：

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

instanceof 陷阱

先看下面的代码

var str = ''

str instanceof String // false
'str' instanceof String // false
true instanceof Boolean // false

再看下面的代码

var str = new String('')
str instanceof String // true

var bool = new Boolean(true)
bool instanceof Boolean // true

可见, instanceof 是一个作用于对象的方法，而不是基本类型(Primitive type)

javascript 的变量类型分为两种，一种是引用类型(对象)，另一种是基本类型(非对象)

一句话：

instanceof 判对象，typeof 判基本类型

这些都是 stackoverflow 上的老哥告诉我的，参考这里

Function.length

看下面的代码

(() => {}).length

输出结果是 0，查了一下 MDN

这是函数对象的一个属性值，指该函数有多少个必须要传入的参数，即形参的个数。

隐式类型转换

+[]

输出为 0，根据别人的说法

+[] 隐式类型转换，因为[]是对象，所以toPrimitive->valueOf->toString为''，结果就是+''===0

我这里找了 MDN 和几篇文章参考，感觉比较深，没时间细看，先留一下

js 解题技巧

今天刷 leetcode, 没有发现比较特别的技巧。

倒是发现最近这种方式写代码很顺手

  • 先写注释，再写代码
  • 先用函数，再定义函数
  • 建立一个字典
  • 用一个或两个指针遍历数组
  • 先循环，后判断

比如：