前端基础JS篇之面向对象

一.自定义对象

1.基本概念

万物皆是对象，对象是一个具体的事物。

（1）构成

对象的是由特征（属性），行为（方法）来构成。

(2)分类

自定义对象，内置对象，浏览器对象（前两个属于ECMAscript,最后一个属于js独有）

2.创建对象的三种方法

(1)字面量 { }创建对象

<script>
   // var obj ={};   //创建一个空的的对象
   var obj= {
        uname: '张三',            //对象属性
        age：18，                  //对象属性
        sex: '18',
        say: function( ) {
            console.log('hi~');     //创建一个方法
        }
  }
</script>

注：
1.属性或者方法采用的是键值对的形式，中间用冒号隔开;
2.多个属性或者方法之间用逗号隔开;
3.创建方法 —— 冒号后面跟的是一个匿名函数

（2）利用关键字 new Object创建对象

<script>
    var obj = new Object(); //创建一个空的对象
    //添加属性
    obj.uname = '张学友';
    obj.sing = '李香兰';
    //添加方法
    obj.say = function() {
        console.log('我是张学友');
      }
</script>

注释：

用关键字new Object创建的对象，添加属性和方法要用等号直接赋值的方式添加。

(3)利用构造函数创建对象

1.把多个对象都有的属性和方法装到函数里面，这个函数称为构造函数。
2.可以重复使用一部分代码

语法

function Fun_name() {
	this.属性=值；
	this.方法=function(){}
}

<script>
    //创建构造函数
    function Star(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
            console.log(sang);
        }
    }
    //调用构造函数
    var ldh = new Star('刘德华', '男', '18');
    console.log(typeof(ldh)); //输出为object
    
  //调用对象ldh属性和方法
    console.log(ldh.name);
    console.log(ldh.age);
    console.log(ldh.sex);
    ldh.sing('冷雨夜');
</script>

注:

1.构造函数的首字母要大写
2.构造函数不需要return就可以返回结果
3.调用构造函数前面要加 new
4.在构造属性和方法的前面要加this

(4)构造函数与对象

构造函数 ：相当于一个类，抽象了对象的公共部分。
对象：通过关键字new来创建对象，称为实例化对象。
对象的本质：一组无序的相关属性和方法的集合。

（5）new和this的那点事

1.new在内存中创建一个新的空对象
2.让this指向这个新的对象
3.执行构造函数里面的代码，给这个新对象添加属性和方法
4.返回这个新对象（所以构造构造函数不需要return)

3.访问属性和方法

（1）访问属性

//方法一
console.log(obj.uname);  
//方法二，属性名要用引号引起来
console.log(obj['uname']);   

（2）调用方法

console.log(obj.say());

4.添加对象的属性和方法

function Obj(name,sex) {
         this.name = name;
        this.sex = sex;
        }
 var boy = new Obj('lc-snail','糙汉子')
//添加属性
boy['age']='3岁'
//添加方法
boy['say'] = function (value){
    alert(value)
}
//调用新添加的方法
boy.say('hello word');
//调用新添加的属性
console.log(boy['age']);

5.遍历对象

(1)方法二

for...in

<script>
  //创建一个对象
     var obj = {
              name: 'snail_y',
              age: 18,
              sex: '男'
       
           }
    //遍历<object>
    for (var key in obj) {
          console.log(key + '----' + obj[key]);
      }
</script>

注：

key为属性名或者方法名

（2）方法二

Object.keys/values（obj）

<script>
     //创建一个对象
     var obj = {
          name: 'snail_y',
          age: 18,
          sex: '男',
          say: function() {
             console.log('hi~'); //创建一个方法
          }
      }
      console.log(Object.keys(obj))
      console.log(Object.values(obj))
</script>

二.内置对象

js中分为三种： 自定义对象，内置对象，浏览器对象

内置对象指的是js自带的一些对象，这些对象供开发者使用，并且提供了一些常用的或者是最基本的功能（属性和方法）。

1.Math数学对象

Math数学对象,不需要new,直接调用就行

取最大值

console.log(Math.max(1,2,3))    //输出3
console.log(Math.max(1,2,'我是调皮捣蛋字符串'))  //输出NaN

取绝对值

Math.abs()

三个取整的方法

 //Math.floor( ) 向下取整
Math.floor(1.999) //输出0
 //Math.ceil( ) 向上取整
Math.ceil(0.555)   //输出1
 //Math.round（） 四舍五入
Math.round(0.666)   /输出1

获取一个随机数

Math.random() 获取 一个浮点型伪随机数字，在0（包括0）和1（不包括）之间。

function getRandom() {
  return Math.random();
}

得到一个两数之间的随机整数（不含最大值，含最小值）

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}

得到一个两数之间的随机整数，包括两个数在内

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
}

更多方法和属性查看文档（https://developer.mozilla.org/zh-CN）

封装自己的数学对象

// //Math数学对象,直接调用就行
// console.log(Math.max(1,2,3))    //输出3
// console.log(Math.max(1,2,'我是调皮捣蛋字符串'))  //输出NaN
//利用对象封装自己的数学对象
var myMath = {
    PI: 3.1415926,
    max: function () {
        var max = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            if (arguments[i] > max) {
                max = arguments[i];
            }
        }
        return max;
    },
    min: function () {
        var min = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            if (arguments[i] < min) {
                min = arguments[i];
            }
        }
        return min;
    }
}
//调用属性
console.log(myMath.PI);
console.log(myMath.max(1, 2, 3, 4));

2.日期对象

Date()是构造函数，需要用new实例化

//1.不带参数
var date = new Date(); 
console.log(date);       //返回系统当前时间

//2.带参数  
数字型   2019,10,18
字符串型   '2019-10-20 8:8:8'
var date = new Date('2019-10-20 8:8:8');
console.log(date);       //输出的是输入的时间

格式化日期

var date = new Date();
console.log(date.getFullYear());//返回年
console.log(date.getMonth() + 1);  //月  会比当前月份少1
console.log(date.getDate());  //日
console.log(date.getDay()); //星期 返回的是0——6
console.log(date.Hours()); //时
console.log(date.getMinutes())；  //分
console.log(date.getSeconds())； //秒

dmeo1——输出时分秒

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var dates = date.getDate();
var day = date.getDay();
var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var arr_1 = arr[day];
console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr_1)
//输出今天是2020年2月16日星期一

dmeo2——输出时分秒

function getTime() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
console.log(getTime());

时间戳

距离1970/1/多少毫秒

<script>
    var date = new Date();
    //方法一
    console.log(date.valueOf());    //O是大写
    //方法二
    console.log(date.getTime());
    //方法三
    var date1 = +new Date();   //new后面没点
    console.log(date1);
    //方法四H5新增
    console.log(Date.now());
</script>

倒计时

function counDown(time) {
    var nowTime = +new Date(); //获取当前时间戳
    var inputTime = +new Date(time);  //用户输入结束时间
    var times = (inputTime - nowTime) / 1000; //所剩的秒数
    var d = parseInt(times / 60 / 60 / 24); //所剩天数
    d = d > 10 ? d : '0' + d;
    var h = parseInt(times / 60 / 60 % 24);  //小时
    h = h > 10 ? h : '0' + h;
    var m = parseInt(times / 60 % 60);  //分钟
    m = m > 10 ? m : '0' + m;
    var s = parseInt(times % 60);  //秒
    s = s > 10 ? s : '0' + s;
    return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(counDown('2020-3-16 18:59:00'))

3.字符串对象

(1)简单数据类型的包装:

var temp = new String('andy');
//把临时变量的值给str
str=temp;
//销毁这个临时变量
temp= null;

包装后

var str = 'andy';
console.log(str.lengtht);      //只有复杂数据类型和对象才有属性和方法

注释：

1.只有对象才有方法和属性 ，复杂数据类型才有属性和方法。
2.简单的数据类型（String Number Boolean）包装为复杂数据类型

(2)字符串的不可变

重新赋值只是里面的值不可改变，虽然看上去可以改变内容但其实是内存地址变了，内存中新开辟了一个内存空间。

var str = 'abc';
str = 'hello';
console.log(str) //输出hello,但是原来的abc还在内存中，大量使用字符串会用效率问题。

(3)字符串查找

根据字符返回索引

如果未找到该值，则返回-1，如果找到，则返回第一次出现的索引。

indexOf('要查找的字符'，开始的位置)       //从前往后找，只返回第一个

lastindexOf( )       //从后往前找，只返回第一个

demo —— 查找某个字符，在字符串中出现的次数和出现的位置

var str = 'abcdefgjklabcdeddeeac';
var index = str.indexOf('a');
var num = 0;
while (index !== -1){
    console.log(index);
    index = str.indexOf('a',index + 1);
    num++
}
console.log('a' + '出现的次数为' + num);

根据索引返回字符

输出改索引位置的字符，如果指定的 index 值超出了该范围，则返回一个空字符串。

//方法一
charAt(index)   //返回字符
//方法二
charCodeAr(index)  //返回字符的ASCLL码
str[index]          //HTML5新增

demo —— 返回字符串里面出现次数最多的值

var str = 'aaaaasdfghjkklqwreeeryifnnbaaaddd';
var a = {};
for (var i = 0; i < str.length; {
    var chars = str.charAt(i);//获取字符串的每一个字符
    if(a[chars]) {           //判断该字符是否存在对象中
        a[chars]++;  //，如果存在就+1
    }else {
        a[chars] = 1;//，如果不存在就赋值为1.
    }
}
 console.log(a)
var max = 0;
var ch = '';
for (var k in a) {
    //k得到的是属性名
    //a[k]得到的是属性值
    if (a[k] > max) {
        max = a[k];
        ch = k;
    }
}
console.log('出现次数最多的是' + ch);

(4)截取字符串

substr（开始位置，截取几个字符）

var str1 = '改革春风春';
console.log(str1.substr(2, 2)); //返回春风

(5)字符串的替换

replace(被替换的字符，替换字符)

注：只会替换字符串中第一个出现的字符

demo —— 替换字符串中所有的某个字符

var str1 = 'aaaabbbbb';
while (str1.indexOf('b') !== -1) {
    str1 = str1.replace('b', 'a');
}
console.log(str1);

5.字符串转换为元组

split( '分隔符’)

var str = 'red,blue,pink';
console,log(str.split(',')  //输出 ['red','blue','pink'}

三.数据类型和堆，栈

1.简单数据类型和复杂数据类型

简单数据类型：

称为基本数据类型在存储时变量中存储的是值本身，因此又叫做值类型。如：string number boolean undefined nul

复杂数据类型：

在存储变量中存储的是地址（引用），因此又叫做引用数据类型，通过new关键字创建对象，如，Object Arrary,Date等

2.数据类型和堆，栈

简单数据类型，放到栈里面，存放的是值。
复杂数据类型放到堆里面，在栈里面放地址，地址指向堆里面的数据。