Web前端之路

8、日期和数组

2019-08-01  本文已影响15人  宁公子_5dce

上一章我们简单了解了一下对象的原理和基本属性,现在让我们来详细的了解一下JS中的对象:
其它对象:

日期对象Date:

创建Date对象的语法:var date = new Date();

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


//创建一个日期对象
var date = new Date();
//输出一下试试
console.log(date);
//输出结果为当前的日期时间

说到时间,我们不得不了解一下计算机保存时间的方法:时间戳
时间戳的定义:

//创建一个日期对象
var date = new Date();
console.log(date.getTime());
//输出时间戳:1564564641792

函数内还可以传参:

//创建一个日期对象
var date = new Date(1000);
//向里面传入参数1000并输出
console.log(date);
//得到的结果是:Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)

发现了没有,显示的时间是格林威治时间后的1秒

//创建一个日期对象
var date = new Date("2000/01/01 00:00:01");
//直接向里面传入日期和时间,当然我们也可以这样写
var date = new Date("2000-01-01 00:00:01");
//也可以这样写
var date = new Date(2019, 11, 24, 10, 33, 30, 0);

注意: 最后一种传入参数的时候从左往右分别是:年、月、日、小时、分钟和秒,如果只提供一个参数则会被当成毫秒来计算,还有一点 ,在JS中,月份从0开始到11结束

Date 对象方法

数组对象Array:

Array 对象用于在单个的变量中存储多个值。

创建 Array 对象的语法:

//以构造函数方法创建:
var arr = new Array(10,"数组",{},[1,2],function(){},null,undefined,true);
//没错,数组中可以储存任何值,包括对象、数组和函数
var arr1 = [10,"数组",{},[1,2],function(){},null,undefined,true];
//这种方法也可以创建数组,而且更加方便
console.log(arr);//打印整个数组
console.log(arr1[0]);//打印数组中索引为0的值,也就是第一个值
//获取数组中的一个值 :数组名[值的位置];
//数组中值的位置从0开始计算

我们现在来小小的总结一下:

数组的方法:

和其他对象一样,数组作为JS中的一个重点,同样拥有很多操作方法,他们非常重要:

1、数组的添加与删除:
//创建一个数组
var arr = [10,20,30,"字符串",true];
//向数组开头添加一个元素并创建一个变量用来接收新的长度
var a = arr.unshift(10);
console.log(arr);
console.log(a);
//输出数组和接收的长度可知:arr = [10,10,20,30,"字符串",true]    6
var arr1 = [10,20,30];
//删除并返回数组的第一个元素
var b = arr1.shift();
console.log(arr1);
consloe.log(b);
//输出数组和接收到的元素:arr1 = [20,30]    10
//创建一个数组
var arr = [10,20,30,"字符串",true];
//向数组末尾添加一个元素并创建一个变量用来接收新的长度
var a = arr.push(10);
console.log(arr);
console.log(a);
//输出数组和接收的长度可知:arr = [10,20,30,"字符串",true,10]    6
var arr1 = [10,20,30];
//删除并返回数组的最后一个元素
var b = arr1.pop();
console.log(arr1);
consloe.log(b);
//输出数组和接收到的元素:arr1 = [10,20]    30

注意: 以上使用添加和删除都在原数组做操作,会改变原数组

2、数组的拼接:
//分别创建两个数组
var arr1 = [10,20,30];
var arr2 = [40,50,60];
//将用concat()方法将两个数组拼接到一起
var arr3 = arr1.concat(arr2);
console.log(arr3);//arr3 = [10,20,30,40,50,60];
//我们在来看一下arr1和arr2是否改变
console.log(arr1);
console.log(arr2);
//输出结果和初始数组相同,并未改变

所以: concat()方法是将作为参数传进去的数组拼接到了绑定的数组后面,它会产生一个新的数组,但并不会对原来的数组产生影响

3、将数组的所有元素放进一个字符串:
//创建一个数组
var arr = ["字符串",10,true];
//创建一个变量用来保存返回的字符串
var a = arr.join();
//输出获得的字符串和原数组
console.log(a);//获得的字符串是"字符串,10,true"
console.log(arr);//获得原数组,显然,它不会改变原来的数组

在默认情况下,join()是以分号为分隔符,但是我们也可以自定义分隔符,只需要将我们想要的分隔符作为参数传进去,注意,必须以字符串的形式传入,如:arr.join("-----");

4、数组排序:
//创建一个数组
var arr=[10,12,1,5,43,7]
//创建一个变量用来获取返回值
var a = arr.sort();
//输出接收到的新数组和原数组
console.log(a);
console.log(arr);
//返回结果都为[1, 10, 12, 43, 5, 7],显然这个方法会改变原数组

默认排序:先比较数组成员个位数的大小,个位数越大,位置越靠后,个位相同,比较十位数的大小,百位、千位等等依次比较,若碰到非数字,则会比较其字符编码

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

2、我们也可以自定排序标准,我们需要向方法中传入一个回调函数:排序函数

//创建一个数组
var arr=[10,12,1,5,43,7]
//创建一个变量用来获取返回值
var a = arr.sort(function (a,b){
        return a - b;
});
//输出接收到的新数组和原数组
console.log(a);
//输出结果为:[1, 5, 7, 10, 12, 43]

回调函数内传入两个型参 a 和 b ,然后在函数内返回a - b ;这就是从小到大排序,同样非数字按照字符编码排序

//创建一个数组
var arr=[10,12,1,5,43,7]
//创建一个变量用来获取返回值
var a = arr.sort(function (a,b){
        return b - a;
});
//输出接收到的新数组和原数组
console.log(a);
//输出结果为:[43, 12, 10, 7, 5, 1]

在函数内返回 b - a ;这是从小到大排序,想知道他们的原理吗?我们来看看:

//创建一个数组
var arr=[4,5,2,34,7,3,7,345,567,1,476,24];
//创建一个变量用来接收新产生的数组
var newArr=arr.sort(numFunc);
//向sort()方法传入了一个回调函数用来判断大小
function numFunc(a,b){   
//这个回调函数由两个型参,分别是a和b
    if(a>b){       
    //判断a是否大于b
        return -1;   
        }else if(a==b){ 
        return 0;   
        }else{ 
        return 1;   
    }
}

通过上例我们得知:

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  • 若 a 等于 b,则返回 0。
  • 若 a 大于 b,则返回一个大于 0 的值。
数组反转:
//创建一个数组
var arr=[10,12,1,5,43,7]
//创建一个变量用来获取返回值
var a = arr.reverse();
//输出接收的新数组和原数组
console.log(a);
console.log(arr);
//都输出: [7, 43, 5, 1, 12, 10],显然,reverse()方法会改变原数组
截取数组:

这个方法是比较重要的方法

//创建一个数组
var arr=[10,12,1,5,43,7]
//创建一个变量用来获取返回值
var a = arr.slice(1,3);
//输出接收的新数组和原数组
console.log(a);//输出截取到的新数组:[12, 1]
console.log(arr);//输出被截取后的原数组:[10, 12, 1, 5, 43, 7]
//显然,slice()方法不会对原函数造成影响

截取可以让我们随意的删除数组中的某个或者某些元素,是不是比前面介绍的pop()和shift()方法更加强大?但是,数组方法中还有一个更加强大的方法:

增删改万能操作函数:
//创建一个数组
var arr=[10,12,1,5,43,7]
//创建一个变量用来获取返回值
var a = arr.splice(1,0,"新元素");
//输出接收的新数组和原数组
console.log(a);//[]输出空数组,因为原数组没有删除的元素
console.log(arr);//输出的原数组:[10, "新元素", 12, 1, 5, 43, 7]
//可以看到,原数组中有了"新元素",所以,splice是直接影响到原数组

3、在指定位置删除指定数量的元素: 在数组的指定位置删除元素数组变量.splice(开始位置,删除数量);

//创建一个数组
var arr=[10,12,1,5,43,7]
//创建一个变量用来获取返回值
var a = arr.splice(1,3);
//输出接收的新数组和原数组
console.log(a);//输出:[12, 1, 5],这是截取到的元素
console.log(arr);//输出:[10, 43, 7],这是原数组,
//可以看到,被截取的元素以从原函数中剔除,从索引为 1 的位置开始截取,截取数量为3个

4、在指定位置替换指定数量的元素: 在数组的指定位置替换元素数组变量.splice(开始位置,删除个数,删除个数个新值。。。);

//创建一个数组
var arr=[10,12,1,5,43,7]
//创建一个变量用来获取返回值
var a = arr.splice(1,3,"第一个","第二个","第三个");
//输出接收的新数组和原数组
console.log(a);//输出的新数组为:[12, 1, 5]
console.log(arr);//输出的原数组为:[10, "第一个", "第二个", "第三个", 43, 7]
//替换元素的原理是将指定位置的元素删除,然后再添加相同数量的新元素

注: 作为数组最为强大的方法,splice()方便而又灵活,是非常常用的,此外,以上这些常用的方法建议牢牢记住,
以上只是列举了一些数组常用的操作,数组还有一些方法:

Array 对象方法

关于数组元素查询:

数组索引既可以从前向后查,也可以从后向前查。
- 从前向后查的时候,索引为正,从 0 开始,如第一个元素索引为 0 、第二个为1 ......
- 从后向前查的时候,索引为负,从 -1 开始,如最后一个元素索引为 -1 ,倒数第二个为 -2 ,倒数第三个为 -3 ......
上一篇 下一篇

猜你喜欢

热点阅读