ES6的新增方法
ES6的新增方法
1.字符串的新增方法
字符串的includes():判断字符串中是否含有某些字符
1.1 基本用法
'abc'.includes('ab'); //true
'abc'.includes('ac'); //false
1.2第二个参数
表示开始搜索的位置，默认是0
'abc'.includes('a',1); //false
1.3应用
let url = 'https://www.imooc.com/course/list';
const addURLParam = (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;
}
url = addURLParam(url, 'c', 'fe');
// url = addURLParam(url,'sop','pop');
console.log(url); // https://www.imooc.com/course/list?c=fe&sop=pop
2.padStart()和padEnd()
补全字符串长度
2.1基本用法
'x'.padStart(5,'ab'); // ababx
'x'.padEnd(5,'ab'); // xabab
2.2 注意事项
原字符串的长度，等于或大于最大长度，不会消减原字符串，字符串补全不生效，返回原字符串
'xxx'.padStart(2,'ab'); // xxx
用来补全的字符串与原字符串长度之和超过了最大长度，截去超出位数的补全字符串，原字符串不动
'abc'.padStart(10,'0123456789');//0123456abc
'abc'.padEnd(10,'0123456789');//abc0123456
如果省略第二个参数，默认使用空格补全长度
'x'.padStart(4);// x
'x'.padStart(4);//x
3.应用
显示日期格式
2021-10-10
2021-1-1 //2021-01-01
'10'.padStart(2,0);// 10
'1'.padStart(2,0);// 01
4.trimStart()和trimEnd()
清除字符串的首或尾空格，中间的空格不会清除
4.1基本用法
const s = ' a b c'; // a b cs.trimStart(s); //a b c ==>s.trimLeft(s)s.trimEnd(s); // a b c ==>s.trimRight(s)s.trim(s) //a b c 去除首尾空格
5.数组的新增方法
数组的includes():判断数组中是否含有某些成员
[1,2,3].includes('2');// false 因为‘2’是字符串[1,2,3].includes(2);// true[1,2,3].includes(2，2);// false
基本遵循严格相等(=),但是对于NaN的判断与=不同，includes认为NaN === NaN
第二个参数表示搜索起始位置，默认值为0
5.1应用
去重
const arr = [];for(const item of [1,2,1]){ if(!arr.includes(item)){ //没有 arr.push(item); }}console.log(arr); // [1,2]
6.数组的Array.from()
将其他数据类型转为数组
6.1基本用法
Array.form('str'); // ['s','t','r']
6.2那些可以通过Array.from()转为数组
6.21 所有可遍历的
数组、字符串、Set、Map、NodeList、arguments
6.22拥有length属性的任意对象
const obj = { '0':1, lenght:1}; console.log(Array.from(obj)); // [1]
6.3第二个参数
作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
[1,2].map((value)=>{ return value*2;}) // [2,4]Array.from('12',value=>value *2)); //[2,4]
6.4第三个参数
Array.from('12',function(){ console.log(this); //window})Array.from('12',function(){ console.log(this); //document},document)
7.find()和findIndex()
find():找到满足条件的一个立即返回
findIndex():找到满足条件的一个，立即返回其索引
7.1基本用法
console.log( [1,5,10,15].find((value,index,arr)=>{ return value > 9; //注意:箭头函数虽然修改了this指针，但是指针也是不会变的 ，需要改为正常的函数 window},document)); // 10console.log( [1,5,10,15].findIndex((value,index,arr)=>{ return value > 9;})); // 2
7.2应用
const students = [{ name: 'LiHao', sex: '男', age: 16 }, { name: 'ZanSan', sex: '女', age: 18 }, { name: 'LiLei', sex: '男', age: 20 }, { name: 'WuJun', sex: '男', age: 36 }, ] console.log(students.find(value => value.sex == '女')); // {name: "ZanSan", sex: "女", age: 18} console.log(students.findIndex(value => value.sex == '女')); // 1
8.对象的新增方法 Object.assign()
8.1用来合并对象
const apple = { color: '红色', shape: '圆形', taste: '甜' }; const pen = { color: '黑色', shape: '圆柱形', use: '写字' }; console.log(Object.assign(apple, pen));//{color: "黑色", shape: "圆柱形", taste: "甜", use: "写字"}// 使用展开运算符和使用Object.assign()的显示效果一样，使用展开运算符是生成一个新的对象，而使用Object.assign()直接合并到了第一个参数中，返回的就是合并后的对象 console.log(Object.assign(apple, pen) === apple); //true console.log({...apple,...pen}); ////{color: "黑色", shape: "圆柱形", taste: "甜", use: "写字"}//使用Object.assign()生成一个新的对象//console.log(Object.assign({},apple, pen));//第一个参数空对象就是合并后的对象
8.2注意事项
8.2.1基本数据类型作为源对象
Object.assign(目标对象，源对象1，源对象2.，，，)
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')); //{0: "s", 1: "t", 2: "r"}
8.2.2同名属性的替换
后面的覆盖前面的
const apple = { color: ['红色','黄色','绿色'], shape: '圆形', taste: '甜' }; const pen = { color: ['黑色','银色'], shape: '圆柱形', use: '写字' }; console.log(Object.assign({},apple,pen));//{color: Array(2), shape: "圆柱形", taste: "甜", use: "写字"}//color: (2) ["黑色", "银色"]//shape: "圆柱形"//taste: "甜"//use: "写字"
8.3应用
合并默认参数和用户参数
const logUser = userOptions =>{ const DEFAULTS ={ username:'LiHao', age:0, sex:'male' } const options = Object.assign({},DEFAULTS,userOptions); console.log(options); } logUser(); //{username: "LiHao", age: 0, sex: "male"} logUser({}) //{username: "LiHao", age: 0, sex: "male"} logUser({username:'LeYi'}) //{username: "LeYi", age: 0, sex: "male"}
9.对象的Object.keys(),Object.values()和Object.entries()方法
9.1基本用法
const person = { name:'LiHao', age:18 } console.log(Object.keys(person)); //(2) ["name", "age"] console.log(Object.values(person)); // (2) ["LiHao", 18] console.log(Object.entries(person)); //(2) [Array(2), Array(2)]
9.2与数组类似方法的区别
数组的keys()、values()、entries()等方法是实例方法，返回的都是Iterator
对象的Object.keys()、Object.values()、Object.entries()等方法是构造函数方法，返回的是数组
console.log([1,2].keys()); //Array Iterator {} console.log([1,2].values()); //Array Iterator {} console.log([1,2].entries()); //Array Iterator {}//返回数组的遍历对象，是实例方法
9.3 使用for...of循环遍历对象
//Object.keys()、Object.values()、Object.entries()并不能保证顺序一定是你看到的样子，这一点和for in 是一样的const person = { name:'LiHao', age:18 }for(const key of Object.keys(person)){ console.log(key); // name } // agefor(const value of Object.values(person)){ console.log(value); // LiHao } // 18 for(const entries of Object.entries(person)){ console.log(entries); //(2) ["name", "LiHao"] //(2) ["age", 18] }
