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是一项标准,包括字符集、编码方案等
解决传统的字符编码方案的局限
ES6扩展的更多相关文章
- ES6...扩展运算符(数组或类数组对象)
数组和类数组对象定义 数组:[] 类数组对象:只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,我们就认为他是类数组对象. 数组使用 let foo_arr = [ ...
- ES6扩展运算符的几个小技巧
es6扩展运算符,也就是... ,作用是将一个数组转为用逗号分隔的参数序列. 那么问题来了,我们为啥要用这么奇怪的东东涅,当然因为它能大大提高我们的开发效率.所以,可别小看这三个点. 1.复制数组( ...
- ES6 模版字符串及常用的es6扩展方法
1.ES6 模版字符串es6 模版字符串主要用于简化字符串的拼接 <script type="text/javascript"> let obj={name:'rdb' ...
- 关于ES6扩展属性
ES6 let和const let命令 只在代码块作用域内有效 不存在变量提升(不能在申明之前赋值) 暂时性死区(在区域内不受外部变量影响) 不允许重复申明(在相同代码块区域内) 块级作用域 let为 ...
- ES6 扩展运算符 三点(...)
含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[, , ]) // 1 2 3 conso ...
- ES6 扩展运算符 三个点(...)
它是什么 es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形.因为typeScript是es6的超集,所以typeScrip ...
- ES6 扩展运算符
ES6的扩展运算符则可以看作是rest参数的逆运算.可以将数组转化为参数列表. 如:console.log(1,...[2,3,4],5) //1 2 3 4 5 用于合并数组: [1,2, ...m ...
- ES6扩展运算符...进行的数组删除
今天写了按照React小书写了Reducer,发现基础真是太重要了,所有关于上层建筑的细节都需要回到下层细节中去寻找,而且现在的基础也由ES3变成了ES6了. const ADD_USER = &qu ...
- es6 扩展运算符 三个点...
es6中引入扩展运算符…,它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形.因为typeScript是es6的超集,所以typeScript也支持扩展运算符 ...
- Es6扩展运算符--三点运算符(...)--展开语法(Spread syntax)
0.看文档呀 关于拓展运算符更详细的解释见 > MDN展开语法 关于剩余参数更详细的解释见 >MDN剩余参数 关于解构赋值更详细的解释见 >MDN解构赋值 直接看上面的文档更好 1. ...
随机推荐
- AI产品经理工作流程——需求分析和产品设计
1.AI产品设计常见失败原因 技术驱动产品设计,即我有什么技术就做什么产品.尽管许多公司不惜重金招聘高级AI算法工程师,确实这样也能帮助企业拿到大量的融资,但也容易给公司带来技术决定产品设计的局限.然 ...
- 牛客练习赛39 C 流星雨 (概率dp)
题意: 现在一共有n天,第i天如果有流星雨的话,会有wi颗流星雨. 第1天有流星雨的概率是p1. 如果第i−1 (i≥2)天有流星雨,第i天有流星雨的可能性是pi+P,否则是pi. 求n天后,流星雨颗 ...
- sqlserver check running process 1
check process script 1, check which is current running: use master SELECTspid,ER.percent_complete,CA ...
- Python原来这么好学-1.1节: 在windows中安装Python
这是一本教同学们彻底学通Python的高质量学习教程,认真地学习每一章节的内容,每天只需学好一节,帮助你成为一名卓越的Python程序员: 本教程面向的是零编程基础的同学,非科班人士,以及有一定编程水 ...
- 浏览器中的 .Net Core —— Blazor WebAssembly 初体验
前言 在两年多以前就听闻 Blazor 框架,是 .Net 之父的业余实验性项目,其目的是探索 .Net 与 WebAssembly 的兼容性和应用前景.现在这个项目已经正式成为 Asp.Net Co ...
- 多版本python创建虚拟环境
不表示默认的python使用 mkvirtualenv -p c:\python27\python.exe test1,即 mkvirtualenv -p 要安装的版本的python.exe路径 ...
- 优雅地使用 C++ 制作表格:tabulate
作者:HelloGitHub-ChungZH 0x00 介绍 tabulate tabulate 是一个使用 C++ 17 编写的库,它可以制作表格.使用它,把表格对齐.格式化和着色,不在话下!你甚至 ...
- 物理机安装ESXI6.7提示No Network Adapters的解决方案
下载好ESXI6.7.iso镜像,写入U盘后,提示No Network Adapters,找不到网卡驱动. 解决办法:需要重新封装ESXI,将对应的网卡驱动嵌入进来. 1.先下载VMware-Powe ...
- img 标签上的src 链接图片不存在时 怎么处理
// .html <img [src]="nzSrc" *ngIf="nzSrc && hasSrc" (error)="img ...
- android应用开发错误:Your project contains error(s),please fix them before running your
重新打开ECLIPSE运行android项目,或者一段时间为运行ECLIPSE,打开后,发现新建项目都有红叉,以前的项目重新编译也有这问题,上网搜索按下面操作解决了问题 工程上有红叉,不知道少了什么, ...