目录
1.字符串的扩展
1.1 模板字符串
模板字符串使用反引号(` `)来代替普通字符串的单引号和双引号。模板字符串中包含特定语法(${})的占位符。占位符中的表达式和周围的文本组成了模板字符串。
var name = "小王"
var age = 18
console.log(`你好，我是${name},今年${age}岁。`)
//输出结果：你好，我是小王,今年18岁。1.2 新增的字符串操作方法
ES6中新增的常用字符串操作方法
| 方法 | 描述 |
| includes(searchString：string)：boolean | 返回布尔值，表示是否找到了参数字符串 |
| starts With(searchString：string)：boolean | 返回布尔值，表示参数字符串是否在原字符串头部 |
| endsWith(searchString：string)：boolean | 返回布尔值，表示参数字符串是否在原字符串尾部 |
| repeat(count:number)：string | 返回一个新字符串,表示将原字符串重复n次 |
| padStart(length:number,string:string)：string | 用于头部补全 |
| padEndlength:number,string:string)：string | 用于尾部补全 |
| trimStart()：string | 消除字符串头部的空格 |
| trimEnd()：string | 消除字符串尾部的空格 |
2.数组的扩展
2.1 扩展运算符
扩展运算符使用三个点(...)表示，可以将一个数组转换为用逗号分隔的序列。类似java可变长参数
...数组2.2 Array.from()方法
将类数组转化为真正的数组。(只要带有length属性的数据都可以使用)
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var lis = document.getElementsByTagName("li")
var arr = Array.from(lis)
console.log(Array.isArray(arr))
</script>
//输出结果：ture
2.3 数组遍历方法
ES6新增遍历数组方法
| 方法 | 描述 |
| keys()：iterator | 对键名的遍历 |
| values()：iterator | 对键值的遍历 |
| entries()：iterator | 对键值对的遍历 |
for(let index of ['张三','李四'].keys()){
console.log(index);
}
//0 1
for(let elem of ['张三','李四'].values()){
console.log(index);
}
//张三 李四
for(let [index,elem] of ['张三','李四'].entries()){
console.log(index,index);
}
//0 张三 1 李四3.对象的扩展
3.1 属性的简洁表示法
ES6允许对象的属性直接写变量，这时，属性名为变量名，属性值为变量的值。
let name='小明';
let birth='2001/12/23';
//普通写法
const Person={
name：name;
birth：birth;
};
//简洁写法
const Person1={
name,
birth
};3.2 对象新增方法
1）Object.is()方法
Object.is()方法用来比较两个值是否严格相等，与ES5中严格相等运算符(===)的行为基本一致。
2）Object.assign()方法
Object.assign()方法用于对象的合并，将源对象(source)的所有可枚举属性复制到目标对象(target)。
Object.assign(target,source_1,...);Object.assign()方法第一个参数是目标对象，后面的参数是源对象，可以包含多个源对象。
const target={a：1};
const source1={b：2};
const source2={c：3};
Object.assign(target,source1,source2);
console.log(target); //{a:1,b:2,c:3}3.3 对象遍历方法
ES6对象遍历方法
| 方法 | 描述 |
| keys()：iterator | 返回参数对象自身的所有可遍历属性的键名 |
| values()：iterator | 返回参数对象自身的所有可遍历属性的键值 |
| entries()：iterator | 返回参数对象自身的所有可遍历属性的键值对数组 |
let obj={foo:"bar",baz:42};
console.log(Object.keys(obj)); //["foo","baz"]
console.log(Object.values(obj)); //["bar",42]
console.log(Object.entries(obj)); //[["foo","bar"],["bar",42]]4.Set对象
Set对象的数据结构类似于数组，但成员的值都是唯一的，没有重复的值。
Set对象的常用属性和方法
| 分类 | 名称 | 描述 |
| 属性 | Set.prototype.size | 返回Set实例的成员总数 |
| 操作方法 | Set.prototype.add(value) | 添加某个值，返回Set结构本身 |
| 操作方法 | Set.prototype.delete(value) | 删除某个值，返回一个布尔值，表示删除是否成功 |
| 操作方法 | Set.prototype.has(value) | 返回一个布尔值，表示值是否为Set成员 |
| 操作方法 | Set.prototype.clear() | 清除所有成员，没有返回值 |
| 遍历方法 | Set.prototype.keys() | 返回键名的遍历器 |
| 遍历方法 | Set.prototype.values() | 返回键值的遍历器 |
| 遍历方法 | Set.prototype.entries() | 返回键值对的遍历器 |
| 遍历方法 | Set.prototype.forEach() | 使用回调函数遍历每个成员 |
let a=new Set([1,2,3])
a.add(4) //增加
alert(Array.from(a))
a.delete(2) //删除
alert(Array.from(a))
a.delete(4)
a.add(5) //修改先删除后增加
alert(Array.from(a))
//遍历Set
//获取所有的键
for (let i of a.keys()) {
document.write(i)
}
document.write("</br>")
//获取所有的值
for (let i of a.values()) {
document.write(i)
}
document.write("</br>")
//键值对 javascript没有键值对，值和值凑对
for (let i of a.entries()) {
document.write(i)
}
document.write("</br>")5.Map对象
Map对象可以接收一个数组作为参数，该数组的成员是一个表示键值对的数组。
Map对象的常用属性和方法
| 分类 | 名称 | 描述 |
| 属性 | Map.rototype.size | 返回Map对象的成员总数 |
| 操作方法 | Map.prototype.set(key,value) | 设置键名key对应的键值为value，返回整个Map结构 |
| 操作方法 | Map.prototype.get(key) | 读取key对应键的值，如果找不到key，返回undefined |
| 操作方法 | Map.prototype.has(key) | 返回一个布尔值，表示某个键是否在当前Map对象中 |
| 操作方法 | Map.prototype.delete(key) | 删除某个键，返回true。如果失败，返回false |
| 操作方法 | Map.prototype.clear() | 清除所有成员，没有返回值 |
| 遍历方法 | Map.prototype.keys() | 返回键名的遍历器 |
| 遍历方法 | Map.prototype.values() | 返回键值的遍历器 |
| 遍历方法 | Map.prototype.entries() | 返回所有成员的遍历器 |
let a=new Map([[1,'张三'],[2,'李四'],[3,'王五']]);
//键值同生共死
a.set(4,"李六") //增加
alert(Array.from(a))
a.delete(4) //删除
alert(Array.from(a))
//修改就是直接覆盖
a.set(3,'五王')
alert(Array.from(a))
//Map遍历方法
//遍历所有的键
for (let key of a.keys()) {
document.write(key)
}
document.write("</br>")
//遍历所有的值
for (let value of a.values()) {
document.write(value)
}
document.write("</br>")
//遍历所有的键值对
for (let item of a.entries()) {
document.write(item)
}
document.write("</br>")
6.Module语法
6.1 export
一个模块就是一个独立的文件，文件内部的所有变量外部无法获取。如果希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。export命令除了输出变量还可以输出函数。
//profile.js
//第一种写法
export var firstName='Michael';
export var lastName='Jackson';
export var year=1958;
//第二中写法
var firstName='Michael';
var lastName='Jackson';
var year=1958;
export{firstName,lastName,year};
//导出单个函数
export function multiply(x,y){
return x*y;
}
//导出多个函数
function v1(){}
function v2(){}
export{v1,v2};
//导出的函数可以取别名 as6.2 import命令
使用export命令定义模块的对外接口以后，其他JS文件就可以使用import命令加载这个模块。
import命令用于加载其他文件，并从中输出变量。使用import命令接收一对大括号扩起的内容，里面指定要从其他模块导入的变量名(或者函数名)，其中的变量名必须与被导入模块(profile.js)对外接口的名称相同。
//main.js
import{firstName,lastName,year} from './profile.js';
function setName(element){
element.textContent=firstName+''+lastName;
}
import后面的from指定模块文件的位置，可以使用相对路径，也可以使用绝对路径，.js扩展名可以省略。
6.3 export default命令
为了给用户提供方便，不用阅读文档就能加载模块，需要用到export default命令，为模块指定默认输出。
//export-default.js
export default function(){
console.log('foo');
}
//import-default.js
import customName from './export-default';
customName(); //'foo'示例：
//export.js
function aaa() {
alert(111)
}
function bbb() {
alert(222)
}
export {aaa as aa,bbb as bb}//import.js
import{aa,bb} from './index.js'
aa()
bb()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
<script type="module" src="js/import.js"></script>
</head>
<body>
</body>
<script>
</script>
</html>本章总结
- ES6扩展了ES5中的内置对象，如字符串丶数组和对象
- ES6中提供了新的数据结构：Set对象和Map对象
- ES6中的模块导入丶导出命令：export丶import和export default
练习小作业
- 输出京东快报文本内容
- 使用ES6实现对象的去重合并
- 输出圆的面积和周长
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
