JavaScript基础

2022.3.24 学习笔记

目录

二、JavaScript内置对象

2.1 内置对象

2.2 查文档

2.2.1 MDN

2.2.2 如何学习对象中的方法

2.3 Math对象

2.3.1 Math概述

2.3.2 随机数方法 random()

2.4 日期对象

2.4.1 Date概述

2.4.2 Date()方法的使用

2.4.3 日期格式化

2.4.4 获取日期的总的毫秒(时间戳)

2.5 数组对象

2.5.1 创建数组

2.5.2 检测是否为数组

2.5.3 添加、删除数组元素的方法

---

二、JavaScript内置对象

2.1 内置对象

1. JavaScript中对象分为：自定义对象、内置对象、 浏览器对象

2. 前面两种对象是JS 基础内容，属于ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API讲解

3. 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）

4. 内置对象最大的优点就是帮助我们快速开发

5. JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

2.2 查文档

2.2.1 MDN

学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN / W3C来查询。

Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及HTML5 应用的 API。

MDN: https://developer.mozilla.org/zh-CN/

目前网站为全英文版，可使用谷歌浏览器右键转化为中文。

2.2.2 如何学习对象中的方法

1. 查阅该方法的功能

2. 查看里面参数的意义和类型

3. 查看返回值的意义和类型

4. 通过 demo 进行测试

2.3 Math对象

2.3.1 Math概述

Math 对象具有数学常数和函数的属性和方法，而且它不是构造函数，所以不需要new来调用，而是直接使用里面的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

 注意：上面的方法必须带括号。

        

例：封装自己的数学对象

利用对象封装自己的数学对象，里面有PI、最大值和最小值

//封装自己的数学对象——利用对象封装自己的数学对象 里面有PI、最大值和最小值

       var myMath = {

            PI: 3.14159265358,

            max: function () {

                var max = arguments[0];

                for (var i = 1; i < arguments.length; i++) {

                    if (max < arguments[i]) {

                        max = arguments[i];

                    }

                }

                return max;

            },

            min: function () {

                var min = arguments[0];

                for (var i = 1; i < arguments.length; i++) {

                    if (min > arguments[i]) {

                        min = arguments[i];

                    }

                }

                return min;

            }

        }

        console.log(myMath.PI);

        console.log(myMath.max(91, 72, 1, 20, 114));

        console.log(myMath.min(91, 72, 1, 20, -4));

2.3.2 随机数方法 random()

random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1

1.得到一个大于等于0，小于1之间的随机数

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

2.得到一个两数之间的随机数

这个例子返回了一个在指定值之间的随机数。这个值不小于 min（有可能等于），并且小于（不等于）max。

function getRandomArbitrary(min, max) {
          return Math.random() * (max - min) + min;
}

3.得到一个两数之间的随机整数

这个例子返回了一个在指定值之间的随机整数。这个值不小于 min （如果 min 不是整数，则不小于 min 的向上取整数），且小于（不等于）max。
function getRandomInt(min, max) {
          min = Math.ceil(min);
          max = Math.floor(max);
          return Math.floor(Math.random() * (max - min)) + min;   //不含最大值，含最小值
}
4.得到一个两数之间的随机整数，包括两个数在内

上一个例子提到的函数 getRandomInt() 结果范围包含了最小值，但不含最大值。如果你的随机结果需要同时包含最小值和最大值，则可以用getRandomIntInclusive() 函数实现。

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

 案例：猜数字游戏

程序随机生成一个 1~ 10 之间的数字，并让用户输入一个数字

1. 如果大于该数字，就提示，数字大了，继续猜；

2. 如果小于该数字，就提示数字小了，继续猜；

3. 如果等于该数字，就提示猜对了， 结束程序。

改进案例：要求用户只有5次猜测机会

2.4 日期对象

2.4.1 Date概述

Date 对象是一个构造函数，所以需要实例化后才能使用。Date 实例用来处理日期和时间。

2.4.2 Date()方法的使用

1. 获取当前时间必须实例化

var now = new Date();
console.log(now);

2. Date() 构造函数的参数

如果Date()里面写参数，就返回括号里面输入的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date('2019-5-1') 或 者 new Date('2019/5/1')。

如果Date()不写参数，就返回当前时间。

2.4.3 日期格式化

我们想要 2019-8-8 8:8:8 格式的日期，要怎么办？

想获取日期指定的部分，需要手动的得到这种格式。

案例1：输出当前日期 格式为 xx年x月x日 星期x

function getDate() {

            var date = new Date();

            var year = date.getFullYear();

            var month = date.getMonth() + 1;

            var dates = date.getDate();

            var day = date.getDay();

            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

            // 周日返回0，所以写在数组最前面

            return year + '年' + month + '月' + dates + '日 ' + arr[day];

}

console.log(getDate());

案例2：输出当前时间 格式为HH:MM:SS

function getTime() {

            var time = new Date();

            var h = time.getHours();

            h = h > 10 ? h : '0' + h;

            var m = time.getMinutes();

            m = m > 10 ? m : '0' + m;

            var s = time.getSeconds();

            s = s > 10 ? s : '0' + s;

            return h + ':' + m + ':' + s;

}

console.log(getTime());

2.4.4 获取日期的总的毫秒(时间戳)

Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数。

我们经常利用总的毫秒数（即为距离1970年1月1日之后过了多少毫秒）来计算时间，因为它更精确。

// 实例化Date对象
    var now = new Date();

// 1. 用于获取对象的原始值
   console.log(now.valueOf());
   console.log(now.getTime());

// 2. 简单写可以这么做
   var now1 = + new Date();
   console.log(now1);//实际开发中最常用的写法

// 3. HTML5中提供的方法，有兼容性问题
   var now2 = Date.now();
   console.log(now2);

 

案例：倒计时

2.5 数组对象

2.5.1 创建数组

JS中创建数组的方式：1.利用数组字面量创建数组    2.利用new创建数组

注意Array()中A要大写！

1.利用数组字面量创建数组

//1.使用数组字面量创建空数组
var 数组名 = [ ]；

//2.使用数组字面量创建带初始值的数组
var 数组名 = ['东方曜'，'李白'，'韩信'，'西施']；

 2.利用new创建数组

var 数组名 = new Array()；
var arr1 = new Array()；//创建一个新的空数组
var arr2 = new Array(2)；//这个2表示数组的长度为2，数组中含有两个空的数组元素
var arr3 = new Array(1,2)；//等价于[1,2]，表示里面有两个数组元素分别是1和2

2.5.2 检测是否为数组

1. instanceof 运算符，可以判断一个对象是否属于某种类型

2. Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

2.5.3 添加、删除数组元素的方法

案例：筛选数组

有一个包含工资的数组[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);