JavaScript Day07 JavaScript面向对象详解 2

简介: JavaScript Day07 JavaScript面向对象详解

2.Math对象

Math 对象用于执行数学任务。

2.1使用 Math 的属性和方法的语法:

// 获取π的值
var pi = Math.PI;
console.log(pi); //3.141592653589793
// 求平方根
var sqrt_value = Math.sqrt(16);
console.log(sqrt_value); //4

**注释:**Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。

  • 对象属性
属性 描述
E 返回算术常量 e,即自然对数的底数(约等于2.718)。
LN2 返回 2 的自然对数(约等于0.693)。
LN10 返回 10 的自然对数(约等于2.302)。
LOG2E 返回以 2 为底的 e 的对数(约等于 1.414)。
LOG10E 返回以 10 为底的 e 的对数(约等于0.434)。
PI 返回圆周率(约等于3.14159)。
SQRT1_2 返回返回 2 的平方根的倒数(约等于 0.707)。
SQRT2 返回 2 的平方根(约等于 1.414)。
  • 对象方法

Math对象方法过多,只需掌握常用的即可,其他可参考MDN文档

常用方法
比较方法

Math.min() //求一组数中的最小值

console.log(Math.min(2,1,3,4,4)); //1

Math.max() //求一组数中的最大值

console.log(Math.max(2,1,3,4,4)); //4
将小数值舍入为整数的几个方法

Math.ceil() 向上舍入

console.log(Math.ceil(2.1)); //3

Math.floor() 向下舍入

console.log(Math.floor(2.7)); //2

Math.round() 四舍五入

console.log(Math.round(2.7)); //3
console.log(Math.round(2.1)); //2
随机数

Math.random() 返回大于0小于1的一个随机数 [0,1)

console.log(Math.random()); // 随机数


1.3.Date对象

Date 对象用于处理日期和时间。是JS提供的内置构造函数。

创建Date对象的语法:
var myDate = new Date();
console.log(myDate); //2021-08-30T14:27:30.481Z
//在node环境和浏览器环境输出不同

Date 对象会自动把当前日期和时间保存为其初始值。

new Date() 在传入参数的时候,可以获取到一个你传递进去的时间
var time = new Date('2020-06-06 06:06:06')
console.log(time) 
// node环境下  2020-06-05T22:06:06.000Z
// 浏览器环境下 Sat Jun 06 2020 06:06:06 GMT+0800 (中国标准时间)
还可以传递多个数字参数
// 第一个参数表示年
// 第二个参数表示月份,月份从0开始计数,0表示1月,11表示12月
// 第三个参数表示该月份的第几天,1~31
// 第四个参数表示当天的几点,0~23
// 第五个参数表示的是该小时的多少分钟,0~59
// 第六个参数表示该分钟的多少秒,0~59
var time = new Date(2020, 00, 1, 10, 10, 10);
console.log(time);
// node环境下  2020-01-01T02:10:10.000Z
// 浏览器环境下 Wed Jan 01 2020 10:10:10 GMT+0800 (中国标准时间)
  • 常用对象方法
var time = new Date();
// 获取当前时间,使用toString()进行转换
console.log(time.toString()); //Mon Aug 30 2021 22:52:12 GMT+0800 (GMT+08:00)
// 获取当前时间 本地化字符串
console.log(time.toLocaleString()); // 2021-8-30 22:52:12
// getFullYear() 方式是得到指定字符串中的哪一年
console.log(time.getFullYear()) // 2021
// getMonth() 方法是得到指定字符串中的哪一个月份
// 这里要有一个注意的地方
// 月份是从 0 开始数的
// 0 表示 1月,1 表示 2月,依此类推
console.log(time.getMonth()) // 7  实际是8月
// getDate() 方法是得到指定字符串中的哪一天
console.log(time.getDate()) // 30
// getHours() 方法是得到指定字符串中的哪小时
console.log(time.getHours()) // 22
// getMinutes() 方法是得到指定字符串中的哪分钟
console.log(time.getMinutes()) // 45
// getSeconds() 方法是得到指定字符串中的哪秒钟
console.log(time.getSeconds()) // 23
// getDay() 方法是得到指定字符串当前日期是一周中的第几天(周日是 0,周六是 6)
console.log(time.getDay()) // 1
// getTime() 方法是得到执行时间到 格林威治时间 的毫秒数 时间戳
console.log(time.getTime()) // 1630334723399

其他方法可查看https://www.w3school.com.cn/jsref/jsref_obj_date.asp

2.扩展库

a.Moment.js

JavaScript日期处理类库

Node.js中使用
// 在当前目录下使用node安装moment库
npm install moment --save
// 模块化导入moment
var moment = require('moment');
// 设置本地语言为中文
require('moment/locale/zh-cn')
moment.locale('zh-cn');
// 根据对应的格式输出当前时间
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
//八月 30日 2021, 11:07:46 晚上
浏览器中使用
// 可以下载js文件,也可使用对应的cdn文件,bootcdn
<script src="moment.js"></script>
<script>
    moment().format();
</script>
时间戳转换
console.log(moment(parseInt(1630334723399)).format('YYYY-MM-DD HH:mm:ss'));
//2021-08-30 22:45:23
//有关format的格式,参考http://momentjs.cn/docs/#/displaying/format/

其他方法见http://momentjs.cn/

b.lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

Lodash 遵循 MIT 开源协议发布,并且支持最新的运行环境。 查看各个构件版本的区别并选择一个适合你的版本。

https://www.lodashjs.com/

解决浅拷贝问题
var _ = require('lodash');
var obj = {
  name:'zhangsan',
  age: 18
}
// 使用cloneDeep方法
var obj2 = _.cloneDeep(obj);
obj2.age = 20;
console.log(obj); // { name: 'zhangsan', age: 18 }
console.log(obj2); // { name: 'zhangsan', age: 20 }
_.chunk(array, [size=1])

定义

将数组(array)拆分成多个 size 长度的区块,并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块,那么最后剩余的元素将组成一个区块。

参数

array (Array): 需要处理的数组


[size=1] (number): 每个数组区块的长度

返回

(Array): 返回一个包含拆分区块的新数组(相当于一个二维数组)。

示例

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]
_.compact(array)

定义

创建一个新数组,包含原数组中所有的非假值元素。例如false, null, 0, “”, undefined, 和 NaN 都是被认为是“假值”。

参数

array (Array): 待处理的数组

返回

(Array): 返回过滤掉假值的新数组

示例

_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]
_.drop(array, [n=1])

定义

创建一个切片数组,去除array前面的n个元素。(n默认值为1。)

参数

array (Array): 要查询的数组。

[n=1] (number): 要去除的元素个数。

返回

(Array): 返回array剩余切片。

示例

_.drop([1, 2, 3]);
// => [2, 3]
_.drop([1, 2, 3], 2);
// => [3]
_.drop([1, 2, 3], 5);
// => []
_.drop([1, 2, 3], 0);
// => [1, 2, 3]

_.indexOf(array, value, [fromIndex=0])

定义


返回首次 value 在数组array中被找到的 索引值, 如果 fromIndex 为负值,将从数组array尾端索引进行匹配。


参数


array (Array): 需要查找的数组。

value (*): 需要查找的值。[fromIndex=0] (number): 开始查询的位置。

返回

(number): 返回 值value在数组中的索引位置, 没有找到为返回-1。

示例

_.indexOf([1, 2, 1, 2], 2);
// => 1
// Search from the `fromIndex`.
_.indexOf([1, 2, 1, 2], 2, 2);
// => 3
_.uniq(array)

定义

创建一个去重后的array数组副本。只有第一次出现的元素才会被保留。

参数

array (Array): 要检查的数组。

返回

(Array): 返回新的去重后的数组。

示例

_.uniq([2, 1, 2]);
// => [2, 1]


目录
相关文章
|
7月前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(三)
深入JS面向对象(原型-继承)
55 0
|
7月前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
65 0
|
6月前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
153 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
7月前
|
前端开发 JavaScript
前端 JS 经典:Class 面向对象
前端 JS 经典:Class 面向对象
39 1
|
7月前
|
JavaScript 前端开发
JavaScript 原型链继承:掌握面向对象的基础
JavaScript 原型链继承:掌握面向对象的基础
|
7月前
|
JavaScript 前端开发 API
在Node.js上使用dojo库进行面向对象web应用开发
请注意,虽然这个例子在Node.js环境中使用了Dojo,但Dojo的许多功能(例如DOM操作和AJAX请求)在Node.js环境中可能无法正常工作。因此,如果你打算在Node.js环境中使用Dojo,你可能需要查找一些适用于服务器端JavaScript的替代方案。
69 0
|
7月前
|
JSON JavaScript 前端开发
深入JS面向对象(原型-继承)(四)
深入JS面向对象(原型-继承)
50 0
|
7月前
|
设计模式 JavaScript 前端开发
深入JS面向对象(原型-继承)(二)
深入JS面向对象(原型-继承)
68 0
|
7月前
|
设计模式 前端开发 JavaScript
深入认识:JavaScript中的面向对象
深入认识:JavaScript中的面向对象
57 0
|
7月前
|
Web App开发 JavaScript 前端开发
深度刨析 JavaScript 模拟面向对象的内部机制
深度刨析 JavaScript 模拟面向对象的内部机制
100 0