1.1 ECMAScript 6 简介
学习网址：http://es6.ruanyifeng.com/
ECMAScript是javascript标准
ES6就是ECMAScript的第6个版本
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
1.2?ECMAScript 和 JavaScript 的关系
ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现，在日常场合，这两个词是可以互换的。
JavaScript的创造者Netscape公司，将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准，后来ECMA发布标准文件的第一版（ECMA-262），规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript
该标准从一开始就是针对JavaScript语言制定的，之所以不叫JavaScript，有两个原因：一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标；二是想体现这门语言的制定者是ECMA，不是Netscape，有利于保证这门语言的开放性和中立性。
但事实上，JavaScript比ECMA-262的含义多得多，一个完整的JavaScript实现应该由以下三个部分组成：
1) ECMAScript：核心
2) DOM：文档对象模型
3) BOM：浏览器对象模型
2.1数组的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
以前，为变量赋值，只能直接指定值。
let a = 1;let b = 2;let c = 3;
ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3];
上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
let [foo, [[bar], baz]] = [1, [[2], 3]];
.
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"let [x, , y] = [1, 2, 3];
2.2字符串的解构赋值
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"b // "e"c // "l"d // "l"e // "o"
类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5
函数参数的解构赋值
?
2.3模板字符串 （重点）
传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!');
上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
?
2.4 数组扩展
var arr = [10,20,30]
var arr1 = [40,50,60];
console.log([...arr,...arr1]);
var arr2 = [23,235,2,3,52,35];
console.log(Math.max.apply(null,arr2));
console.log(Math.max(...arr2))
?
2.5字符串的新增方法
实例方法：includes(), startsWith(), endsWith()
实例方法：repeat()
实例方法：padStart()，padEnd()
实例方法：trimStart()，trimEnd()
?
?ES6知识点总结
?? ?变量声明关键字
?? ??? ?var
?? ??? ??? ?全局作用域和函数作用域
?? ??? ?let
?? ??? ??? ?局部作用域
?? ??? ??? ?不会变量提升
?? ??? ??? ?不能重复声明
?? ??? ?const
?? ??? ??? ?值类型不能修改
?? ??? ??? ?声明必须赋值
?? ??? ??? ?一般大写
?? ?解构
?? ??? ?数组
?? ??? ??? ?定义：把数组或对象解析为单独变量
?? ??? ??? ?1基本格式?
? ? var[a,b,c="defalt",...rest]=arr
?? ??? ??? ?2逗号代表下一位
?? ??? ??? ?3 ? ...rest
剩余的所有（只能放在最后）
?? ??? ??? ?4.可以有默认值
?? ??? ??? ?5 ?交换变量
[a,b]=[b,a]
?? ??? ?对象
?? ??? ??? ?var {name，age，say="nihao",rest}=obj
?? ??? ??? ?对象解构没有顺序
?? ?展开
?? ??? ?...arr
arr展开为单独变量
?? ?
字符串
? ? ? ? ?字符串模板
`${js变量}`
可以换行，可加特殊符号
?? ??? ?遍历
for ?of
?? ??? ?检测
includes（sub)是否包含
startsWith(sub)以开头
endsWidth(sub)以结尾
?? ??? ?去空白
trim（）去掉两端空白
trim Left（）去掉左边空白
trimRight（）去掉右边的空白
?? ??? ?重复
repeate(n)字符串重复n次
?? ??? ?填充
"22".padStart(4."0")
''0022"
.padEnd(次数，填充字符串）
数组高阶方法
?? ?forEach遍历
?? ??? ?arr.forEach(function(item,index,self){})
?? ??? ?item
当前遍历的元素
index
下标
self
当前数组
?? ?map映射
?? ??? ?arr.forEach(function(item,index,self){
//返回一个映射数组
})
?? ?filter过滤
?? ??? ?arr.filter(function(item,index,self){
//返回真，元素保留 ? 假 过滤掉
})
?? ?reduce累计
?? ??? ?arr.reduce(function(a，b){
//a是上一个返回的结果
})
?? ?some有一个
?? ??? ?有一个返回结果为true最总结果为true
?? ?every每一个
?? ??? ?每个返回结果为true最终结果为true
?? ?find
查找元素
?? ??? ?查找符和条件的元素
?? ?findIndex
查找下标
?? ??? ?查找符合元素的下标
?? ?sort(a,b)=>(a-b)
排序
??
函数
?? ?默认参数
?? ??? ?function fn(a=10,b=12){}
?? ?调用：扩展参
?? ??? ?fn(...arr)
?? ?定义：不定参
?? ??? ?function(...args){
}
对象
?? ?对象简写
?? ??? ?变量和值简写
?? ??? ?函数function简写
?? ??? ?var ?name="mumu"
var obj={
name,
say(){alert(this.name)}
}
?? ?对象动态属性
?? ??? ?{[nick+"msg"]:"你好"}
类
?? ?面向对象基本特点：封装；继承；多态；接口
?? ?单词
extends继承
constructor构造函数
super超类
static静态
?? ?定义类方法
?? ??? ?class Person{
?? ??? ??? ?constructor(name,age){
?? ??? ??? ??? ?this.name=name;
?? ??? ??? ??? ?this.age=age;
?? ??? ??? ?}
?? ??? ??? ?eat(){
?? ??? ??? ??? ?alert("我喜欢吃大米")
?? ??? ??? ?}
?? ??? ?}
?? ?实例化类
?? ??? ?var ?pl=new Person()
?? ?类中的this?
?? ??? ?Person类中的this指向、当前类的实例（pl）
?? ?继承
?? ??? ?class Teach extends Person{
? ? ? ? constructor(name,age,major) {
? ? ? ? ? ? ? ?super( );
? ? ? ? ? ? ? ?this.major=major;
?? ??? ??? ?}
}
模块module
?? ?导入
?? ??? ?import{name，fun,Square}from '.api.js'
?? ??? ?import ?Square from '.api.js'
import ?Sq ?from '.api.js'
?? ??? ?别名按时，*代表所有
impost ?*api ?from'./api.js'
api.name;api.fun()
?? ??? ?别名
import ?Square,{name，fun ?as fn }from '.api.js'
?? ?导出
?? ??? ?export {name，fun，Square}
导入多次
?? ??? ?export ? default ?Square；
导入一次
Set
?? ?定义：没有重复元素的集合（数组）
?? ?初始化：
var ?s1 =new ?Set()
var ?s2 =new ?Set{[1,2,5]}
?? ?添加：
sl.add()
?? ?删除：
sl.delete()
情况
sl.clear()
?? ?检测
sl.size
?? ?长度
sl.size
?? ?转数组
Array.from(sl)
[...sl]
?? ?数组去重
?? ??? ?arr=[...new ?Set(arr)]
|