js 고급 (1)

디 렉 터 리:
1. JSON. stringify () 와 JSON. parse () 2. js 는 json 대상 의 모든 key 와 value 3, json 대상 이 특정한 필드 4 를 삭제 하고 배열 이 지정 한 요소 5, Array 의 splice (index, size, element) 방법 6, Array 의 unshift () 와 push () 방법 7, Array 의 shift () 와 pop () 방법 8, js 는 정규 표현 식 을 사용 하여 문자열 의 replaceAll 기능 9, 엄격 한 모드 10,3 점 연산 자 11, 문자열 의 일부 방법 12, 조작 수치의 일부 방법 13, 수조 의 일부 방법 14, 대상 의 일부 방법 15, 데이터 유형 판단 16, 심 복제 17, Set 용기 와 Map 용기 18, 지수 연산 자 * *
 
1. JSON. stringify () 와 JSON. parse ()   

const str = '{"name":"xxx","age":27}'
console.log(str) // {"name":"xxx","age":27}
var jsonObj=JSON.parse(str) console.log(jsonObj) // { name: 'xxx', age: 27 } console.log(typeof jsonObj.age) // number console.log(typeof jsonObj.name) // string  const jsonStr = JSON.stringify(jsonObj) console.log(jsonStr) // {"name":"xxx","age":27}

 
2. js 는 json 대상 의 모든 key 와 value 를 가 져 옵 니 다.   

const obj = { type: ['a', 'b', 'c'] }
console.log(Object.keys(obj)) // ['type']
console.log(Object.values(obj)) // [ ['a', 'b', 'c'] ]

 
3. json 대상 필드 삭제   

const obj = {a: 'a', b: 'b'}
delete obj.a
delete obj['b']

 
4. 배열 에서 지정 한 요 소 를 삭제 합 니 다.   

const array = ['a', 'b', 'c'];
remove(array, 'b');

/*           */
function remove(array, val) { const index = array.indexOf(val); if (index > -1) { array.splice(index, 1); } }

 
5. Array 의 splice (index, size, element) 방법   
${index} 의 위치 에서 ${size} 개의 요 소 를 element 로 바 꾸 고 size = 0 은 삽입 합 니 다.

const arr = [1,2,3,4,5]
//  index=1         100
const result = arr.splice(1, 0, 100)
console.log(arr) // [ 1, 100, 2, 3, 4, 5 ] console.log(result) // []  const arr2 = [1,2,3,4,5] //  index=1   ,    1      100 const result2 = arr2.splice(1, 1, 100) console.log(arr2) // [ 1, 100, 3, 4, 5 ] console.log(result2) // [ 2 ]  const arr3 = [1,2,3,4,5] //  index=1   ,    3      100 const result3 = arr3.splice(1, 3, 100) console.log(arr3) // [ 1, 100, 5 ] console.log(result3) // [ 2, 3, 4 ]

6. Array 의 unshift () 와 push () 방법   

const array1 = [1, 2, 3];
console.log(array1.unshift(4, 5)); // 5,        
console.log(array1); // [4, 5, 1, 2, 3]
 console.log(array1.push(10, 20)); // 7,         console.log(array1); // [4, 5, 1, 2, 3, 10, 20]

7. Array 의 shift () 와 pop () 방법   

const array1 = [10, 20, 30];
console.log(array1.shift()); // 10
console.log(array1); // [20, 30]
 const array2 = [10, 20, 30]; console.log(array2.pop()); // 30 console.log(array2); // [10, 20]

 
8. js 는 정규 표현 식 을 사용 하여 문자열 의 replace All 기능 을 실현 합 니 다.   

const a = '&a&b'
console.log(a.replace(/&/g, '|'))

 
 9. 엄격 한 모델   
전역 또는 함수 의 첫 번 째 문장 정의: 'use strict'
브 라 우 저가 지원 하지 않 으 면 간단 한 문구 로 만 해석 되 며 부작용 이 없습니다.
문법 과 행동 변화:
- 변수 선언 앞 에 var 가 있어 야 함
- 사용자 정의 함수 의 this 지향 window 금지
- eval 역할 영역 만 들 기
- 대상 이름 바 꾸 기 속성 없 음
 
10, 3 시 연산 자   
가 변 매개 변수:

function fun(...params) {
    console.log(params) // [1, 2]
}

fun(1, 2)

function fun(...params) {
    console.log(params) // [1, 2]
}

// fun(1, 2) const array = [1, 2, 3] fun(...array)

---

const array = [1, 2, 3]
console.log(...array) // 1 2 3
const array2 = [0, ...array, 4] console.log(array, array2) // [ 1, 2, 3 ] [ 0, 1, 2, 3, 4 ]

---

function repairKlineData(array) {
    if (!array || array.length === 0) return
    arrayLengths = array.map(subArray => { return subArray.length }) console.log(Math.max(...arrayLengths)) let maxArrayIndex = arrayLengths.indexOf(Math.max(...arrayLengths)) console.log(arrayLengths) console.log(maxArrayIndex) } const array = [[1,2],[1,2,3],[1]] repairKlineData(array)

 
11. 문자열 의 일부 방법   

const str = 'aghagh;hk'
console.log(str.startsWith('a')) // true
console.log(str.endsWith('hk')) // true  console.log('='.repeat(100)) console.log(str.includes('hagh')) // true console.log(str.indexOf('hagh')) // 2

 
12. 수 치 를 조작 하 는 방법   
2 진 0b, 8 진 0o
Number. is Finite (i): 유한 한 수 인지 아 닌 지 를 판단 합 니 다.
Number. isNaN (i): NaN 인지 아 닌 지 판단 하기
Number. is Integer (i): 정수 여 부 를 판단 합 니 다.
Number. parseInt (str): 문자열 을 대응 하 는 수치 로 변환 합 니 다.
Math. trunc (i): 소수 부분 제거

const num = 1.234
const num2 = Math.trunc(num)
console.log(num, num2) // 1.234 1
console.log(typeof num2) // number

 
13. 배열 의 방법   

const arr = [1, 2, 300]
console.log(arr.indexOf(300)) // 2
console.log(arr.includes(300)) // true

Array. from (v): 가짜 배열 대상 이나 옮 겨 다 닐 수 있 는 대상 을 진짜 배열 로 변환 합 니 다.

function fun() {
    Array.from(arguments).forEach((item, index) => {
        console.log(`index=${index}, item=${item}`)
    })
}

fun(1,2,3)

Array. of (v1, v2, v3): 일련의 값 을 배열 로 변환 합 니 다.

const arr = Array.of(1, 2, 3)
console.log(arr) // [1, 2, 3]

Array. prototype. find (function (value, index, arr) {return true}): 첫 번 째 만족 조건 을 찾 아 true 요 소 를 되 돌려 줍 니 다.
Array. prototype. findIndex (function (value, index, arr) {return true}): 첫 번 째 만족 조건 을 찾 아 true 요 소 를 되 돌려 주 는 아래 표 시 를 찾 습 니 다.

const array = [10, 20, 30, 40]
const result = array.find(function(value, index, arr) {
    console.log(value, index, arr)
    return value > 20
})

console.log(result) // 30  const result2 = array.findIndex(function(value, index, arr) { console.log(value, index, arr) return value > 20 }) console.log(result2) // 2

 
14. 대상 의 방법   
Object. is (v1, v2): 두 데이터 가 완전히 동일 한 지 판단 하기 (문자열 비교 로 전환)

 console.log(0 === -0) // true
 console.log(NaN === NaN) // false
 console.log(Object.is(0, -0)) // false console.log(Object.is(NaN, NaN)) // true

Object. assign (target, source 1, source 2): 원본 대상 의 속성 을 대상 에 할당 합 니 다 (얕 은 클론)

const obj1 = {name: 'zs', age: 10}
const obj2 = {gender: 'male'}
const obj = {}
Object.assign(obj, obj1, obj2)
console.log(obj) // { name: 'zs', age: 10, gender: 'male' }

const car = {name: '    '}

const obj1 = {name: 'zs', age: 10}
const obj2 = {gender: 'male', car}
const obj = {}
Object.assign(obj, obj1, obj2)
console.log(obj) // { name: 'zs', age: 10, gender: 'male', car: { name: '    ' } }  obj1.name = 'zs1' obj2.car.name = '   ' console.log(obj) // { name: 'zs', age: 10, gender: 'male', car: { name: '   ' } }

직접 조작proto__속성

<span style="color: #000000;">
    const obj1 =<span style="color: #000000;"> {}
    const obj2 = {name: 'zs'<span style="color: #000000;">}
    obj1.__proto__ =<span style="color: #000000;"> obj2
    console.log(obj1)

 
15. 데이터 형식 판단   
type: of 판단 데이터 형식

const str = 'abc'
const num = 1.2
const obj = {name: 'zs'}
const array = [1, 2, 3]
const _null = null let temp function fun() {} console.log(typeof str) // string console.log(typeof num) // number console.log(typeof obj) // object console.log(typeof array) // object console.log(typeof _null) // object console.log(typeof temp) // undefined console.log(typeof fun) // function

　　Object.prototype.toString.call

const str = 'abc'
const num = 1.2
const obj = {name: 'zs'}
const array = [1, 2, 3]
const _null = null let temp function fun() {} function getType(value) { return Object.prototype.toString.call(value) } console.log(getType(str)) // [object String] console.log(getType(num)) // [object Number] console.log(getType(obj)) // [object Object] console.log(getType(array)) // [object Array] console.log(getType(_null)) // [object Null] console.log(getType(temp)) // [object Undefined] console.log(getType(fun)) // [object Function]

 
16. 심 클론   

function deepCopy(target) {
    let result
    let type = getType(target)

    if (type === 'Object') {
        result = {} } else if (type === 'Array') { result = [] } else { return target } for(let key in target) { result[key] = deepCopy(target[key]) } return result } function getType(value) { return Object.prototype.toString.call(value).slice(8, -1) } //   1 // const car = {name: '   '} // const person1 = {name: 'zs', age: 20, car} // const person2 = deepCopy(person1) // console.log(person1, person2) // car.name = '    ' // console.log(person1, person2) //   2 let arr = [1, 2, 3] const car = {name: '   ', arr} const person1 = {name: 'zs', age: 20, car, arr} const person2 = deepCopy(person1) console.log(person1, person2) arr[0] = 100 car.name = '    ' console.log(person1, person2)

 
17. Set 용기 와 Map 용기   
set 용기: 무질서 하 게 반복 할 수 없 는 여러 value 의 집합체
　　Set()　　Set(array)　　add(value)　　delete(value)　　has(value)　　clear()　　size

const set = new Set()
console.log(`set.size=${set.size}`) // 0
set.add(10)
set.add(20) console.log(`set.size=${set.size}`) // 2 console.log(set) for(let i of set) { console.log(i) } const set2 = new Set([100, 200, 300]) console.log(`set2.size=${set2.size}`) // 3 console.log(set2) console.log(set2.has(200)) // true console.log(`set2.size=${set2.size}`) // 3 //    console.log(set2.delete(200)) // true console.log(`set2.size=${set2.size}`) // 2

Map 용기: 무질서 하고 중복 되 지 않 는 key, 여러 key - value 의 집합체
　　Map()　　Map(array)　　set(key, value)　　get(key)　　delete(key)　　has(key)

const map = new Map([['name', 'zs'], ['age', 20]])
console.log(map) // Map { 'name' => 'zs', 'age' => 20 }
console.log(map.size) // 2

for... of... 배열, 위조 배열, 문자열, set 용기, map 용 기 를 옮 겨 다 닐 수 있 습 니 다.
 
18. 지수 연산 자 * *   

const a = 3 ** 3
console.log(a) // 27
console.log(Math.pow(3, 3)) // 27

---