ES6扩展
Posted chenyingying0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6扩展相关的知识，希望对你有一定的参考价值。
模板字符串和标签模板
const getCourseList = function() { // ajax return { status: true, msg: ‘获取成功‘, data: [{ id: 1, title: ‘Vue 入门‘, date: ‘xxxx-01-09‘ }, { id: 2, title: ‘ES6 入门‘, date: ‘xxxx-01-10‘ }, { id: 3, title: ‘React入门‘, date: ‘xxxx-01-11‘ }] } }; const { data: listData, status, msg } = getCourseList(); function foo(val) { return val.replace(‘xxxx‘, ‘2020‘); } if (status) { let arr = []; listData.forEach(function({ date, title }) { arr.push( ` <li> <span>${ `课程名: ${ title }` }</span> <span>${ foo(date) }</span> </li> ` ); }); let ul = document.createElement(‘ul‘); ul.innerhtml = arr.join(‘‘); document.body.appendChild(ul); } else { alert(msg); }
padStart padEnd
{ let str = ‘i‘; // 插入在5的位置 let str1 = str.padStart(5, ‘mooc‘); console.log(str1); // 倒序插入在5的位置 let str2 = str.padEnd(5, ‘mooc‘); console.log(str2); }
repeat
{ function repeat(str, num) { return new Array(num + 1).join(str); } console.log(repeat(‘s‘, 3)); }
startsWith endsWith
{ const str = ‘A promise is a promsie‘; console.log(str.startsWith(‘B‘)); console.log(str.startsWith(‘A pro‘)); console.log(str.endsWith(‘promsie‘)); console.log(str.endsWith(‘A‘)); }
includes
{ const str = ‘A promise is a promise‘; if (~str.indexOf(‘promise‘)) { console.log(‘存在"promise"‘); } if (str.includes(‘a promise‘)) { console.log(‘存在"a promise"‘); } }
字符串转数组+遍历
let str = ‘PROMISE‘; // 四种方法：转成数组后遍历 var oStr = Array.prototype.slice.call(str); var oStr = str.split(‘‘); const oStr = [...str]; const [...oStr] = str; console.log(oStr); //单个字符输出 oStr.forEach(function(word) { console.log(word); });
对全是英文的字符串中的大写字符加密 A -> 100 B -> 99
const map = {A: ‘100‘, B: ‘99‘, C: ‘98‘, D: ‘97‘, E: ‘96‘, F: ‘95‘, G: ‘94‘, H: ‘93‘, I: ‘92‘, J: ‘91‘, K: ‘90‘, L: ‘89‘, M: ‘88‘, N: ‘87‘, O: ‘86‘, P: ‘85‘, Q: ‘84‘, R: ‘83‘, S: ‘82‘, T: ‘81‘, U: ‘80‘, V: ‘79‘,W: ‘78‘,X: ‘77‘,Y: ‘76‘, Z: ‘75‘};
const words = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ‘;
oStr.forEach(function(word, index) {
if (words.includes(word)) oStr[index] = map[word];
});
console.log(oStr.join(‘‘));
使用for-of遍历字符串
let str = ‘PROMISE‘; let newStr = ‘‘; const map = {A: ‘100‘, B: ‘99‘, C: ‘98‘, D: ‘97‘, E: ‘96‘, F: ‘95‘, G: ‘94‘, H: ‘93‘, I: ‘92‘, J: ‘91‘, K: ‘90‘, L: ‘89‘, M: ‘88‘, N: ‘87‘, O: ‘86‘, P: ‘85‘, Q: ‘84‘, R: ‘83‘, S: ‘82‘, T: ‘81‘, U: ‘80‘, V: ‘79‘,W: ‘78‘,X: ‘77‘,Y: ‘76‘, Z: ‘75‘}; for (let word of str) { if (str.includes(word)) newStr += map[word]; } console.log(newStr);
Unicode是一项标准，包括字符集、编码方案等
解决传统的字符编码方案的局限
?? u1f436 unicode码(点) emoji
console.log(‘u1f436‘);
console.log(‘u{1f436}‘);
正则扩展
uy修饰符
u. unicode
console.log(/^ud83d/.test(‘ud83dudc36‘)) //ud83dudc36识别为ud83d和udc36两个字符 console.log(/^ud83d/u.test(‘ud83dudc36‘)) //ud83dudc36识别为一整个字符
y 粘连修饰符 sticky
const r1 = /imooc/g; const r2 = /imooc/y; const str = ‘imoocimooc-imooc‘; console.log(r1.exec(str)); console.log(r1.exec(str)); console.log(r1.exec(str)); console.log(r1.exec(str)); console.log(‘-----------------‘); console.log(r2.exec(str)); console.log(r2.exec(str));//imooc后面必须紧跟imooc，不能有其他字符 console.log(r2.exec(str));
数值扩展
新的进制表示法
console.log(0o16);//十六进制 console.log(0b1111);//二进制
新的方法与安全数
挂载在Number上：Number.parseInt Number.parseFloat
console.log(window.parseInt(‘1.23‘)); console.log(parseFloat(‘1.23‘)); console.log(Number.parseInt(1.23)); console.log(Number.parseFloat(1.23));
Number.isNaN
console.log(Number.isNaN(NaN)); function isNaN(value) { return value !== value; }
Number.isFinite
isFinite() 函数用于检查其参数是否是无穷大。
如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回 false
console.log(Number.isFinite(Infinity)); console.log(Number.isFinite(2 / 0)); console.log(Number.isFinite(1234)); console.log(Number.isFinite(‘1234‘)); console.log(Number.isFinite(true)); console.log(Number.isFinite(NaN));
Number.MAX_SAFE_INTEGER Number.MIN_SAFE_INTEGER 安全数范围
Number.isSafeInteger(); 是否在安全范围内
console.log(Number.MAX_SAFE_INTEGER); console.log(Number.MIN_SAFE_INTEGER); console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER - 1)); console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1));
幂运算 **
let a = (2 ** 10) ** 0; console.log(a); let b = 2 ** 10 ** 0;//从后往前计算 console.log(b);
函数扩展
函数参数的默认值1
function add(a, b = 999 + b, c = 1) { console.log(a, b); } add(1);
函数参数的默认值2
function People({ name, age = 38 } = {name: 1}) { console.log(name, age); }; People({ name: 3 });
结合扩展运算符(剩余参数...)
function sum(...args) { console.log(args); } sum(1, 2, 321, 4354, ‘fdafsd‘);
function op(type, b, ...nums) { console.log(type); console.log(nums); } op(‘sum‘, 1, 23, 454, 3, 67, 234);
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
function sum(...numbers) { return numbers.reduce(function(a, b) { return a + b; }, 0); } console.log(sum(1, 2, 3, 4));
箭头函数
const add1 = (a, b) => { a += 1; return a + b; }; const add2 = function(a, b) { a += 1; return a + b; } console.log(add1(2, 2)); console.log(add2(2, 2));
函数返回值
const pop = arr => arr.pop();//返回去掉的数值 console.log(pop([1, 2, 3]));//3 const pop = arr => void arr.pop();//void没有返回值 console.log(pop([1, 2, 3]));
箭头函数中没有arguments，需要用到扩展函数
const log = () => { console.log(arguments); }; log(1, 2, 3);//报错 const log = (...arguments) => { console.log(arguments); }; log(1, 2, 3);
箭头函数没有this，this指向自身所处环境的this
此处指向window
const xiaoming = { name: ‘小明‘, say1: function() { console.log(this); }, say2: () => { console.log(this); } } xiaoming.say1(); xiaoming.say2();
const xiaoming = { name: ‘xiaoming‘, age: null, getAge: function() { // ...ajax模拟1s之后得到服务器的响应获取到数据 // 箭头函数没有this，默认指向当前对象xiaoming setTimeout(() => { this.age = 14; console.log(this); }, 1000); } }; xiaoming.getAge();
对象扩展
简洁表示法
const getUserInfo = (id = 1) => { const name = ‘xiaoming‘; const age = 10; return { name, age, say() { console.log(this.name + this.age); } }; }; const xiaoming = getUserInfo();
属性名表达式
const key = ‘age‘; const xiaoming1 = { name: ‘xiaoming1‘, key: 14 }; const xiaoming2 = { name: ‘xiaoming2‘, [`${key}123`]: 14 };
复制对象 - 浅拷贝
const obj1 = { a: 1, b: 2, d: { aa: 1, bb: 2 } }; const obj2 = { c: 3, a: 9 }; const cObj1 = { ...obj1 }; cObj1.d.aa = 999; console.log(cObj1.d.aa);//999 console.log(obj1.d.aa);//999
合并对象（浅拷贝）
const newObj = { ...obj2, ...obj1 }; newObj.d.aa = 22; console.log(obj1);
部分新的方法和属性Object.is
+0 -0
console.log(Object.is(+0, -0)); console.log(+0 === -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(true, false)); console.log(Object.is(true, true));
Object.assign类似于对象合并
const obj = Object.assign({a: 1}, {b: 2}, {c: 3}, {d: 4, e: 5});
const obj = { a: 1, b: { c: 2 } }; let newObj = Object.assign({a: 3}, obj);//类似对象合并,a=1会替换掉a=3 console.log(newObj.a); console.log(newObj.b.c); newObj.b.c = 100; console.log(obj.b.c);
Object.keys 所有键组成的数值
Object.values 所有值组成的数组
Object.entries 所有键值对组成的数组
for - of
const obj = { a: 1, b: 2, c: 3, d: 4 }; console.log(Object.keys(obj)); console.log(Object.values(obj)); console.log(Object.entries(obj)); for (let [k, v] of Object.entries(obj)) { console.log(k, v); }
__proto__
Rest 解构赋值不会拷贝继承自原型对象的属性
let obj1={a:1};
let obj2={b:2};
obj2.__proto__=obj1;
let obj3={...obj2};
console.log(obj2); //{b:2}
console.log(obj3); //{b:2}
Object.setPrototypeOf
修改对象的原型属性，性能低下，不建议使用
const obj1 = {a: 1};
const obj2 = {b: 1}
const obj = Object.create(obj1);
console.log(obj.__proto__);
Object.setPrototypeOf(obj, obj2);
console.log(obj.__proto__);
Object.getPrototypeOf
获取原型属性
const obj1 = {a: 1};
const obj = Object.create(obj1);
console.log(obj.__proto__);
console.log(Object.getPrototypeOf(obj));
console.log(obj.__proto__ === Object.getPrototypeOf(obj));
super访问原型对象上的属性和方法
const obj = {name: ‘xiaoming‘};
const cObj = {
say() {
console.log(`My name is ${super.name}`);
}
}
Object.setPrototypeOf(cObj, obj);
cObj.say();
数组扩展
结合扩展运算符使用
const user = [‘小明‘, 14, [‘吃饭‘, ‘打游戏‘], ‘我没有女朋友‘]; function say(name, age, hobby, desc) { console.log(`我叫${ name }, 我今年${ age } 岁, 我喜欢${ hobby.join(‘和‘) }, ${ desc }`); } say(...user);
apply
const user = [‘小明‘, 14, [‘吃饭‘, ‘打游戏‘], ‘我没有女朋友‘]; function say(name, age, hobby, desc) { console.log(`我叫${ name }, 我今年${ age } 岁, 我喜欢${ hobby.join(‘和‘) }, ${ desc }`); } say.apply(null, user);
Math.max()
Math.min()
const arr = [1, 2, 233, 3, 4, 5]; console.log(Math.max(...arr));//推荐的ES6新方法 console.log(Math.max.apply(null, arr));//老方法
数组操作
const arr1 = [1, 2, 3, 4]; const arr2 = [4, 2, 2, 1]; const arr3 = [2.2, ‘123‘, false]; const cArr1 = [1, 2, 3, ...arr3];//数组添加数据 const cArr2 = [...arr1];//拷贝数组 const [...cArr3] = arr3;//拷贝数组 const cArr4 = [...arr1, ...arr2, ...arr3];//合并数组
生成器函数
定位点yield
function *g() { console.log(1); yield ‘hi~‘; console.log(2); yield ‘imooc~‘; } const gg = g(); gg.next();//1 setTimeout(function() { gg.next();//2 }, 1000);
Set中元素不能重复
可以将一些元素变为数组
let set = new Set([1, 2, 2, 3]); console.log([...set]);
Array.from对象转数组
该类数组对象的属性名必须为数值型或字符串型的数字
该类数组对象的属性名可以加引号，也可以不加引号
const obj = { 0: 1, 1: ‘22‘, 2: false, length: 2 //只取前两个数据 }; console.log(Array.from(obj));//1 22 console.log(Array.from(obj, item => item * 2));//2 44
Array.of将参数合成数组
console.log(Array.of(1, 2, ‘123‘, false));
Array#fill填充数组
let arr = new Array(10).fill(0, 0, 3);//从0开始，到3结束，都用0填充 console.log(arr); console.log([1, 2, 3].fill(0));
Array.includes判断数组中是否存在某个值
var arr = [1, 2, 3, 4]; console.log(arr.includes(1)); console.log(arr.includes(55));
keys values entries
const arr = [1, 2, 3, 444]; console.log(arr.keys()); for (let i of arr.keys()) { console.log(i); } for (let v of arr.values()) { console.log(v); } for (let [i, v] of arr.entries()) { console.log(i, v); }
find 根据条件(回调) 按顺序遍历数组 当回调返回true时 就返回当前遍历到的值
const res = [1, 7, 6, 3].find((value, index, arr) => value % 2 === 0);
console.log(res);
findIndex 根据条件(回调) 按顺序遍历数组 当回调返回true时 就返回当前遍历到的下标
const res = [1, 7, 6, 3, NaN].findIndex((value, index, arr) => Number.isNaN(value));
console.log(res);
以上是关于ES6扩展的主要内容，如果未能解决你的问题，请参考以下文章