ES6-新增方法
一。字符串的新增方法
1.includes方法（实例的方法）：
应用：
代码优化：
（1）先使用includes方法判断是url中否包含？
（2）如果包含？, 再判断url最后一位字符是不是?或&符号，是的话就拼接空字符串，不是的话就拼接&符号
（3）如果不包含？, 就拼接一个？
（4）可以通过url.substr(url.length-1,1)获取字符串最后一个字符
//将网址加上后面的键值
// （1）先使用includes方法判断是url中否包含？
// （2）如果包含？, 再判断url最后一位字符是不是?或&符号，是的话就拼接空字符串，不是的话就拼接&符号
// （3）如果不包含？, 就拼接一个？
// （4）可以通过url.substr(url.length-1,1)获取字符串最后一个字符
// https://www.imooc.com/course/list
// https://www.imooc.com/course/list?c=fe&sort=pop
let url = 'https://www.imooc.com/course/list?';
const set_url_param = (url, name, value) => {
if (url.includes('?')) {
url += (url.substr(url.length - 1) === '?' || url.substr(url.length - 1) === '&') ? '' : '&';
} else {
url += '?';
}
url += `${name}=${value}`;
return url;
}
url = set_url_param(url, 'c', 'fe');
url = set_url_param(url, 'sort', 'pop');
console.log(url);//https://www.imooc.com/course/list?c=fe&sort=pop
2.padEnd()、padStart()方法 （实例方法）
3.清除字符串的空格 trimStart() trimLeft() （实例方法）
<input type="text" id="username" />
<input type="submit" value="提交" id="btn" />
<script>
// 清除字符串的首或尾空格，中间的空格不会清除
// 1.基本用法
// const s = ' a b c ';
// console.log(s);
// // console.log(s.trimStart());//首
// // console.log(s.trimLeft());//首
// // console.log(s.trimEnd());//尾
// // console.log(s.trimRight());//尾
// console.log(s.trim());//首尾
// 2.应用
const usernameInput = document.getElementById('username');
const btn = document.getElementById('btn');
btn.addEventListener(
'click',
() => {
console.log(usernameInput.value);
// 验证
console.log(usernameInput.value.trim());
if (usernameInput.value.trim() !== '') {//如果输入的都是空格，usernameInput.value.trim()会去除所有空格，留下'';
// 可以提交
console.log('可以提交');
} else {
// 不能提交
console.log('不能提交');
}
// 手动提交
},
false
);
4.replaceAll方法（实例方法）
二。数组新增方法
1.includes方法（实例方法）
2.Array.from() (构造器方法)
// 将其他数据类型转换成数组 // 1.基本用法 // console.log(Array.from('str')); // 2.哪些可以通过 Array.from() 转换成数组 // 2.1.所有可遍历的 // 数组、字符串、Set、Map、NodeList、arguments // console.log(Array.from(new Set([1, 2, 1]))); // console.log([...new Set([1, 2, 1])]); // 2.2.拥有 length 属性的任意对象 // const obj = { // '0': 'a', // '1': 'b', // name: 'Alex', // length: 3 // }; // console.log(Array.from(obj)); // console.log([...obj]); // × // 3.第二个参数（回调函数：回调函数会被from方法内部调用，调用次数就是遍历的次数） // 作用类似于数组的 map 方法，用来对转化成数组后的每个元素进行处理，将处理后的值放入返回的数组 // console.log( // [1, 2].map(value => { // return value * 2; // }) // );//[2,4] // console.log(Array.from('12', value => value * 2));//[2,4]，value依次代表1 2（第二个参数的功能相当于：[1,2].map(value=>{return value*2})） // console.log(Array.from('12').map(value => value * 2)); // 4.第三个参数,指定回调函数的this指向 Array.from( '12', value => { console.log(this); }, document ); Array.from( '12', function () { console.log(this);//输出两次document，因为数组有两个成员，这个回调函数会被调用两次（遍历） }, document );
这个对象的length属性必须是数字代表转换后数组的length长度，因为对象里面没有成员，所以自动补了个键值对'0':undefined
'1':b键值对会被忽略
键名是非数字型字符串对应的值不会被转换到数组里；
总结：把键名是数字型字符串对应的值放入数组；
补充：ES5数组的map方法：
current依次代表1 2 3；回调函数会被map方法内部调用，调用次数就是遍历的次数
3. find() 、 findIndex()方法 （实例方法）
①第一个参数：回调函数
和forEach方法很类似。回调函数会被调用多次（次数等于数组成员个数），回调函数里第一个参数是值，第二个参数是索引，第三个参数是数组本身
没有写条件时，会遍历所有成员
return是find方法内部调用回调函数终止的条件，即当传参value===10时，回调函数执行，碰到return value>9，满足条件，就不再接着调用回调函数了，且把满足条件的这个值作为数组调用find方法的返回值
②第二个参数：指定回调函数里面的this
// 1. 使用find()方法，找到数据data中，age为20的数据，并将其打印到控制台 // 2. 使用findIndex()方法，为name为“李四”的数据，添加一个hobby属性，属性值为“游泳” let data = [ { age: 12, name: "张三" }, { age: 20, name: "李四" } ]; console.log(data.find(function (value) { return value.age === 20; })); let index = data.findIndex(function (value) { return value.name === '李四'; }); data[index].hobby = '游泳'; console.log(data);
三。对象的新增方法
1. Object.assign()
最终发生变化的只有第一个参数
基本数据类型作为源对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Object.assign()</title>
</head>
<body>
<script>
// 用来合并对象
// 1.基本用法
// Object.assign(目标对象, 源对象1,源对象2,...): 目标对象
// const apple = {
// color: '红色',
// shape: '圆形',
// taste: '甜'
// };
// const pen = {
// color: '黑色',
// shape: '圆柱形',
// use: '写字'
// };
// console.log(Object.assign(apple, pen));
// Object.assign 直接合并到了第一个参数中，返回的就是合并后的对象
// console.log(apple);
// console.log(Object.assign(apple, pen) === apple);
// 可以合并多个对象
// console.log(Object.assign({}, apple, pen));
// console.log(apple);
// console.log({ ...apple, ...pen });
// 2.注意事项
// 2.1.基本数据类型作为源对象
// 与对象的展开类似，先转换成对象，再合并
// console.log(Object.assign({}, undefined));
// console.log(Object.assign({}, null));
// console.log(Object.assign({}, 1));
// console.log(Object.assign({}, true));
// console.log(Object.assign({}, 'str'));
// 2.2.同名属性的替换
// 后面的直接覆盖前面的
// const apple = {
// color: ['红色', '黄色'],
// shape: '圆形',
// taste: '甜'
// };
// const pen = {
// color: ['黑色', '银色'],
// shape: '圆柱形',
// use: '写字'
// };
// console.log(Object.assign({}, apple, pen));
// 3.应用
// 合并默认参数和用户参数
const logUser = userOptions => {
const DEFAULTS = {
username: 'ZhangSan',
age: 0,
sex: 'male'
};
const options = Object.assign({}, DEFAULTS, userOptions);
// const options = Object.assign({}, DEFAULTS, undefined);
console.log(options);
};
logUser();
// logUser({});
// logUser({ username: 'Alex' });
</script>
</body>
</html>
2.Object.keys()、Object.values() 和 Object.entries() （和for-of遍历数组类似）
Object.keys()/values()/entires() 并不能保证顺序一定是你看到的样子，这一点和 for in 是一样的
如果对遍历顺序有严格要求的话，可以使用前面的给一般对象添加可遍历对象生成方法；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Object.keys()、Object.values() 和 Object.entries()</title>
</head>
<body>
<script>
// 1.基本用法
// const person = {
// name: 'Alex',
// age: 18
// };
// console.log(Object.keys(person));
// console.log(Object.values(person));
// console.log(Object.entries(person));
// 2.与数组类似方法的区别
// console.log([1, 2].keys());
// console.log([1, 2].values());
// console.log([1, 2].entries());
// console.log(person.keys);
// 数组的 keys()、values()、entries() 等方法是实例方法，返回的都是 Iterator
// 对象的 Object.keys()、Object.values()、Object.entries() 等方法是构造函数方法，返回的是数组
// 3.使用 for...of 循环遍历对象
const person = {
name: 'Alex',
age: 18
};
// for (const key of Object.keys(person)) {
// console.log(key);
// }
// for (const value of Object.values(person)) {
// console.log(value);
// }
// for (const entries of Object.entries(person)) {
// console.log(entries);
// }
// for (const [key, value] of Object.entries(person)) {
// console.log(key, value);
// }
// Object.keys()/values()/entires() 并不能保证顺序一定是你看到的样子，这一点和 for in 是一样的
</script>
</body>
</html>
<div id="list">
</div>
<script>
var htmlStr = '';
var classfies = {
"前端": ["Vue", "Angular", "React"],
"后端": ["Php", "Java", "Python"]
};
const list = document.getElementById('list');
const a = Object.entries(classfies);
console.log(a);
for (const [key, value] of a) {
htmlStr += `<dl><dt>${key}</dt><dd>${value[0]}</dd><dd>${value[1]}</dd><dd>${value[2]}</dd></dl>`
};
list.innerHTML = htmlStr;
</script>
浙公网安备 33010602011771号