随处可见的JavaScript学习笔记-基础操作篇
他虽疯，但却有他的一套理论
引言
如果说前两天的复习属于张口就来，花不了什么时间，
那么今天，我恐怕就得面向搜索引擎写作了，虽然同样是基础，也许我在刚学完JavaScript的时候还能对各种基本操作如数家珍
而现在，我只能在要用到啥的时候意识到，有这么个东西，但是不知道叫啥。这极大地拖慢了工作效率，尤其是在不能自由上网的环境下
故而，在这个章节中，我将主要过一过各种基础操作的API也许会有几个常用的JavaScript片段，我不确定，这得写了才知道。
JavaScript的操作，反正经常能听到写起来不舒服的言论，反之亦然，然我对别的语言并没有系统的学习过，
所以没有对比，也没有什么高见。
本文依旧是以ES5为主，具有随处可见，而覆盖面略为偏颇为指导思想。
字符串操作
众所众知字符串操作是最为常见的，在web领域曾经有一段时间，所谓后端就是在后端用诸如ASP甚至C来拼接字符串来实现服务端渲染
和一些业务逻辑，而之后渐渐地将这个行为移动到前端，也就是在前端拼HTML字符串，一直到Js模板出现这种行为也不算少见。
虽然在三大框架流行的现在用Js来写Html似乎并不是什么难事，然而还请记住，说不准在哪个角落还有拼字符串来做前端渲染的公司
就像十八线开外的山区总有没通水通电的地方一般。
言归正传，即使是Js模板，其实大多数情况下核心依旧是操作字符串，只是在这里不再是拼接，而是用了更高大上，或者说实有而花哨的做法罢了。
//字符串操作基础
//大小写转换
var str= 'Tom'; var res=str.toLowerCase()//res输出：tom
var res2=res.toUpperCase() //res 输出TOM
//大小写转换可以说是非常常用的操作，这对保证传入数据库的数据格式是否符合预期至关重要。
//基础查找
var str = 'apple'
str.indexOf('p') //返回1
str.lastIndexOf('p')//返回2
str.indexOf('a') //返回-1
//indexOf可能是用的最多的查找方法了，它会查找一串字符串中是否存在某个值存在会返回第一个的下标，不存在则会返回-1,非常好用
//基础查找2 metch
//这个方法我没用过，看起来和indexOf差不多，区别只是返回的是查找值本身，我也是刚翻w3cSchool发现还有这个方法的
//替换
var str = 'apple';
var res = str.replace(/a/,'b') //res=bpple
//replace的第一个参数是正则，这使它能玩出很多花样。再加个自身的属性length，w3cSchool上有关字符串的部分就结束了。
很简单对不对？然而，Js的字符串有个特点，从它有length这个属性就不难看出，其实它是一个类数组对象。
也就是说，数组上的方法它基本能用，但是有个问题，字符串不能被修改，只能被覆盖，也就是说不管你的修改多么微小
它都会修改整个字符串才能保存，这点和数组完全不一样，也是假如你要将数组的方法用在字符串上时需要注意的。
其它，如果你的正则表达式足够熟练，这里已经可以玩出很多花样来，
然而遗憾的是我正则向来是现用现查，所以这块在此按下不表。
数组操作
//数组转换为字符串：
var str=arr.toString(); var str=arr.join("连接符") //连接符为空可无缝拼接
//嘛，数据处理是工作的一环
//数组拼接
//不修改原数组
arr.concat(arr,sr1,sr2,sr3) //将多个字符串拼接进数组并返回新数组 传入数组会打散再拼接
arr.slice(starI,endI) //复制一段数组，返回新数组 ，从stari开始，endi结束
//这两个方法都不会修改原数组，对arr这个数组也不会有任何影响，而且如果不拿个变量接一下
//那么这两个操作就和不存在是一样的，所以其实通常使用这两个方法建议从Array中点
//也就是var resArr=Arrary.concat(arr,arr1,arr2,arr3)
//修改原数组
//arr.splice(starti,n,值1，值2) 从starti开始修改n位，值为空，删除，有值为替换，n为0插入
var arr =[1,2,3,4,5];
arr.splice(2,1) //arr=[1,2,4,5] 删除下标为2的
arr.splice(2,0,a,4,5,6) //arr=[1,2,4,a,4,5,6,5,6] 下标2后插入
arr.splice(3,3) //arr=[1,2,4,3,4,5,6,5,6] //下标3替换
//对数组的基本操作，作用嘛..数据处理是工作的一环
//排序
arr.reverse() //倒序 原数组改变
arr.sort() //正序 （通过对比字符串的unidecod码实现，
//比较纯数字的时候需要传入比较函数(compareFunctin)
//function(a,b){return a-b}）//原数组改变
//核心：数组中比较两个值返回-1的时候停止，1的时候前者与后者交换位置至此似乎没多少需要提的，Js中sort排序数量比较小的时候是冒泡排序，
数量上去了似乎是快速排序，效率上很高。排序都会修改原数组。
当然数组的操作方法现在才讲了一半，下面还有。
//栈和队列
//从尾部进入，排出 入：
arr.push();//返回长度
//出
arr.pop();//返回排出数 //操作时剩余元素不会发生变化
//从头部进入，排出 入：
arr.unshift();//返回长度
//出
arr.shift()//返回排出数 //操作时剩余元素会发生变化
//arr.push + arr.shift 模拟栈，后入先出 LIFO
//arr.unshift+arr.pop 模拟队列，先入先出 FIFO
//这块很有用，虽然很多时候我用到时都会去查笔记....
//缩容
arr=[1,2,3] arr.length //3;
arr.length-=1
arr.length //2
arr=[1,2];
//奇怪的操作..我反正没用过..
//看起来更高端的操作
//every 是否都符合要求
var bool=arr.every(function(val,idx,arr){
return 判断条件
})
//some 是否包含符合要求的元素
var bool=arr.some(function(val,idx,arr){
return 判断条件
})
//forEcah 对原数组中每个元素执行相同的操纵 直接修改原数组
arr.forEach(function(val,idx,arr){
对arr[idx]值做修改，无须return
})
//map 对原数组中每个元素的值执行相同的操纵再生成新数组 原数组不变
arr.map(function(val,idx,arr){
return 对[idx]值做修改
}) //不加return 和forEach作用相当
//例子：创建映射关系来改变排序。
var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
// 对需要排序的数字和位置的临时存储var mapped = list.map(function(el, i) {
return { index: i, value: el.toLowerCase() };})
// 按照多个值排序数组
mapped.sort(function(a, b) {
return +(a.value > b.value) || +(a.value === b.value) - 1;});
// 根据索引得到排序的结果var result = mapped.map(function(el){
return list[el.index];});
//filter 过滤 原数组不变
var sub=arr.filter(function(var,idx,arr){
return 判断条件
})
//上面都是很有用的操作，但是我几本只用过for each和map
//毕竟剩下的操作更像是这两个的语法糖，实践中，大多数时间基本想不起来有这个方法
//经过这次整理下次有应用场景了也许回来看一眼数组的操作至此高一段落，剩下的，emmm，数字？算了吧..
来看看Date如何
Date操作
本想大大咧咧写个时间操作，画风都不一样了，还是来Date操作吧。
这方面我遇到最常见的操作就是上传的时候附上当前时间，或者展示的时候格式化下时间
题外话，Js在浏览器里的时间不大靠谱，从定时器就能看出来。
Js定时器比如你设置一个10s的定时器它并不是到10s执行，而是差不多到10s执行
为什么会这样呢？因为浏览器资源有限环境复杂，它不是在你执行定时器的时候开始计时的
而是浏览器利用空闲时间来进行的，忘记在哪看的了大概这个意思，也许不对，但结果来看差不了多远
看看定时器动画多容易出问题就知道了。
所以依赖前台来传当前时间是比较不靠谱的操作，大多数情况，时间还是以服务器为主。
毕竟你不知道运行网页的电脑时钟是不是和服务器上一致。
//其实我学Js的时候感觉Date操作又多又难记，但实际到应用中..我发现..
//最常用的只有两个
var time=new Date（） //获得当前时间，会是标准格式
num = time.getTime() //获得1970年到这个时间点的一个毫秒数
//其它其实还有很多年月日操作，然而我几乎没用过，毕竟直接操作毫秒数要简单不少
//而绝大多数情况下数据库上存的也是毫秒数
var get = 1527144944436;
new Date(get) //输出标准时间格式
//这里需要注意传进去各种格式时间都能转换，问题在于，IOS..
//高版本不知道，低版本它并不支持标准时间格式，必须一个一个传
//这个时候如果后台反回时间格式字符串就只能无奈先处理字符串了
//其它
Date.prototype.Format = function(formatStr) {
var str = formatStr;
var Week = ['日', '一', '二', '三', '四', '五', '六'];
str = str.replace(/yyyy|YYYY/, this.getFullYear());
str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100));
str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1));
str = str.replace(/M/g, (this.getMonth() + 1));
str = str.replace(/w|W/g, Week[this.getDay()]);
str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate());
str = str.replace(/d|D/g, this.getDate());
str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours());
str = str.replace(/h|H/g, this.getHours());
str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes());
str = str.replace(/m/g, this.getMinutes());
str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds());
str = str.replace(/s|S/g, this.getSeconds());
return str
}
//上面是一个常见的时间格式化函数..网上搜到的大多数版本都是这个..
//实践中也还好用..我曾经见过拼接字符串来格式化的..
//不用说..拼接字符串来处理时间总是有奇奇怪怪Bug发生的可能时间差不多就到此为止吧，会取时间戳，基本大多数需求就都能做了。
剩下你需要的就是一个加班一周还能计算时间间隔的大脑。
其它基本操作
差不多要结束了..
剩下的基本操作：数字，Json，RegExp
放一起说，数字，最常见的就是加减乘除，需要注意的就是取整问题。
科学计算不在讨论范围，基本上一篇提过了，在此不再赘述。
//JSON
var obj={a:1}
var str = JSON.stringify(obj) //转JSON字符串
var obj2 = JSON.parse(str) //转回对象通常会这个就够了，传输的时候转成JSON字符串，接收的时候转回来。
后端是NodeJs或者有NodeJs这一层时通常JSON字符串会自动解析成对象。
但也有例外，我暂时不知为何，调试的时候输出出来看看再调整也不费事就是了。
//RegExp
//严肃的说，正则表达式的书写和使用可以出一本书，然而我不是很会写正则
//但是我会用
var patt1=new RegExp("e"); //创建一个正则；当然 /e/ 这样也可以
patt1.test('str') //测试是否符合返回 true false
patt1.exec() //检索，存在返回检索值，不存在返回Null..通常我选择indexOf
patt1.compile() //替换，然而我选择replace();好了，关于正则的书写，还是得找本书来看，然后大量练习。
这个东西更像是语法，略为枯燥，我个人是多次捡起来然后又忘掉。
所幸实际开发中没遇到太复杂的，要么搜个现场的，要么一边学一边做...
其它..DOM操作...
//DOM树的5个API：
walker.parentNode();
walker.firstChild();
walker.lastChild();
walker.previousNode();
walker.nextNode();
//节点树的API：
parentElementNode();
firstElementChild();
lastElementChild();
previousElementNode();
nextElementNode();
//上面这些除了学习的时候用过，就再也没用过了..
//查找操作
// 1.按id查找一个元素
var elem=document.getElementById("id");
// 2.按标签名查找多个元素
var elem=parent.getElementsByTagName("标签名");
// 3.按name属性查找多个元素
var elem=parent.getElementsByName("name");
// 4.按class属性查找多个属性
var elem=parent.getElementsByClassName("class");
// 5.按选择器查找一个元素
var elem=parent.querySelector("selector");
// 6.按选择器查找多个元素
var elem=parent.querySelectorAll("selector");
//上面属于背的滚瓜烂熟也再也没用过的...我选择Jq
//或者...
function $('select'){
var elem=parent.querySelectorAll("selector");
return elem
}
//其它还有添加删除DOM节点和修改样式..添加删除，简单粗暴修改html，样式修改粗暴简单修改style..上面这些DOM操作照理说应该是前端学习JavaScript最重要的部分，然而从我工作至今几乎很少有用到的时候。
三大框架自不用说，在有Jq的情况下，这些都是时代的眼泪了...
结语
这次复习了大多数常见的JavaScript Api意外的比我想象中的早结束。
可见随着实际开发的应用即使不愿意你也会记住。
虽是老生常谈，找个东西做做，提升相对要快些。
所谓光说不练假把式。
其它能算入门应该掌握的东西...emmmm...
基于原型的继承？面向对象？函数式编程？设计模式？
我个人来说，面向对象的写法就足够满足当前的工作需求的同时，还足够好看。
其它，JavaScript还有的就是一些，不想懂也不需要懂的奇怪特性...
这块建议踩到坑了再去解决..随着踩得坑的增多，就能切实的感受到自己的变强。
前两天看到一本，你不懂的JavaScript，没有细看，不过的确很多在现场踩到的坑都有提及
虽然我很想把它改名为你不需要懂的JavaScript..然而真遇到问题了，这套书还是很可靠的。
所幸这套书开源且有电子版，遇到什么奇奇怪怪的问题时去临时抱个佛脚似乎也是一幸。
