JS 杂记(不定期更新)

http状态码 204和205

204代表响应报文中包含若干首部和一个状态行，但是没有实体的主体内容。主要用于在浏览器不转为现实新文档的情况下，对其进行更新。响应报文的主体被忽略，从而减少不必要的数据传输，进一步提高性能。
205则是告知浏览器清除当前页面中所有的html表单元素，也就是表单重置。

利用Math.max()获取数组最大值

//ES5
Math.max.apply(null,array);
//ES6
Math.max(...array);

JS小细节

• ++i与i++的区别

function abc () {
  var a = 0;
  alert(a++);
}
abc(); // 0

function def () {
  var a = 0;
  alert(++a);
}
def(); //1
/*
* a++先执行，后运算
* ++a先运算，后执行
*/

日期对象

• 获取今天0点0分0秒毫秒数
  new Date(new Date().toDateString()).getTime()

toDateString()方法返回日期字符串，而new Date()入参仅为日期时，时分秒自动补0

• 获取偏移毫秒数：

//原生方法
new Date().getTime()  //偏移毫秒数，Number
//使用moment.js插件时
moment().valueOf()    //偏移毫秒数，Number
moment().format('x')  //偏移毫秒数，String
moment().format('X')  //偏移秒数，String

• 获取俩个日期相差多少天

//转化为Date对象，计算俩个日期相差毫秒数，取绝对值，除以一天的毫秒数(86400000)
parseInt(Math.abs(oDate1.getTime()-oDate2.getTime())/86400000)
//moment.js插件
var oM1= moment('2017-08-21');
var oM2= moment('2018-01-27');
console.log(Math.abs(oM1.diff(oM2,'days')));

chrome浏览器63+版本地址栏中文自动转码解决办法

使用decodeURI(value)：value中十六进制转义序列将被它们表示的字符替换。

decodeURI()函数可对encodeURI()函数编码过的URI进行解码。

---

URI:统一资源标识符

JavaScript实现继承的几种方式

• 通过原型链
• 依靠构造函数
• 原型继承
• 组合继承
• 寄生式继承
• 组合寄生式继承

web本地存储Storage

if(window.LocalStorage){
  //support Storage
  var storage = window.LocalStorage; //LocalStorage与SessionStorage只是alivetime不一致，此处仅以LocalStorage为例。
  //近似看作name:value的无序集合，且value只能为String，类似Object对象
  
  storage.getItem("key"); //获取name为"key"的数据
  
  storage.setItem("key","value"); //设置name为"key"的数据为"value"
  
  storage.removeItem("key"); //删除name为"key"的数据
  
  storage.clear(); //清空Storage所有数据
  
  storage.length; //Storage数据的长度，多与key方法同步使用
  
  storage.key(index); //获取Storage里第index个name的值，从0开始。

} else {
  alert("Not supported Storages!!");
}

如何获取对象变量的属性和方法的名称：

var item = {"南京":123,"beijing":234,"天津":45};

var arrCity = Object.keys(item)

console.dir(arrCity)    //["南京", "beijing", "天津"]

var arrCity2 = Object.getOwnPropertyNames(item)

console.dir(arrCity2)   //["南京", "beijing", "天津"]

其中，Object.getOwnPropertyNames()可以获取变量可枚举的和不可枚举的属性和方法的名称；

Object.keys()获取变量可枚举的属性和方法的名称。

Tips1：可枚举的属性和方法指对象的自有属性和方法(代码中定义)；不可枚举的通常为对象继承的属性和方法。

js中数组变量的map()方法：

map()方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值。

var a = [1,2,3];

var b = a.map(function(x) {
  return x*x;
}); 
console.dir(b)//[1,4,9]

Tips2.1：map()返回的是新数组，它不修改调用的数组。

Tips2.2：Array.map()和$.map()的入参顺序不一致。

Array.map(function(value,index,array){
  //do something
})
$.map(Array,function(index,value,array){
  //do something
})

css中border-radius属性：

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

所有合法的CSS度量值都可以使用：em、px、百分比、rem等等。

Tips3-1：

四个边框半径顺序为顺时针排列，即左上(top-left)、右上(top-right)、右下(bottom-right)、左下(bottom-left)。
border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

Tips3-2：

border-radius还可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以同时设置1到4个值 ，应用规则与第一组值相同。

例：

border-radius: 2em 1em 4em / 0.5em 3em;

等价于：

border-top-left-radius: 2em 0.5em;

border-top-right-radius: 1em 3em;

border-bottom-right-radius: 4em 0.5em;

border-bottom-left-radius: 1em 3em;

Tips3-3:

除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。

jQuery中hide()、show()函数的参数说明

语法：$(selector).hide(speed,callback)
speed：
- 毫秒 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透 明度
- "slow"
- "normal"
- "fast"
callback:
- 可选。hide/show 函数执行完之后，要执行的函数。
除非设置了 speed 参数，否则不能设置该参数。

字符串大小写转换：toLowerCase\toUpperCase

语法：String.toLowerCase() 返回全部转换为小写的新字符串

String.toUpperCase() 返回全部转换为大写的新字符串

jQuery closest()方法：获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

参数：

字符串值，包含匹配元素的选择器表达式。

详细说明：

从当前元素开始。沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。返回包含零个或一个元素的 jQuery 对象。

与parents()方法对比，parents()从父元素开始，沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。返回包含零个、一个或多个元素的 jQuery 对象。

jQuery load()方法：

语法：$.load(url,[data],[callback])

参数说明：

url:要载入的远程url地址

data:发送至服务器的key/value 数据

callback:载入成功时的回调函数

jQuery get()方法：

语法：$.get(url,[data],[callback])

参数说明：

url:要载入的远程url地址

data:发送至服务器的key/value 数据

callback:载入成功时的回调函数

jQuery post()方法：

js中数组变量的forEach()方法：

功能：遍历、循环

语法：[].forEach(funcion(value,index,array){})

Tips10:forEach不会遍历纯粹“占着官位吃空饷”的元素的,详见下方示例代码：

var array = [1, 2, 3];

delete array[1]; // 移除 2

alert(array); // "1,,3"

alert(array.length); // but the length is still 3

array.forEach(alert); // 弹出的仅仅是1和3

如何在另一个函数中保持this上下文---Function.prototype.bind()

var myObj = {

specialFunction: function () {

},

anotherSpecialFunction: function () {

},

getAsyncData: function (cb) {

cb();

},

render: function () {

this.getAsyncData(function () {

this.specialFunction();

this.anotherSpecialFunction();

}.bind(this));

}

};

myObj.render();

Tips11:.bind()创建了一个函数，当这个函数在被调用的时候，它的 this 关键词会被设置成被传入的值（这里指调用bind()时传入的参数）。因此，我们传入想要的上下文，this(其实就是 myObj)，到.bind()函数中。然后，当回调函数被执行的时候， this 便指向 myObj 对象。

'~'按位非的优雅使用

在if语句中调用string或Array的indexOf()方法时，可以使用'~'来运算:

\\示例 判断str包含子串”aa“
\*常规调用方法：*\
var str = "hello world";
if(str.indexOf("aa") >= 0){ 
    console.log('it`s there!');
}
\*使用~方法*\
var str = "hello world";
if(~str.indexOf("aa")){ 
    console.log('it`s there!');
}

设indexOf()返回为n，按位非运算后为-(n+1)，即~ -1=0、~ 0=-1、~ 2=-3...
在if条件语句中，0会被转换布尔值false，故示例代码中if语句不会被执行。