js混杂笔记

1.判断对象为空的方法

1）Object.keys({}).length === 0 // true

2）Object.getOwnPropertyNames({}).length === 0 // true

3）JSON.stringify({}) === '{}' // true

2.判断是否为数组

1）Array.isArray([]) // true

2）Object.prototype.toString.call([]) === '[object Array]'; // true

3）[].constructor.toString().indexOf('Array') !== -1; //true

3.js变量

1）使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；
使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；
使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。

2）js变量提升：变量可以在使用后声明，也就是变量可以先使用再声明

4.创建对象的四种方式

1）对象字面量方式创建方式
　　var obj = {name: 'tom', age:23}

2）工厂方式创建对象
　　function createObj(){
　　　　var obj = new Object();
　　　　obj.name = 'tom';　　
　　}

3）构造函数方式创建对象
　　function createObj(){
　　　　this.name = 'tom';
　　}
　　var obj = new createObj();

4）用原型链方式
　　function CreateObj(){}
　　CreateObj.prototype.name = 'tom';
　　var obj = new CreateObj();

5.object的操作

1）Object.keys  获取对象的所有keys值 为数组形式

2）Object.values 获取对象的所有values 为数组形式

3）{}.hasOwnproperty('key') 判断对象是否有key属性

4）for(x in obj) 循环对象

6.number

1）toString  转成字符串 括号里可加基数

2）toFixed 转成字符串，括号指定保留小数点后位数

3）toLocaleString 格式化数字，每三个加逗号

4）toExponential 转成指数表示

7.Math

1）Math.round(0.6)  // 1  四舍五入

2）Math.ceil(0.4) // 1 向上取整

3）Math.floor(0.9) // 0 向下取整

4）Math.max(1,2,3,4) // 4

5）Math.min(1,2,3,4) //1

6）Math.random() * (max - min + 1) + min //随机数

8.Date

1) date.getFullYear()

2) date.getMonth()

3) date.getDate()

4) date.getDay() //获取星期几

5) date.getHours()

6) date.getMinutes() //分钟

7) date.getSeconds() //秒

8) date.getMillseconds() //毫秒

9) date.getTime() //1970.1.1 至今的毫秒数

9.array

1) concat() //连接多个数组，并返回结果

2) join() //把数组分割成字符串 如[1,2].join(',') => "1,2"

3) pop() // 删除并返回数组的最后一个元素

4) pusp() //向数组的末尾添加一个或更多元素，并返回新的长度

5) unshift() //向数组的开头添加一个或更多元素，并返回新的长度

6) shift() // 删除并返回数组的第一个元素

7) sort() // 对数组进行排序

8) reverse() // 颠倒数组

9) toString() // 把数组转为字符串

10) slice(start, [end]) // 返回数组指定元素

11) splice(index, count, [add]) // 从数组中删除指定元素，并返回被删除内容(数组格式) 
　　index: 位置； count：删除数量；add：添加元素 可选
　　[1,2,3].splice(-1,1) => [1,2]
　　[1,2,3].splice(1,2,4) =>[1,4]

10.string

1) slice(start, [end]) // 截取字符串

2) substring(start, [stop]) // 截取字符串， 与slice相似，但不允许负的参数；如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

3) substr(start, length) // 截取字符串

4) charAt() // 返回在指定位置的字符

5) concat() //拼接字符串

6) indexOf() // 检索字符串

7) lastIndexOf() // 从后向前检索

8) match() // 找到与正则的匹配 ('match1match2').match(/\d+/g) => [1,2];

9) replace() // 替换与正则相匹配的值 ('match1match2').replace(/\d/g, '||') => ('match||match||')

10) search() // 检索与正则匹配的值 ('match1match2').search(/\d/g) => 5

11) toUpperCase() // 把字符串转为大写

12) toLowerCase() // 把字符串转为小写

13) split('&') 字符串按‘&’进行分割

11. js全局函数

1）encodeURL() 把字符串编码为url

2）decodeURL() 解码某个URL

3）escape() 对字符串进行编码

4）unescape() 进行解码

5）parseFloat() 解析一个字符串并返回一个浮点数

6）parseInt() 解析一个字符串并返回一个整数

第二个参数可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。
如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。
如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN

parseInt(, ) //
parseInt(, ) // NaN
parseInt(, ) // NaN

7）Number() 把对象的值转为数字

8）String() 把对象的值转为字符串

12. js正则

1）/正则主体/修饰符 ==> /^\d+$/g 或 var r = new RegExp('\\d', 'g')
　　/^1[34578]\d{9}$/g 和 /\d+.\d+/g

2)  修饰符 
　　i：忽略大小写；
　　g：执行全局匹配；
　　m：执行多行匹配

3）方括号
　　[abc]：查找方括号之间的任何字符
　　[^abc]：查找任何不在方括号之间的字符
　　[0-9]：查找任何0-9的数字
　　[a-zA-Z]：查找任何从小写a到大写Z的字符

4)  元字符
　　\w  查找单词字符
　　\d  查找数字
　　\D  查找非数字字符
　　\s  查找空白字符
　　\b  查找单词边界

5)  量词
　　n+ 匹配任何包含至少一个n的字符串
　　n* 匹配任何包含零个或多个n的字符
　　n? 匹配任何包含零个或一个n的字符
　　n{x} 匹配包含x个n的字符
　　n{x,} n连续出现至少x次时匹配
　　n{x,y} n连续出现至少x次，至多y次时匹配
　　n$ 匹配任何结尾为n的字符
　　^n 匹配任何开头为n的字符

13.http请求

1.get请求
　　1) var xhr = new XMLRequest()
　　2) xhr.onreadystatechange = function(){
　　　　if(xhr.readyState === 4 && xhr.status === 200 || xhr.status === 304) // 成功的回调函数
　　}
　　3) xhr.onerror = function(){}
　　4) xhr.open('GET', url, true) //true: 是否为异步请求
　　5) xhr.send()

2. post请求
　　1) var xhr = new XMLRequest()
　　2) xhr.onreadystatechange = function(){
　　　　if(xhr.readyState ===4 && xhr.status === 200 || xhr.status === 304){} 
　　}
　　3) xhr.open('POST', url, true)
　　4) xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
　　5) xhr.send('name=tom&age=12')

14.杂

1.getXX和queryXX的区别：
1).getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合
2).getXXX可以接受错误的参数，queryXX则严格符合 CSS 选择符规范的
3).getXX性能要快
使用场合：
正常情况下使用getXX，如果得到的元素需要很麻烦的多次getElementBy..组合才能得到的话使用querySelector，方便

2.将argument转成数组

var args = Array.prototype.slice.call(arguments);

3.数字格式化

var n = 123456789;

n.toLocaleString() ==> "123,456,789"

4.数组去重

[...new Set([1, "1", 2, 1, 1, 3])] ==》[1, '1', 2, 3]

5.数组填充

arr.fill(value[, start[, end]])

Array(6).fill(8) ==》[8,8,8,8,8,8]

6.一行代码一个插件

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

7.+一元运算可以是字符串转为number

+ new Date ==》1525186216452

+‘1.1’ ==》 1.1

8.js 对input进行输入监听

var input = document.getElementById('input');
input.oninput = function (ev) {}

9.短路运算var a = b && 1

// 相当于
if (b) {a = 1
} else {
a = b
}var a = b || 1

// 相当于
if (b) {a = b
} else {a = 1
}

10.css方面

关于 css子元素浮动后父元素高度不能自动撑开 问题
1.给父元素添加样式：overflow: hidden;
2.在父元素最后添加一个空元素，空元素加上样式：clear: both;
3.将父元素一起浮动；

11.总结：XML和HTML的区别？

1)XML标签可以任意指定，但HTML标签是固定的；
  2)XML语法非常严格，HTML语法非常松散；
  3)XML用于描述和存储数据——类似于数据库；HTML用于展现网页的结构，只用于浏览器；

12.dom操作

　　1. 在父元素末尾追加: 
             parent.appendChild(child)
         2. 插入到父元素下的现有子元素之前:
             parent.insertBefore(child, oldChild)
         3. 替换父元素下现有子元素
             parent.replaceChild(child, oldChild)

13.拷贝对象

var b=JSON.parse(JSON.stringify(a))

14.交换两个值

a = [b,b=a][0];

15.使页面的每个元素加上边框

[].forEach.call($$("*"),function(a){
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

16.禁止频繁操作
var click = (function(){
　　var isClick = true;
　　return function(params, time){
　　　　if(isClick){
　　　　　　//todo
　　　　　　isClick = false;
　　　　　　console.log(params);
　　　　　　setTimeout(function(){
　　　　　　　　isClick = true;
　　　　　　}, time)
　　　　}
　　}
})();
click('click count', 3000)

17.数字格式化（添加千分位）
1234567.1.toLocaleString()//1,234,567.1
更多请查看https://juejin.im/post/5ac472016fb9a028c22afa9d

18.将多维数组转为以为数组
arr.join(',').split(',')
[[1,2,3],4,5,[[6,7]]].join(',').split(',')//["1", "2", "3", "4", "5", "6", "7"]
19.获取数组倒数的元素
arr.slice(-1) 获取倒数一个元素
arr.slice(-2) 获取倒数两个元素

20.数组重洗
arr.sort(()=> (Math.random() - 0.5))