... : spread를 통합 배열 연산진행

var arr = [3,4];

...arr   //  3 4   단독으로 이렇게 쓰이지는 않는다

var tar = [1,2,...arr,5,6]   //  [1,2,3,4,5,6]

var arr2 = [...arr];   //  [3,4]

var arrObj = [10, {a: "bc", b: "cd", c: {d: "de", e: "fg"}, h: ["A", "BC","DEF"]},20];
var arrObj2 = [...arrObj];   //  [10, {a: "bc", b: "cd", c: {d: "de", e: "fg"}, h: ["A", "BC","DEF"]},20]

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr = [...arr1, ...arr2];   //  [1,2,3,4,5,6]
[...arr1,...arr2] === arr1.concat(arr2)   // concat에서의 사용과 같다

/* Math에서 사용 */
Math.max(1,5,3,2)   //  5
var arr = [1,5,3,2];
Math.max(arr)   //  NaN  넘버가 아닌 객체가 들어옴
Math.max(...arr)   //  5

var num = 237134;  // number 중 각각에서 가장 큰값
var max = Math.max(...num.toString().split(""));   // 7

/* string을 array로 변환시 */
var str = "world";
var chars = [...str];   // ["w","o","r","l","d"]

/* Array를 string으로 변환시 */
var arr = ["ab","cd","ef","gh"];   //  ab,cd,ef,gh
var str = arr.join("");   //  abcdefgh

/* Object copy, Deep Copy */
var obj = {name: "john", age: 20, school: "seneca"};
var obj2 = {...obj};   //  {name: "john", age: 20, school: "seneca"}
var obj.name = "tom";   // obj2.name === "john"  변함없음

'JavaScript' 카테고리의 다른 글

Object/Array copy  (0) 2020.12.18
JS Sorting  (0) 2020.12.18
Array manipulation  (0) 2020.12.17
Manipulation(String, Array)  (0) 2020.12.16
AJAX  (0) 2020.12.16

배열선언방법

var arr = new Array();

var arr = new Array(10);

var arr = new Array("abc", "def", "ghi");

var arr = [1,2,3,4,5,6];

 

map(): arr.map(x=>x*2) // 오리지널 데이터를 각 원소별로 동일하게 업데이트 해줌

filter(): arr.filter(x=>x>3) // 조건에 따라 필터해서 나타내줌

reduce(): arr.reduct((accumulator, currentValue) => accumulator + currentValue)  // 배열원소의 전체합

some(): arr.some(ele => ele === "stgring"[number][condition])  // 원소중 조건만족 한개라도 하면 true 아니면 false

every(): arr.every(ele => ele > 0)  // 모든 원소가 조건만족을 해야 true 아니면 false

includes(): arr.includes("str"[num])  // 원소중 해당 값을  포함하고 있는지 true/false. some은 조건, include는 값자체

find(): arr.find(x => x>2)  // 원소값중 해당 조건을 만족하는 첫번째 원소 리턴, 없으면 undefined

entries(): arr.entries()  // 배열로부터 iteration object를 생성. [키,밸류] 배열로 리턴

keys(): Object.keys(arr[obj])  // 객체또는 배열의 키 값만 추출하여 배열로 리턴

var arr = ["ab","cd","ef","gh"];
var arr2 = [1,2,3,4,5,6];

/* map() */
var res = arr.map(x => x + 'V');   //  ["abV","cdV","efV","ghV"]
var res2 = arr2.map(x => x*2);   //  [2,4,6,8,10,12]

/* filter() */
var res = arr2.filter(x => x>3);   // [4,5,6]

/* reduce() */
var res = arr2.reduce((acc, cur) => acc + cur);   // 21

/* some() */
var res = arr.some(ele => ele === 'ab');   //  true
var res = arr.some(ele => ele === 'bc');   // false

/* every() */
var res = arr2.every(ele => ele > 0);   //  true
var res = arr2.every(ele => ele > 1);   //  false

/* includes() */
var res = arr.includes("ab");   //  true
var res = arr.includes("a");   //  false

/* find() */
var res = arr2.find(x => ele > 2);   //  3
var res = arr2.find(x => ele > 6);   //  undefined

/* entries() */
var res = arr.entries();
res.next().value();   //  [0, "ab"]
for(i of res){
	console.log(i);   //  [0,"ab"] [1,"cd"] [2, "ef"] [3,"gh"]
}

/* keys() */
var arr = ["ab","cd","ef","gh"];
var obj = {
  a: "ab",
  b: "bc",
  c: "cd"
}
var res = Object.keys(arr);   //  ["0","1","2","3"]
var res = Object.keys(obj);   //  ["a","b","c"]

'JavaScript' 카테고리의 다른 글

JS Sorting  (0) 2020.12.18
Spread operator (스프레드 연산자)  (0) 2020.12.17
Manipulation(String, Array)  (0) 2020.12.16
AJAX  (0) 2020.12.16
이벤트 발생 지점 찾기  (0) 2020.12.16

substr: string(O), array(X)   //   str.substr(n, num) n번째에서 num개(복사해서 가져감)

                                  //   str.substr(-n, num) -n번째(끝이 -1)에서 num개(복사해서 가져감)

splice: string(X), array(O)   //   arr.splice(n, num), n번째에서 num개, 원본데이터도 변화있음(잘라서 가져감)

                                  //   arr.splice(-n, num), -n번째(끝이 -1)에서 num개, 원본데이터도 변화있음(잘라서 가져감)

                                  //   arr.splice(n, num, sth) n번째에서 num 제거후 sth입력

slice: string(O), array(O)   //   str.slice(n, nn) n번째에서 nn번째 전까지, str.slice(-n, -nn) 

substring: string(O), array(X)   //   array, 마이너스(끝에서) 안되는것 빼고 slice와 같음

var str = "abcdef";
var arr = ['ab','cd','ef','gh'];

/* substr */
var res = str.substr(1,3)   //  bcd   원본abcdef
var res = str.substr(-2,1)   //  e   원본abcdef
var res = str.substr(-2,5)   // ef   원본abcdef

/* splice */
var res = arr.splice(1,2)   // ["cd","ef"]   원본["ab","gh"]
var res = arr.splice(-3,1)   // ["cd"]   원본['ab','ef','gh']
var res = arr.splice(2,1,"EF")   // ["ef"]   원본["ab","cd","EF","gh"]
var res = arr.splice(-3,2,"CDEF")   //  ["cd", "ef"]   원본["ab","CDEF","gh"]

/* slice */
var res = str.slice(1,4)   //  bcd   원본abcdef
var res = str.slice(-4, -2)   //  cd   원본abcdef
var res = arr.slice(1,3)   //  ["cd","ef"]   원본["ab","cd","ef","gh"]
var res = arr.slice(-3,-1)   //  ["cd","ef"]   원본["ab","cd","ef","gh"]

/* substring */
var res = str.substring(1,4)   //  bcd   원본abcdef 

replace: string에서 교환  // 원본은 그대로

charAt(n): string에서 n번째 캐릭터 

search("sth"): string에서 sth 찾기, 없으면 -1 리턴, 정규식에 사용됨(기본적으로 indexOf 가 더빠름)

indexOf("sth"): string(array)에서 몇번째에 있는지, 없으면 -1 리턴

indexOf("sth", nth): string(array)에서 nth 부터 찾아보기

lastIndexOf("sth"): 맨 마지막에 나오는 것의 위치 리턴

var str = "abcdef";
var arr = ['ab','cd','ef','gh'];

/* replace */
var res = str.replace("bc","BC");  //  aBCdef    원본abcdef

/* charAt */
var res = str.charAt(3);   //  d   원본abcdef

/* search */
var res = str.search("c")   //  2
var res = str.search("de")   //  3
var res = str.search("ce")   //  -1

/* indexOf */
var res = str.indexOf("c")   //  2
var res = str.indexOf("j")   //  -1

var res = arr.indexOf("cd")   //  1
var res = arr.indexOf("jj")   //  -1

var res = str.indexOf("d", 2);   //  3
var res = str.indexOf("d", 4);   //  -1

var res = arr.indexOf("ef", 1);   //  2
var res = arr.indexOf("cd", 2);   //  -1

/* lastIndexOf() */
var str = "abcdefabc";
var arr = ['ab','cd','ef','gh','ab','cd'];

var res = str.lastIndexOf("a");   // 6
var res = str.lastIndexOf("k");   // -1

var res = arr.lastIndexOf("ab");   //  4
var res = arr.lastIndexOf("ba");   // -1

split, join

var str = "abcdef";
var arr = ['ab','cd','ef','gh'];

/* split */
var res = str.split("");  // ["a","b","c","d","e","f"]

/* join */
var res = arr.join("");  // abcdefgh
var res = arr.join(",");   // ab,cd,ef   string

'JavaScript' 카테고리의 다른 글

Spread operator (스프레드 연산자)  (0) 2020.12.17
Array manipulation  (0) 2020.12.17
AJAX  (0) 2020.12.16
이벤트 발생 지점 찾기  (0) 2020.12.16
이벤트 객체  (0) 2020.12.15

비동기로 데이터를 전달 SPA 구현 (제이쿼리 사용하여 간단하게 구현)

Ajax methods

$.ajax() : Ajax 이용한 http 요청 전송

$.get() : 전달받은 주소로 GET 방식의 요청 전송

$.post() : 전달받은 주소로 POST 방식의 요청 전송

$.getScript() : 웹페이지에 스크립트 추가

$.getJSON() : 전달받은 주소로 GET 방식의 HTTP 요청 전송하여, 응답으로 JSON 파일 전송받음

.load() : 서버에서 데이터를 읽은 , 읽어 들인 HTML 코드를 선택한 요소에 배치함

 

Ajax 파라미터

url.””,         // http 주소

type:””,      // GET, POST

cache: ,      // false, true

datatype: “”,      // xml, json, html, script

data: “”,       // 서버로 데이터 전송하는 string 또는 json,   “name=”+name 이런 형태

success: function(data){ … },      // ajax 통신 성공시 실행 이벤트

error: function(request, status, error) { … }     // ajax 통신 실패시 실행 이벤트

complete: 성공실패 상관없이 호출할 함수

jsonCallbak: json방식의 콜백함수 호출

async: 동기또는 비동기방식

contentType: 콘텐츠타입 설정

timeout: 지연시간의 기준 시간 설정(밀리세컨)

 

기본예제

$.ajax({
  url: ‘http://info.com/test’,
  success: function(json){
    ...
  },
  error: function(error){
    ...
  }
});

Method chaining

$.ajax({ … }).done(function(json){ … })
  .fail(function(xhr, status, errorThrown) { … })
  .always(function(xhr, status){ … }
);

AJAX Setup  // 기본 사항들을 미리 설정한 후 ajax로 각각 호출한다

$.ajaxSetup({
  url: ‘/api/users’,
  global: false,
  type: “POST”
});

$.ajax({
  data: {‘name’: ‘Dan’}
});

$.ajax({
  data: {‘name’: ‘John’}
});

'JavaScript' 카테고리의 다른 글

Array manipulation  (0) 2020.12.17
Manipulation(String, Array)  (0) 2020.12.16
이벤트 발생 지점 찾기  (0) 2020.12.16
이벤트 객체  (0) 2020.12.15
HTML manipulation  (0) 2020.12.09

+ Recent posts