JS “对象、内置对象” 笔记

MartinYP

已于 2022-07-09 22:11:20 修改

阅读量184

点赞数

文章标签：大数据

于 2022-07-09 20:02:09 首次发布

本文链接：https://blog.csdn.net/MartinYP/article/details/125697912

版权

2022.7.9，周六学习记录博客。

今日学习时长：4h。

学习进度：对象，内置对象（未完）。

对象

复习target

为什么需要对象
如何使用字面量创建对象
如何使用构造函数创建对象
说出 new 的执行过层
如何遍历对象

对象
创建对象的三种方式
new 关键字
遍历对象属性

1.对象

1.1 概念

在JS 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的。

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

2.创建对象

2.1 利用字面量创建对象

对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。

{ } 里面采取键值对的形式表示

键：为属性名
值：为属性值，可以是任意类型的值（数字型、字符串型、布尔型、函数型等）
注意不同属性之间用逗号隔开。
方法赋值时，采用的是匿名函数的形式。

对象的调用

属性调用： 对象.属性名 或者 对象[ '属性名' ] 。注意方括号里面必须加引号
方法调用： 对象.方法名（），注意方法名后要加括号

2.2 利用 new Object 创建对象

利用等号 = 赋值，来追加对象的属性和方法
每个属性和方法之间用分号结束

var obj = new Object();    //创建一个空对象
obj.name = '张三丰';
obj.name = 18;
obj.sex = '男';
obj.sayHi = function(){
    console.log('Hi~~')；
}

2.3 利用构造函数来创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

构造函数名字首字母必须大写
构造函数不需要 return 就可以返回结果
调用构造函数必须使用 new

//构造函数语法格式
function 构造函数名（）{
    this.属性 = 值；
    this.方法 = function(){}
}
new 构造函数名（）；    //调用构造函数
// 示例
function Star(uname,age,sex){
    this.name=uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        console,log(sang);
    }
}
var ldh = new Star('刘德华',18,'男');    //调用构造函数创建对象
var zxy = new Star('张学友',19,'男');
console.log(ldh.name);
console.log(zxy['age']);
ldh.sing('冰雨');

2.4 构造函数与对象

构造函数，如Star（），抽象了对象的公共部分，封装到函数里面，它泛指某一大类
创建对象，如 new Star（），特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

3. new 关键字

new的执行过程

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

4.遍历对象

for...in 语句用于对数组或者对象的属性进行循环操作。

建议用于对象，对象中的方法也可以遍历出来。

for in 的语法格式
for (声明变量 in 对象){
    //代码体
}

//遍历对象
var obj ={
    name:'lyp',
    age:18,
    sex:'男',
    fn:function(){}
}
for(var k in obj){
    console.log(k);         //k 变量 得到的是属性名
    console.log(obj[k]);    //obj[k] 得到的是属性值
}

内置对象

复习target

说出什么是内置对象
根据文档查询指定 API 的使用方法
能使用 Math 对象的常用方法
能使用 Date 对象的常用方法
能使用 Array 对象的常用方法
能使用 String 对象的常用方法

内置对象
查文档
Math对下
日期对象
数组对象
字符串对象

1.内置对象

JS中的对象分为3种：自定义对象、内置对象、浏览器对象。
内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
内置对象最大的优点就是帮助我们快速开发
JS提供了多个内置对象：Math、Date、Array、String等

2.查文档

学习内置对象的使用，可以通过查文档的方式学习，常用的查询文档网站有：MDN、W3C。

3.Math对象

3.1 常用函数

Math数学对象不是构造函数，不需要使用 new 来调用就可以直接使用。它具有数学常数和函数的属性和方法。

1.绝对值方法
console.log(Math.abs(-1));    //1
console.log(Math.abs('-1'));  //1, 存在隐式转换，会将字符型数据转换成数字型数据再进行绝对值转换
console.log(Math.abs('pink'));// NaN
2.三个取整数的方法
(1)Math.floot() 向下取整，往小取值
console.log(Math.floor(1.1));    // 1
console.log(Math.floor(1.9));    // 2
(2)Math.ceil() 向上取整，往大取值
console.log(Math.ceil(1.1));     // 2
console.log(Math.ceil(1.9));     // 2
(3)Math.round() 四舍五入法，其他数字都是四舍五入，但.5特殊往大取值
console.log(Math.round(1.1));    // 1
console.log(Math.round(1.9));    // 2
console.log(Math.round(1.5));    // 1.5
console.log(Math.round(-1.5));   // -1
console.log(Math.round(-2));     // -2

3.2 随机数 Math.random()

//1.代码示例：Math.random()
console.log(Math.random());
//2. 得到两个数之间的随机整数，并且包含这两个数
function gerRandom(min,man){
    return Math.floor(Math.random() * (max - min +1) + min);
}
console.log(getRandom(1,10));
// 随机点名案例
var arr = ['张三','张三疯','李四','李思思','盖伦','子威']
console.log(arr[getRandom(0,arr,length - 1)]);

案例2：猜数字游戏
//1.随机生成一个 1-10的整数，我们需要用到 Math.random()方法。
//2.需要一直猜到正确为止，所以需要一直循环。
//3.while 循环比较适合
//4.核心算法：使用 if else if 多分支语句来判断大于、小于、等于
function getRandom(min,max){
    return Math.floor(Math.random() * (max - min +1) + min;)
}
var random = getRandom(1,10);
while(true){
    var num = prompt('你来猜？ 输入1-10之间的一个数字');
    if(num > random){
        alert('你猜大了');    
    } else if( num < random){
        alert('你猜小了');    
    } else {
        alert('你好帅哦，猜对了');
        break; // 退出整个循环程序，避免死循环    
    }
}

4.日期对象

4.1 概述

Date 对象和 Math 对象不一样，是一个构造函数，需要实例化（创建对象）后才能使用。Date 对象一般用来处理日期和时间。

4.2 使用方法

（1）获取当前方法必须实例化

（2）Date() 构造函数的参数：如果没有参数，就返回当前系统的当前时间。如果括号里有时间，就返回参数里的时间。例如日期格式字符串为 '2019-5-1'，可以写成 new Date('2019-5-1') 或者 new Date('2019/5/1')。

4.3 日期格式化

如果需要获取日期指定的部分，可以通过以下方法手动得到这类日期格式。

格式化日期 年月日
var date = new Date();
console.log(date.getFullYear());   //返回当前日期的年
console.log(date,getMonth()+1)；   //返回月份，但比当前的月份小1月。即返回的月份是0-11之间。
console.log(date.getDate());       //返回的是 几号
console.log(date.getDay());        //返回的是周几。周一返回1，周六返回6，周日0
// 案例，输出当前日期，格式化为： XXXX年X月X日 星期X
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr[day]);

案例2：要求封装一个函数返回当期的时分秒  格式为：08:08:08
function getTimer(){
    var time = new Date();
    var h = time.getHours();
    h = h <10 ? '0' +h : h; //如果小时数小于0，就在h前面添加字符“0”
    var m = time.getMinutes();
    m = m <10 ? '0' +m : m;
    var s = time.getSeconds();
    s = s <10 ? '0' +s : s;
}

4.4 获得时间戳

以下方法可获得Date总的毫秒数（时间戳）。不是当前时间的毫秒数，而是距离1970年1月1日过了多少毫秒。

通过 valueOf()、getTime() 获得
通过 +new Date() 获得
H5 新增的方法： Date.now() 获得

//1.valueOf()  getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
//2. +new Date()
var date1 = +new Date();
console.log(date1);
//3. H5新增的方法 Date.now()
console.log(Date.now());

4.5 案例倒计时

制作一个倒计时效果的案例

核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时。但不能拿时分秒直接相减，比如05分减去25分，结果会是负值。
用时间戳解决。用于输入时间的时间戳减去当前时间的时间戳，得到的就是剩余时间的毫秒数。
把剩余时间的毫秒数转换为天、时、分、秒等

公式如下：

function countDown(time){
    var nowTime = +new Date();     //返回当前时间总毫秒数
    var inputTime = +new Date(time);    //返回的是用户输入时间总的毫秒数
    var times = (inputTime - nowTime) / 1000;    //times是剩余时间的总秒数
    var d = parseInt(times /60 /60 / 24);    //天
    d = d < 10 ? '0' + d:d;
    var h = parseInt(times /60 /60 % 24);    //小时
    h = h < 10 ? '0' + h:h;
    var m = parseInt(times /60 % 60);    //分
    m= m < 10 ? '0' + m:m; 
    var s =parseInt(times % 60); //秒s
    s = s < 10 > '0' + s:s;
    return d + '天' + h +'时' + m + '分' + s + '秒'；
}
console.log(countDown('2022-12-1 18:00:00'));

5.数组对象

5.2 检测是否为数组

instanceof 运算符。
Array.isArray(参数) 方法。

//1.instanceof
var arr =[];
var obj ={};
console.log(arr instanceof Array);    // true
console.log(arr instanceof Array);    // false
//2. Array.isArray(待测参数);
console.log(Array.isArray(arr));    //true
console.log(Array.isArray(obj));    //false

5.3 添加删除数组元素的方法

//示例
var arr = [1,2,3];
console.log(arr.push(4,'pinke'))    //结果是 5，返回数组长度
//此时 arr的数组元素为 [1,2,3,4,'pink'];

//案例 筛选数组
// 有一个包含工资的数组[1500,1200,2000,2100,1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500,1200,2000,2100,1800];
var newArr =[];
for(var i = 0; i < arr.length; i++){
    if(arr[i] < 2000){
        //以前做法:newArr[newArr.length] = arr[i];
        newArr.push(arr[i]);    
    }
}
console.log(newArr);

5.4 数组排序

//1.翻转数组
var arr = [1,2,3,4,5,6];
arr.reverse();
console.log(arr);    //输出 6,5,4,3,2,1

//2.数组排序（冒泡排序法）
var arr1 = [13,4,77,1,7];
arr1.sort(function(a,b){
    return a - b;    //升序排列
    // return b-a; 则是降序排列
})
console.log(arr1);    // 输出 1,4,7,13,77；
// 调用sort方法时，不能漏写里面的function

5.4 数组索引方法

indexOf（）。从前往后查找，返回找到的第一个元素的索引号
lastIndexOf()。从后往前查找，返回找到的第一个元素的索引号。

//示例
var = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));    //返回2
console.log(arr.lastIndexOf('blue'));    //返回4

5.5 案例数组去重

数组去重，要求去除数组中重复的元素

目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中。
核心算法：遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，就添加到新数组中，否则不添加
怎么知道该元素在新数组中是否存在？利用新数组.indexOf(数组元素) 如果返回是 -1 则说明，新数组里面没有改元素。
要求将代码封装成一个函数

function unique(arr){
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(newArr.indexOf(arr[i] === -1)){
            newArr.push(arr[i]);        
        }    
    }
    return newArr;
}
var demo = unique(['blue','green','blue']);
console.log(demo);

5.6 数组转换成字符串

//1.toString() 将我们的数组转换为字符串
var arr = [1,2,3];
console.log(arr.toString());    //1,2,3
//2.join(分隔符)
var arr1 = ['green','blue','pink'];
console.log(arr1.join());    //green,blue,pink
console.log(arr1.join('-')); //green-blue-pink
console.log(arr1.join('&')); //green&blue&pink