JavaScript---对象学习(二)Array对象、Date对象及其重要函数学习

来源:互联网 发布:javascript if 编辑:程序博客网 时间:2024/06/08 07:15

JavaScript学习到了第四天了,前面了解了String对象和object对象。。今天就从 Array对象学起把,加油!!!

Array对象

一个提供对创建任何数据类型的数组的支持的对象。

属性
constructor 属性 | length 属性 | prototype 属性
(这三个属性前面已经学过了,就是拿到原型进行修改的作用)

重点内容:方法演示

concat方法:

  • 描述:将元素合到一起返回出来,当添加的元素含数组时,则返回的是一个数组,原来的元素都是这个数组的成员,当添加的元素不含数组的时候,concat方法就想要与字符的连接符号
  • 调用对象(this): 不发生变化
  • 返回值:由参与元素组合形成的新的元素

元素中含有数组(返回结果也是数组形式<元素之间有逗号>)

var arr1 = [1,"abc",true,456];var arr2 = ["你好",456];var c =  arr1.concat(arr2,"qwe");document.write(c);document.write("</br>"+c.length);

分别的到返回结果,以及新数组长度
这里写图片描述

元素中不含有数组(返回结果字符形式形式<元素之间无逗号,与“+”结果一样>)

var arr1 = "你好!";var arr2 ="学习者";var c = arr1.concat(arr2);document.write(c);document.write("</br>"+arr1+arr2);

结果
这里写图片描述

push方法

  • 描述:将元素添加到数组里面去
  • 调用对象(this): 调用数组不发生改变
  • 返回值:数组长度
var arr1 = [1,2,3,4];var arr2 =456;var c = arr1.push(arr2);document.write(c);document.write("</br>"+arr1);

结果中第一个是数组长度,第二个是添加元素后的数组
这里写图片描述

那么 concat方法和push的方法有什么区别和联系呢?
以下代码调用就会明白了

var arr1 = [1,2,3,4];var arr2 =["a","b","c","d"];var c = arr1.concat(arr2);var len = arr1.push(arr2);document.write("concat方法的返回值:"+c);document.write("</br>调用push方法的原数组:"+arr1);document.write("</br>concat方法的返回值的长度:"+c.length);document.write("</br>调用push方法的原数组的长度::"+arr1.length);

结果concat方法的返回值(新数组)和调用push的原数组一样,但是两者长度不同。
这里写图片描述

为什么会这样呢? 因为 concat方法是把后面的数组里的元素拿出来一个一个加到原来的数组中,再放到一个新的数组返回出来,而push方法时把后面的数组当成一个元素放到第一个数组后面,输出的时候虽然看起来一样,实际上确是不同的。

项目 concat方法 push方法 添加的元素 arr1[1,2,3,4], arr2[“a”,”b”] arr1[1,2,3,4], arr2[“a”,”b”] 返回值 新数组c[1,2,3,4,”a”,”b”] 原数组变化后的长度5 原数组 不变 arr1[1,2,3,4,(“a”,”b”)]

pop方法

  • 描述:移除数组中最后一个元素并将它返回出来
  • 调用对象(this): 调用数组发生改变,将最后一个元素提出
  • 返回值:数组最后一个元素
var arr1 = ["数组的第一个元素","数组的第二个元素","数组的第三个元素","数组的第四个元素"];var c = arr1.pop();document.write("pop方法返回值:"+c);

结果
这里写图片描述

reverse方法

  • 描述:返回一个元素顺序被反转的 Array 对象
  • 调用对象(this): 调用数组发生改变,所有元素于对应元素发生交换
  • 返回值:一个调转之后的数组
var arr1 = [1,2,3,4,5];var c = arr1.reverse();document.write("调用reverse方法后的原数组:"+arr1);document.write("</br>reverse方法返回值:"+c);

结果
这里写图片描述

join方法

  • 描述:返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔符分隔开来。
  • 调用对象(this): 调用数组不发生改变
  • 返回值:把数组元素中间加入了符号(参数默认是“,”)的字符串
var arr1 = [1,2,3,4,5];var c = arr1.join("+");var d = arr1.join();document.write("调用join方法后的原数组:"+arr1);document.write("</br>join方法(参数给”+“)返回值:"+c);document.write("</br>join方法(参数默认)返回值:"+d);

结果
这里写图片描述

shift方法

  • 描述:移除数组中的第一个元素并返回该元素。—-操纵队首。
  • 调用对象(this): 调用数组发生改变,第一个元素移除。
  • 返回值:数组的第一个元素
var arr1 = [1,2,3,4,5];var c = arr1.shift();document.write("调用shift方法后的原数组:"+arr1);document.write("</br>shift方法返回值:"+c);

这里写图片描述

unshift方法

  • 描述:将指定的元素插入数组开始位置, 返回的是新数组的长度—操纵队首。
  • 调用对象(this): 调用数组发生改变,队首新增元素(参数)。
  • 返回值:数组长度
var arr1 = [1,2,3,4,5];var c = arr1.unshift("10");document.write("调用unshift方法(参数为10)后的原数组:"+arr1);document.write("</br>unshift方法返回值:"+c);

这里写图片描述

slice方法

  • 描述:将指定的元素插入数组开始位置, 返回的是新数组的长度—操纵队首。
  • 调用对象(this): 调用数组发生不变。
  • 返回值:被截取出来的部分元素(start,end)左包含,右边不包含
var arr1 = [1,2,3,4,5];var c = arr1.slice(2,4);document.write("调用slice方法(2,4)后的原数组:"+arr1);document.write("</br>slice方法返回值:"+c);

左包含右边不包含!!!

splice方法

  • 描述:从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。
  • 调用对象(this): 调用数组发生改变,丢了也加了
  • 返回值:被抛弃的元素 (;′⌒`)
var arr1 = ["a","b","c",1,2,3,4,5];// 在数组中从2的位置开始删除 2个元素 并在这个位置加入"把我也加进去"."还有我" var c = arr1.splice(2,2,"把我也加进去","还有我");document.write("调用splice方法(第一个参数:位置,第二个参数:个数)后的原数组:"+arr1);document.write("</br>splice方法返回值:"+c);

这里写图片描述

来画个图演示一下吧!! 嘻嘻 (我在看冯提莫的直播,O(∩_∩)O~~开心啊)
这里写图片描述

————- 今晚收工睡觉,明天早上继续 Date对象————————

————————继续学习!!!—————————————————

Date对象
Date对象有三种new (克隆的方式)

  1. dateObj = new Date()
  2. dateObj = new Date(dateVal)
  3. dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])

    对参数的描述

dateVal
必选项。如果是数字值,dateVal 表示指定日期与 1970 年 1 月 1 日午夜间全球标准时间 的毫秒数。如果是字符串,则 dateVal 按照 parse 方法中的规则进行解析。dateVal 参数也可以是从某些 ActiveX(R) 对象返回的 VT_DATE 值。

先来学习无参数的 new Date() 和几个toString()方法

var d1 = new Date();document.write("d1的toString():"+d1.toString());document.write("</br>d1的toTimeString():"+d1.toTimeString());document.write("</br>d1的toDateString():"+d1.toDateString());document.write("</br>d1的toLocaleString():"+d1.toLocaleString());document.write("</br>d1的toLocaleTimeString():"+d1.toLocaleTimeString());

结果
以几个不同的标准格式输出运行时时间
toString—以GMT格式输出年、月、日、时、分、秒、星期
toTimeString—以GMT格式输出时、分、秒
toDateString—输出星期、年、月
toLocaleString—以我们本地时间格式输出年、月、日、时、分、秒
toLocaleTimeString—以我们本地时间格式输出年、月、日
这里写图片描述

演示几个方法
getFullYear()方法—获得年份
getMonth()方法—获得月份(比实际月份少1,因为从0开始,所以需要+1)
getDay()—获得一周中的第几天,即星期几
getDate()—获得这个月月当中的第几天,即我们常说的日子

var d1 = new Date();document.write("d1的getFullYear():获得年份"+d1.getFullYear());document.write("</br>d1的getMonth():获得月份"+d1.getMonth());document.write("</br>d1的getDay():获得星期几"+d1.getDay());document.write("</br>d1的getDate():获得月份的第几天"+d1.getDate());

这里写图片描述

接下继续学习前面带参数的Date
我们以 拿到昨天Date对象 为例子
先通过拿到今天距离 距离 与 1970 年 1 月 1 日午夜间全球标准时间 的毫秒数

var d1 = new Date();var time = d1.getTime();

再减去一天的毫秒数,

time = time - 1*24*60*60*1000;

再把毫秒参数给进去,就拿到昨天的日期

var d2 = new Date(time);document.write("昨天的这个时候"+d2.toLocaleString());

这里写图片描述

通过给一个字符串拿到昨天的对象
(年、月、日时必须给项,时、分、秒、毫秒是可选项)

var d2 = new Date("5/2/2017");document.write("昨天的这个时候:"+d2.toLocaleString());

这里写图片描述

小小的总结一下

//Date格式转换//日期对象 --> 字符串 : toLocaleDateString() , toLocaleString()var str1 = d.toLocaleDateString(); //日期var str2 = d.toLocaleString(); //日期+时间//字符串 --> 日期对象: new Date(strDate)var d = new Date("4/30/2017");var time = d.getTime();//number型,精确值,单位是毫秒time = time - 7*24*60*60*1000; //d日期的7天以前var d2 = new Date(time); //新的日期对象

接下来是关于 with的小小语法技巧
有一段这样的代码

var y = d2.getFullYear();var m = d2.getMonth()+1;var dd = d2.getDate();

可以通过with 省略要写的d2

with(d2){     var y = getFullYear();    var m = getMonth()+1;    var dd = getDate();}
0 0