[JS] array 배열

 

 

 

 

---

 

Array 배열

 

 

 : 순서매기고싶은 것, 묶음만들고 싶은것 [ ] 대괄호로 묶어줌

 : 객체와 다르게 인덱스라는 순서를 가지는 특징

 

let array = ['java','javascript','python'];

//index == propertyName
console.log(배열이름[index]);

> 배열안에 있는 값은 element (요소)

> 대괄호안에 각 요소들이 순서매겨짐, 이 숫자값이 index (객체의 property name역할)

> 요소에 접근 = indexing(인덱싱)

    [ ] 대괄호안에 순서 적어줌 (0부터 시작)

 

 

*/ 배열만드는 메소드 */
let arr = new Array();

//ex 4개의 공간을 가진 배열생성
let arr = new Array(4);

 

 

 

 

배열 활용

 

> 배열의 갯수

console.log( arrayname .length );

 : 1부터 셈, 요소선택할때 -1해줘야됨( cuz 인덱스 0부터 시작 )

 

> 배열 수정

   1. 배열의 인덱스에 접근하여 값을 할당.

   2. push, unshift등 메소드로 수정

 

arrayname[index] = '추가' ;

ex)

arrayname[3] = '3번수정';

> index의 순서 뛰어넘으면서 추가하면 undefined값 들어간 요소 생성(empty생성)

 

 

 

 

---

Shift / unshift / Push / Pop

 

 

 

*/ 배열의 첫 요소 삭제 */
arrayname.shift()

//ex
function arrayShift() {
  let myArray = [["John", 23], ["dog", 3]];

  myArray.shift();
  return myArray;
}


*/ 배열의 첫 요소 값 추가 */
arrayname.unshift('item')

//ex
let arr = [1,2,3];
arr.unshift(4); 
console.log(arr);  //[4,1,2,3]


*/ 배열의 끝에 요소추가 */
arrayname.push('item')

//ex
let arr = [1,2,3];
arr.push(4); 
console.log(arr);  //[1,2,3,4]


*/ 배열의 마지막 요소만 제거 */
arrayname.pop()

//ex
let threeArr = [1, 4, 6];
let oneDown = threeArr.pop();
 
console.log(oneDown); // Returns 6
console.log(threeArr); // Returns [1, 4]

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

Splice / Slice

 

 

 

splice 배열수정,삭제

 

*/
splice ( startIndex, deleteCount, item 추가하고싶은 요소)
*/

let array = ['java','javascript','python','manon'];

array.splice(1);
console.log(array)
//출력 [ 'java' ]

array.splice(1,2);
console.log(array)
//출력 [ 'java' , 'manon']

array.splice( 1, 2, 'study');
console.log(array)
//출력 [ 'java', 'study', 'manon']

array.splice( 1, 0, 'study');
console.log(array)
//출력 ['java','study','javascript','python','manon'];

array.splice( 1, 1, 'study');
console.log(array)
//출력 ['java','study','python','manon'];

 

 

arrayname.splice ( 1 );

 : 1(포함) 이후 모두 삭제 (음수도 가능 > 뒤에서부터 )

 

arrayname.splice ( 1, 2 );

 : 1(포함) 2개만 삭제

 

arrayname.splice ( 1, 2 ,'item');

 : 1(포함) 2개만 삭제하고 그자리에 item추가

 

arrayname.splice ( 1, 0 ,'item');

 : 1자리에 item추가

 

arrayname.splice ( 1, 1 ,'item');

 : 1자리 요소 item으로 교체

 

//ex) 반복문 활용하여 배열 요소 중 홀수 삭제
for (let i=0; i<numbers.length; i++) {
  if (number[i] %2 !==0) {
    number.splice(i,1)
    i--
  }
}
*/  for문의 동작부분이 수행될 때마다 i가 증가하기 때문에 
삭제될 때 만큼은 이 i가 증가되는 현상을 방지.
요소가 삭제될 때 i를 미리 한 번 감소시켜줌

 

 

 

 

 

 

slice

 

> 새로운 변수를 선언하여, 특정 index범위에따라 새로운 배열 리턴

> splice와 다르게 원본배열을 변형시키지 않음

 

*/ slice(start, end) */
let nums = [1,2,3,4,5]
let nums_new = nums.slice(1,4)

console.log(nums)  // [ 1, 2, 3, 4, 5 ]
console.log(nums_new) // [ 2, 3, 4 ]

 

 

 

 

 

 

 

---

 

 

 

 

 

indexOf / lstindesOf / include

 

 

배열에서 특정값 찾기

 

*/ indexOf, lastindexOf 특정값 찾기 */

let brands = ['google', 'kakao', 'naver','naver'];

console.log(brands.indexOf('naver'));
console.log(brands.indexOf('daum'));

//출력
2
-1

>  1. 포함되있으면 index리턴

    2. 여러개 포함되있으면 처음발견된 인덱스 리턴
    3. 불포함이면 -1리턴
>  lastindexOf는 뒤에서부터 검색

 

*/ 
indludes
배열에서 특정값 있는지 확인 true, false로 리턴 
*/

let brands = ['google', 'kakao', 'naver','naver'];

console.log(brands.includes('naver'));
console.log(brands.includes('daum'));

//출력
true
false

참고 (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)

참고2 (https://javascript.info/string)

 

 

 

 

 

 

 

 

 

for ~ of

 

 

for (변수 of 배열) {
  동작부분;
}

let brands = ['google', 'kakao', 'naver','naver'];

for (let i=0; i< brands.length; i++) {
  console.log(brands[i]);
}

for( let i of brands) {
  console.log(i);
}

//동일한 결과값 나오지만 좀더 간결하게 가능

 

 

 

 

 

filter

 

 

 

주어진 함수 테스트 통과하는(true값만 모아서) 요소로 새로운 배열반환

var newArray = arr.filter(callbackFunction ( element, index, array), thisArg);

callback : 각 요소를 시험할 함수, true면 요소유지하고 false면 버림.

    다음 세 인수와 함께 호출

   > element : 처리할 현재 요소

   > index : 처리할 현재 요소의 인덱스

   > array : filter를 호출한 배열

thisArg : callback을 실행할 대 this로 사용하는 값 / 선택적사용(사용x > undefined)

 

*/
1. filter()의 인자에서 바로 함수 써줌
*/
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]


*/
2. 밖에서 함수 선언하고 filter()인자에서 callback
*/

let numbers = [10, 4, 32, 17, 5, 2];

function isBiggerThanTen (value) {
    return value > 10;
}
let result = numbers.filter(isBiggerThanTen);
console.log(result);    // [32, 17]

//ex
let courses = [
{level:'easy', subject: "English" }, 
{level:'hard', subject: "Mathmatic" }, 
{level:'medium', subject: "Literature" }, 
{level:'hard', subject: "Science" }, 
{level:'medium', subject: "Socialogy" }
];

// 아래 함수를 작성해주세요. 
function filtered() {
  return courses.filter(el => el.level === 'hard')
}

//출력
[
  { level: 'hard', subject: 'Mathmatic' },
  { level: 'hard', subject: 'Science' }
]

  const filteredExpenses = expenses.filter((year) => {
    return year.date.getFullYear().toString() === filteredYear;
  });

참고 : https://7942yongdae.tistory.com/49

Javascript - Array filter 사용법

 

 

 

 

 

concat

 

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환

 

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// ["a", "b", "c", "d", "e", "f"]

//3개 이어붙이기

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

num1.concat(num2, num3);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

*/ 같은 요소가지면 중복된거 삭제없이 그대로나옴 */
let array1 =  [1,2,3,4,5];
let array2 = [3,4,5,6,7];
 
let result = array1.concat(array2);
console.log(result);              
 
// 결과 (3,4,5 가 중복) 
 [
  1, 2, 3, 4, 5,
  3, 4, 5, 6, 7
]

 

 

 

 

 

 

 

 

forEach / Map

 

 

 

forEach : 단순배열 반복작업  > 빠져나오고 싶을때 return;

map :  배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열반환 (기존배열과 동일크기)-callback함수

 

🔻 map 사용시에는 key값이 필요하다.

    react에서 사용시 key값이 없으면 현재의 배열길이확인 / 렌더링한 숫자확인해서 비교, 개별아이템이 다 똑같이 보인다.

    kery값을 붙이면 개별 아이템을 식별하여, 배열의 길이만 신경 쓰는게 아니라 아이템의 위치까지 염두할수 있어

    좀 더 효과적으로 업데이트가 가능하다. 

        {expenses.map((expense) => (
          <ExpenseItem
            key={expense.id}
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />
        ))}

 

 

 

//map
[배열].map(함수)
arr.map(callback(currentValue[, index[, array]])[, thisArg])


callback : 새로운 배열 요소 생성하는 함수( currentValue, index, array 세가지 인수를 가짐)

currentValue : 처리할 현재 요소
index : 처리할 현재 요소의 인덱스 (optional)
array : map()을 호출한 배열  (optional)
thisArg : callback 실행할 때 this로 사용되는 값 (optional)

 

 

> 최대 반복횟수 : 호출당시 그 당시 요소의 갯수

const members = ['가', '나', '다', '라'];

// 유사한 for ~ of문
for (let member of members) {
	console.log(`${member}님 입장`);
}

// 일반함수
members.forEach(function (member) {
	console.log(`${member}님 입장`);
});

// allow function
members.forEach((member)=> {
	console.log(`${member}님 입장`);
});

 

 

 > 활용 [ i ]

// i > 다른 배열과 매칭가능
const firstName = ['영훈', '윤수', '동욱', '태호'];
const lastName = ['김', '이', '박', '최'];

//forEach
members.forEach((member, i)=> {
	console.log(`${lastName[i]} ${fistName}님 입장`);
});   

//map
const fullNames = firstName.map((fistName, i) =>
	return lastNames[i] + firstName;
});

console.log(fullNames);
//[김영훈, 이윤수, 박동욱, 최태호]

// map
const array1 = [1, 4, 9, 16];

const map1 = array1.map((x) => {
	return x * 2;
});

console.log(map1);

// [ 2 ,8, 18, 32 ]

//forEach
var 자료 = {
  data : [1,2,3,4,5]
}

자료.전부더하기 = function() {
  let 합 = 0;
  this.data.forEach(function(a){
    합=합+a
  })
  console.log(합)
}


자료.전부더하기();