一.自定义对象

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为属性名或者方法名

前端笔记JS篇之四（面向对象）_字符串

（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篇之四（面向对象）_构造函数_02

二.内置对象

内置对象指的是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; //含最大值，含最小值 
}


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

封装自己的数学对象

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.数据类型和堆，栈

简单数据类型，放到栈里面，存放的是值。

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

​