js -- bear

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() 解析一个字符串并返回一个整数

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)
})

猜你喜欢

转载自www.cnblogs.com/bear-blogs/p/9383206.html