| 번호 | 기본값 | 메서드 | 결과값 |
|---|---|---|---|
{
const arr = [100, 200, 300, 400, 500];
const text = arr.length;
document.querySelector(".sample01_R1").innerHTML = text;
}
| 번호 | 기본값 | 메서드 | 결과값 |
|---|---|---|---|
{
const arr = [100, 200, 300, 400, 500];
const text1 = arr.join("*");
const text2 = arr.join("-");
const text3 = arr.join("");
const text4 = arr.join(" ");
document.querySelector(".sample02_R1").innerHTML = text1;
document.querySelector(".sample02_R2").innerHTML = text2;
document.querySelector(".sample02_R3").innerHTML = text3;
document.querySelector(".sample02_R4").innerHTML = text4;
}
| 번호 | 기본값 | 메서드 | 메서드 값 | 결과값 |
|---|---|---|---|---|
{
const arr1 = [100, 200, 300, 400, 500];
const text = arr1.push(600);
document.querySelector(".sample03_R1").innerHTML = arr1;
const arr2 = [100, 200, 300, 400, 500];
const text2 = arr2.unshift(600);
document.querySelector(".sample03_R2").innerHTML = arr2;
}
| 번호 | 기본값 | 메서드 | 메서드 값 | 결과값 |
|---|---|---|---|---|
{
const arr1 = [100, 200, 300, 400, 500];
const text = arr1.shift();
document.querySelector(".sample04_P1").innerHTML = text;
document.querySelector(".sample04_R1").innerHTML = arr1;
const arr2 = [100, 200, 300, 400, 500];
const text2 = arr2.pop();
document.querySelector(".sample04_P2").innerHTML = text2;
document.querySelector(".sample04_R2").innerHTML = arr2;
}
| 번호 | 기본값 | 메서드 | 결과값 |
|---|---|---|---|
{
const arr1 = [100, 200, 300, 400, 500];
const text = arr1.indexOf(200);
document.querySelector(".sample05_R1").innerHTML = text;
const text2 = arr1.lastIndexOf(200);
document.querySelector(".sample05_R2").innerHTML = text2;
const arr2 = [100, 200, 300, 200, 500];
const text3 = arr2.lastIndexOf(200);
document.querySelector(".sample05_R3").innerHTML = text3;
const text4 = arr1.includes(500);
document.querySelector(".sample05_R4").innerHTML = text4;
}
| 번호 | 기본값 | 메서드 | 결과값 |
|---|---|---|---|
{
const arr = [100, 200, 300, 400, 500];
const text = arr.reverse();
document.querySelector(".sample06_R1").innerHTML = text;
const text2 = arr.sort();
document.querySelector(".sample06_R2").innerHTML = text2;
const text3 = arr.sort(function(a,b){return b-a;});
document.querySelector(".sample06_R3").innerHTML = text3;
const str1 = ['c', 'd', 'e', 'a', 'b'];
const text4 = str1.sort((a, b) => {return a.localeCompare(b);});
// const text4 = str1.sort((a, b) => return a.localeCompare(b););
document.querySelector(".sample06_R4").innerHTML = text4;
}
| 번호 | 기본값 | 메서드 | 결과값 |
|---|---|---|---|
{
const arrNum1 = [100, 200, 300];
const arrNum2 = [400, 500, 600];
const result1 = arrNum1.concat(arrNum2);
document.querySelector(".sample07_R1").innerHTML = result1;
const result2 = [...arrNum1, ...arrNum2];
document.querySelector(".sample07_R2").innerHTML = result2;
}
| 번호 | 기본값 | 메서드 | 결과값 |
|---|---|---|---|
{
const arrNum1 = [100, 200, 300, 400, 500];
const result1 = arrNum1.slice(2);
document.querySelector(".sample08_R1").innerHTML = result1;
const result2 = arrNum1.slice(2, 3);
document.querySelector(".sample08_R2").innerHTML = result2;
const result3 = arrNum1.slice(2, 4);
document.querySelector(".sample08_R3").innerHTML = result3;
const result4 = arrNum1.slice(2, 5);
document.querySelector(".sample08_R4").innerHTML = result4;
const result5 = arrNum1.slice(-2);
document.querySelector(".sample08_R5").innerHTML = result5;
const result6 = arrNum1.slice(-2, 5);
document.querySelector(".sample08_R6").innerHTML = result6;
}
| 번호 | 기본값 | 메서드 | 메서드 결과값 | 배열 결과값 |
|---|---|---|---|---|
{
//splice(위치, 갯수, 요소1... ) -> 문자열의 리플라이스랑 비슷함
//splice(시작값, N자릿수)
//splice(시작값, N자릿수, 변경값) -> 변경값 : 자릿수를 이 값으로 변경해라 / 무한으로 추가 가능
//splice(시작값, 0, 변경값) -> 0 : 자릿수가 없기 때문에 시작값 앞에 변경값을 끼고 싶을때
const arrNum1 = [100, 200, 300, 400, 500];
const result1 = arrNum1.splice(2);
document.querySelector(".sample09_R1").innerHTML = result1;
document.querySelector(".sample09_A1").innerHTML = arrNum1;
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.splice(2, 3);
document.querySelector(".sample09_R2").innerHTML = result2;
document.querySelector(".sample09_A2").innerHTML = arrNum2;
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.splice(2, 3, "javascript");
document.querySelector(".sample09_R3").innerHTML = result3;
document.querySelector(".sample09_A3").innerHTML = arrNum3;
const arrNum4 = [100, 200, 300, 400, 500];
const result4 = arrNum4.splice(1, 1, "javascript");
document.querySelector(".sample09_R4").innerHTML = result4;
document.querySelector(".sample09_A4").innerHTML = arrNum4;
const arrNum5 = [100, 200, 300, 400, 500];
const result5 = arrNum5.splice(1, 0, "javascript");
document.querySelector(".sample09_R5").innerHTML = result5;
document.querySelector(".sample09_A5").innerHTML = arrNum5;
const arrNum6 = [100, 200, 300, 400, 500];
const result6 = arrNum6.splice(0, 4, "javascript", "jquery");
document.querySelector(".sample09_R6").innerHTML = result6;
document.querySelector(".sample09_A6").innerHTML = arrNum6;
}
| 번호 | 기본값 | 메서드 | 결과값 |
|---|---|---|---|
{
const text1 = [100, 200, 300, 400, 500];
//리턴값 함수
// const find = arr.find(function(element) => {
// return element === 300
// });
//화살표 함수
// const find = arr.find((element)) => {
// return element === 300
// });
//화살표 함수 : 괄호 생략
// const find = arr.find(element => {
// return element === 300
// });
//화살표 함수 괄호, 리턴 생략
const find1 = text1.find(element => element === 300);
document.querySelector(".sample10_R1").innerHTML = find1;
const text = ["javascript", "react", "vue"];
const find2 = text.find(element => element === "javascript");
document.querySelector(".sample10_R2").innerHTML = find2;
const find3 = text.findIndex(element => element === "javascript");
document.querySelector(".sample10_R3").innerHTML = find3;
}
| 번호 | 기본값 | 메서드 | 결과값 |
|---|---|---|---|
{
//내가 원하는걸 조건걸어서 찾을 수 있다.(find()보단 좀 더 유동적임)
//배열.filter(콜백함수)
const arrNum1 = [100, 200, 300, 400, 500];
// const result1 = arrNum1.filter(function(){});
const result1 = arrNum1.filter((el) => {
return el === 300;
});
document.querySelector(".sample11_R1").innerHTML = result1;
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.filter( el => el === 300 );
document.querySelector(".sample11_R2").innerHTML = result2;
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.filter( el => el >= 300 );
document.querySelector(".sample11_R3").innerHTML = result3;
const arrText1 = ["javascript", "react", "vue"];
const result4 = arrText1.filter( el => el === "javascript" );
document.querySelector(".sample11_R4").innerHTML = result4;
}
| 번호 | 기본값 | 메서드 | 결과값 |
|---|---|---|---|
{
const arrNum1 = [100, 200, 300, 400, 500];
// const result1 = arrNum1.filter(function(){});
// const result1 = arrNum1.map((el) => {
// return el;
// });
// const result1 = arrNum1.map((el) => el);
const result1 = arrNum1.map(el => el);
document.querySelector(".sample12_R1").innerHTML = result1;
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.map(el => el + "web"); //문자열 추가 가능
document.querySelector(".sample12_R2").innerHTML = result2;
const arrNum3 = [100, 200, 300, 400, 500];
const result3 = arrNum3.map(el => el * 2); //연산도 가능
document.querySelector(".sample12_R3").innerHTML = result3;
const arrNum4 = [{a: 100}, {a: 200}, {a: 300}];
const result4 = arrNum4.map(el => el.a); //객체에서 많이 사용함(중요)
document.querySelector(".sample12_R4").innerHTML = result4;
}
| 번호 | 기본값 | 메서드 | 결과값 |
|---|---|---|---|
{
const arrNum1 = [100, 200, 300, 400, 500];
const result1 = arrNum1.reduce(el => el);
document.querySelector(".sample13_N1").innerHTML = "1";
document.querySelector(".sample13_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M1").innerHTML = ".reduce()";
document.querySelector(".sample13_R1").innerHTML = result1;
const arrNum2 = [100, 200, 300, 400, 500];
const result2 = arrNum2.reduce((previous, current) => previous + current);
document.querySelector(".sample13_N2").innerHTML = "2";
document.querySelector(".sample13_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M2").innerHTML = ".reduce(previous + current(합계))";
document.querySelector(".sample13_R2").innerHTML = result2;
const arrNum3 = [100, 200, 300, 400, 500];
let sum = 0;
for(let i=0; i<arrNum3.length; i++){sum = sum + arrNum3[i];};
document.querySelector(".sample13_N3").innerHTML = "3";
document.querySelector(".sample13_Q3").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample13_M3").innerHTML = ".for(합계)";
document.querySelector(".sample13_R3").innerHTML = sum;
const arrNum4 = [[100, 200], [300, 400]];
const result4 = arrNum4.reduce((p, c) => p.concat(c));
document.querySelector(".sample13_R4").innerHTML = result4;
// const arrNum5 = [[100, 200], [300, 400]];
// const result5 = result4.reduce((p, c) => p+c);
// document.querySelector(".sample13_R5").innerHTML = result5;
// 합계는 1000
const arrNum5 = ["javascript", "react", "vue"];
const result5 = arrNum5.reduceRight((p, c) => p+c);
document.querySelector(".sample13_R5").innerHTML = result5;
}
| 번호 | 기본값 | 메서드 | 결과값 |
|---|---|---|---|
{
const text1 = "javascript";
const result1 = Array.from(text1);
document.querySelector(".sample14_R1").innerHTML = result1;
// console.log(result1);
//j,a,v,a,s,c,r,i,p,t --> 문자열을 배열로 바꿈 --> Array(10) --> 중간단어 바꾸려면 splice() 사용
const text2 = "javascript";
const result2 = Array.from(text2, el => el + "10");
document.querySelector(".sample14_R2").innerHTML = result2;
// console.log(result2);
const text3 = "javascript";
const result3 = [...text3].map(el => el);
document.querySelector(".sample14_R3").innerHTML = result3;
// console.log(result3);
}