发表于

JSON.parse() 和 JSON.stringify() 在前端项目中经常使用到，如数据接口序列化及反序列化。

JSON.stringify()

单个参数 value 及使用非法JSON值

JSON.stringify() 能把对象进行字符串化，适用于所有的安全的 JSON 值。那么，什么是不安全的 JSON 值。

undefined function symbol 和 包含循环引用的对象 都不符合JSON的标准，使用 JSON.stringify() 时会返回 undefined ，在数组中则会返回 null 。

1
2
JSON.stringify(undefined) // undefined
JSON.stringify(function () { console.log("emm") }) // undefined

注意：JSON.stringify(null) 返回 "null"

在数组使用：

1
JSON.stringify([1,null,undefined,4,function(){}]) // [1,null,null,4,null]

在对象使用：

1
2
3
4
5
6
7
8
JSON.stringify(
    { 
        name: "csd", 
        getname: function () { }, 
        skill: undefined,
        age: 22, 
    }
) // {"name":"csd","age":22} 非法JSON值会被忽略掉

第二个参数 replacer

#

发表于

本站由Github Pages托管，使用 Hexo NexT 主题，最近发现又卡又慢，找到问题发现是 Github 在国内确实延迟高。

image-20200320123906123

超时！卡到没朋友了😭

加速后的效果「基本上都变绿了」

image-20200320205126815

以下是我的解决方案：

使用又拍云CDN加速

我用的方案是又拍云的全站加速，注册认证后「免费」 Free啊，挺香的~

认证后进入控制台，创建 CDN 服务：

image-20200320205853516

配置完成后会生成 CNAME ，复制，到你域名的控制台，解析 @ 到这条 CNAME ，保存后过多一段时间就生效了！

还有，这里我的站点是https，又拍云控制台要导入SSL证书，其他有关配置就自己发挥了~

Done.

发表于

git 简介

4c18e998-5c0b-4372-b178-c66490fc3f60

git 是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。

分布式相比于集中式的最大区别在于开发者可以提交到本地，每个开发者通过克隆 git clone 在本地机器上拷贝一个完整的Git仓库。

以下总结在项目中使用 git 的基本操作。

设置SSH Key

本地设备使用Git 连接远程仓库（github/gitee等）时，需要通过SSH的公开密钥的方式进行认证。

运行下面命令创建SSH Key

1
ssh-keygen -t rsa -C "您的邮箱" # 邮箱 如csd@funbfe.com

回车后，输入密码「可选，为了方便一般不设置」。

执行后 会在 ~/.ssh/ 下生成两个文件 id_rsa id_rsa.pub，分别为 私有秘钥和公开密钥。

image-20200319174756020

这样我们就可以把 id_rsa.pub 文件添加到托管平台，设备与远程仓库就建立通信了。

如果是与Github建立通信，可以使用一下命令进行测试：

image-20200319175410451

出现以上结果即为成功！

阅读全文 »

发表于

JavaScript检查/遍历对象属性

in 与 Object.hasOwnProperty()

区别：in操作符会检查属性是否在对象及其原型链中，而Object.hasOwnProperty()，顾名思义，仅仅检查是否在对象属性而不查找其原型链，两者都返回Boolean值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var obj = {
    name: "csd",
}

console.log("name" in obj) // true
console.log("toString" in obj) // true 因为toString在obj原型链上，也就是Object.propotype.

console.log(obj.hasOwnProperty("name")) // true
console.log(obj.hasOwnProperty("toSting")) // false 不检查其原型链

// 定义age属性 不可枚举, 一样可以检查到该属性
Object.defineProperty(obj, "age", {
    enumerable: false,
    value: 22
})

console.log('age' in obj) // true
console.log(obj.hasOwnProperty("age")) // true

for-in

for-in循环可以用来遍历对象的可枚举属性的列表（包括其[[prototype]]）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Array.prototype.getLength = function() {
    return this.length
}
var arr = [1,2,3]
arr.name = "nums"
Object.defineProperty(arr,"age", {
    enumerable: false,
    value: 22,
    writable: true,
    configurable: true
})

for(var k in arr) {
    console.log(k) // 输出 0,1,2,name,getLength
    // 没有输出 age 因为该属性不可枚举
}

Tips: for-in 尽量不要用在数组上，因为遍历数组的索引为string类型，而且还会遍历数组的可枚举属性。

1
2
3
4
5
var arr = [1,2,3,4,5]
for(var k in arr) {
    console.log(k) // 输出 0,1,2,3,4
    console.log(typeof k) // 输出 5次 string
}

Object.keys()

Object.keys()只查找对象直接包含的属性，「不查找原型链以及Symbol属性」。返回一个数组，包含所有可枚举属性。

1
2
3
4
5
6
7
8
9
10
var obj = {
    name: "csd",
}
Object.defineProperty(obj,"age",{
    enumerable: false,
    configurable: true,
    writable: true,
    value: 22,
})
console.log(Object.keys(obj))

对于遍历数组，和for-in一样，返回含有索引下标的字符串数组。

1
2
var arr = [1,2,3,4]
console.log(Object.keys(arr)) // ['0','1','2','3']

Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 返回一个数组，包含了对象自有属性，「不查找原型链以及Symbol属性」。无论对象是否可枚举，都会被遍历出来。

这里与Object.keys()区分开：Object.keys()只遍历可枚举。

1
2
3
4
5
6
7
8
9
10
var obj = {
    name: "csd",
}
Object.defineProperty(obj,"age",{
    enumerable: false, // age 不可枚举
    configurable: true,
    writable: true,
    value: 22,
})
console.log(Object.getOwnPropertyNames(obj)) // [ 'name', 'age' ]

done!

发表于

MDN解释：它是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域(如:非BFC元素重叠)。

首先，格式化上下文有以下分类：
① BFC (Block Formatting Contexts)译为”块级格式化上下文”
② IFC (Inline Formatting Contexts)译为”内联格式化上下文”
③ GFC (GridLayout Formatting Contexts)译为”网格布局格式化上下文”
④ FFC (Flex Formatting Contexts)译为”自适应格式化上下文”

本文重点介绍「BFC」

BFC的形成条件：

① float 的值不为 none
② position 的值不为 static 或者 relative
③ display 的值为 table, table-cell, table-caption, inline-block, flex, inline-flex
④ overflow 的值不为 visible

那么，BFC会产生什么影响，或者它有什么作用？

同一BFC会导致的外边距折叠

注：产生折叠的必备条件：margin必须是邻接的!

举个栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<style>
.box1 {
    width: 100px;
    height: 100px;
    background-color: #DE5145; // 红
    margin-bottom: 10px;
}
.box2 {
    width: 100px;
    height: 100px;
    background-color: #16A05D; // 绿
    margin-bottom: 10px;
}
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

打开浏览器效果图：
avatar

给box1加了10px的下外边距和box2的10px的上外边距，那么box1和box2直接的距离应该是20px才对，但是实际上却只有10px。

现在我们来对会产生外边距折叠的情况进行分析~

阅读全文 »

发表于

根据官网安装介绍，本文使用yum进行安装
先安装 先决条件：

1
sudo yum install yum-utils

设置 yum 存储库，创建 /etc/yum.repos.d/nginx.repo ，然后使用以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
[nginx-stable] 
name = nginx stable repo 
baseurl = 
http：//nginx.org/packages/centos/$releasever/$basearch/gpgcheck = 1 
enabled = 1 
gpgkey = https://nginx.org/keys/nginx_signing.key 

[nginx-mainline] 
name = nginx mainline repo 
baseurl = 
http：//nginx.org/packages/mainline/centos/$releasever/$basearch/gpgcheck = 1 
enabled = 0 
gpgkey = https://nginx.org/keys /nginx_signing.key

然后安装：

1
2
sudo yum install nginx
# 过程中选择 Y 回车就完事了

阅读全文 »

发表于

MySQL安装及配置-Windows（zip版）

  1. 解压mysql目录下创建data和my.ini

  2. 修改配置文件my.ini，按照下方的注释做相应的修改，还有其他参数未写上，官网找咯。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    [client]
    port=3306
    [mysql]
    # 设置mysql客户端默认字符集
    default-character-set=utf8
    [mysqld]
    # 设置3306端口
    port=3306
    # 设置mysql的安装目录
    basedir=G:\mysql-5.7.24-winx64
    # 设置mysql数据库的数据的存放目录
    datadir=G:\mysql-5.7.24-winx64\data
    # 允许最大连接数
    max_connections=500
    # 服务端使用的字符集默认为8比特编码的latin1字符集
    character-set-server=utf8
    # 创建新表时将使用的默认存储引擎
    default-storage-engine=INNODB

  3. 以管理员身份进入cmd（一定要噢不然权限不够）来到mysql/bin目录下
    执行：mysqld --initialize-insecure --user=mysql

  • 如果想装多几个mysql服务，可以mysqld install 服务名 不然就直接执行：mysqld install
    安装完毕后，执行：net start 服务名 // 如果没有自定义服务名，一般服务名为mysql
    然后进入mysql shell修改root密码（参考下面方法一）
    阅读全文 »

发表于

函数对象与其他对象的区别

JavaScript中的函数和其他对象最大的区别在于它们有一个特殊的内部属性[[Call]]，包含了该函数的执行指令。typeof操作符会在对象内查找这个内部属性，若找到则返回”function”

call() apply() bind() 三者的区别

第一个参数都是传给新函数this的值，call()和apply()的区别仅传人参数形式不同，call()第二个参数起接收参数列表，而apply()第二个参数接收数组或类数组。而bind()跟call()一样，不同的是第二个参数起会被永久设置在新函数中的形参。

JavaScript对象定义属性

当一个属性第一次被添加对象时，JavaScript在对象上调用一个名为[[Put]]的内部方法。[[Put]]方法会在对象上创建一个新节点来保存属性，这个操作不仅指定了初始的值，也定义了属性上的一些特征。
当一个已有属性被赋予新值时，调用的是[[Set]]方法。
delete操作符会对单个对象属性调用名为[[Delete]]内部方法。delete仅对自有属性有效。

查找对象属性

in操作符会检查自有属性和原型属性
hasOwnProperty()只检查自有属性

属性枚举

for-in循环返回的和Object.keys()返回的可枚举属性的区别：for-in循环遍历自有属性和原型属性，而Object.keys()只返回自有属性名字的数组。

属性通用特征

数据和访问器属性都具有[[Enumerable]]和[[Configurable]]（布尔值）。如果想改变属性特征，可以使用Object.defineProperty(obj,proName,descript)，当调用这个方法时，应该要指定descript所有值，否则布尔类型的值都是false。
定义多重属性可以用Object.defineProperties(obj,proObj)
获取属性特征可以用Object.getOwnPropertyDescriptor(obj,proName)

数据属性特征

[[Value]]所有属性的值都保存在这。
[[Writable]]是一个布尔值，指示该属性是否可以写入。

访问器属性特征

[[Get]]读取属性值 [[Set]]设置属性值；内涵getter和setter函数。

构造函数与原型对象

每个对象在创建时都自动拥有一个构造函数属性，其中包含了一个指向其构造函数的引用。那些通过字面量或者Object构造函数创建的泛用对象，其构造函数属性指向Object，而通过自定义构造函数创建的对象则指向创建它的构造函数。
当调用构造函数时，new会自动创建this对象，且其类型就是构造函数的类型。也可以在构造函数显式调用return。如果返回值是一个对象则返回该对象，否则返回新创建的对象实例。

[[Prototype]]属性

一个对象实例通过内部属性[[Prototype]]跟踪其原型对象。该属性是一个指向该实例使用的原型对象的人指针。当用new创建一个新的对象时，构造函数的原型对象会被赋给该对象[[Prototype]]属性。
avatar
当读取一个对象属性时，JavaScript引擎首先在该对象上的自有属性中查找属性名字。如果找到则返回。如果自有属性中不包含改名字，则会搜索[[Prototype]]中的对象，找到则返回，直至找到末端Object.prototype。
无法给一个对象的原型属性赋值。

对象继承

对象字面量会隐式指定Object.prototype为其[[Prototype]]，当然也可以使用Object.create()方法显式指定。第一个参数是需要被设置新对象的[[Prototype]]，第二个参数是属性描述对象。也可以使用它来创建一个没有原型链的对象。
var nakedObj = Object.create(null);

发表于

#作用域
JavaScript采用的是词法作用域，是指作用域在函数定义的地方。与之对应的是动态作用域，指作用域在函数调用的地方。
JavaScript中变量是函数级作用域而不是块级作用域（即变量定义的作用域并不是离最近的封闭语句或者代码块，而是包含它们的函数），ES5的try{}catch除外，ES6开始支持。
变量声明提升：函数声明和变量声明总是被JavaScript解释器提升到包含它们的作用域顶部。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function foo() { 
	var num;
	for(var i=0;i<3;i++) {
		num = i;
	}
	console.log('i',i); // i 3
	console.log('num',num); // num 2
}
// 相当于以下
function foo() { 
	var num,i;
	for(i=0;i<3;i++) {
		num = i;
	}
	console.log('i',i); // i 3
	console.log('num',num); // num 2
}

要注意变量声明中，赋值是不会提升的（赋值函数也是），仅仅是变量名字被提升了。而函数声明则是整个函数体被提升。
函数声明优先于变量声明。 因为函数在JavaScript是 “一等公民”…

编写习惯

为了减少变量声明混乱，建议编写时候使用“单var”形式。

1
2
3
4
5
function fn() {
    var i,
        a=3,
        b='str';
}

使用IIFE函数创建局部作用域

考虑以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
function fn(a) {
    var arr= [],i,n;
    for(i=0,n=a.length; i< n;i++) {
         arr[i] = function() { 
            console.log('i',i); 
            return a[i] 
        }
    }
    return arr;
}
var obj = fn([1,2,3,4,5]); // i 5
var f = obj[0];
console.log(f()); // 输出undefined，而不是10

搞清楚这道程序在于理解绑定与赋值的区别。在运行时进入一个作用域，JavaScript会为每一个绑定到该作用域的变量在内存分配一个“槽”，fn函数绑定了三个局部变量即arr、i和n。在循环的每次迭代中，循环体都会为嵌套函数分配一个闭包，而闭包函数里面存的是变量i的引用，由于每一次函数创建后i都发生了变化，因此内部函数最终看到的是i最后的值。（值得注意的是闭包存储的是其外部变量的引用而不是值）
可以改为：

1
2
3
4
5
6
7
8
9
function fn(a) {
    var arr= [],i,n;
    for(i=0,n=a.length; i< n;i++) {
         (arr[j] = function() { 
            return a[j] 
        })(i)
    }
    return arr;
}

但值得注意的是：代码块不能包含break与continue语句，因为在函数外使用它们是不合法的。

总结：

ECMAScript标准里写道：

如果在一个函数中声明变量，这些变量就被定义在了在该函数的函数作用域中。不然它们就是被定义在全局的作用域内（即它们被创建为全局对象的成员），当进入执行环境的时候，变量就被创建。一个语句块不能定义一个新的作用域。只有一个程序或者函数声明能够产生一个新的作用域。创建变量时，被初始化为undefined。如果变量声明语句里面带有赋值操作，则赋值操作只有被执行到声明语句的时候才会发生，而不是创建的时候。