Javascript(五):内置对象、简单数据类型和复杂数据类型

内置对象

1.什么是内置对象

①JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象

②前面两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于我们JS独有的,我们JSAPI讲解

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

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

⑤JavaScript提供了多个内置对象:Math、Date、Array、string等

2.如何查阅MDN文档

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

Mozilla开发者网络(MDN)提供了有关开放网络技术(OpenWeb)的信息,包括HTML、CSS和万维网及
HTML5应用的API。

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

如何学习对象中的方法
1.查阅该方法的功能
2.查看里面参数的意义和类型
3.查看返回值的意义和类型
4.通过demo进行测试

3.Math对象

3.1Math概述

Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值
等)可以使用Math中的成员。

Math.PI//圆周率
Math.floor()		//向下取整
Math.ceil()		//向上取整
Math.round()		//四舍五入版就近取整注意-3.5结果是-3
Math.abs ( )		//绝对值
Math.max()/Math.min()		//求最大和最小值

//1.绝对值方法
console.log(Math.abs(1));//1
console.log(Math.abs(-1));//1
console.log(Math.abs('-1'));//隐式转换会把字符串型-1转换为数字型
console.log(Math.abs('pink'));//NaN
//2.三个取整方法
//(1)Math.floon()地板向下取整往最小了取值
console.log(Math.floor(1.1));//1
console.log(Math.floor(1.9));//1
//(2)Math.ceil()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.5));//2
console.log(Math.round(1.9));//2
console.log(Math.round(-1.1));//-1
console.log(Math.round(-1.5));//这个结果是-1

3.2随机数方法random()

//1.Math对象随机数方法 random()返回一个随机的小数
//2.这个方法里面不跟参数
//3.代码验证
console.log(Math.random());
//4.我们想要得到两个数之间的随机整数并且包含这2个整数
// Math.floor(Math.random()*(max-min+1))+min;
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
console.log(getRandom(1,I 10));
//5.随机点名
var arr=['张三','张三丰','张三疯子','李四','李思思','pink老师'];
// console.log(arr[e]);
console.log(arr[getRandom(e,arr.length-1)]);

4.Date日期对象

4.1Date概述

·Date对象和Math对象不一样,他是一个构造函数,所以我们需要实例化后才能使用
·Date实例用来处理日期和时间

4.2Date()的使用

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

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

2.Date()构造函数的参数
如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为’2019-5-1’,可以写成new Date(‘2019-5-1’)
或者new Date(‘2019/5/1’)

4.2日期格式化

我们想要2019-8-88:8:8格式的日期,要怎么办?
需要获取日期指定的部分,所以我们要手动的得到这种格式。

在这里插入图片描述

//格式化日期 年月日
var date = new Date();
console.log(date.getFullYear());//返回当前日期的年2019
console.log(date.getMonth()+1);//月份返回的月份小1个月 记得月份+1
console.log(date.getDate());//返回的是几号
console.log(date.getDay());//3周一返回的是1周六返回的是6但是周日返回的是
//我们写一个2019年5月1日星期三
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]);

//格式化日期时分秒
var date = new Date();
console.log(date.getHours());//时
console.log(date.getMinutes());//分
console.log(date.getSeconds());//秒
//要求封装一个函数返回当前的时分秒格式08:08:08
function getTime(){
    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(getTime());

//获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
//1.通过 valueof()getTime()
var date = new Date();
console.log(date.valueof());//就是我们现在时间距离1970.1.1总的毫秒数
console.log(date.getTime());
//2.简单的写法(最常用的写法)
var datel=+new Date();//+new Date()返回的就是总的毫秒数
console.log(date1);
//3.H5新增的获得总的毫秒数
console.log(Date.now());

5.Array数组对象

5.1创建数组的两种方法

//创建数组的两种方式
//1.利用数组字面量
var arr = [1, 2, 3];
console.log(arr[0]);
//2.利用new Array()
//var arr1=new Array();//创建了一个空的数组
//var arr1=new Array(2);//这个2表示数组的长度为2里面有2个空的数组元素
var arr1=new Array(2,3);//等价于[2,3]这样写表示里面有2个数组元素是2和3
console.log(arr1);

5.2检测是否为数组的两种方法

//检测是否为数组
//(1)instanceof 运算符 它可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
//(2)Array.isArray(参数);H5新增的方法ie9以上版本支持
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));

5.3添加或删除数组元素

//添加删除数组元素方法
//1.push()在我们数组的末尾添加一个或者多个数组元素 push 推
var arr = [1, 2, 3];
// arr.push(4,'pink');
console.log(arr.push(4,'pink'));
console.log(arr);
//(1)push是可以给数组追加新的元素
//(2)push()参数直接写数组元素就可以了
//(3)push完毕之后,返回的结果是新数组的长度
//(4)原数组也会发生变化

//2.unshift在我们数组的开头添加一个或者多个数组元素
console.log(arr.unshift('red','purple'));
console.log(arr);
//(1)unshift是可以给数组前面追加新的元素
//(2)unshift()参数直接写数组元素就可以了
//(3)unshift完毕之后,返回的结果是新数组的长度
//(4)原数组也会发生变化

//3.pop()它可以删除数组的最后一个元素
console.log(arr.pop());
console.log(arr);
//(1)pop是可以删除数组的最后一个元素记住一次只能删除一个元素
//(2)pop()没有参数
//(3)pop完毕之后,返回的结果是删除的那个元素
//(4)原数组也会发生变化

//4.shift()它可以删除数组的第一个元素
console.log(arr.shift());
console.log(arr);
//(1)shift是可以删除数组的第一个元素记住一次只能删除一个元素
//(2)shift()没有参数
//(3)shift完毕之后,返回的结果是删除的那个元素
//(4)原数组也会发生变化

在这里插入图片描述

5.4数组排序

在这里插入图片描述

//数组排序
//1.翻转数组
var arr = ['pink','red','blue'];
arr.reverse();
console.log(arr);
//2.数组排序(冒泡排序)
var arr1=[13,4,77,1,7];
arr1.sort(function(a,b){
    // return a-b;升序的顺序排列
    return b-a;//降序的顺序排列
});
console.log(arr1);

5.5.数组索引

在这里插入图片描述

//返回数组元素索引号方法 indexof(数组元素)作用就是返回该数组元素的索引号 从前面开始查找
//它只返回第一个满足条件的索引号
//它如果在该数组里面找不到元素,则返回的是-1
// var arr = ['red','green','blue','pink','blue'];
var arr=['red','green','pink'];
console.log(arr.indexof('blue'));
//返回数组元素索引号方法 lastIndexof(数组元素)作用就是返回该数组元素的索引号 从后面开始查找
var arr = ['red','green','blue','pink','blue'];
console.log(arr.lastIndexof('blue'));//4

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

5.7其他

在这里插入图片描述

6.字符串对象

6.1基本包装类型

为了方便操作基本数据类型,JavaScript还提供了三个特殊的引用类型:String、Number和Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。

//下面代码有什么问题?
var str = ' andy ' ;
console.log(str.length);

按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为js会
把基本数据类型包装为复杂数据类型,其执行过程如下:

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

6.2字符串的不可变

指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。

var str ='abc';
str='hello';
//当重新给str赋值的时候,常量'abc'不会被修改,依然在内存中
//重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变
//由于字符串的不可变,在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = 0; i < 100000; i++) {
	str += i;
}
console.log(str);//这个结果需要花费大量时间来显示,因为需要不断的开辟新的空间

6.3根据字符返回位置

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。

在这里插入图片描述

//字符串对象 根据字符返回位置 str.indexof('要查找的字符',[起始的位置])
var str ='改革春风吹满地,春天来了';
console.log(str.indexof('春'));
console.log(str.indexof('春',3));//从索引号是3的位置开始往后查找

6.4根据位置返回字符(重点)

在这里插入图片描述

//根据位置返回字符
//1.charAt(index)根据位置返回字符
var str = ' andy' ;
console.log(str.charAt(3));
// 遍历所有的字符
for (var i = 0; i &lt; str.length; i++){
console.log(str.charAt(i));
}
//2.charCodeAt(index)返回相应索引号的字符ASCII值目的:判断用户按下了那个键
console.log(str.charCodeAt(0));//97
//3.str[index]H5新增的
console.log(str[0]);

6.5字符串的操作方法(重点)

在这里插入图片描述

//字符串操作方法
//1.concat('字符串1','字符串2'....)
var str = ' andy' ;
console.log(str.concat('red'));
//2.substr('截取的起始位置','截取几个字符');
var str1='改革春风吹满地';
console.log(str1.substr(2,2));//第一个2是 索引号的2 从第几个开始 第二个2 是取几个字符

6.6其他方法

//1.替换字符 replace('被替换的字符','替换为的字符')它只会替换第一个字符
var str = ' andyandy' ;
console.log(str.replace(a','b'));
//有一个字符串'abcoefoxyozzopp'要求把里面所有的。替换为*
var str1 ='abcoefoxyozzopp';
while(str1.indexof('o')!==-1){
	str1=str1.replace('o','*');
}
console.log(str1);
//2.字符转换为数组 split('分隔符')
前面我们学过 join 把数组转换为字符串
var str2 ='red, pink, blue';
console.log(str2.split(','));
var str3 ='red&pink&blue';
console.log(str3.split('&'));

简单数据类型和复杂数据类型

简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型

①值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型

string , number , boolean , undefined , null

②引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型

通过new关键字创建的对象(系统对象、自定义对象),如Object、Array、Date等

1.堆和栈

堆栈空间分配区别:
1、栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;
简单数据类型存放到栈里面
2、堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。
复杂数据类型存放到堆里面

在这里插入图片描述

注意:JavaScript中没有堆栈的概念,通过堆栈的方式,可以让大家更容易理解代码的一些执行方式,便于将来学习其他语言

2.简单类型的内存分配

·值类型(简单数据类型):string,number,boolean,undefined,null
·值类型变量的数据直接存放在变量(栈空间)中

在这里插入图片描述

3.复杂类型的内存分配

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

在这里插入图片描述

4.简单类型的传参

函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈
空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。

function fn (a) {
	a++;
	console.log(a);
}
var x=10;
fn(x);
console.log(x);

5.复杂数据类型的传参

函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地
址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。

function Person(name){
	this . name = name ;
}
function f1(x) {//x=p
    console.log(x.name);//2.这个输出什么?
    x.name="张学友";
    console.log(x.name);//3.这个输出什么?
}
var p=new Person("刘德华");
console.log(p.name);//1.这个输出什么?
f1(p);
console.log(p.name);//4.这个输出什么?
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值