JS（七）内置对象-简单类型与复杂类型

1、内置对象

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

2、Math对象

2.1 Math概述
- Math 对象不是构造函数，它具有数学常数和函数的属性和方法，跟数学相关的运算（求绝对值、取整、最大值等）可以使用Math中的成员
- Math.PI：圆周率
- Math.floo()r:向下取整
- Math.ceil()：向上取整
- Math.round()：四舍五入版，就近取整注意：-3.5 结果是-3
- Math.abs()：绝对值
- Math.max()/Math.min()：求最大值和最小值
2.2 Math 对象随机数方法
- random()返回一个随机的小数（ 0=< x <1 )
- 这个方法里面不跟参数
2.3 想要得到两个数之间的随机整数，并且包含这2个整数


function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));  //5

2.4 随机点名


function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));  //5var arr = ['张三', '李四', '张柳', '小工']
console.log(arr[getRandom(0, arr.length - 1)]); //李四

2.5 猜数字
- 随机生成一个1~10 的整数，需要用药Math.random()方法
- 需要一直猜到正确为止，所以需要一致循环
- while 循环更简单
- 核心算法：使用if else if多分支语句来判断大于、小于、等于


function getRandom(min, max) {return Math.floor(Math.random() * (max - min)) + 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;  // 退出整个循环结束程序}
}

3、日期对象

3.1 Date 概述
- Date 对象和Math对象不一样，它是一个构造函数，所以我们需要实例化后才能使用
- Date 实例用来处理日期和时间
3.2 Date() 方法的使用
- 1.获取当前时间必须实例化
- var now = new Date();
- 2.Date() 构造函数的参数
- 如果括号里面有时间，就返回参数里面的时间
- 例如，日期格式字符串为‘2020-4-10’，可以写成new Date('2020-4-10')或者new Date('2020/4/10')
3.3 日期格式化方法
3.4 返回一个2020年4月10日星期五


var date = new Date();var year = date.getFullYear();
var month = date.getMonth() + 1;  //月份需要加1个月
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var day = date.getDay();
console.log(year + '年' + month + '月' + dates + '日' + arr[day]);

3.5 封装一个函数返回当前的时分秒


var date = new Date();function getTimer() {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(getTimer());    //22:51:01

3.6 获得Date总的毫秒数（时间戳）
- 1、通过valueOf()或者getTime()
- 2、简单的写法var date1 = +new Date();(最常用的写法)
- 3、H5 新增的console.log(Date.now());
- 不是当时时间的毫秒数，而是距离1970年1月1日过了多少毫秒数
3.7 倒计时效果
- 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，结果会是负数
- 用时间戳来做，用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数
- 把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）


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 < 10 ? '0' + s : s;return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2020-4-10 23:30:00'));   //00天00时21分57秒

4、数组对象

4.1 创建数组的两种方式
- 1、利用数组字面量
- var arr = [1, 2, 3]
- 2、利用new Array()
- var arr1 = new Array(); //创建了一个空的数组
- var arr2 = new Array(2); //这个2 表示数组的长度为2，里面有2个空的数组元素
- var arr3 = new Array(2, 3); //等价于[2, 3]，这样写表示，里面有2个数组元素是2和3
4.2 检测是否为数组
- 1、instanceof运算符，它可以用来检测是否为数组
- var arr = [];
- console.log(arr instanceof Array);
- 2、Array.isArray(参数);H5新增的方法，ie9 以上版本支持
- var arr = [];
- console.log(Array.isArray(arr));
4.3 翻转数组


function reverse(arr) {var newArr = [];for (var i = arr.length - 1; i >= 0; i--) {newArr[newArr.length] = arr[i];}return newArr;
}
console.log(reverse([1, 2, 3]));    //(3) [3, 2, 1]

4.4 添加删除数组元素的方法
- push(参数1.....)：末尾添加一个或者多个元素，注意修改原数组。返回值：返回新的长度
- unshift(参数1.....)：向数组的开头添加一个或更多的元素，注意修改原数组。返回值：返回新的长度
- pop()：删除数组最后一个元素，把数组长度减1，无参数，修改原数组。返回值：返回它删除的元素的值
- shift()：删除数组的第一个元素，数组长度减1，无参数，修改原数组。返回值：返回第一个元素的值
4.5 有一个包含工资的数组，要求把数组中工资超过2000的删除，剩余的放到新数组里面


var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {if (arr[i] < 2000) {newArr.push(arr[i]);}
}
console.log(newArr);    //(3) [1500, 1200, 1800]

5.5 数组排序
- reverse()：颠倒数组中元素的顺序，无参数；该方法会改变原来的数组，返回新数组
- sort()：对数组的元素进行排序；该方法会改变原来的数组，返回新数组


var arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr);   //(4) [4, 3, 2, 1]var arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr);var arr1 = [12, 4, 6, 7, 8, 3, 2, 1, 9];
arr1.sort(function (a, b) {return a - b;   //升序的顺序排序// return b - a;   //降序的顺序排序
})
console.log(arr1);  //(9) [1, 2, 3, 4, 6, 7, 8, 9, 12]

5.6 数组索引方法
- indexOf()：数组中查找给定元素的第一个索引。如果存在返回索引号，如果不存在，则返回-1；
- lastindexOf()：在数组中的最后一个的索引。如果存在返回索引号，如果不存在，则返回-1；
5.7 数组去重
- 目标：把旧数组里面不重复的元素选取出来放到数组中，重复的元素只保留一个，放到数组中去重
- 核心算法：遍历旧数组，然后拿到旧数组元素去查询新数组，如果该数组在新数组里面没有出现过，就添加，否则不添加
- 利用新数组.indexOf(数组元素)如果返回是 -1 就说明，新数组里面没有改元素
- 封装一个去重的函数 unique 独一无二的


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(['c', 'a', 'b', 'x', 'a', 'z', 'a'])
console.log(demo);  //(5) ["c", "a", "b", "x", "z"]

5.8 数组转换为字符串
- toString() ：把数组转换成字符串，逗号分隔每一项，返回一个字符串
- join('分隔符')：方法用于把数组中的所有元素转换为一个字符串，返回一个字符串


var arr = ['c', 'a', 'b', 'x', 'a', 'z', 'a'];
console.log(arr.toString());    //c,a,b,x,a,z,a
console.log(arr.join('&')); //c&a&b&x&a&z&a

5.9 其他数组对象
- concat()：连接两个或多个数组，不影响原数组，返回一个新的数组
- slice()：数组截取slice(begin, end)，返回被截取项目的新数组
- splice()：数组删除splice(第几个开始，要删除个数)，返回被删除项目的新数组，注意，这个会影响原数组

6、字符串对象

6.1 基本包装类型
- 为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型String、Number、Boolean
- 基本包装类型就是把简单数据类型包装为复杂数据类型，这样基本数据类型就有了属性和方法
- 按道理基本数据类型是没有属性和方法的，而对象才有属性和方法
- JavaScript 会把基本数据类型包装为复杂数据类型，其执行过程如下：


// 1、 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
//2、赋值给我们声明的字符变量
str = temp;
//3、销毁临时变量
temp = null;

6.2 字符串的不可变
- 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
6.3 根据字符返回位置
- 字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。
- indexOf('要查找的字符',开始的位置)：返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是 index 索引号
- lastindexOf():从后往前找，只找第一个匹配的
6.4 根据位置返回字符（重点）
- charAt(index)：返回指定位置的字符（index 字符串的索引号），str.charAt(0)
- charCodeAt(index)：获取指定位置处字符的ASCLL码（index索引号），strCodeAt(0)
- str(index)：获取指定位置处字符，HTML5，IE8+支持和charAt()等效
6.5 字符串操作方法（重点）
- concat(str1, str2, str3...)：concat()方法用于连接两个或多个字符，拼接字符串，等效于+，+更常用
- substr(start,lengh)：从start 位置开始（索引号），length 取得个数（重点）
- slice(start, end)：从 start 位置开始，截取 end 位置，end 取不到（它们都是索引号）
- substring(start, end)：从 start 位置开始截取到 end 位置，end 取不到，基本和 slice 相同，但是不接受负值
- replace(原字符，替换字符)：替换字符，它只会替换第一个字符
- split('分隔符')：字符转换为数组
- join：把数组转换为字符串
- toUpperCase()：转换大写
- toLowerCase()：转换小写

7、简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型
复杂类型又叫做引用类型
值类型：简单数据类型/基本数据类型，在存储时变量中存储得时值本身，因此叫做值类型
string、number、boolean、underfined、null
引用类型：复杂数据类型，在存储时变量中存储得仅仅是地址（引用），因此叫做引用数据类型
通过new 关键字创建得对象（系统对象、自定义对象）如 Object、Array、Date等

8、堆和栈

栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等，其操作方式类似于数据结构中的栈
简单数据类型存放在栈中
堆（操作系统）：存储复杂类型（对象），一般由程序员释放，若程序员不释放，由垃圾回收机制回收
复杂数据类型存放到堆中
JavaScript 中没有堆栈的概念，通过堆栈的方式，可以更好的理解代码的一些执行方式

9、复杂类型的内存分配

引用类型（复杂数据类型）：通过new 关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

10、简单、复杂类型传参

函数的类型也可以看作是一个变量，把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部堆形参做任何修改，都不会影响到的外部变量。
函数的形参也可以看作时一个变量，把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个地址，所以操作的时同一个对象

JS（七）内置对象-简单类型与复杂类型相关推荐

js 序列化内置对象_内置序列化技术
js 序列化内置对象本文是我们名为" 高级Java "的学院课程的一部分. 本课程旨在帮助您最有效地使用Java. 它讨论了高级主题,包括对象创建,并发,序列化,反射等. 它将指 ...
2、js常用内置对象
文章目录 1. JS内置对象是什么? 2. 字符串对象及常用方法 3. 数组对象及常用方法 4. Math对象及常用方法: 5. Date对象及常用方法 6. Document 对象 1. JS内置对 ...
JS标准内置对象数组的 34 个方法
先放一个语雀的链接: https://www.yuque.com/docs/share/13314a2f-05c0-4de6-8d61-8acd9e566ad4?# <JS内置对象 Array& ...
11、JS笔记-内置对象
1.内置对象 js中对象分为三种: 自定义对象.内置对象.浏览器对象(js独有) 内置对象: js语言自带的对象,供开发者使用,提供一些常用或基本的功能(属性和方法) 2.Math对象 Math中所有 ...
先有对象还是先有函数，鸡生蛋、蛋生鸡的问题。有关js里内置对象Function和Object的思考
js里创建的函数本身作为一个实例对象都是由内置对象Function作为构造函数创造出来的,所谓var f = funciton(a){b}即等同于f = new Function(a,b). 同时js ...
js浏览器内置对象和js内置对象
浏览器内置 1.Location 对象 hash :返回一个URL的锚部分 host 返回一个URL的主机名和端口 hostname 返回URL的主机名 href 返回完整的URL pathname ...
【js】内置对象String的常用方法
<html><head></head><script type="text/javascript">var stuName1 = & ...
【js】内置对象array的常见方法的使用
<html><head></head><script type="text/javascript">//数组var stuName1 ...
js中内置对象Math()常用方法笔记
Math.random()获取随机数,范围[0,1)之间的随机小数 var num = Math.random(); console.log(num); 复制代码 Math.floor() 向下取整 ...

JS（七）内置对象-简单类型与复杂类型

1、内置对象

2、Math对象

3、日期对象

4、数组对象

6、字符串对象

7、简单类型与复杂类型

8、堆和栈

9、复杂类型的内存分配

10、简单、复杂类型传参

JS（七）内置对象-简单类型与复杂类型相关推荐

最新文章

热门文章