初识JavaScript（九）对象（二）
1 Math对象
Math 对象。
1：js的内置对象，工具对象，定义了大量的静态方法。用于数学计算的。
还有和数学计算相关的常量。
2：常量。
Math.E // 返回欧拉指数（Euler’s number）
Math.PI // 返回圆周率（PI）
Math.SQRT2 // 返回 2 的平方根
Math.SQRT1_2 // 返回 1/2 的平方根
Math.LN2 // 返回 2 的自然对数
Math.LN10 // 返回 10 的自然对数
Math.LOG2E // 返回以 2 为底的 e 的对数（约等于 1.414）
Math.LOG10E // 返回以 10 为底的 e 的对数（约等于0.434）
3: 工具方法
1弧度===180/Math.PI
<body>
<script>
//常量
console.log (Math.PI);//3.141592653589793
//工具方法
console.log (Math.random());//[0.0-1.0)
console.log (Math.ceil(1.1));//2
console.log (Math.floor(2.9));//2
console.log (Math.sqrt(9));//3
console.log (Math.tan(45*Math.PI/180));//1
console.log (Math.sin(30*Math.PI/180));//0.5
console.log (Math.pow(2,3));//8
console.log (Math.round(4.5));//5
console.log (Math.max(1,2,4,54,67,4,3,56,4));//67
console.log (Math.min(1,2,4,54,67,4,3,56,4));//1
console.log (Math.abs(-1));//1
</script>
</body>
2 Date对象
Date是js用于处理日期和时间的代码库。
Date对象以1970年1月1日为时间原点。
1: Date作为工具方法直接调用。
返回的是一个西方的日期字符串对象。
2：Date作为构造函数使用。
1：无参调用：返回系统当前时间对象。
2：可以传入指定时间的日期字符串。得到的是一个指定日期的对象。
3：静态方法。
Date.now(): 当前的系统时间和时间原点的时间差，以毫秒返回。
1s=1000毫秒
1s=1000000微秒
1s===1000000000纳秒
Date.parse(str):用于解析时间字符串的。得到传入的参数的时间和时间原点的时间差，毫秒返回。
如果解析不成功返回 NaN
4：实例方法：
a：to 类：将日期对象转换为字符串。**
b：get 类：得到当前日期对象的某些属性的。***
c：set 类：设置当前日期对象的某些属性。**
5：结论：
1：月份的返回值是0-11. 必须做+1操作才能和月份对上。
2：getDay() 的返回值是 0-6 .代表了周日到周六。西方国家的一周的开始的第一天是周日。
3：中国的时区在东八区，-480分钟。
4：日期对象直接相减，返回的是两个时间的毫秒差
<body>
<script>
//1 Date作为工具方法直接调用。
var date = Date();
console.log (typeof date);//string
console.log (date);//Thu Aug 06 2020 09:53:57 GMT+0800 (中国标准时间)
// 2：Date作为构造函数使用。
var date = new Date();
console.log (typeof date);//object
console.log (date);//Thu Aug 06 2020 09:55:46 GMT+0800 (中国标准时间)
var date = new Date("2020/10/10 10:10:10");
console.log (typeof date);//object
console.log (date);//Thu Aug 06 2020 09:55:46 GMT+0800 (中国标准时间)
// 3：静态方法。
var now = Date.now();
console.log (typeof now);//number
console.log (now);//1596679208271
var date = Date.parse("2020/10/10 10:10:10");
console.log (typeof date);//number
console.log (date);//1602295810000
//4:实例方法
var date = new Date();
//to 类
console.log (date.toString());//Thu Aug 06 2020 10:08:53 GMT+0800 (中国标准时间)
console.log (date.toLocaleString());//2020/8/6 上午10:09:25
console.log (date.toLocaleDateString());//2020/8/6
console.log (date.toLocaleTimeString());//上午10:10:54
console.log (date.toISOString());//2020-08-06T02:11:52.546Z
console.log (date.toUTCString());//Thu, 06 Aug 2020 02:11:52 GMT
console.log ("----------------");
//get 类
console.log (date.getDay());//4： 周4
console.log (date.getFullYear());//2020
console.log (date.getMonth());//8月：[0-11]
console.log (date.getDate());//6号：6
console.log (date.getHours());//10
console.log (date.getMinutes());//16
console.log (date.getSeconds());//17
console.log (date.getMilliseconds());//123
console.log (date.getTimezoneOffset());//-480 480分钟的时差
console.log (date.getTime());//1596680161124
console.log (Date.now());//1596680161128
//set 设置日期对象的属性
date.setDate(6);//设置到本周日
console.log (date.toLocaleString());
console.log (date.getDay());//0
</script>
</body>
<body>
<!--
1：将当前系统时间转换为指定格式的时间字符串。
格式：xxxx年xx月xx日 星期x xx时xx分xx秒xxx毫秒
2：计算当前时间距离2021-1-1还有多少天？
-->
<script>
/**
* 对指定的日期date进行pattern格式的字符串格式化
* @param date
* @param pattern
*/
function formatDate(date,pattern) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var date1 = date.getDate();
var week = date.getDay();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var milliseconds = date.getMilliseconds();
var result = year+"年"+month + "月"+date1+"日"+" " + toWeekStr(week) + " " + hours +"时"+minutes+"分"+seconds+"秒"+milliseconds+"毫秒";
return result;
}
//根据day的值返回对应的星期几的字符串
function toWeekStr(day) {
var weeks = ["日","一","二","三","四","五","六"];
return "星期"+weeks[day];
}
var date = new Date();
console.log (formatDate(date));
//返回两个日期对象的天数的间隔。向上取整。
function intervalDays(minDate,maxDate) {
// var minTime = minDate.getTime();
// var maxTime = maxDate.getTime();
//两个时间的毫秒的时间差。
// var interval = maxTime-minTime;
//日期对象直接相减，返回的是两个时间的毫秒差
var interval = maxDate-minDate;
return Math.ceil(interval/dayMillis());
}
//一天的毫秒数
function dayMillis() {
return 24*60*60*1000;
}
console.log (intervalDays(new Date(),new Date("2021-1-1")));
</script>
</body>
3 String对象简介
String 对象是js的内置对象。
是js的三大包装对象之一。 Number、Boolean、String
1：工具方法使用。将任意类型转换为字符串。
2：构造函数：创建字符串对象。
3: String对象提供了大量的用于操作字符串实例的方法。
<body>
<script>
// 1：工具方法使用。将任意类型转换为字符串。
console.log (String({}));//[object Object]
var obj = {}
console.log (obj.toString());//[object Object]
// 2：构造函数：创建字符串对象。
var str1 = new String("abc");
var str2 = "abc";
console.log (typeof str1);//object
console.log (typeof str2);//string
</script>
</body>
4 String对象的创建方式
字符串对象的创建方式：
1：构造函数式。 **
2：字面量直接赋值。基本数据类型string，但是当我们需要将它当对象使用的时候，直接赋值的变量会被转换为对象使用。
<body>
<script>
// 1：构造函数式。
var str = new String("abc");
console.log (typeof str);//object
// 2：字面量直接赋值
var str1 = "abc";
console.log (typeof str1);//string
//下面的代码"abc"会隐式转换为对象。
console.log ("abc".charAt(1));//6
//会将基本数据类型的1.使用Number构造函数转换为Object对象。
(1).toFixed();
</script>
</body>
5 String对象的访问方式-类数组方式
String：字符串类型。
字符串对象是若干个字符的集合。
**字符串对象的底层实现：底层使用字符数组来存储字符对象中的所有的字符。
字符串对象不是数组。不能使用数组的实例方法。
但是js还给字符串对象提供了一些类似于数组的访问方式来访问字符串。
类数组的访问方式：
1: 可以使用下标来访问字符串中的所有的字符。0序的。自然顺序。
2：字符串也有长度的属性，length，代表了字符的个数。
3: 可以使用基本的for循环，像遍历数组一样的去遍历字符串中的字符。
4：不能使用delete 来删除字符。也不能像数组一样的方式来修改字符。
5：不能使用数组特有的实例方法。
***总结：虽然字符串底层使用了数组，可以使用某些类数组的操作去操作字符串
但是不建议使用这样的方式去访问字符串。应该用它特有的方式去访问。
<body>
<script>
var str = "abc";
//字符数组的方式访问
console.log (str[0]);//a
console.log (str.length);//3
for (let i = 0; i < str.length; i++) {
console.log (str[i]);
};
//delete str[0]; 不能删除
// str[0] = "A"; 不能修改
console.log (str);
// str.reverse();
</script>
</body>
6 String的遍历
字符串对象的遍历:
1: 使用基本的for循环，类似于遍历数组
2：for in
3：for of
4: 使用字符串的实例方法。charAt(pos) 获得当前对象上的指定位置的字符
<body>
<script>
var str = "abcdefg";
//1
for (let i = 0; i < str.length; i++) {
var ch = str[i];
console.log (ch);
}
console.log ("--------1---------");
// 2：for in i 代表了字符的序号。
for (var i in str) {
var ch = str[i];
console.log (ch);
}
console.log ("--------2---------");
// 3：for of
for (var ch of str) {
console.log (ch);
}
console.log ("--------3---------");
// 4：charAt(pos)
for (let i = 0; i < str.length; i++) {
var ch = str.charAt (i);
console.log (ch);
}
</script>
</body>
7 String的特点
***** String的特点：
1：底层实现使用字符数组。
2：字符串对象具有不可改变的特性。字符串对象一旦创建，就不能被修改了。
所有看似对字符串对象的修改，都会导致新的字符串对象的生成。
缺点：如果不断的去修改一个字符串对象，那么会在内存中生成大量不在使用的字符串对象。会造成内存的浪费。
优点：安全。具有只读属性。
<body>
<script>
var num = 1;
//传值
var num1 = num;
num1 = 2;
console.log (num);//1
var val1 = new Number(1);
var val2 = val1;
val2 = 2;
console.log (val1);
var str = "abc";
var str1 = str;
str1 = str1 + "d";
console.log (str1);//abcd
console.log (str);//abc
</script>
</body>
8 String的方法
String的属性：
1：length：字符串对象中的字符的个数。一个大于等于0的值。
空字符串"" 的长度就是0. 也是一个很有地位的字符串对象。
String的静态方法。
** String.fromCharCode(code) 将code整数值，转换为该值所对应的字符。
提示：notice 因为字符串对象具有不可改变的特性。
所以大部分的实例方法，操作当前实例对象，返回值往往是操作之后的结果。
而当前对象往往不发生改变。
String的实例方法：
**charAt(pos) 返回在指定位置的字符。
**charCodeAt(pos) 返回在指定的位置的字符的 Unicode 编码。
concat(str) 连接字符串 返回连接之后的字符串对象。
**indexOf(searchStr,pos?) 检索子字符串。找到返回索引，否则返回-1.支持从指定的位置开始搜索
lastIndexOf(searchStr,pos?) : 检索子字符串.从后往前找。
**replace(oldStr,newStr): 子串替换
**slice(start? , end?):提取字符串的片断，并在新的字符串中返回被提取的部分。
substr(start，length ?): 从什么位置开始，截取length个。
**substring(start,end?) : 基本和slice一致，只是不支持负索引。
**split(separtor): 使用指定的分隔符将当前字符串对象进行切割。切割后的内容以字符串数组返回。 如果分隔符为空字符串，那么就是将字符串转换为字符数组的功能。支持正则。
**toLowerCase() 把字符串转换为小写。
**toUpperCase() 把字符串转换为大写。
**endsWith(suffix,pos?): 是否以指定的内容结尾。返回boolean值。
**startWith(prefix,pos?): 是否以指定的内容开头。返回boolean值。
<body>
<script>
//2 静态方法
for (let i = 0; i <128 ; i++) {
var ch = String.fromCharCode(i);
document.write(ch);
if(i%100===0)
document.write("<br>");
}
// 实例方法
var str = "123456789你";
console.log (str.charAt(5));//6
var number = str.charCodeAt(9);
console.log (number);
console.log (String.fromCharCode(20320));//你
var concat = str.concat("真坏");
console.log (str);//123456789你
console.log (concat);//123456789你真坏
var index = concat.indexOf("你真坏");
console.log (index);//9
str = "1_2_3_4_5";
var res = str.replace("_","-");
console.log (res);
console.log (str);
str = "1_2_3_4_5";
function replace(str,oldStr,newStr) {
var index = str.indexOf(oldStr);
while(index >=0){
str = str.replace(oldStr,newStr);
index = str.indexOf(oldStr);
}
return str;
}
var result = replace(str,"_","-");
console.log (result);
var str = "123456789你";
console.log (str.slice(2,5));//345
console.log (str.slice(2));//3456789你
console.log (str.slice());//123456789你
console.log (str.slice(-1));//你
console.log (str.slice(-4,-1));//789
console.log (str.substring(3));//456789你
console.log (str.substr(3));//456789你
console.log (str.substr(3,3));//456
str = "1_2_3_4_5";
console.log (str.split("_"));
console.log (str.split(""));
str = "hello.jpg";
console.log (str.endsWith(".jpg"));//true
console.log (str.startsWith("he"));//true
</script>
</body>
练习
<body>
<!--
1：随机得到一个任意长度的字符串。只能包含大小写字符。
2：从上述方法得到的随机字符串中，将大写字符和小写字符分离出来，存储到一个二维数组中。二维数组中包含了2个一维数组，一个存大写字符，一个存大写字符。
返回二维数组。
3：统计一个随机字符串中，某个字符出现的个数。
4：任意字符串实现翻转。
-->
<script>
//1
function createStr(length) {
//使用循环产生length个随机字符。连接返回。
var str = "";
for (let i = 0; i <length ; i++) {
//得到一个随机的大写字符
var ch = getUpperChar();
//随机大小写累加
str += random(0,2) === 0 ? ch : ch.toLowerCase() ;
}
return str;
}
//得到一个随机的大写字符
function getUpperChar() {
const MIN_CODE = 65;//A
const MAX_CODE = 65+26;
var code = random(MIN_CODE,MAX_CODE);
return String.fromCharCode(code);
}
function random(min,max) {
return ~~(Math.random()*(max-min)+min);
}
console.log (createStr(10));
//10-35直接的一个随机值
// console.log ((~~(Math.random () * (36 - 10) + 10)).toString (36));a-z
//2
function strToArray(str) {
const UPPER = 0;
const LOWER = 1;
var arr = [[],[]];
//遍历字符串，判断，添加
for (let i = 0; i < str.length; i++) {
var ch = str.charAt(i);
//如果ch是大写的。
if(isUpperChar(ch)){
arr[UPPER].push(ch);
continue;
}
arr[LOWER].push(ch);
}
return arr;
}
function isUpperChar(ch) {
return ch >="A" && ch <="Z";
}
var str = createStr(10);
console.log (str);
var array = strToArray(str);
console.log (array);
//遍历，这个比对，计数器记录，返回计数器。
function counerChar(str,ch) {
var arr = str.split(ch);
console.log (arr);
return arr.length - 1;
}
var str = "aaaaa";
var counter = counerChar(str,"a");
console.log (counter);
//翻转字符串
function reverse(str) {
//链式
return str.split("").reverse().join("");
}
str = "123456789";
console.log (reverse(str));
</script>
</body>
9 String的方法2
String的其他的实例方法：
** 1：trim() :删除当前字符串中的前导和后导空白字符。
2: padStart()：
3: padEnd()：
4: repeat():
<body>
<script>
var str = " a bc ";
var result = str.trim();
console.log (str);//没有变化
console.log (result);
console.log (result.length);
str = "a";
var str1 = str.padStart(10,"*");//*********a
console.log (str1);
var s = str.padEnd(10,"*");
console.log (s);//a*********
var repeat = str.repeat(5);
console.log (repeat);//aaaaa
</script>
</body>
10 Global对象
Global对象。全局对象。是一个假象的对象。不存在。
在js中规定，所有的方法都要隶属于某一个对象。在js中存在一些全局函数
直接使用的函数，作为工具方法来使用的。
随着js的发展，将一些全局函数归给了window对象和Number对象。
1：isNaN(num)：用来判断实参是否是NaN的，如果是返回true，否则false。
2: isFinite(num): 用来判断实参是否是有穷数。如果是返回true，否则false。
3: parseInt(num, radix?): 将实参解析为整数，解析不成功，返回NaN。
4: parseFloat(num): 解析浮点数
5: 在进行网路数据传输的过程中，某些数据是不能直接进行传输的，必须要经过
编码的转换。通过2个方法进行转换。
编码方法: encodeURI 、encodeURIComponent.
encodeURI : 会对中文、空格等字符进行编码。url信息中的冒号，斜杠等不进行编码。
encodeURIComponent：在encodeURI 的基础上，还会对 冒号和 斜杠等进行编码。
***编码：从明文—密文。
***解码：从密文—明文。
decodeURI: 用来解码encodeURI 编码的数据。
decodeURIComponet：用来解码 encodeURIComponent 编码的数据。
使用率比较高的一对编码解码方法：encodeURIComponent、decodeURIComponet
一般编码只对提交的数据部分进行编码。
*** 6：eval(str): 该方法是一个非常强大的方法。可以将实参的内容解析为js代码执行。
全局属性： NaN、Infinity、-Infinity、Array、Math、Number、String、Boolean、Date
<body>
<script>
var num = "1"/"a";
console.log (isNaN(num));//true
console.log (isFinite(1));//true
console.log (isFinite(Infinity));//false
console.log (parseInt("23",8));//19
console.log (parseFloat("12.11111111aaa"));//12.11111111
var url = "https://news.163.com/?name=小刚&pwd=12 3456";
//https://news.163.com/?name=%E5%B0%8F%E5%88%9A&pwd=12%203456
console.log (encodeURI(url));
url = "https://news.163.com/?name=%E5%B0%8F%E5%88%9A&pwd=12%203456";
console.log (decodeURI(url));
// https%3A%2F%2Fnews.163.com%2F%3Fname%3D%E5%B0%8F%E5%88%9A%26pwd%3D12%203456
console.log (encodeURIComponent(url));
url = "https%3A%2F%2Fnews.163.com%2F%3Fname%3D%E5%B0%8F%E5%88%9A%26pwd%3D12%203456";
console.log (decodeURIComponent(url));
var str = "var value = 10";
eval(str);
str = "1*2*3*4*5";
console.log (eval(str));//120
console.log (value);//10
</script>
</body>
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
