JS高级基础阶段知识总结

      1.javascript是ECMAScript的一种实现

2.数据类型

    1》基本数据类型 数字 字符串 bool

    2》复合数据类型 对象（自定义对象，内置对象（Array）,单体对象（Math））

    3》空类型  null（空指针如果你把一个值赋值为null的时候，浏览器吧这个数据

当成一个对象，只不过这个对象没有指向任何地址是一个空指针）和

undefined（未定义的值，如果这个量你定义了但是没有赋值就会赋值一个undefined）

但是这个undefined值并不安全，但是这个值并不安全，因为undefined可以再次赋值

例如：undefined=123；输出的是123

3.语句

  分号分割语句，只要语句结束以后既要加上分号以便在以后开发进行压缩

JS的时候会对语句有所影响！

  好的编程习惯，会遇到很少的傻瓜BUG

 if语句是条件语句

 循环语句：for while do-while for-in（循环枚举对象的属性）

 跳转语句：goto（实际开发中少用）

 分支语句：switch-case

  return语句 a:return;下边代码不用再执行了，停止逻辑中断

  continue语句：结束本次循环

  break语句：放到switch-case语句中跳出分支语句，放到循环语句中结束循环

练习题：

//n如果类型为数字就+10并且输入如果为字符串就打印第一个字符
//如果为bool就直接打印
//否则打印该类型的每一个属性
function caishu(n){
var typeN=typeof n;//这里对代码进行了优化，会提高性能
if(typeN==="number"){
console.log(n+10);
}else if(typeN==="string"){
console.log(n.charAt(0));
}else if(typeN==="boolean"){
console.log(n);
}else{
for(var key in n){
console.log(key);
}
}
}

function caishu(n){
var typeN=typeof n;
switch(typeN){
case "number":
console.log(n+10);
break;
case "string":
console.log(n.charAt(0));
break;
case "boolean":
console.log(n);
break;
default:
for(var key in n){
console.log(key);
};
break;
}
}

 4.==与===的区别

 前者比较内容，隐式类型转换，字符串1==数字1

 后者比较内容和类型

5.装箱和拆箱：一个基本类型为什么会有方法呢？实际上是js解析器给了一个

装箱操作：将基本数据类型包装成其对应的符合类型数据类型

拆箱：将复合数据类型转换成其对应的基本数据类型

6.sort方法参数

 如果fn的返回值   大于0就交换，

                  小于0就不交换
 等于0就保持

案例：

var arr=[{name:"zs",age:18},{name:"ls",age:19},{name:"ww",age:16}];

    arr.sort(function(a,b){

    return b.age>a.age?-1:1;//这里是进行的是降序排序
});

7.类型转换

    数字转换成字符串：toString()\ String() \+"" \new String()

        var num=123;
console.log(num);
console.log(num.toString());
console.log(String(num));
var str=new String(num).valueOf();//valueOf是变为他的原始值
console.log(str);
console.log(num+"");

        性能问题：+"">String()>toString()>new String()

    字符串转换成数字:Number(),parseInt(),parseFloat(),new Number,*1,/1

     *1,/1>Number()>parseInt(),parseFloat()(可以自动裁剪)>new Number()
var num=new Number(str).valueOf();//valueOf是变为他的原始值

    数字转换成布尔：

     0转化为false，非0转化为true

    布尔转换成数字：false转化为0true转化为1

    字符串转化成bool：空字符串转化为false，非空字符串转化为true

    bool转化成字符串：相应字符串

    其他类型转化为bool

   空类型为false

   对象为true

8.控制台可以测试表达式的值

9.source显示源文件的内容。并且可以打断点

10.string对象常用方法

   1>截取字符串substring substr（不能有负数） slice(start,end)(不包括end)（

      第一个和第三个可以指定负数，倒数第一个就是-1的但是前面为负数后面不能为正数）

   2>分割字符串split(",");返回值是一个数组，分割后数组的每个元素都是字符串

    var str="1,2,3,4,5";

    console.log(str.split(","));以逗号这个子串作为分割如果为"123,,"数组为三个元素

   3>字符串元素替换replace，并且返回一个新的字符串，只能替换一个，如果替换多个就用正则

   4>检索字符串indexOf()如果有的话就会返回他的索引值如果没有的话就返回-1。这里的

   一个典型例题就是数组去重，还有search，但是search可以使正则表达式而indexOf不可以用正则

   5>连接字符串concat，返回值是一个新的字符串

   6>charAt(index):返回的是位置字母

   7>match()也是可以传入正则表达式的，返回值是一个数组

   

11.数组对象的常用方法    
push()(又不好的地方可以pushnull和undefined，所以在push的时候要判断数据类型),

        pop(),

        shift(),unshift,

        concat,：返回的是一个新的数组，也会传入一些null和undefined

        splice,：截取和替换第一个参数是起始位置第二个参数是长度，

                 后面的参数是替换的

                 var arr=[1,2,3,4,5,6];
        var newArr=arr.splice(3,3,7,8,9);
        console.log(arr);

                 var arr=[1,2,3,4,5,6];
var newArr=arr.splice(3,3);
console.log(arr);//123

        slice,和splice的区别是不改变原来的数组

        var newArr=arr.slice,(3,3);
console.log(arr);//123456不改变原来的数组

        join,把数组中的每个元素转化为字符串

       var data={name:"jim",age:18,gender:"男"};
var ret=[];
for(var k in data){
ret.push(encodeURIComponent(k)+"="+encodeURIComponent(data[k]))
}
ret.join("&");
console.log(ret);
console.log(ret.join("&"));

        sort,

        reverse

        indexOf(),

        map()(返回的是一个新的数组).arrN=arr.map(v){return v+1;}

        forEach(v,i,arr);v为当前元素，i为索引，arr是当前数组

 12.DOM操作属性与方法

   1>属性

    parentNode：获取父节点

    firstChild：获取第一个子节点

 1.对象的相关概念

   1》概念：无序键值对的集合，一个具体事务的抽象

   2>a:值面量，键值对

      b:构造函数

      c:工厂模式：容错率很高。所以在实际开发中比较常用

       new或者不new都能正确的返回用户想要的对象，可能写法会复杂一些

     function createObj(name,age,gender){
dvar obj={};//
// var obj=new Object();//这个也可以但是性能没有值面量的好
obj.name=name;
obj.age=age;
obj.gender=gender;
obj.sayhello=function(){
console.log("nihao"+name);
};
return obj;
}
var obj=createObj("zs",18,"男");
console.log(obj);

   //利用以后的模板

    function Person(name){
this.name=name;
}
function createPerson(name){
return new Person(name);
}

     3>如果构造函数不通过new来创造一个一个对象返回的是undefined，就当普通函数调用了。

     这里还会出如果是obj.name什么的就会报错，因为undefined本来就没有那么属性

2.Dom操作的属性和方法

  1>属性 

    parentNode：获取父节点                 previousSibling：获取前一个兄弟节点

    firstChild：获取第一个子节点   innerHTML：获取标签内部的所有内容，返回类型为字符串

    lastChild：最后一个子节点                        第二个功能设置当前节点的内容

    nextSibiling：获取下一个兄弟节点

    childNodes:获取当前节点的所有节点包括后代节点（性能特别低）   children：有兼容问题返回的是节点

  nodeType:1元素 nodeType：2属性节点 nodeType:3文本节点

   2>方法：都要通过父节点parentNode去调用

    常用方法：appendChild（node）、insertBefore(newNode,node)newNode要插入的新节点，node是以谁为参照物

             removeChild（node） 、replaceChild(newNode,node);

             node.cloneNode(true|false);true为深拷贝false为浅拷贝

案例：获取当前元素的所有兄弟节点：

   var dom=document.getElementById("dv");
var parent=dom.parentNode;
var elem=parent.firstChild;
var ret=[];
for(;elem;elem=elem.nextSibling){
if(elem.nodeType===1&&elem!==dom){
ret.push(elem);
}
}
console.log(ret);