JavaScript 참조 유형 시간 날짜 및 배열 Array_javascript 기술

자바스크립트 참조형 시간 날짜

JavaScript의 Date 유형은 초기 Java의 java.util.Date 클래스를 기반으로 구축되었습니다. 이를 위해 날짜 유형은 1970년 1월 1일 0시(UTC) 이후 경과된 밀리초 수를 사용하여 날짜를 저장합니다. 이 데이터 저장 형식을 사용하는 조건에서 날짜 형식으로 저장되는 날짜는 1970년 1월 1일 전후 285,616년까지 정확할 수 있습니다.

날짜 객체 생성

자바스크립트에서는 Date() 생성자를 사용하여 다음과 같은 날짜 객체를 생성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var date=new Date();

날짜 매개변수가 생성자에 전달되지 않으면 현재 날짜와 시간을 보유하는 객체가 생성됩니다.

물론, 특정 날짜와 시간을 기준으로 날짜 객체를 생성하려는 경우에도 생성자에 날짜를 나타낼 수 있는 매개변수를 전달하기만 하면 됩니다.

Date() 생성자가 허용하는 일반적인 날짜 형식은 다음과 같습니다.

'월/일/연도'(예: 2014년 2월 27일)
"영어 월 이름 일, 연도", 예: 2014년 2월 27일
"연, 월, 일, 시, 분, 초, 밀리초"(예: 2014,1,27,11,22,22

다음은 위 형식으로 날짜 개체를 생성합니다.

var date1=new Date("2/27/2014"); 
alert(date1); //Thu Feb 27 2014 00:00:00 GMT+0800
var date2=new Date("February 27,2014");
alert(date2); //Thu Feb 27 2014 00:00:00 GMT+0800
var date3=new Date(2014,1,27,11,24,0);
alert(date3); //Thu Feb 27 2014 11:24:00 GMT+0800
var date4=new Date(2014,1,27);
alert(date4); //Thu Feb 27 2014 00:00:00 GMT+0800
var date5=new Date("2014,1,27,11,24,0");
alert(date5); //Invalid Date

위의 예를 통해 차이점을 알 수 있습니다.

첫 번째, 처음 두 가지 방법을 사용하여 날짜 객체를 생성할 때는 매개변수로 문자열로 전달해야 합니다. 세 번째 방법을 사용하여 생성할 때는 문자열로 전달할 수 없으며 각 값은 반드시 개별 값이 전달됩니다.

두 번째로, 세 번째 방법을 사용하여 날짜를 생성할 때 한 가지 특별한 주의가 필요합니다. 해당 월은 0부터 시작합니다. 즉, 1월은 0에 해당하지만 처음 두 방법은 일반적입니다. 월 표현, 즉 2월은 2에 해당합니다.

셋째, 세 번째 방법을 사용하여 표현하는 경우 연도와 월을 필수로 입력하고, 기타 매개변수를 생략할 경우 0으로 표현합니다.
참고: 처음 두 메서드는 표시된 호출 Date.parse() 메서드와 동일한 결과를 얻습니다. 세 번째 메서드는 표시된 호출 Date.UTC() 메서드와 동일한 결과를 얻습니다.

상속 메서드

Date 유형은 toString(), toLocaleString() 및 valueOf() 메서드도 상속합니다. 이러한 메소드를 호출하여 얻은 값의 형식은 브라우저마다 다릅니다. 구체적으로 직접 호출해 볼 수도 있습니다.

날짜 형식 지정 방법

날짜 유형에는 다음과 같이 날짜 형식을 문자열로 지정하는 데 특별히 사용되는 몇 가지 메서드도 있습니다.

toDateString() - 요일, 월, 일, 연도를 구현된 특정 형식으로 표시합니다.

toTimeString() - 구현별 형식으로 시, 분, 초, 시간대를 표시합니다.

toLocaleDateString() - 요일, 월, 일, 연도를 지역별 형식으로 표시합니다.

toLocaleTimeString() - 현실별 형식으로 시, 분, 초를 표시합니다.

toUTCString() - 전체 UTC 날짜를 디스플레이별 형식으로 표시합니다.

위 방법은 상대적으로 자주 사용되지 않을 수 있으므로 자세히 소개하지 않겠습니다.

날짜/시간 구성 요소 메서드

자바스크립트 참조형 배열 배열

[22가지 배열 방법 개요]

JavaScript의 배열은 대부분의 다른 언어의 배열과 상당히 다릅니다. 다른 언어의 배열과 마찬가지로 JavaScript 배열은 순서가 지정된 데이터 목록이지만 다른 언어와 달리 JavaScript 배열의 각 항목은 모든 유형의 데이터를 보유할 수 있습니다. 즉, 배열의 첫 번째 위치에 문자열을 저장하고, 두 번째 위치에 값을 저장하고, 세 번째 위치에 객체를 저장할 수 있습니다. 또한 JavaScript 배열의 크기는 동적으로 조정될 수 있습니다. 즉, 새 데이터를 수용하기 위해 데이터가 추가됨에 따라 자동으로 커질 수 있습니다.

배열: 배열의 각 항목은 모든 유형의 데이터를 저장할 수 있으며 배열의 크기는 동적으로 조정됩니다(최대 4294967295개 항목, 약 43억 개의 항목을 포함할 수 있음)

[1.1] 배열 생성:

[1.1.1] Array 생성자 사용(Array 생성자 사용 시 New 연산자 생략 가능)

e.g. var colors = new Array();
var colors = new Array(20);
var colors = new Array('red','blue','green');
var colors = Array(3);

[참고] 숫자 값이 전달되면 해당 숫자 값에 따라 주어진 수의 항목을 포함하는 배열이 생성됩니다.

다른 유형의 매개변수가 전달되면 해당 값을 포함하는 단일 항목 배열이 생성됩니다

e.g. var colors = new Array(3);//包含三项的数组
var colors = new Array('Greg');//包含一项，且该项为"Greg"的数组  

[1.1.2]使用数组字面量表示法(用该方法不会调用Array构造函数)

e.g. var colors = ['red','blue','green'];
var colors = [];
[不可用] var colors = [1,2,];

//在IE8及以前中会包含一个三个项目,且每个项目为1、2和undefined的数组。在其他浏览器中为只包含1和2的数组

[不可用] var colors = [,,,];

//在IE8及以前会创建4项的数组,而在其他浏览器中会创建3项的数组

[1.2]数组读写

[1.2.1]在读取和设置数组的值时，要使用方括号并提供相应值的基于0的数字索引，数组的项数保存在其length属性中，这个属性始终会返回0或更大的值

[1.2.2]数组的length属性可读可写，通过设置数组的Length属性，可以从数组的末尾移除项或向数组中添加新项

e.g. var colors = ['red','blue','green'];
colors.length = 2;
alert(colors[2]);//undefined
colors.length = 4;
alert(colors[3]);//undefined

[1.2.3]利用length属性可以方便地在数组末尾添加新项

e.g. colors[colors.length] = 'black';

[1.2.4]当把一个值放在超出数组大小的位置上时，数组就会重新计算其长度值，即长度值等于最后一项的索引加1

e.g. var colors = ['red','blue','green'];
colors[99] = 'black';
alert(colors.length);//100 

[1.3]数组检测

[1.3.1]if(value instanceof Array){}:问题在于它假定只有一个全局执行环境，如果网页中包含多个框架，那实际上就存在两个以上不同的全局环境，从而存在两个以上不同版本的Array构造函数。如果从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

[1.3.2]ECMAScript5新增了Array.isArray()方法:if(Array.isArray(value)){}。该方法的目的是最终确定某个值到底是不是数组，而不管它在哪个全局环境中创建的   

[1.4]数组转换

[注意]如果数组中的某一项的值是null或者undefined，那么该值在join()、toLocaleString()、toString()和valueOf()方法返回的结果中以空字符串表示

[1.4.1]toString():返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串

[1.4.2]valueof():返回的还是数组

e.g. var colors = ['red','blue','green'];     
console.log(colors.valueOf());//['red','blue','green']
alert(colors.valueOf());//'red,blue,green'
alert(colors.toString());//'red,blue,green'
alert(colors);//'red,blue,green'

[注意]由于alert()要接收字符串参数，它会在后台调用toString()方法，会得到与toString()方法相同的结果

[1.4.3]toLocaleString():它会创建一个数组值以逗号分隔的字符串，而每一项的值调用的是toLocaleString()方法

var person1 = {
 toLocaleString: function(){
 return 'Nikolaos';
 },
 toString: function(){
 return 'Nicholas';
 }
};
var person2 = {
 toLocaleString: function(){
 return 'Grigorios';
 },
 toString: function(){
 return 'Greg';
 }
};
var people = [person1,person2];
alert(people);//Nicholas,Greg
alert(people.toString());//Nicholas,Greg
alert(people.toLocaleString());//Nikolaos,Grigorios

[1.4.4]join:可以使用不同的分隔符来构建这个字符串,join只接收一个字符，用作分隔符的字符串，然后返回包含所有数组项的字符串

e.g. var colors = ['red','green','blue'];
alert(colors.join(','));//'red,green,blue'
alert(colors.join('||'));//'red||green||blue'
alert(colors.join());//'red,green,blue'
alert(colors.join(undefined));//'red,green,blue'

[注意]在IE7及以前会使用undefined作为分隔符

[1.5]数组方法

[1.5.1]栈方法:栈是一种LIFO(last-in-first-out)后进先出的数据结构,也就是最新添加的项最早被移除。栈中项的插入(叫做推入)和移除(叫做弹出)只发生在栈的顶部。

[1.5.1.1]push()方法:可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

[1.5.1.2]pop()方法:从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

[1.5.2]队列方法:队列是一种FIFO(first-in-first-out)先进先出的数据结构，队列在列表的末端添加项，从列表的前端移除项。

[1.5.2.1]shift():移除数组中的第一个项并返回该项,同时数组的长度减1(结合使用shift()和push()可以模拟队列)

[1.5.2.2]unshift():在数组前端添加任意个项并返回新数组长度(结合使用unshift()和pop()从相反方向模拟队列)

[注意]IE7及以下unshift()方法返回的总是undefined               

[1.5.3]排序方法:

[1.5.3.1]reverse():反转数组的顺序,返回经过排序之后的数组

[1.5.3.2]sort():按升序排列数组项,sort方法会调用每个数组项的toString()方法，然后比较得到的字符串排序,返回经过排序之后的数组

[注意]sort()方法可以接受一个比较函数作为参数，以便指定哪个值在哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个参数之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个参数之后则返回一个正数

[比较函数] (使用：e.g. array1.sort(compare);)

function compare(value1,value2){
 if(value1 < value2){
 return -1;
 }else if(value1 > value2){
 return 1;
 }else{
 return 0;
 }
}

对于数值类型或valueOf()方法会返回数值类型的对象类型，比较函数可以简化为：

function compare(value1,value2){
return value2 - value1;
}

[tips]:常用以下方法来创建一个随机数组

function compare(){
return Math.random() - 0.5;
}

[1.5.4]操作方法(切开、连接、插入、删除、替换):

[1.5.4.1]concat():基于当前数组中的所有项创建一个新数组,先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组(concat()不影响原数组)

[注意1]没有给concat()方法传递参数时，它只是复制当前的数组

[注意2]如果参数是一个或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中

[注意3]如果传递的值不是数组，这些值就会被简单地添加到结果数组的末尾

e.g. var numbers = [1,2];
console.log(numbers.concat());//[1,2]
console.log(numbers.concat([5,4,3],[3,4,5],1,2));//[1,2,5,4,3,3,4,5,1,2];

[1.5.4.2]slice():基于当前数组中的一个或多个项创建一个新数组,接受一个或两个参数,即要返回项的起始和结束位置 ，最后返回新数组(slice()不影响原数组)

[注意1]没有参数时，返回原数组

[注意2]只有一个参数时，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项

[注意3]两个参数时，该方法返回起始位置和结束位置之间的项，但不包括结束位置的项   

[注意4]若参数为负数时，则用数组长度加负数作为参数

[注意5]若结束位置小于开始位置，则返回空数组

var numbers = [1,2,3,4,5];
console.log(numbers.slice());//[1,2,3,4,5]
console.log(numbers.slice(2));//[3,4,5]
console.log(numbers.slice(2,3));//[3]
console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5]
console.log(numbers.slice(2,1));//[]

[1.5.4.3]splice():原数组变为修改后的数组，而splice()返回从原数组中删除的项组成的数组,若无删除项则返回空数组

[a]删除:两个参数为要删除的第一项的位置、要删除的项数

[b]插入:三个参数为起始位置、0(要删除的基数)、要插入的项

[c]替换:三个参数为起始位置、要删除的项数、要插入的项

[注意1]若第一个参数为负数时，则用数组长度加负数作为参数   

[注意2]若第二个参数为负数时，则用0作为参数   

var numbers = [1,2,3,4,5];
    console.log(numbers.splice(0,2),numbers);//[1,2] [3,4,5]
    var numbers = [1,2,3,4,5];
    console.log(numbers.splice(1,0,11,12),numbers);//[] [1,11,12,2,3,4,5]
    var numbers = [1,2,3,4,5];
    console.log(numbers.splice(1,3,11,12),numbers);//[2,3,4] [1,11,12,5]
    var numbers = [1,2,3,4,5];
    console.log(numbers.splice(-4,3,11,12),numbers);//-4+5=1 -> [2,3,4] [1,11,12,5]
    var numbers = [1,2,3,4,5];
    console.log(numbers.splice(-4,-3,11,12),numbers);//-4+5=1 -> [] [1,11,12,2,3,4,5]

[1.5.5]位置方法(ECMAScript5):两个参数：要查找的项、表示查找起点位置的索引(可选)。返回第一个满足条件的查找项在数组中的位置，如果没有找到则返回-1(位置方法不会影响原数组)

[注意]在比较时，使用全等操作符

[1.5.5.1]indexOf()

[1.5.5.2]lastIndexOf()   

var person = {name: 'Nicholas'};
var people = [{name: 'Nicholas'}];
var morePeople = [person];
alert(people.indexOf(person));//-1,因为person和people[0]虽然值相同，但是是两个引用
alert(morePeople.indexOf(person));//0，因为person和morepeople[0]是同一个引用
alert(morePeople.indexOf({name: 'Nicholas'}));//-1,因为不是同一个引用

[tips]若返回满足条件的项的所有索引值

function allIndexOf(array,value){
 var result = [];
 var pos = array.indexOf(value);
 if(pos === -1){
  return -1;
 }
 while(pos > -1){
  result.push(pos);
  pos = array.indexOf(value,pos+1);
 }
 return result;
  }
 var array = [1,2,3,3,2,1];
 console.log(allIndexOf(array,1));//[0,5]  

[1.5.6]迭代方法(ECMAScript5):两个参数：要在每一项上运行的函数、运行该函数作用域对象——影响this的值(可选)。传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的位置、数组对象本身(迭代方法不会影响原数组)

[1.5.6.1]every():对数组中的每一项运行给定函数，如果该函数对每一项都返回true,则返回true

[1.5.6.2]filter():对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组(常用于查询符合条件的所有数组项)

[1.5.6.3]forEach():对数组中的每一项运行给定函数，这个方法没有返回值(相当于for循环)

[1.5.6.4]map():对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组(常用于创建包含项与另一个数组一一对应的数组)

[1.5.6.5]some():对数组中的每一项运行给定函数，如果该函数对任一项返回true,则返回true

 var numbers = [1,2,3,4,5,6,7,8,9,0];
 var sum = 0;
 var everyResult = numbers.every(function(item,index,array){
  return (item>2);
 });
 var filterResult = numbers.filter(function(item,index,array){
  return (item>2)
 });
 var forEachResult = numbers.forEach(function(item,index,array){
  sum += item;
  return (item>2)
 });
 var mapResult = numbers.map(function(item,index,array){
  return (item*2)
 }); 
 var som =  numbers.some(function(item,index,array){
  return (item>2)
 }); 
 console.log(everyResult);//false
 console.log(filterResult);//[3,4,5,6,7,8,9]
 console.log(forEachResult,sum);//undefined 45 
 console.log(mapResult);//[2,4,6,8,10,12,14,16,18,0]
 console.log(someResult);//true
 [tips] function logArray(value,index,array){
   console.log(value);
  }
  [2,5,,,,,9].forEach(logArray)//2 5 9

[1.5.7]归并方法(ECMAScript5):迭代数组的所有项，构建一个最终返回的值。接收两个参数:一个在每一项上调用的函数、作为归并基础的初始值(可选)。传给reduce()和reduceRight()的函数接受4个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上。因此，第一个参数是数组第一项，第二个参数是数组第二项(归并方法不会影响原数组)

[1.5.7.1]reduce()

[1.5.7.2]reduceRight()

var sum = values.reduce(function(prev,cur,index,array){
    return prev+cur;
   })
   alert(sum);//15