javaScript常用小技巧

求和，最大值以及最小值

代码

const array = [5,4,7,8,9,2]
console.log("求和",array.reduce((a,b) => a+b)
console.log(("最大值",array.reduce((a,b) => a>b?a:b)
console.log(("最小值",array.reduce((a,b)=> a<b?a:b)

运行效果

求和，35
最大值：9，
最小值：2

数组去重

代码

// 数组去重的两种方法
const array = [2,"5","5",4,5,6,7,8,6,6,2]
//1. 
const uniqueArray =[...new Set(array)]
// 2.
const uniqueArray2 = array.filter((arr,index) => array.indexOf(arr) === index)

console.log(uniqueArray)
console.log(uniqueArray2)

运行效果

> [2,"5",4,5,6,7,8]
> [2,"5",4,5,6,7,8]

填充数组

// 确保数组长度相等，用于处理网格结构，
//不相等的可以用fill来填充
let arr = Array(5).fill('')
console.log(arr)

运行效果

> ["","","","",""]

数组的映射

代码

// 数组的映射
const array = [
    {
        name:'yan mo',
        age:12
    },
     {
        name:'FWT T',
        age:18
    }
]
const name = Array.from(array,({name}) => name)
const age=Array.from(array,({age}) => age)

console.log(name)
console.log(age)

运行效果

> ["yan mo","FWT T"]
> [12,18]

数组截取片段

代码

// 数组截取片段
let array = [0,5,6,3,2,1,2,34]
console.log(array.length)
array.length = 3
console.log(array.length)
console.log(array)
// 相比之效slice方法运行更快，性能会更好
const array1 = array.slice(0,4)
console.log(array1)

运行效果

> 8
> 3
> [0,5,6]
> [0,5,6]

slice()方法

代码

// slice() 方法
let array = [3,5,6,7,8,2,1]
//获取数组中的片段
const result = array.slice(2,4)
console.log(result)
// 获取数组的最后一页
const result1 = array.slice(-1)
console.log(result1)
// 获取索引为1之后的所有数据
const result2 = array.slice(1)
console.log(result2)

const result3 = array.slice(array.length)
console.log(result3)

//获取数组的最后一项
const result4 = array.slice(array.length - 1)
console.log(result4)

运行效果

> [6,7]
> [1]
> [5,6,7,8,2,1]
> []
> [1]

遍历对象的几种方法

const parentObj ={
    a:'aaaa',
    b:Symbol('bbbbb'),
    c:'ccccc'
}
const Obj = Object.create(parentObj, {
    d:{
        value:'ddddd',
        enumerable:true
    },
    a:{
        name:'222',
        value:1,
        enumerable:true
    },
    e: {
        value:'eeeee',
        enumerable:false
    },
    [Symbol('f')]:{
         value:'fffff',
        enumerable:true
    }
})
// 1. Object.keys(obj)
// Object.keys返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性
console.log('Object.keys()',Object.keys(Obj))
// 2.Object.value(obj)
// 返回对象的属性值
console.log('Object.values()',Object.values(Obj))
//Object.entries(obj)
// 返回一个由对象的键值对组成的数组
console.log('Object.entries()',Object.entries(Obj))
// 返回一个由指定对象的所有自身属性名
console.log('Object',Object.getOwnPropertyNames(Obj))
// 返回一个给定对象自身的所有Symbol属性的数组
console.log('Object.getOwnPropertySymbols()',Object.getOwnPropertySymbols(Obj))
// for in 
for(let key in Obj) {
    console.log('for in ',key)
}
// for of
for(let vlaue of Object.values(Obj)) {
    console.log('for of',vlaue)
}
// forEach
Object.values(Obj).forEach(value => {
    console.log('forEach',value)
})
// Refelct.ownKey(obj)
// 返回一个数组。包含对象自身的所有属性
console.log('Reflect',Reflect.ownKeys(Obj))

字符串转换的几种方法

// 字符串转数字的方法
// 1.转换函数parseInt(string,radix)
// radix 是一个可选参数，要解析的数字的基础，在2——36之间，超出的显示为NaN
console.log(parseInt('1234abc',10))
console.log(parseInt('123abc',2))
console.log(parseInt('123abc',8))
console.log(parseInt('123abc',16))
console.log(parseInt('abc',10))
// 2.parseFloat
console.log(parseFloat('123.4d')); // 123.4
console.log(parseFloat('123abc')); // 123
console.log(parseFloat('abc')); // NaN
// 3. 强制类型转换
console.log(Number('123.456')); // 123.456
console.log(Number('123abc')); // NaN
console.log(Number('1.2.3')); // NaN
// 4.弱类型转换
console.log(~~'123'); // 123
console.log(~~'123.456'); // 123
console.log(~~'abc'); // 0
console.log(~~'123abc'); // 0
console.log(~~'0'); // 0
console.log(~~'-123'); // -123
// 5.正好运算符
console.log(+'123'); // 123
console.log(+'123.456'); // 123.456
console.log(+'abc'); // NaN
console.log(+'123abc'); // NaN
console.log(+'0'); // 0
console.log(+'-123'); // -123
// 6.四则运算符中的-、*、/
console.log('123' - 0); // 123
console.log('123.456' * 1); // 123.456
console.log('abc' * 1); // NaN
console.log('123abc' - 0); // NaN
console.log('0' * 1); // 0
console.log('-123' * 1); // -123
console.log('0XFF' / 1); // 255

弹出指定高度和宽度的新窗口事件

  popUp(winUrl) {
                    window.open('https://www.baidu.com', "百度", "width=300,height=400")
                }

数组扁平化，不改变原数组

函数

   flattenDeep(arr) {
          return Array.isArray(arr)?arr.reduce((acc,cur) => [...acc, ...this.flattenDeep(cur)],[]):[arr]
        }

使用

    let test = ["a",["b","c"],["d","e",["g","f"]]]
         let test1 =  this.flattenDeep(test)
         console.log('原数组',test)
         console.log('改变后的数组',test1)