了解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=中文&[email protected]')

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=中文&[email protected]')

console.log(estr)

var dstr = decodeURI('http://www/baidu.com?name=%E4%B8%AD%E6%96%87&[email protected] ')

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还是有本质的区别。

ps

了解JavaScript核心精髓（二）