JavaScript基础-05-数组、Date对象、Math、包装类、字符串方法

数组（Array）

---

1. 数组

1. 数组也是一个对象，不同点：普通对象是使用字符串作为属性名的，数组是使用数字作为索引操作元素。
2. 数组的存储性能比普通对象要好，在开发中经常使用数组来存储一些数据。
3. 向数组中添加元素

语法：数组[索引]=值

向读取数组中的元素，若读取不存在的索引，不会报错而是返回undefined

语法：数组[索引]

var arr=new Array();
console.log(typeof arr);  //结果为Object
// 添加元素
arr[0]=10;
arr[1]=33;
console.log(arr);
// 读取数组中的元素
console.log(arr[1]);   //结果为33

获取数组的长度，使用length属性来获取数组的长度（元素的个数）

语法：数组.length

console.log(arr.length); //结果为2

修改length:

若修改的length大于原长度，则多出部分空出来

若修改的length小于原长度，则多出部分被删除

arr.length=10;  //将长度修改为10
console.log(arr);

向最大索引加1：arr.length

arr[arr.length]=34;

2. 数组的字面量

使用字面量创建数组

语法：[ ]

var arr=[1,3,2,4,54,23];
console.log(arr1);

使用构造函数创建数组，也可以同时添加元素，将添加的元素作为构建数组的参数传递。元素之间逗号隔开

var arr1=new Array(10,20,30,40);

arr=[10];  //元素10
var arr1=new Array(10);  //10个元素的空数组；放几个数就是含该数的数组

数组中的元素可以是任意数据类型：数字，字符串，null，undefined，对象

arr=[{name:'孙悟空'},{name:'小胡'},{name:'孙'}]  //对象
console.log(arr[1].name);

arr=[function () {alert(1)},function () {alert(1)}];  //函数
arr[1]();

arr=[[1,2,3],[23,43,54]];  //数组
console.log(arr[1]);

3. 数组的四个方法

push( ):向数组的末尾添加一个或更多元素，并返回新的长度。

arr.push('小李');

pop（）:删除并返回数组的最后一个元素

arr.pop();

unshift( ):向数组的开头添加一个或更多元素，并返回新的长度。

arr.unshift('小三子','阿六');

shift（）:删除并返回数组的第一个元素

arr.shift();

Slice（开始位，结束位）:从某个已有的数组返回选定的元素，不包含结束索引；该方法不会改变元素；结束位可不写，可传递一个负值，负值从后往前传递

result=arr.slice(2,4);

result=arr.slice(1,-2);

Splice（开始位，删除的数量，新元素）:删除并添加数组中的指定元素，会影响到原数组，并将删除的元素作为返回值返回。

result=arr.splice(0,1,,’阿丽’); //添加新元素在第一个

Concat( )：可以连接两个或多个数组，并将新的数组返回；不会对原数组产生影响

var arr=['孙悟空','小胡','小孙'];
var arr2=['小李','三子','阿六'];
arr3=arr.concat(arr2);

join( ):该方法可以将数组转换为一个字符串，不会对原数组产生影响；指定一个字符串作为参数，字符串将成为数组中元素的连接符。默认使用，作为连接符

result=arr.join(‘-’);

reverse( )：该方法用来反转数组，会直接修改原数组

sort(a,b):对数组中元素进行排序，会影响原数组，默认按照unicode编码进行排序，对数字排序会错误。可以添加一个回调函数，并指定排序规则，需要制定两个形参：浏览器将会分别使用数组中的元素作为实参去调用回调函数。使用哪个元素调用不确定，但确定的是a在b之前。

浏览器会根据回调函数的返回值来决定元素的顺序：

　　若返回>0，则元素会位置不变

　　若返回<0，则元素会位置反过来

　　若返回=0，则元素会位置不变

方法1：

var arr=[1,3,2,5];
arr.sort(function (a,b) {
if(a>b){
   return 1;}
else if(a<b){
   return -1;}
else{
   return 0;}})
         console.log(arr);

方法2:返回升序排列，返回a-b;返回降序排列，返回b-a

var arr=[1,3,2,5];
arr.sort(function (a,b) {

return a-b;})

4. 数组的遍历

将数组中的所有元素都取出来

for(var i=0;i<7;i++){
   console.log(arr[i]);}

创建一个函数，将数组中的Person满18岁的提取出来，然后封装到一个新的数组中并返回。

function Person(name,age) {
            this.name=name;
            this.age=age;}
         var per=new Person('小胡',12);
         var per1=new Person('小李',22);
         var per2=new Person('小花',21);
         var per3=new Person('小马',13);
         var perArr=[per,per1,per2,per3];
         function getAdult(arr) {
            var newArr=[];
// 先遍历arr，获取arr中Person对象，判断Person对象是否大于等于18；
            for(var i=0;i<arr.length;i++){
               var p=arr[i];
               if (p.age>=18) {
                  newArr.push(p);}}
               return newArr;}
         var result=getAdult(perArr);
         console.log(result);

5. forEach（）用于遍历

只支持IE8以上的浏览器，需要一个函数作为参数；数组中有几个元素就会执行几次。

var arr=['孙悟空','小胡','小孙','小李','三子','阿六'];
     arr.forEach(function (value,index,obj) {//由我们创建，但不由我们调用，称为回调函数
     console.log('value='+value);});

浏览器会在回调函数中传递三个参数，第一个：当前正在遍历的元素；第二个：索引；第三个：正在遍历的数组；

6. call( )和apply( )：函数对象的方法，通过函数对象来调用？？？

函数调用call( )和apply( )都会调用函数执行

调用call( )和apply( )可以将一个对象指定为第一个参数，此时这个元素将会成为函数执行时的this

function fun() {
alert(this.name);}
var obj={name:’obj’};
fun.call(obj);

call（）方法可以将实参在对象之后依次传递

apply（）方法需要将实参封装到一个数组中统一传递

fun.call(obj,2,3);
fun.apply(obj,[2,3]);

function fun(a,b) {
   console.log('a='+a);
   console.log('b='+b);}
var obj={name:'obj',
sayName:function () {
alert(this.name);}};
// obj.sayName.apply(obj);
fun.call(obj,2,3);
fun.apply(obj,[4,3]);

7. agruments( )

在调用函数时，浏览器每次都会传递两个隐含的参数：

1. 函数的上下文
2. 封装实参的对象agruments，arguments是一个类数组对象，通过索引来操作数据，也可以获取长度；

在调用函数时，传递的实参都会在arguments中保存;

agruments.length:用来获取实参的数目;agruments[0]:表示第一个实参;agruments.callee:对应函数对象，就是当前正在指向的函数对象。

function fun() {
console.log(arguments.length);//结果为4

console.log(arguments[0]);}  //结果为1

console.log(arguments.callee);}  //结果为1
fun(1,2,4,3);

8. Date对象

在JS中使用Date对象来表示一个时间；

创建一个Date对象：

//如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
         var d=new Date();
         console.log(d);
//创建一个指定的时间对象，需要在构造函数中传递一个表示时间的字符串作为参数
         //日期格式：月份/日/年份  时：分：秒
         var d2=new Date('12/12/2019 11:10:20');
         console.log(d2);

getDate( ):获取当前日期对象是几日

var date=d2.getDate();

getDay( ):获取当前日期对象是周几，会返回0-6的值

var day=d2.getDay();

getMonth( ):获取当前日期对象的月份，会返回0-11的值，11代表12

var month=d2.getMonth();

getFullYear( ):获取当前日期对象的年份

var year=d2.getFullYear();

getTime( ):获取当前日期对象的时间戳（从格林威治标准时间1970年1月1日 0时0分0秒 到现在时间的毫秒数  1秒=1000毫秒），计算机底层在保存时间时使用时间戳。

var time=d2.getTime();

获取当前时间戳：利用时间戳来执行当前代码的执行性能，在代码前后获取时间戳

var start=Date.now();

var end=Date.now();

console.log(end-start);

9. Math：与其他对象不同，不是一个构造函数，它属于一个工具类不用创建对象，里面封装了数学运算相关的属性和方法。

属性：

Math.PI   //圆周率

abs( ):用来计算一个数的绝对值

Math.abs(-1)

ceil( ):对数进行上取整。

Math.ceil(1.6)

floor(x):对数进行下取整。

Math.floor(1.6)

round(x)：把数四舍五入为最接近的整数。

Math.round(1.2)

random()：返回 0 ~ 1 之间的随机数。

生成0-x之间的随机数：Math.round(Math.random()*x )  //生成0-x之间的随机数

生成x-y之间的随机数：Math.round(Math.random()*(y-x)+x )

Math.random()

Math.round(Math.random()*10 )  //生成0-10之间的随机数

生成0-6之间的随机数

console.log(Math.round(Math.random()*5+1));

max(x,y)：返回 x 和 y 中的最高值。

var max=Math.max(12,45);

pow(x,y)：返回 x 的 y 次幂。

console.log(Math.pow(2,3));  //结果为8

sqrt(x):返回数的平方根。

Math.sqrt(2)

10. 包装类

JS为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象

String（）  Number（）  Boolean（）

实际应用中不会使用基本数据类型的对象，若使用基本数据类型的对象，会带来一些不可预期的结果。

var num=new Number(3);
var num2=new Number(3);
var str=new String('3');
var bool=new Boolean(true);

方法和属性只能添加给对象，不能添加给基本数据类型；当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法。调用完以后，再将其转换成基本数据类型。

var s=123;result=String.fromCharCode(72);

s=s.toString();
s.hello='你好';

console.log(s.hello);  //结果为undefined

11. 字符串的方法

var str='hello';
//在底层字符串是以字符串数组的形式保存的['h','e','l','l']
console.log(str.length);

console.log(str[0]); //索引

 

chartAt():返回在字符串中指定位置的字符。根据索引获取指定的字符

var result=str.charAt(0);

charCodeAt()：返回在指定的位置的字符的 Unicode 编码。

result=str.charCodeAt(0);  //

fromCharCode()：从字符Unicode编码创建一个字符串。

result=String.fromCharCode(72);  //结果：H, 数字为十进制；

result=String.fromCharCode(0x2472);  //可以直接说明为十六进制0x....

concat():连接字符串，作用和+一样；

result=str.concat("你好","再见");

indexof():该方法可以检索一个字符串是否含有指定内容

若字符串中含有该内容，则返回其第一次出现的索引，未找到就返回-1

注：可以指定第二个参数，从第几位开始查找    str.indexOf("a",2);

str='hello athguigu';
result=str.indexOf("a");
console.log(result);  //结果：6    位于第6位：从0开始

lastindexof():方法与indexof()一样，但是从后往前找；

str='hello athguigu';
result=str.lastIndexOf('a',8);
console.log(result);

slice():可以从字符串中截取指定的内容，不会影响字符串，而是将截取内容返回。

若str.slice(1)：则会截取到后面所有的；str.slice(1，-1)：负数则会从后面开始计算

str='hello athguigu';
result=str.slice(2,8);   //（开始索引，结束索引）包括开始不包括结束
console.log(result);  //结果：llo at

substring():可以截取一个字符串，与slice()类似。

参数：（开始索引，结束索引）包括开始不包括结束

区别：该方法不能接受负值，若出现负值，默认为0，并自动调整位置

str='hello athguigu';
result=str.substring(2,8);
console.log(result);

substr（）：用来截取字符串，（开始索引，截取长度）

str='hello athguigu';
result=str.substr(2,3);
console.log(result);

split():将字符串拆分为一个数组

参数：需要一个字符串作为参数，根据字符串来拆分；若传递一个空号，会将数组中的每个数都拆分。

str='hello,athg,uigu';
result=str.split(",");
console.log(typeof result);  //结果为数组

toUpperCase():将字符串变成大写；toLowerCase( ):将字符串变成小写