Vue 学习随笔系列十四 -- JavaScript巧妙用法

🕗 发布于 2024-11-13 23:53 javascript vue.js 学习

JavaScript巧妙用法

文章目录

JavaScript巧妙用法

1、String.padStart 函数

在字符串前面进行填充

let temp = 'saade'
// 输出一个长度为8的字符串，长度不够时，在前面填充 r 
const str1 = temp.padStart(8, 'r') 
console.log(str1) // 'rrrsaade'

2、String.padEnd 函数

在字符串后面进行填充

let temp = 'saade'
// 输出一个长度为8的字符串，长度不够时，在前面填充 r 
const str1 = temp.padEnd (8, 'r') 
console.log(str1) // 'saaderrr'

3、tirm 函数

String.prototype.trimStart() 去除字符串开头的空白
String.prototype.trimEnd() 去除字符串结尾的空白

const temp = '  saade'
// 去除字符串前面的空白
const str1 = temp.trimStart(8, 'r') 
console.log(str1) // 'saade'

const temp1 = 'saade '
// 去除字符串后买你的空白
const str2 = temp.trimEnd()
console.log(str2) // 'saade'

const temp2 = '  saade  '
// 去除字符串后买你的空白
const str2 = temp.trim()
console.log(str2) // 'saade'

3. Object.freeze 函数

冻结对象，使其不可变且属性不可修改

const obj = {
name: "xiaoming",
age: 18,
}
Object.freeze(obj);
obj.name = "xiaoli"
console.log(obj) // {name: "xiaoming", age: 18}

4. Object.fromEntries 函数

将键值对列表转换为对象

const arr= [['name', 'xiaoming'], ['age', 18]];
const temp= Object.fromEntries(arr);
console.log(temp); // { name: 'xiaoming', age: 18}

5. Object.entries 函数

把一个对象的键值以数组的形式遍历出来

const temp = 'saade'
console.log(Object.entries(temp)) // ['0', 's']['1', 'a']['2', 'a']['3', 'd']['4', 'e']

const num = 122344
conso.log(Object.entries(num )) // []

const obj = {
name: "xiaoming",
age: 18,
}
 console.log(Object.entries(obj)) // [{name: "xiaoming", age: 18}]

const obj1 = {
xiaoming: {
sex: '女',
age: 18
},
xiaoli: {
sex: '男'，
age: 20
}
}
console.log(Object.entries(obj1)) // [xiaoming, {sex: "女", age: 18}] [xiali, {sex: "男", age: 20}]

6. Array.prototype.flat 函数

格式化字符串
Array.prototype.flat()创建一个新数组，将嵌套数组中的所有子元素，递归到其中

const temp = [1, ['xiaoming', ['2'], [3]]]
console.log(222, temp.flat()) // [1, "xiaoming", ['2'], [3]]
// 不指定递归深度
const temp1 = [1, [2, [3, [4]]]]
console.log(222, temp1.flat())

在这里插入图片描述

// 指定递归深度
 const temp = [1, [2, [3, [4]]]]
 console.log(222, temp.flat(999))