js高级（一）

目录：

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、三点运算符
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使用正则表达式实现字符串的replaceAll的功能    <--返回目录

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

 9、严格模式    <--返回目录

　　在全局或函数的第一条语句定义：'use strict'

　　如果浏览器不支持，只解析为一条简单的语句，没有任何副作用

　　语法和行为改变：

　　- 变量声明前面要有var

　　- 禁止自定义的函数中的this指向window

　　- 创建eval作用域

　　- 对象不能有重名属性

10、三点运算符    <--返回目录

　　可变参数：

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、操作数值的一些方法    <--返回目录

　　二进制0b, 八进制0o

　　Number.isFinite(i): 判断是否是有限大的数

　　Number.isNaN(i): 判断是否是NaN

　　Number.isInteger(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): 判断2个数据是否完全相等（转成字符串比较）

 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, source1, source2): 将源对象的属性赋值到目标对象上（浅克隆）

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__属性

<script type="text/javascript">
    const obj1 = {}
    const obj2 = {name: 'zs'}
    obj1.__proto__ = obj2
    console.log(obj1)
</script>

15、判断数据类型    <--返回目录

　　typeof判断数据类型

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

---