前端笔记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.age=\'3岁\'
//添加方法(方法一)
boy[\'say\'] = function (value){
    alert(value)
}
//方法二
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自带的一些对象，这些对象供开发者使用，并且提供了一些常用的或者是最基本的功能（属性和方法）。

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) //输出1
 //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; //含最大值，含最小值 
}

封装自己的数学对象

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; i++){
    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.数据类型和堆，栈

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

参考来源：黑马程序员pink老师讲课视频

本文链接：https://www.cnblogs.com/lc-snail/p/15193669.html