[TIL] map, forEach, filter, find
36158 ワード
1. map vs forEach map
とforEach
の違い、すなわち、宣言配列の値(以下、要素と呼ぶ)に対して与えられた関数を実行する同じ点について説明します.
上記のように、forEachを使用しても新しい配列には戻りません.
逆にmapを使用すると、新しい配列に戻ることができます.
配列内の値のみを使用して計算して保存する場合は、
foreachを使用すると、mapは新しい配列を格納するのによく見えます.
性能に関する議論も多かったが,現段階では新しい配列を与えるかどうかの違いだけが議論されている.
1.1 Array.map
map()
メソッドは、各配列の要素が所与の関数を呼び出す新しい配列を返します.
参考文献MDN let arr = [1, 4, 9, 16];
let map1 = array.map(x => x * 0.5);
//x => x * 0.5
//function(x) { x = x*0.5 } 와 같다.
array
[1, 4, 9, 16] // arr는 변화없음!
map1
[1, 2, 3, 4]
function 제곱(x) {
return x ** 2
}
let map2 = array.map(제곱);
array
[1, 4, 9, 16] // 역시나 arr자체에는 변화없음!
map2
[1, 16, 81, 256]
1.1.1アレイ内のアレイへのアクセス
// 2차원배열에 전부다 2를 곱하고 싶다.
let data = [[1,2,3],
[4,5,6],
[7,8,9]]
let newData = data.map(a => a.map(n => n*2));
// data는 배열이다. 배열안에 여러개의 배열이있다.
// .map은 요소에대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
// 여기서 요소는 배열이다.
// 즉, 배열.map(n => n*2)가 되는 것이다.
1.1.2配列内のオブジェクトへのアクセス
もし私がクラスの学生のデータを持っていると言ったら、
近づく方法を見てみましょう.// data라는 배열안에, 학생마다의 정보가 객체로 저장되어 있다.
// 1반의 중간고사 점수의 총합을 구해보자.
let data = [{
class:1,
code:1,
name:'sungjae',
midterm:55
},{
class:1,
code:2,
name:'gildong',
midterm:75
},{
class:1,
code:3,
name:'kate',
midterm:100
},{
class:1,
code:4,
name:'simon',
midterm:25
},{
class:1,
code:5,
name:'alex',
midterm:50
}]
data.map(x => x.midterm)
// data는 배열이다. 배열안에 여러개의 객체가 들어있다.
// .map은 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
// 여기서 요소란, 객체가 된다.
// 즉, 객체.midterm이 되는 것이다.
// 객체.key => key와 일치하는 value를 반환한다.
// 최종적으로는 data라는 배열안에 있는 객체에서,
// midterm이라는 key의 value들을 새로운 배열로 반환해주는 것이다.
// s라는 총합을 담을 변수를 선언한다.
let s = 0;
data.map(x => x.midterm).forEach(y => s+= y)
// 위는 아래와 같다.
[55, 75, 100, 25, 50].forEach(y => s += y)
s == 305
1.2 forEach
新しいアレイを返さないため、forEachを使用してアレイを取得したい場合.
各要素について、所定の関数を呼び出した結果を新しい配列にプッシュする必要があります.let array = [1, 2, 3, 4]
let result = [] // push해줄 빈 배열을 생성한다.
array.forEach(x => result.push(x**2));
result
> [1, 4, 9, 16]
2. call by value
call by...何なのか分からないけど.
私が今知っている情報は、
レイアウトとオブジェクトを渡すときは注意してください.
元のバージョンに影響を及ぼす可能性があります...//해당되는 자료형 : Object, Array, function
let x = [10, 20, 30];
function test(a) {
a[0] = 10000;
}
test(x) // a가 [10,20,30]을 가리킨다 x를 가리키는게 아니라
console.log(x);
> [10000, 20, 30] // 값이 변했다!
//해당되는 자료형 : Number, String, boolean, null, undefined
let y = 10;
function test(a) {
a = 10000;
}
test(y)
console.log(y);
> 10 // 값이 그대로다!!
3. filter filter()
メソッドは、所与の関数をテストするすべての要素を収集し、新しい配列に戻る.
参考文献MDN // mdn 예제
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
// 문자길이가 > 6 이 트루인것만 가져온다
console.log(result);
> ['exuberant', 'destruction', 'present']
let arr = [2, 6, 5, 4, 8, 5, 4, 3, 2, 9, 9, 9];
// 5초과인 값들 뽑아내기
// filter는 인덱스 순서대로 순회해서 가져오는것
arr.filter(z => z>5); // [6,8,9,9,9]
3.1配列内のオブジェクトへのアクセス
let arr = [1, 4, 9, 16];
let map1 = array.map(x => x * 0.5);
//x => x * 0.5
//function(x) { x = x*0.5 } 와 같다.
array
[1, 4, 9, 16] // arr는 변화없음!
map1
[1, 2, 3, 4]
function 제곱(x) {
return x ** 2
}
let map2 = array.map(제곱);
array
[1, 4, 9, 16] // 역시나 arr자체에는 변화없음!
map2
[1, 16, 81, 256]
// 2차원배열에 전부다 2를 곱하고 싶다.
let data = [[1,2,3],
[4,5,6],
[7,8,9]]
let newData = data.map(a => a.map(n => n*2));
// data는 배열이다. 배열안에 여러개의 배열이있다.
// .map은 요소에대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
// 여기서 요소는 배열이다.
// 즉, 배열.map(n => n*2)가 되는 것이다.
// data라는 배열안에, 학생마다의 정보가 객체로 저장되어 있다.
// 1반의 중간고사 점수의 총합을 구해보자.
let data = [{
class:1,
code:1,
name:'sungjae',
midterm:55
},{
class:1,
code:2,
name:'gildong',
midterm:75
},{
class:1,
code:3,
name:'kate',
midterm:100
},{
class:1,
code:4,
name:'simon',
midterm:25
},{
class:1,
code:5,
name:'alex',
midterm:50
}]
data.map(x => x.midterm)
// data는 배열이다. 배열안에 여러개의 객체가 들어있다.
// .map은 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
// 여기서 요소란, 객체가 된다.
// 즉, 객체.midterm이 되는 것이다.
// 객체.key => key와 일치하는 value를 반환한다.
// 최종적으로는 data라는 배열안에 있는 객체에서,
// midterm이라는 key의 value들을 새로운 배열로 반환해주는 것이다.
// s라는 총합을 담을 변수를 선언한다.
let s = 0;
data.map(x => x.midterm).forEach(y => s+= y)
// 위는 아래와 같다.
[55, 75, 100, 25, 50].forEach(y => s += y)
s == 305
let array = [1, 2, 3, 4]
let result = [] // push해줄 빈 배열을 생성한다.
array.forEach(x => result.push(x**2));
result
> [1, 4, 9, 16]
call by...何なのか分からないけど.
私が今知っている情報は、
レイアウトとオブジェクトを渡すときは注意してください.
元のバージョンに影響を及ぼす可能性があります...
//해당되는 자료형 : Object, Array, function
let x = [10, 20, 30];
function test(a) {
a[0] = 10000;
}
test(x) // a가 [10,20,30]을 가리킨다 x를 가리키는게 아니라
console.log(x);
> [10000, 20, 30] // 값이 변했다!
//해당되는 자료형 : Number, String, boolean, null, undefined
let y = 10;
function test(a) {
a = 10000;
}
test(y)
console.log(y);
> 10 // 값이 그대로다!!
3. filter filter()
メソッドは、所与の関数をテストするすべての要素を収集し、新しい配列に戻る.
参考文献MDN // mdn 예제
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
// 문자길이가 > 6 이 트루인것만 가져온다
console.log(result);
> ['exuberant', 'destruction', 'present']
let arr = [2, 6, 5, 4, 8, 5, 4, 3, 2, 9, 9, 9];
// 5초과인 값들 뽑아내기
// filter는 인덱스 순서대로 순회해서 가져오는것
arr.filter(z => z>5); // [6,8,9,9,9]
3.1配列内のオブジェクトへのアクセス
// mdn 예제
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
// 문자길이가 > 6 이 트루인것만 가져온다
console.log(result);
> ['exuberant', 'destruction', 'present']
let arr = [2, 6, 5, 4, 8, 5, 4, 3, 2, 9, 9, 9];
// 5초과인 값들 뽑아내기
// filter는 인덱스 순서대로 순회해서 가져오는것
arr.filter(z => z>5); // [6,8,9,9,9]
->パスワードを保存するときに、その値を知ることはできません.
->パスワードを暗号化して保存します.
->一方向暗号化
let 회원정보 = [{
아이디 : 'jayss',
패스워드 : '5dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5!',//hash SHA256
성별 : '남',
휴대폰번호 : '010-0000-1111',
이메일 : '[email protected]',
가입연도 : '2021-12-2',
주접속위치 : '123.242.161.149'
},{
아이디 : 'jayss2',
패스워드 : '5dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5!',
성별 : '남',
휴대폰번호 : '010-0000-1111',
이메일 : '[email protected]',
가입연도 : '2020-12-2',
주접속위치 : '123.242.161.149'
},{
아이디 : 'jayss3',
패스워드 : '5dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5!',
성별 : '여',
휴대폰번호 : '010-0000-1111',
이메일 : '[email protected]',
가입연도 : '2021-12-2',
주접속위치 : '123.242.161.149'
},{
아이디 : 'jayss4',
패스워드 : '5dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5!',
성별 : '여',
휴대폰번호 : '010-0000-1111',
이메일 : '[email protected]',
가입연도 : '2021-12-2',
주접속위치 : '123.242.161.149'
}];
// 1번 남자인사람
회원정보.filter(el => el.성별 === '남');
// 2번 남자이면서 2021년도에 가입한사람
회원정보.filter(el => el.성별 === '남' && parseInt(el.가입연도) === 2021); // 요거는 년도에만 국한됨
회원정보.filter(el => el.성별 === '남' && el.가입연도.split("-")[0] === '2021');
회원정보.filter(el => el.성별 === '남' && el.가입연도.split("-")[1] === '12'); // 12월에 가입한 사람
회원정보.filter(el => el.성별 === '남' && el.가입연도.slice(0,4) === "2021");
4. find
対応する条件が見つかった場合、find()
メソッドは検索を停止します.
固有値を検索する場合はfindを利用して効率を高めるべきです.
(会員情報データは上記の通り)// 아이디가 jayss인 사람을 뽑아주세요 find로
// 아이디는 유일무이한 값입니다.
// find 는 찾으면 멈춥니다. 고유값을 찾을때는 find로 찾아보자
// 훨씬 더 효율적입니다. filter는 찾아도 끝까지 계속 갑니다.
회원정보.find(el => el.아이디 === 'jayss');
// target이라는 변수에 아이디를 받아 올 것입니다.
let target = "jjang";
let data = 회원정보.find(el => el.아이디 === target);
// blogs에 글이 100개 있다
// 25개는 일상 글
// 40개는 개발관련 글
// 25개는 취미관련 글
// 10개는 자기계발관련 글
let blogs = [{
id: 1,
title: 'title1',
content: 'content1',
section: '일상',
}, {
id: 2,
title: 'title2',
content: 'content2',
section: '개발',
}, {
id: 3,
title: 'title3',
content: 'content3',
section: '취미',
}, {
id: 4,
title: 'title4',
content: 'content4',
section: '자기계발',
}];
let 검색값 = '개발'
// let data = 검색값? ?? : ?? -> 삼항연산자를 이용해서 검색값만 나오게 필터링하자
// 섹션이 빈경우만 아니라면 무조건 트루임 ''요로케 공백만 아니면
let data = 검색값 ? blogs.filter(x => x.section === 검색값) : blogs;
//혹은 ''에 대한 결과가 없습니다.
Reference
この問題について([TIL] map, forEach, filter, find), 我々は、より多くの情報をここで見つけました
https://velog.io/@jay__ss/TIL-map-forEach-filter-find
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
// 아이디가 jayss인 사람을 뽑아주세요 find로
// 아이디는 유일무이한 값입니다.
// find 는 찾으면 멈춥니다. 고유값을 찾을때는 find로 찾아보자
// 훨씬 더 효율적입니다. filter는 찾아도 끝까지 계속 갑니다.
회원정보.find(el => el.아이디 === 'jayss');
// target이라는 변수에 아이디를 받아 올 것입니다.
let target = "jjang";
let data = 회원정보.find(el => el.아이디 === target);
// blogs에 글이 100개 있다
// 25개는 일상 글
// 40개는 개발관련 글
// 25개는 취미관련 글
// 10개는 자기계발관련 글
let blogs = [{
id: 1,
title: 'title1',
content: 'content1',
section: '일상',
}, {
id: 2,
title: 'title2',
content: 'content2',
section: '개발',
}, {
id: 3,
title: 'title3',
content: 'content3',
section: '취미',
}, {
id: 4,
title: 'title4',
content: 'content4',
section: '자기계발',
}];
let 검색값 = '개발'
// let data = 검색값? ?? : ?? -> 삼항연산자를 이용해서 검색값만 나오게 필터링하자
// 섹션이 빈경우만 아니라면 무조건 트루임 ''요로케 공백만 아니면
let data = 검색값 ? blogs.filter(x => x.section === 검색값) : blogs;
//혹은 ''에 대한 결과가 없습니다.
Reference
この問題について([TIL] map, forEach, filter, find), 我々は、より多くの情報をここで見つけました https://velog.io/@jay__ss/TIL-map-forEach-filter-findテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol