반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// Template literals
let name='ingoo';
let txt='hello '+name+' world!'; //' ' 안에 space를 넣어줘야함
let txt1=`hello ${name} world`; //`` 사이 space가 모두 출력되서 편함.
console.log(txt);
console.log(txt1)
let a ='boo';
let b ='자바';
let c='스크립트';
let str=`저는 ${a}이고 ${b+c}를 합니다.`;
console.log(str);
//ARRAY
//Array 만드는 방식 2 가지
arr = new Array(); //배열인데 왜 얘는 ()를 쓰징?
arr = [];
arr=[,,,,,]; //쉼표를 넣어서 빈값을 만들 수도 있음 근데 쉼표 개수대로 만듬 (쉼표+1이 X)
console.log(arr);
arr=[1,2,3];
console.log(arr);
//Push
arr.push(3,4); //3,4를 추가한다.
console.log(arr); //1,2,3,3,4
//Pop
arr.pop(); // 맨끝에있는걸 뺌
console.log(arr);
arr.pop(); // pop () 괄호안에 뭘 넣는 그냥 마지막것을 뺌
console.log(arr);
arr.push(4,5,6,7,8,9,10)
console.log(arr);
// IndexOf
//arr value =[1,2,3,4,5,6,7,8,9,10]
//arr key =[0,1,2,3,4,5,6,7,8,9]
arr.indexOf(4,0);
console.log(arr.indexOf(4,0)); //3
console.log(arr.indexOf(5,0)); //4
console.log(arr.indexOf(6,9)); //-1 (찾을 수 없음)
console.log(arr.indexOf(4,1)); //3 배열전체에서의 4의 위치를 알려줌
//2번재 배열 추가요 ~
arr2=[1,2,3,4,5,6,[1,2,3]];
console.log(arr2);
console.log(arr2[3]);
console.log(arr2[6]); // 6번재 자리에 있는 배열을 출력
// 이중배열 //
// 3번재 배열 추가요 ~
arr3 = [
[101,102,103,104],
[201,202,203,204],
[301,302,303,304]
];
console.log(arr3);
//arr3 0번째의 104호 출력
console.log(arr3[0]);
console.log(arr3[0][3]);
//arr3 1번째(2층)의 204호 빼기
console.log(arr3[1].pop());
console.log(arr3[1]); //201,202,203
//다시 넣기
arr3[1].push(204);
console.log(arr3);
//------------------------------2교시 -------------------//
arr=[
[101,102,103,104],
[201,202,203,204],
[301,302,303,304]
];
console.log(arr);
for(i=0; i<arr.length; i++){
for(j=0; j<arr[i].length; j++){
console.log(arr[i][j]);
}
}
arr.forEach(v=>{
v.forEach(v2=>{
console.log(v2);
})
});
arr.forEach((v,k)=>{
v.forEach((v2,k2)=>{
console.log(v,k,v2,k2);
});
});
</script>
</body>
</html>
수업 10시 반 종료
집에서 구글 자료 보고 겅부하기
꿀팁
html 에 [id] + enter ->
<div id = ""></div> 가 나옴
id, class, ul 등 쓸 때 편리할듯
배열 연습 / slice, Array.from / .fill() / ()=> new Array().fill() / 구구단 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type = "text/javascript">
let arr=[1,2,3,4,5,6];
console.log(arr.slice(2,5)); //3,4,5 인 배열이 나옴
arr.slice(3,2);
console.log(arr);
console.log(arr.slice(1,3)); //2,3
console.log(arr.slice(3,5)); //4,5
console.log(arr.slice(3,6)); //4,5,6
console.log(Array.from('foo')); // ["f", "o", "o"]
console.log(Array.from('foo', x => x+1));// ["f1" , "o1", "o1"]
console.log(Array.from(1)); // 안에 숫자 바뀌어도 비어있음 안에 넣을 배열 요소 개수 미리 넣는거같음?
console.log(Array.from([1,2,3], x => x)); //[1,2,3]
console.log(Array.from([1,2,3], x => x+x)); // [2,4,6]
console.log(Array.from([1,2,3], x=> x*2+10)); //[12,14,16]
console.log(Array.from([1,2,3], x => x**x)); // [1,4,27]
let array1= new Array(2); //-> length 2의 배열이 생김 [ , ]
console.log(array1);
array1.fill(2);
console.log(array1); // [2,2]
let arr1=Array.from(Array(5), ()=> new Array(2).fill(0));
console.log(arr1); //[0,0],[0,0],[0,0],[0,0],[0,0]
let arr2=Array.from(Array(5).fill(1));
console.log(arr2); //[1,1,1,1,1]
let arr3=Array.from(Array(5), () => 2);
console.log(arr3); // [2,2,2,2,2]
let arr4 = Array.from(Array(5), ()=> new Array(5), () =>1);
console.log(arr4); // 1 이 안들어감
let arr5=Array.from(Array(5), ()=> new Array(3).fill(3));
console.log(arr5);
let good0 = Array(3);
console.log(good0); // [ , , ]
let good1 = new Array(3);
console.log(good1); // [ , , ]
let good2 = Array.from(Array(5), () => 1);
console.log(good2); // [1,1,1,1,1]
let good3 = Array.from(Array(5).fill(1));
console.log(good3); // [1,1,1,1,1]
let good4 = Array(5).fill(1);
console.log(good4); // [1,1,1,1,1]
let good5 = Array.from(Array(5), ()=> new Array(2).fill(1));
console.log(good5); // [[1,1],[1,1],[1,1],[1,1],[1,1]
let good6 = Array(5).fill(new Array(2).fill(1));
console.log(good6); // [[1,1],[1,1],[1,1],[1,1],[1,1]]
let good7 = Array.from(Array(5).fill(1));
console.log(good7); // [1,1,1,1,1]
let good8 = Array(5).fill(1);
console.log(good8); // [1,1,1,1,1]
let good9 = Array.from(Array(5), ()=> new Array(2).fill(1));
console.log(good9); // [[1,1],[1,1],[1,1],[1,1],[1,1]]
let good10 = Array(5).fill(new Array(2).fill(1));
console.log(good10); // [[1,1],[1,1],[1,1],[1,1],[1,1]]
let good11 = Array.from(Array(5), ()=> new Array(2).fill(1));
console.log(good11); // [[1,1],[1,1],[1,1],[1,1],[1,1]]
// 구구단 만들기
let gugudan = [
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9]
]
gugudan.forEach((ele, index)=>{
ele.forEach(ele2=>{
console.log(`${index+2} X ${ele2} = ${(index+2)*ele2}`)
})
console.log(' ');
})
</script>
</body>
</html>
블로그 보고 겅부 - 마지막 reduce 각 요소에 주어진 함수를 다 실행하고 한가지 결과값만 반환 한다는 거 이해가 안됨
[2020 최신 ES6+] 자바스크립트 배열 기본부터 응용까지 완벽 정리
자바스크립트로 개발을 하다 보면 배열이라는 자료구조를 접하게 됩니다. 배열이란 무엇일까요? 그리고 배열은 어떤 경우에 사용이 되고 어떤 기능을 가지고 있을까요? 이번 포스팅에서는 배열
webruden.tistory.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type = "text/javascript">
// 배열 합치기
const arr1 = ['h', 'e'];
const arr2 = ['l', 'l', 'o'];
arr1.concat(arr2);
console.log(arr1); // ['h','e'] -> 변수를 안쓰니깐 안됨
const newarr = arr1.concat(arr2);
console.log(newarr); // 새로운 변수 newarr 에 담을 때 가능
const num1=[1,2,3];
const num2=[4,5,6];
const num3=[7,8,9];
num1.concat(num2,num3);
console.log(num1); // [1,2,3]
const Newarray = num1.concat(num2,num3);
console.log(Newarray); //[1,2,3,4,5,6,7,8,9]
const a = ['a','b','c'];
const New = a.concat(1,[2,3]);
console.log(New); //['a','b','c',1,2,3] [2,3]은 배열로 안들어가네 ? ?
New.reverse();
console.log(New); //[3,2,1,'c','b','a']
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
const numbers = [3,5,443,2,55,100];
numbers.sort();
console.log(numbers); //[100,2,3,443,5,55] 문자열전환되어
//유니코드 포인트 값에 따라 정렬됨.
numbers.sort(function(a,b){
return a-b;
});
console.log(numbers); //[2,3,5,55,100,443]
numbers.sort(function(a,b){
return b-a;
});
console.log(numbers); //[443,100,55,5,3,2]
const Great = ['피', '땀', '눈물'];
const g1 = Great.join();
console.log(Great); //['피', '땀', '눈물']
console.log(g1); // 피, 땀, 눈물 - > 배열아님
console.log(Array.isArray(g1)); //false.
const g2 = Great.join(',');
console.log(g2); // 피, 땀, 눈물
const g3 = Great.join('+');
console.log(g3); // 피+땀+눈물
const g4 = Great.join('');
console.log(g4); // 피땀눈물
//MAP METHOD
const arr0 = ['first', 'second', 'third'];
arr0.map((currentValue, index, array) =>{
console.log(currentValue, index, array);
})
let one = [1,2];
let two = [3,4];
let spread = [0, ...one, 5, ...two];
let spread2 = [0,one,5,two];
console.log(spread); // [0,1,2,5,3,4]
console.log(spread2); // [0,Array(2), 5, Array(2)]
// ... -> iterable Object 열거 가능한 오브젝트를 하나씩 전개함.
// 변수 앞에 '...' 으로 선언
let str='hello';
let str2= [...str];
console.log(str2); // ["h","e","l","l","o"]
let str3 = [str];
console.log(str3); // ["hello"]
const va =[10,20,30];
function abc(a,b,c){
console.log(a,b,c); // 10 20 30
}
abc(...va);
function test(a, b, ...rest){
console.log(a,b,rest); // 1 2 [3,4,5]
}
test(...[1,2,3,4,5]);
function test2(a,b,...rest){
console.log(a,b,rest); // 1 2 [3, 4, 5]
}
let tst = [1,2,3,4,5];
test2(...tst);
function sum(x,y,z){
return x+y+z;
}
const num = [1,2,3];
console.log(sum(...num)); //6
console.log(sum(num)); //1,2,3undefinedundefined
// MAPPING 실전 예제 price 값 콤마 처리
const items = [
{
id:1,
name:'맥북',
price:2930000
},
{
id:2,
name:'아이패드',
price:800000
},
{
id:3,
name:'아이폰',
price:450000
},
];
const newItems = items.map(item=>{
return {
...item,
price:item.price.toLocaleString()
}
});
console.log(newItems);
const newItems1 = items.map(item =>{
return{
...item
}
})
console.log(newItems1); // items 그대로 나옴
const newItems2 = items.map(item => item);
console.log(newItems2); //items 그대로 나옴
//toLocaleString();
//-> 사용자의 문화권에 맞는 시간표기법으로
// 년,월,일,시간을 리턴
day = new Date;
console.log(day); //Thu Apr 15 2021 02:32:42 GMT+0900 (대한민국 표준시)
console.log(day.toLocaleString()); //2021. 4. 15. 오전 2:33:53
console.log(day.toLocaleDateString()); //2021. 4. 15.
console.log(day.toLocaleTimeString()); //오전 2:34:50
let pig = 300000000.123455;
pig.toLocaleString();
console.log(pig); // 30000000.123455;
console.log(pig.toLocaleString()); //300,000,000.123
console.log(pig.toLocaleString(undefined, {maximumFractionDigits:6}));
// 300,000,000.123455
//Filter Method
// element 처리할 현재 요소
// index 처리할 현재 요소의 인덱스
// array filter() 을 호출한 배열
const items2 = [
{
id:1,
name:'맥북',
price:2930000,
count:5
},
{
id:2,
name:'아이패드',
price:800000,
count:2
},
{
id:3,
name:'아이폰',
price:450000,
count:0
}
];
const newItems3 = items2.filter(item=>{
return item.count<=0
});
console.log(newItems3);
//(2) [{…}, {…}]
// 0: {id: 1, name: "맥북", price: 2930000, count: 5}
// 1: {id: 2, name: "아이패드", price: 800000, count: 2}
// length: 2
// __proto__: Array(0)
//Reduce Method
//reduce method의 콜백함수는 4개의 매개변수를 가짐
// 축적값, 현재 값, 현재 인덱스, 원본 배열
// (accumulator=acc), curr, index, arr
//reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
const items4 = [
{
id:1,
name:'맥북',
price:2930000,
count:5
},
{
id:2,
name:'아이패드',
price:800000,
count:2
},
{
id:3,
name:'아이폰',
price:450000,
count:0
}
];
const sumPrice = items4.reduce((acc,curr)=>{
return acc+curr.price
},0)
console.log(sumPrice);
</script>
</body>
</html>
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [24일차 zoom수업] 20210415 배열 Array 달력 만들기 (0) | 2021.04.15 |
|---|---|
| [23일차] 20210414 배열 Array 기본 이중배열 (0) | 2021.04.14 |
| ZeroCho의 JS 초급강좌 2-4. 배열 기본 / 4-2. 배열 push pop shift unshift / 4-3. 배열 splice / 5-2. 이차원 배열 / 6-2. 배열 map method / (0) | 2021.04.14 |
| [22일차] 20210413 fiverr slide 슬라이드 배열? 로 바꾸기 업그레이드 시키기 (0) | 2021.04.13 |
| [21일차 연습] (0) | 2021.04.13 |
