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
---
posted on 2020-01-30 20:53 wenbin_ouyang 阅读(165) 评论(0) 编辑 收藏 举报