js基础-面向对象

1.面向对象

1.1对象

面向对象：可以创建自定义类型，支持继承和多态；特征：封装。继承。多态。

基于对象：无法创建自定义类型

创建空白对象：

var obj=new Object()；

var hero=new Object();
//自定义属性--状态
hero.money=1000;
hero.level=6;
//自定义方法--行为
hero.attack=function(){
   console.log("攻击");
}

1.2创建自定义对象

1.2.1 this

（1）this只出现在函数里；

（2）谁调用函数，this就指的是谁；

（3）new people（）； people中的this代指被创建的对象实例；

1.2.2 构造函数-new

new Object()

new后面调用函数，我们成为构造函数

Object()我们把它视为一个构造函数，构造函数的本质就是一个函数，只不过构造函数的目的是为了创建新对象，为新对象进行初始化。

（1）开辟内存空间，存储新创建的对象

（2）把this设置为当前对象

（3）执行内部代码，设置对象属性和方法

（4）返回新创建的对象

*单个自定义对象

var student=new Object();
student.name="张三";
student.age=18;
student.sayHi=function(){
   console.log("你好");
}

console.log(student.name);
student.sayHi();

*多个对象

var stu1=creatStu("刘1");
var stu2=creatStu("刘2");
console.log(stu1);
stu1.sayHi();
console.log(stu2);
stu2.sayHi();

//创建一个函数，把对象写进函数里
function creatStu(name){
   var student=new Object();
   student.name=name;
   student.sayHi=function (){
       console.log(this.name+"nihao"):
     }   
     return student;
}  

*精简版

var aa=new stu();
console.log(aa);
aa.sayHi();

function stu(){
   this.sayHi=function(){
         console.log("nihao");
    }
}

*多个

var stu1=new Object("王五");
var stu2=new Object("赵六");
console.log(stu1);
stu1.sayhi();
console.log(stu1);
stu1.sayhi();

function Object(){
   this.name=name;
   this.sayhi=function(){
       console.log(this.name+"nihao");
    }
}

1.3 对象字面量（类似python字典）

对象的字面量是以{}存在，里面的属相和方法就是键值对

var o{
   name:"shuke",
   age=18,
   sayhi=function(){
       console.log("nihao");
       }
}; 

JSON

json是JavaScript Object Notation(JavaScript的对象表现形式，是JavaScript的子集)

json和对象字面量的区别：

json的属性必须用双引号引起来

var o{
   "name":"shuke",
   "age"=18,
   "sayhi"=function(){
       console.log("nihao");
       }
}; 

*对象本身没有length，不能用for遍历，用for和in

var aaa={
            "name":"鼠克",
            "age":18,
            "arr":[1,2,3]
        };
        for(var k in aaa){
            console.log(k);//打印的是键,属性
            console.log(aaa[k]);//打印的是值，
        }

制作一个json

var json={};
console.log(json);
for (var i=1;i<10;i++){
   json[i]=i*10;
}
console.log(json);

1.4传值和传址

（1）简单数据类型保存在栈中

a）变量保存的是数据本身

b）简单数据类型传递的是值

c）压栈，先进后出

d）地址值：哈希值

var num=1;
        fn(num);
        console.log(num);
        function fn(aaa){
            aaa=aaa*10;
        }

结果是1；因为num传递的时候是1，但是它的地址没变

*简单数据类型修改变量，在函数内部修改。

（2）复杂数据类型保存在堆中

a）复杂数据类型传地址

b）修改的是同一片内存空间

var obj=new Object();
        obj.name="张三";
        fn2(obj);
        console.log(obj);
        function fn2(Object){
            Object.name="李四";
        }

结果是：“李四”；复杂数据类型传递的是地址，就是哈希值。

1.4内置对象

js中已经定义好的对象，创建之后可以直接使用

2.数组高级API

2.1 API：应用程序编程接口

本质就是函数、方法。

2.2 Array

检测数组：（1）instanceof

                 （2）Array.isArray()

转换数字：（1）tostring（）  把数组转换成字符串

JOIN 是吧数组元素用特殊方式链接成字符串（参数决定用什么连接）

var arr=["关羽","张飞","刘备"];
        var str1 =arr.join();
        var str2 =arr.join(" ");//空格就是空格连接
        var str3 =arr.join("");//空字符串是无缝连接
        console.log(str1);
        console.log(str2);
        console.log(str3);

拓展：伪数组：只在函数中使用，不能修改长短的数组

2.3常用方法

（1）栈操作（先进后出）

a）push（）在数组最后面插入，返回数组长度

b）pop（）取出数组字后一项，返回最后一项

（2）队列操作（先进先出）

a）unshift（）在数组的最前面添加一项

b) shift（）取出数组的最前面一项，返回删除的第一项

var arr=["关羽","张飞","刘备"];
        console.log(arr);
        //在数组末尾添加一个元素
        var aa=arr.push("abc");
        console.log(aa);
        console.log(arr);
        //在数组末尾删除一个元素
        var bb=arr.pop();
        console.log(arr);
        console.log(bb);
        //在数组前面添加元素
        var cc=arr.unshift("def");
        console.log(arr);
        console.log(cc);
        //在数组前面删除一项
        var dd=arr.shift();
        console.log(arr);
        console.log(dd);

（3）数组的反转和排序

var arr=["a","b","c","d"];
        //反转数组：
        console.log(arr);
        console.log(arr.reverse());

此方法能对数字和字母进行排列。只能通过第一位排列

var arr2=[7,6,5,4,3,2,1];
        console.log(arr2);
        console.log(arr2.sort());

var arr2=[7,6,5,4,3,2,1];
        var arr3=[3,5,13,12,14,2,4];
        console.log(arr2);
        console.log(arr2.sort());
        console.log(arr3.sort());
        console.log(arr3.sort(function(a,b){
            return a-b;
                    }));

通过回调函数解决sort排序问题

无参：按照数组元素的首字符对应的uicode编码从小到大排列数组元素

带参：必须为函数（回调函数）。函数中带两个参数，代表数组中的前后元素，如果计算（a-b），返回值为负数，a排在b前面，等于0不动，返回正数，a排在b后面。所以（a-b）是升序；（b-a）是降序。

（4）常用方法

contact（）把参数拼接到当前数组

slice（）把当前数组中截取一个新的数组，不影响原来的数组。参数start从0开始，end从1开始

splice（）删除和替换当前数组的某些项目

indexOf（）、lastindexOf（）查索引分别是从前往后和从后往前，如果没有找到返回-1。

every（）、filter（）、forEach（）、map（）、some（）数组迭代，告别for循环。

var arr1=[1,2,3];
        var arr2=[4,5,6];
        //concat把数组连接到一起
        var arr3=arr1.concat(arr2);
        console.log(arr3);
        //slice数组截取
        var arr4=arr3.slice(2);
        var arr5=arr3.slice(2,4);
        console.log(arr4);
        console.log(arr5);
        //splice删除和替换
        var arr6=arr3.splice(0,3,"关羽","关羽");
        console.log(arr3);//清空的原数组
        console.log(arr6);//清出来元素

var arr=["a","b","c","d"];
        //indexOf给元素查索引
        console.log(arr.indexOf("a"));
        console.log(arr.indexOf("d"));
        console.log(arr.indexOf("x"));
        console.log(arr.lastIndexOf("d"));

every：arr.every（function（element，index，arr）{}）；

a）返回一个boolean值，参数是回调函数

b）对数组的每一项进行函数

c）如果都返回true，every就返回true；如果有一项返回false，every就返回false

var arr=["关羽","张飞","赵云","马超"];
        //every()它的返回值是一个boolean类型的值
        //参数是回调函数
        arr.every(function(element,index,array){
            console.log(element);
            console.log(index);
            console.log(array);
            return true
        }
            );

filter：arr.filter（function（element，index，arr）{}）

a）返回一个新数组,是true的返回，是false的不返回

var arr1=arr.filter(function(ele,index,array){
    if(ele.length>2){
           return true;
       }return false;
  });
console.log(arr1);

forEach

小案例：

（1）["c","a","x","a","x","a"]找到数组中每一个元素出现的次数；利用对象来做。我们想知道，a出现了几次，c出现了几次，x出现了几次。；k:v ..  k:v使用键值对比较方便，而使用数组，不太方便了。
思路：创建一个对象，判断数组中的元素，在对象中是否存在，如果存在，值+1；否则创建一个数组元素的属性，然后给值赋值为1；

var arr=["c","a","x","a","x","a"];
var json={};
for (var i=0;i<arr.length;i++){
    if(json[arr[i]]){
             json[arr[i]]+=1;
       }else{
             json[arr[i]]=1;
       }
}
console.log(json);

（2）  编写一个方法 去掉一个数组的重复元素

var arr5=[1,2,3,4,5,3,4,5];
    console.log(arr5);
    var aaa=fn(arr5);
    console.log(aaa);
    function fn(array){
        var newarr=[];
        for(var i=0;i<array.length;i++){
            var bool=true;//开闭原则
            for(var j=0;j<newarr.length;j++){
                    if(array[i]===newarr[j]){
                        bool= false;
                    }
            }
            if(bool){
                newarr[newarr.length]=array[i];
            }
        }
        return newarr;
    }