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

 

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

---