模板字符串和标签模板

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扩展的更多相关文章

  1. ES6...扩展运算符(数组或类数组对象)

    数组和类数组对象定义 数组:[] 类数组对象:只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,我们就认为他是类数组对象. 数组使用 let foo_arr = [ ...

  2. ES6扩展运算符的几个小技巧

    es6扩展运算符,也就是...  ,作用是将一个数组转为用逗号分隔的参数序列. 那么问题来了,我们为啥要用这么奇怪的东东涅,当然因为它能大大提高我们的开发效率.所以,可别小看这三个点. 1.复制数组( ...

  3. ES6 模版字符串及常用的es6扩展方法

    1.ES6 模版字符串es6 模版字符串主要用于简化字符串的拼接 <script type="text/javascript"> let obj={name:'rdb' ...

  4. 关于ES6扩展属性

    ES6 let和const let命令 只在代码块作用域内有效 不存在变量提升(不能在申明之前赋值) 暂时性死区(在区域内不受外部变量影响) 不允许重复申明(在相同代码块区域内) 块级作用域 let为 ...

  5. ES6 扩展运算符 三点(...)

    含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[, , ]) // 1 2 3 conso ...

  6. ES6 扩展运算符 三个点(...)

    它是什么 es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形.因为typeScript是es6的超集,所以typeScrip ...

  7. ES6 扩展运算符

    ES6的扩展运算符则可以看作是rest参数的逆运算.可以将数组转化为参数列表. 如:console.log(1,...[2,3,4],5) //1 2 3 4 5 用于合并数组: [1,2, ...m ...

  8. ES6扩展运算符...进行的数组删除

    今天写了按照React小书写了Reducer,发现基础真是太重要了,所有关于上层建筑的细节都需要回到下层细节中去寻找,而且现在的基础也由ES3变成了ES6了. const ADD_USER = &qu ...

  9. es6 扩展运算符 三个点...

    es6中引入扩展运算符…,它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形.因为typeScript是es6的超集,所以typeScript也支持扩展运算符 ...

  10. Es6扩展运算符--三点运算符(...)--展开语法(Spread syntax)

    0.看文档呀 关于拓展运算符更详细的解释见 > MDN展开语法 关于剩余参数更详细的解释见 >MDN剩余参数 关于解构赋值更详细的解释见 >MDN解构赋值 直接看上面的文档更好 1. ...

随机推荐

  1. 洛谷P3177 [HAOI2015]树上染色(树形dp)

    题目描述 有一棵点数为 N 的树,树边有边权.给你一个在 0~ N 之内的正整数 K ,你要在这棵树中选择 K个点,将其染成黑色,并将其他 的N-K个点染成白色 . 将所有点染色后,你会获得黑点两两之 ...

  2. HDU_5045_状态压缩dp

    http://acm.hdu.edu.cn/showproblem.php?pid=5045 i从1到m依次更新,dp[i][j]表示更新到i题时,j表示每个人的答题状态,分别用0和1表示(因为每个人 ...

  3. 曹工说Spring Boot源码(17)-- Spring从xml文件里到底得到了什么(aop:config完整解析【中】)

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  4. 快速应用开发(RAD)平台 - 20 年的演进

    过去几年中,现代软件开发的整体环境发生了巨大的变化.对我个人来说,这种变化与宇宙的加速膨胀差不多.第二个千年刚到来时,产业的发展看起来还不是那么快,只是逐步在前进.现在技术发展的复杂度和多样性已经可以 ...

  5. ugligy 转

    3.配置gulpfile.js 3.1.基本使用 JavaScript 1 2 3 4 5 6 7 8 var gulp = require('gulp'),     uglify = require ...

  6. Jmeter之设置动态关联

    前言 在Jmeter中,如何进行接口关联(上一个接口的返回参数作为下一个接口的入参使用)测试呢?下面我们一起来学习吧! 需求:需要利用商品信息接口的返回结果skuName值作为下一个登录接口参数Use ...

  7. 用Java反射输出对象的所有属性的值

    获取对象的类类型 Class cls = obj.getClass(); 用类类型获取属性数组 getFields()获取的是共有属性 getDeclaredFields()可以获取所有属性 Fiel ...

  8. 【WPF学习】第四十六章 效果

    WPF提供了可应用于任何元素的可视化效果.效果的目标是提供一种简单的声明式方法,从而改进文本.图像.按钮以及其他控件的外观.不是编写自己的绘图代码,而是使用某个继承自Effect的类(位于System ...

  9. tensorboard的简单使用

    1. 首先保证你已有程序,下面是MLP实现手写数字分类模型的代码实现. 不懂的可以对照注释理解. #输入数据是28*28大小的图片,输出为10个类别,隐层大小为300个节点 from tensorfl ...

  10. 【大白话系统】MySQL 学习总结 之 缓冲池(Buffer Pool) 如何支撑高并发和动态调整

    如果大家对我的 [大白话系列]MySQL 学习总结系列 感兴趣的话,可以点击关注一波. 一.上节回顾 在上节< 缓冲池(Buffer Pool) 的设计原理和管理机制>中,介绍了缓冲池整体 ...