Js中的常见全局函数

Js内置了一些函数和变量，全局都可以获取使用（本文归纳非构造函数作用的函数）

1、encodeURI、decodeURI

• URI（Uniform Resource Identifier)标记一个字符串
• url出现特殊字符，需要编码

const url = 'http://www.abc.com?key1=value 1&key2=value2'
// 编码
const uriEn = encodeURI(url)
// 'http://www.abc.com?key1=value%201&key2=value2'
// 空格变成了%20
// 解码 还原
decodeURI(uriEn)
// url

2、encodeURIComponent、decodeURIComponent

• encodeURIComponent可以看成是对encodeURI的补充处理
• 补充编码更多字符串 “; / ? : @ & = + $ , #”
• 大部分特殊字符会被编码，!'()*-._~0-9a-zA-Z 不会被编码

const url = 'http://www.abc.com?key1=value 1&key2=value2+'
// 编码
const uriEn = encodeURIComponent(url)
// 'http%3A%2F%2Fwww.abc.com%3Fkey1%3Dvalue%201%26key2%3Dvalue2%2B'
// 解码 还原
decodeURIComponent(uriEn)
// url

3、parseInt

• 对字符串处理，从左到右读取字符串，得到整数；先匹配特殊字符头，比如0x表示16进制度；没有特殊字符头，碰到非数字字符结束（包括小数点）
• parseInt(string, radix); // radix表示进制

// 特殊字符头 0x 表示 16进制
parseInt('0x10') // 16
// 一般字符 radix默认为10
parseInt('1.1a') // 1
parseInt('11a') // 11
parseInt(' 11a') // 11
parseInt('') // NaN// 2 <= radix <= 36, 默认为10或者根据特殊字符头推导
parseInt('0x10') // radix === 16
// 2 >= radix or radix >= 36 返回NaN
parseInt('1', 1) // NaN
// radix === (0 || undefined) 搜索string有没有特殊字符头，没有则更改为10
parseInt('1', 0) // 1// case
['1', '2', '3',].map(parseInt)
// 相当于
parseInt('1', 0) // 1 radix被更改为10
parseInt('2', 1) // NaN radix小于2
parseInt('3', 2) // NaN sting数字不能大于radix

4、parseFloat

• 匹配数字，直到匹配第一个小数点，之后只匹配数字；类似于num.num
• 碰到非数字和小数点直接结束（除非是第一个小数点）

// 没有匹配到数字都会返回NaN
parseFloat('a1.11') // NaN
parseFloat('1a.11') // 1
parseFloat('1.a11') // 1
parseFloat('1.1a1') // 1.1

5、String

// 字符串，强转
String(true) // 'true'
// 引用数据，调用对应的toString
String([1,1]) // '1,1' // Array.toString
String({}) // '[object Object]' // Object.toString

6、Number

Number(num)

// num === undefined
Number(undefined) // NaN
// num === true/false; 隐式转换
Number(true) // 1
Number(false) // 0
// num === string 会进行数字推导，纯数字会返回数字，非数字返回NaN
Number('1.1') // 1.1
Number('true') // NaN
// 隐式转换
Number('') // 0
Number([]) // 0 // [].toString()=>''=>0
Number(['1']) // 1

7、Boolean

// key === 0、-0、null、false、NaN、undefined、''
Boolean(key) === false
// 其余情况
Boolean(key) === true

8、isNaN、Number.isNaN()

• isNaN(key) 遇到string类型，先内部转数字，再比较，存在隐患
• Number.isNaN()只会匹配NaN，不会转换

isNaN('1a') // true
Number.isNaN('1a') // false
Number.isNaN(NaN) // true

9、JSON

• 注意JSON.stringify参数
• 注意JSON.stringify有些字段具有以下值，不会序列化：undefined，function

const obj = {name: 'Jason',age: 18,color: 'red',null: null,undefined: undefined, // 未被序列化fun: function () {}, // 未被序列化
};
// JSON.stringify(string, replaceFun: (key, value) => value, indent)
// replaceFun表示转换函数；indent表示换行后的缩进，需要把字符串展示在页面上可以使用
// ++value自增并返回新值、value++自增但是返回旧值
JSON.parse(JSON.stringify(obj, (key, value) => (key === 'age' ? ++value : value), 2));// {name: 'Jason', age: 19, color: 'red', null: null}

10、toString

// 借用Objece.toString 得到数据类型
Object.prototype.toString.call() // [object Undefined]
Object.prototype.toString.call('') // [object String]
Object.prototype.toString.call([]) // [object Array]
Object.prototype.toString.call({}) // [object Object]// Array.toString 调用split(','); 如果参数不是数组，则会去原型链上找到Object.prototype.toString
// Array.prototype.__proto__ =》Object.prototype
Array.prototype.toString.call([1,'2']) // 1,2