资讯专栏INFORMATION COLUMN

珠峰培训ES6学习笔记1

番茄西红柿 / 2970人阅读

摘要:消除字符串头部空格消除尾部空格从头部补全字符串从尾部补全字符串

let和const

var关键字定义变量的特点:

可以重复定义

不能定义常量

不支持块级作用域

let的特点

不可以重复定义

变量不能提升,在变量定义之前,不能使用

在大括号当中定义的变量(块级作用域中),在作用域外无法访问

解决一些ES5当中需要闭包实现的功能,比如:每隔1秒循环输出一个当前的值

const的特点

常量一旦定义,就不能被修改

如果常量的值是一个引用类型,引用对象的属性还是可以修改的

结构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为结构。

let arr = [1,2,3];
let [a,b,c] = arr;

let [,,m] = arr;
// m = 3

let [d,...e] = arr;
// d = 1
// e = [2,3]

let [f,g,...h] = [1];
// f = 1
// g = undefined
// h = []

let obj = {
    name:"mmcai",
    age:28,
    long:165
}

let {name,age,long} = obj;
// name = "mmcai"
// age = 28
// long = 165

let {name:myName,age:myAge} = obj;
// myName = "mmcai"
// myAge = 28

let {name,...O} = obj;

// name = "mmcai"
// O = {
    age:28,
    long:165
}

特点

可以通过“模式匹配”的写法从数组或者对象中取出来值,直接赋值给某变量

不完全解构,等号左边的模式,只匹配右边的一部分

解构赋值可以指定默认值,如果从等号右边取出来的值是undefined,就会使用指定的默认值

数组的解构赋值要完全按照数组的秩序取值,对象不需要

如果解构赋值等号右边是布尔或者数值,会先转为对象

字符串也可以执行结构赋值,字符串结构赋值的时候,被当做类数组的对象

函数的参数也可以使用解构默认赋值,往往还会设置默认值,当参数没有的时候,直接使用默认值

以下三种解构赋值不能使用圆括号

变量生命语句

函数参数

赋值语句的模式

用途

交换变量的值

从函数返回多个值

函数参数的定义

提取JSON数据

函数参数的默认值

遍历Map结构

输入模块的指定方法

字符串扩展

字符的Unicode表示法

使用for...of循环遍历字符串,ES6字符串添加了遍历器接口Iterator

模板字符串,ES6自带模板解析引擎

模板字符串可以直接跟在函数名后面,该函数将被调用来处理这个模板字符串

模板字符串
ES6当中字符串使用反引号(`)标识,字符串当中嵌入变量可以通过${}来添加,比如:

const {name,age} = {
    name:"mmcai",
    age:28
}

const str = `我的名字是${name},我今年${age}岁了`;

其实模板字符串,就是ES6本身自带了一个模板引擎,来对特殊的内容进行解析,大概原理如下:

let compile = (desc){
    return desc.replace(/${([^}]+)}/g,(matched,key)=>{
        return eval(key);
    }
}

模板字符串使用`标识,使用${}包括嵌入的变量

模板字符串可以换行

当我们需要自定义模板引擎的时候,可以使用标签模板,通过函数来实现

字符串新增方法

includes——判断字符串中是否包含某字符串,返回布尔值

startsWith——字符串头部是否有某字符串,返回布尔值

endsWith——字符串结尾是否有某字符串,返回布尔值

repeat——返回一个重复了n次的新字符串。

trimStart——消除字符串头部空格

trimEnd——消除尾部空格

padStart——从头部补全字符串

padEnd——从尾部补全字符串

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105436.html

相关文章

  • js的输出方式以及js的基本数据类型

    摘要:的输出方式浏览器弹出警告弹框,它会阻塞代码执行弹框,它显示的内容会默认转换成字符串显示例如弹出一个可输入的弹框,还有两个按钮确认和取消点击确定,返回在输入框输入的内容,点击取消返回空确认弹框有两个按钮,确认和取消,点击确认返回为点击取消为, js的输出方式: 1、alert();浏览器弹出警告弹框,它会阻塞代码执行;alert弹框,它显示的内容会默认转换成字符串显示; 例如:alert...

    weizx 评论0 收藏0
  • 珠峰前端架构师培养计划

    摘要:公司的招聘要求都提到了至少熟悉其中一种前端框架,有前端工程化与模块化开发实践经验相关字眼。我们主要从端公众号移动端小程序三大平台进行前端的技术选型,并来说说选其技术的几大优势。技术的优势互联网前端大潮后,前端出现了大框架,分别是与。 1、技术选型的背景前端技术发展日新月异,互联网上出现的新型框架也比较多,如何让新招聘的人员...

    ccj659 评论0 收藏0
  • 前端相关大杂烩

    摘要:希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎,由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时,老司机们首先就会告诉你其实是个没有网络请求功能的库。 前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier than you think 原文作...

    fuyi501 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    pumpkin9 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<