ES6 的新增方法
大约 4 分钟约 1208 字...
// TODO 待整理 4,26
字符串新增方法
includes()
- 判断字符串中是否含有某些字符 1.基本用法
console.log('abc'.includes('a')) // true
- 第二个参数
表示开始搜索的位置,默认为 0
console.log('abc'.includes('a', 1))
- 应用:query 的拼接
<!-- query的拼接 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
let url = 'https://www.imooc.com/course/list?'
let url1 = 'https://www.imooc.com/course/list?username=xm&'
let url2 = 'https://www.imooc.com/course/list?username=xm'
const addURL = (url, name, value) => {
if (url.includes('?')) {
if (
url.substr(url.length - 1, 1) == '?' ||
url.substr(url.length - 1, 1) == '&'
) {
url += ''
} else {
url += '&'
}
} else {
url += '?'
}
url += `${name}=${value}`
return url
}
console.log(addURL(url, 'password', 'admin'))
console.log(addURL(url1, 'password', 'admin'))
console.log(addURL(url2, 'password', 'admin'))
</script>
</body>
</html>
padStart()和 padEnd()
- 基本用法
补全字符串
console.log('xxx'.padStart(4, 'a')) // axxx
console.log('xxx'.padEnd(4, 'a')) // xxxa
- 注意事项
- 原字符串的长度,等于或大于最大长度,不会消减原字符串,字符串补全不生效,返回原字符串
- 用来补全的字符串与原字符串长度之和超过了最大长度,截去超出位数的补全字符串,原字符串不动
- 如果省略第二个参数,默认使用空格补全长度
- 应用
显示日期格式
2021-1-1
2021-10-12
保持日期格式统一,一位数前面补零=》'1'.padStart(2,'0') // 01
trimStart()和 trimEnd()
- 基本用法
清除字符串的首或尾空格,中间的空格不会清除
console.log(' xxxxx'.trimStart())
- 应用
清除表单非法数据
<body>
<input type="text" id="username" />
<input type="submit" value="提交" id="btn" />
<script>
const username = document.getElementById('username')
const btn = document.getElementById('btn')
btn.onclick = () => {
// trim()去除字符串的头尾空格
if (username.value.trim() !== '') {
console.log('可以提交')
} else {
console.log('不可以提交')
}
}
</script>
</body>
备注: trim()同时清除两边的空格
replaceAll()
相比于 replace 方法,可以在不使用正则的情况下,一次性替换掉所有的匹配
const str = 'aabbcc'
const str2 = str.replaceAll('b', '-')
console.log(str2) // aa--cc
数组的新增方法
includes()
- 基本用法
ncludes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则 false。 - 应用:数组去重
Array.from()
- 基本用法
将其他数据类型转换成数组 - 哪些可以通过 Array.from()转换成数组
- 所有可遍历的:数组、字符串、set、map、 nodeList、 arguments
- 拥有 length属性的任意对象
const obj = {
0: 'a',
1: 'b',
length: 2,
}
console.log(Array.from(obj))
- 第二个参数
作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组
console.log(Array.from('12', v => v * 2))
第三个参数
指定回调函数中的 this 指向,大坑:箭头函数无法修改
find()和 findIndex()
- 基本用法
- find():找到满足条件的一个立即返回
- findIndex():找到满足条件的一个,立即返回其索引
const arr = [1, 2, 3, 4, 5]
console.log(
arr.find(function (value, index, arr) {
return value > 2
})
)
对象的新增方法
Object.is()
Object.assign()
- 基本用法
const apple = {
color: 'black',
shape: '圆柱形',
taste: '甜',
}
const pen = {
color: 'red',
shape: '球形',
use: 'write',
}
console.log(Object.assign(apple, pen))
直接合并到了第一个参数中,返回的就是合并后的对象(修改后的第一个对象是同一个引用)。
如果像创建一个新对象可以这样写
console.log(Object.assign({}, apple, pen))
可以合并多个对象
- 注意事项
- 基本数据类型作为源对象:与对象的展开类似,先转换成对象,再合并
console.log(Object.assign({}, 'str'))
Object.assign(目标对象,源对象,....)
- 同名属性的替换 :后面的直接覆盖前面的,如果属性值为引用数据类型,也是直接覆盖,不用考虑那么多
Object.assign
属于浅拷贝
- 应用
合并默认参数和用户参数
const logUser = useroptions => {
const Defaults = {
username: 'zhangsan',
password: '123',
}
const options = Object.assign({}, Defaults, useroptions)
console.log(options)
}
logUser({})
Object.keys()、Object.values()和 Object.entries()
- 基本用法
const person = {
name: 'zhangsan',
age: 18,
sex: 'male',
}
console.log(Object.keys(person))
console.log(Object.values(person))
console.log(Object.entries(person))
- 与数组类似方法的区别
1、调用方法不同,对于数组来说是实例的方法,对象是构造函数的方法
2、返回值不同,数组的方法返回的是数组的可遍历对象,对象的方法返回的是数组
- 使用对象的 Object.keys()、Object.values()、Object.entries() ,才能让对象使用 for...of 循环遍历对象
const apple = {
color: 'black',
shape: '圆柱形',
taste: '甜',
}
for (const [key, value] of Object.entries(apple)) {
console.log(key, value)
}
- 但是,Object.keys()/values()/entires() 并不能保证顺序一定是看到的样子,这一点和 for in 是一样的=>属性是数字,在使用 Object.keys()、Object.values()、Object.entries()方法时,顺序是按照属性的大小来定的
const person = {
100: "p",
2: "e",
5: "r",
30: "s",
15: "o",
75: "n"
};
console.log(Object.keys(person))
console.log(Object.values(person))
console.log(Object.entries(person)