了解JavaScript核心精髓（二）

1.字符串操作

//声明字符串
var str = "abcd";
var str = new String("abcd")

//截取字符串
console.log(str.substring(1)) //bcd
console.log(str.substring(0,3)) //abc

//提取字符串
var str2 = str.slice(0, 2);
console.log(str2)//ab 提取字符下标：0、1

//提取某个字符
console.log(str.charAt(1)) //b

//查找字符的索引，返回-1即索引不存在。
console.log(str.indexOf("e"))//-1

//清除字符空格
console.log(str.trim())

//替换字符
var result = str.replace("ab","12");
console.log(result)// 12cd

//匹配字符
var reg = /[0-9]{1}/i;
console.log("239".match(reg))

2.数值操作

//声明
var i = 1
var i = new Number(1)
//数字转换字符串
var str = i.toString()
var str = new String(i)
//字符串转换数字
var str = '10.11'
console.log(parseInt(str)) //10，只保留整数
var str = '10.11'
console.log(parseFloat(str)) //10.11，保留单精度小数。

console.log(+str) // number类型 10.11
console.log(-str) // number类型 10.11

//判断合法数字。
var num1 = 'aaa'
console.log(isNaN(num1)) //true，不合法数字。
var num2 = '10'
console.log(isNaN(num2)) //false，是合法数字。
var num3 = '10aaa'
console.log(isNaN(num3)) //true，不合法数字。
//判断是否数值类型
console.log(typeof 10 == 'number')
//保留小数位
console.log(i.toFixed(2)) //保留小数位0-20

3.数组操作

//数据声明
var arr = new Array(); //声明一个空数组
var arr = new Array(10); //声明一个10个长度的数组
var arr = new Array("a", "b", "c"); //用值初始化数组，等价于 var arr = ["a", "b", "c"];
var arr = [["a","b","c"][1,2,3]]; //声明一个二（多）维数组

//数组访问
arr[0] = "123"; //赋值
var str = arr[0]; //获取
arr[0][0] = "123"; //多维数组赋值

var arr = [1,3,4,2]

//数组排序
console.log(arr.sort()) //[1, 2, 3, 4]

//数组反排序
console.log(arr.reverse()) //[4, 3, 2, 1]

//数组转换成字符串
var str = arr.join("");
console.log(str) //

//字符串转换数组
var str = 'a,b,c,d,e';
var a = str.split(',');
console.log(a)  //["a", "b", "c", "d", "e"]

var arr1 = ["A","B","C","D"];
var arr2 = ["1","2","3","4"];

//合并数组
var arr = arr1.concat(arr2);
console.log(arr) // ["A","B","C","D","1","2","3","4"]

//分割数组 (参数1:起始索引,参数2:切割长度)
var arr3 = arr.splice(1,3);
console.log(arr) // ["A","1","2","3","4"]
console.log(arr3) // ["B","C","D"]

//多维数组
var arrMult = [
  [1,2,3],
  [2,3,4]
]

console.log(arrMult[1][2]) //4，arrMult[1]找到第二数组[2,3,4],arrMult[1][2]找到第二数组下标为2的值。

4.日期操作

var currDate = new Date();
console.log(currDate.now())  //获取当前时间毫秒数 等价于 Date().getTime()
console.log(currDate.getFullYear())  //获取完整的年份
console.log(currDate.getDate())  //获取当前日
console.log(currDate.getDay())  //获取当前星期几（值从0开始，0等于星期一）
console.log(currDate.getMonth()+1)  //获取当前月份（值从0开始，0等于1月）
console.log(currDate.toLocaleDateString()) //获取当前日期
console.log(currDate.toLocaleTimeString()) //获取当前时间
console.log(currDate.toLocaleString()) //获取当前日期与时间

5.类型转换

// 隐式转换
console.log("test"+1); //'test1'
// 显式转换
console.log(Number('1')) //

// 特别注意一下隐式转换
console.log (+"1") //
console.log (1 + ""); //'1'
console.log (1 + true); //
console.log (1 + undefined); //NaN
console.log (1 + null);//

/*
 * [].valueOf().toString() = '',
 * Number('') == 0
*/
console.log([] == 0); //true
/*
 * ![] = false,
 * false == 0
*/
console.log(![] == 0); //true
/*
 * [].valueOf().tostring() = '',
 * ![] = false,
 * Number('') == Number(false)
 * 0==0
*/
console.log([] == ![]); //true
console.log([] == []); //false,因为比较的是栈里面地址。
/*
 * {}.valueOf().tostring() = '[object Object]',
 * !{} = false,
 * Number('[object Object]') == Number(false)
 * NaN==!0
*/
console.log({} == !{}); //false
console.log({} == {}); //false,因为比较的是栈里面地址。

6.正则对象


var str = 'fdvdfgsdfx9999'
// 无命名分组
var regExp = /9{4}/gi
// 有命名分组
var regExp =/(?<num>9{4})/gi
// 检查字符串是否与正则匹配，返回布尔值
console.log(regExp.test(str))
// 检查字符串是否与正则匹配 ['匹配首个值','匹配首个值的下标','完整字符串','命名分组']
console.log(regExp.exec(str))

PS：RegExp对象如果多次执行RegExp对象上方法（test(str)，exec(str)），原型对象的属性lastIndex会发生改变。

        如果正则表达式中包含全局匹配（"g"），会导致RegExp对象上方法（test(str)，exec(str)）为Null。

7.dom操作

//根据id获取元素
var text = document.getElementById('text')
//根据class名获取元素
//返回html元素数组
var text = document.getElementsByClassName('text')
//根据html标签名获取元素
//返回html元素数组
var div = document.getElementsByTagName('div')

//根据css选择器获取元素
//返回符合条件的第一个html元素
var text = document.querySelector('.text')
//返回符合条件的所有的html元素
var div = document.querySelectorAll('div')

var paraNode = document.getElementById('test')
//在某父节点添加子元素
var childNode = document.createElement('div')
childNode.id = 'test-child'
paraNode.appendChild(s)
//在某父节点移除子元素
paraNode.removeChild(document.getElementById('test-child'))

// 新增属性
paraNode.setAttribute("class", "new-class");
// 移除属性
paraNode.removeAttribute("new-class");

PS: document.getElementsByTagName()这个方法慎用，因为这个方法很容易受浏览器的插件影响而导致dom获取错误。

8.编码

// url编码
// A-Z a-z 0-9 - _ . ! ~ * ' ( )  这些字符不转码
var ecstr = encodeURIComponent('http://www/baidu.com?name=中文&mail=mail@qq.com')
console.log(ecstr)
var dcstr = decodeURIComponent('http%3A%2F%2Fwww%2Fbaidu.com%3Fname%3D%E4%B8%AD%E6%96%87%26mail%3Dmail%40qq.com')
console.log(dcstr)

// url编码
// A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # 这些字符不转码
var estr = encodeURI('http://www/baidu.com?name=中文&mail=mail@qq.com')
console.log(estr)
var dstr = decodeURI('http://www/baidu.com?name=%E4%B8%AD%E6%96%87&mail=mail@qq.com ')
console.log(dstr)

PS：escape()方法以废弃。

jq部分

1.jquery的四种初始化

//初始化方法一

//jquery插件开发必须使用这个方法初始化，原因是防止全局污染$这个变量。

(function($){}(jQuery))

//初始化方法二 

$(function(){})

//初始化方法三

$(document).ready(function(){});

//初始化方法四
   jQuery(function($){});

2.jquery中的ready方法与onload方法区别

ready方法是加载html结构。

onload方法是加载html结构与素材。（图片，音视频等）

3.使用debugger强制加入断点。

另一种断点调试方法。

4.jquery插件开发主要用两个方法

通过$.extend()来扩展jQuery。（直接调用方法名。如：$.XXX()）

通过$.fn 向jQuery添加新的方法。（需要绑定dom元素，然后调用。如： $('元素').xxx();）

5.jquery释放$别名

使用noConflict()来释放$

补充

1.不建议使用zeptojs代替jquery（尤其是开发移动web）

原因：（1）不是体积小，效率就高。zeptojs性能比jquery差。

          （2）zeptojs兼容性差，zeptojs不兼容jquery插件。

          （3）zeptojs长期不更新。

PS：习惯使用jquery就使用jquery，不要以为zeptojs与jquery类似就使用同样的API，zeptojs与jquery还是有本质的区别。