javascript补漏

JSON.stringify(obj) 特性

undefined、任意的函数以及symbol作为对象属性值时JSON.stringify()将跳过（忽略）对它们进行序列化

const data = {
  a: "aaa",
  b: undefined,
  c: Symbol("dd"),
  fn: function() {
    return true;
  }
};
JSON.stringify(data) // "{"a":"aaa"}"

undefined、任意的函数以及symbol作为数组元素值时，JSON.stringify()将会将它们序列化为null
1
2
JSON.stringify(["aaa", undefined, function aa() {}, Symbol('dd')])
// "["aaa",null,null,null]"

undefined、任意的函数以及symbol被JSON.stringify()作为单独的值进行序列化时，都会返回 undefined

1
2
3

JSON.stringify(undefined) // undefined
JSON.stringify(function aa(){}) // undefined
JSON.stringify(Symbol('tew')) // undefined

JSON.stringify() 将会正常序列化Date的值。

1 2	JSON.stringify({ now: new Date() }) // "{"now":"2018-11-10T17:42:11.973Z"}"

JSON.stringify() 会将NaN和Infinity格式的数值及null都会被当做null

1
2
3

JSON.stringify(NaN) // "null"
JSON.stringify(null) // "null"
JSON.stringify(Infinity) // "null"

JSON.stringify(obj, replacer, space) 各个参数使用

/* replacer 为函数时 有两个参数 key value*/
const data = {
  a: "aaa",
  b: undefined,
  c: Symbol("tew"),
  fn: function() {
    return true;
  }
}
JSON.stringify(data, (key, value) => {
  switch (typeof value) {
    case "undefined":
      return "undefined"
    case "symbol":
      return value.toString()
    case "function":
      return value.toString()
    default:
      return value
  }
})
// "{"a":"aaa","b":"undefined","c":"Symbol(tew)","fn":"function() {\n    return true;\n  }"}"
/* 作为数组时 可以过滤对象指定的属性名 */
const jsonObj = {
  name: "tew",
  age: 18,
  hobby: "travel,cheese"
}
// 只保留 hobby 属性的值
JSON.stringify(jsonObj, ["hobby"]); // "{"hobby":"travel,cheese"}"
/* 第三个参数可以格式化输出格式 缩进的空格数 */
const jsonObj = {
  name: "tew",
  age: 18,
  hobby: "travel,cheese"
};
JSON.stringify(jsonObj,null,2);
/* "{
  "name": "tew",
  "age": 18,
  "hobby": "travel,cheese"
}" /*

bind兼容

if (!-[1,]) {
  Function.prototype.bind = function(oThis){
    var that = this
    var arg = [].slice.call(arguments,1)
    return function(){
      that.apply(oThis,arg)
    }
  }
}

排序

随机排序

var arr = [
  { "price": 66, "id": 1 },
  { "price": 99, "id": 2 },
  { "price": 11, "id": 4 },
  { "price": 44, "id": 3 }
]
arr.sort(function(a, b){
  return Math.random() - 0.5
})

按指定字段排序

function compare(property){
  return function(a,b){
    var value1 = a[property]
    var value2 = b[property]
    return value1 - value2
  }
}
arr = arr.sort(compare('price'))
console.log(arr)

日期截取

1
2
3

var date = '20190108180155'
var reg = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/
date.replace(reg, '$1年$2月$3日 $4:$5:$6')

逻辑运算符与短路

/** && || 逻辑与 && 优先级高于 逻辑或 ||
1. 在条件判断中
  && 所有条件都为真 整体才为整
  || 只要有一个条件为真 整体就为真
2. 在非条件判断中 如赋值操作中
  || ->  A || B 首先看A的真假 A为真返回A的值 A为假 返回B的值(不管真假)
    1 || 2 ==> 1       0 || false ==> false
  && ->  A && B 首先看A的真假 A为假返回A的值 A为真 返回B的值(不管真假)
    1 && 2 ==> 2       0 && false ==> 0

Number.toFixed()

如果该方法在一个非Number类型的对象上调用会报错。

判断一个对象是否为数组的最好方式

function isArray(obj){
  return Object.prototype.toString.call(obj) == "[object Array]";
}
// 不能使用 instanceof 和 constructor

encodeURIComponent 与 encodeURI

// encodeURIComponent和decodeURIComponent可以编码和解码URI特殊字符（如#，/，￥等）
// encodeURI和decodeURI对URI的特殊字符是没有编码和解码能力的
var codeVal = encodeURI('20180711#abc');
var url = 'http://www.baidu.com?code=' + codeVal;
console.log(url) // http://www.xxx.com?code=20180711#abc
decodeURI(location.search)  //"?code=20180711"
var codeVal = encodeURIComponent('20180711#abc');
var url = 'http://www.baidu.com?code=' + codeVal;
console.log(url) // "http://www.baidu.com?code=20180711%23abc"
decodeURIComponent(location.search) //"?code=20180711#abc"

Object.freeze 对象冻结

Object.freeze()方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。

var obj = {
  tew: 'view',
}
obj.tew = 'app'
console.log(Object.isFrozen(obj)) // false
console.log(obj.tew) // app
Object.freeze(obj) // 冻结对象
obj.tew = 'update'
console.log(Object.isFrozen(obj)) // true
console.log(obj.tew) // app

// 深度冻结
function deepFreeze(obj){
  Object.freeze(obj)
  for(key in obj){
    if (typeof obj[key] === 'object' && obj[key] != null) {
      deepFreeze(obj[key])
    }
  }
}
var deepObj = {
  age: '26',
  tew: {
    age: '26'
  }
}
// Object.freeze(deepObj)
// deepObj.age = '18'
// deepObj.tew.age = '18'
// console.log(deepObj.age) // 26
// console.log(deepObj.tew.age) //18
deepFreeze(deepObj)
deepObj.age = '19'
deepObj.tew.age = '19'
console.log(deepObj.age) // 26
console.log(deepObj.tew.age) // 26

MutationObserver 监听改变

<div id="app"></div>
<script>
  let mutationObserver = new MutationObserver(() => {
    console.log(app.children.length);
  })
  mutationObserver.observe(app, {
    childList: true
  })
  for(let i=0;i<10;i++){
    app.appendChild(document.createElement('p'))
  }
</script>