ES全称EcmaScript,是脚本语言的规范,而平时经常编写的JavaScript,
是EcmaScript的一种实现,所以ES新特性其实指的就是JavaScript的新特性
1、语法简洁,功能丰富。
2、框架开发应用
3、前端开发职位要求
谁在维护ECMA-262
TC39是推进EcmaScript发展的委员会。其会员都是公司(其中主要是浏览器厂商,有苹果、谷歌、微软、因特尔等)。TC39定期召开会议，
会议由会员公司的代表与特邀专家出席。
为什么要学习ES6
ES6的版本变动内容最多,具有里程碑意义
ES6加入许多新的语法特性,编程实现更简单、高效
ES6是前端发展趋势,就业必备技能。
1、let的使用
let a,b,c,d
1、变量不能重复声明。(var可以重复声明)
2、块儿级作用域(let有这个概念、var没有)。 全局、函数、eval
3、不存在变量提升
console.log(song) var song = "hhaha" 不报错
console.log(song) let song = "hhaha" 报错
4、不影响作用域链
{
let school = "hahah"
function fn () {
console.log(school)
}
fn();
}
2、const的使用
//声明常量
1、一定要赋初始值
const A; 报错
2、一般常量使用大写(潜规则)
const a = 100;
3、常量的值不能修改
SCHOOL = 'ATGUIGU'
4、块儿级作用域
5、对应数组和对象的元素修改，不算做对常量的修改,不会报错
3、ES允许按照一定模式从数组和对象中提取值，对变量进行赋值。
这被称为解构赋值
1、数组的解构
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao,liu,zhao,song] = F4;
console.log(xiao)
2、对象的解构
const zhao = {
name: '赵本山',
age: '不详',
xiaopin: function() {
console.log("我可以")
}
}
let {name,age,xiaopin} = zhao;
console.log(name);
xiaopin()
4、ES6引入新的声明字符串的方式 [``] '' ""
1、声明
let str = `我也是一个字符串喔！`;
2、内容中可以直接出现换行符,以前用''必须用+进行拼接。
3、变量拼接
let lovest = '魏翔';
let out = `${lovest}是我的偶像`
console.log(out)
5、ES6允许在大括号里面,直接写入变量和函数,作为对象的方法。
//这样的书写根据简洁
let name = '哈哈哈';
let change = function() {
console.log('我们可以改变你!!');
}
const school = {
name,
change,
}
6、ES6允许使用[箭头] (=>) 定义函数
声明一个函数
let fn = function() {
}
let fn = (a,b) => {
return a + b;
}
fn(1，2)
1、this是静态的，this始终指向函数声明时所在作用域下的this的值
function getName() {
console.log(this.name)
}
let getName2 = () => {
console.log(this.name);
}
//设置window对象的name属性
window.name = '哈哈哈';
const school = {
name: '哈哈哈'
}
//直接调用
getName();
getName2();
//call方法调用
getName.call(school);
getName2.call(school);
2、不能作为构造函数实例化对象
let Person = (name, age) => {
this.name = name;
this.age = age;
}
let me = new Person('Xiao',30);
console.log(me);
3、不能使用arguments 变量
let fn = () => {
console.log(arguments);
}
fn(1,2,3)
4、箭头函数的简写
1、省略小括号,当形参有且只有一个的时候
let add = n => {
return n + n
}
console.log(add(9))
2、省略花括号,当代码体只有一条语句的时候,此时return必须省略。
而且语句的执行结果就是函数的返回值
let pow = (n) => n * n;
console.log(pow(8))
箭头函数适合与this无关的回调,定时器,数组的方法回调
箭头函数不适合与this有关的回调, 事件回调,对象的方法
7、ES6允许给函数参数赋值初始值
1、行参初始值 具有默认值的参数,一般位置要靠后(潜规则)
function add(a,c=10,b) {
return a + b + c
}
let result = add(1,2)
console.log(result);
2、与结构赋值结合
function connect({host="127.0.0.1",username,password,port}) {
console.log(host)
}
connect({
username: 'root',
password: 'root',
port: 3306
})
8、rest参数：ES6引入rest参数，用于获取函数的实参,用来代替arguments
注意：rest参数必须要放到参数最后
ES5获取实参的方式(获取的是一个对象)
function date(){
console.log(arguments)
}
date('柏芝','生活','小店')
rest参数(获取的是一个数组)可以使用filter、some、every、map、
function date(...args) {
console.log(args);
}
date('柏芝','生活','小店');
9、[...]扩展运算符能将[数组]转换为逗号分隔的[参数序列]
//声明一个数组
const tfboys = ['小明','小张','小二'];
//声明一个函数
function chunwan() {
console.log(arguments);
}
chunwan(...tfboys);
使用场景：
1、数组的合并
const kuaizi = ['小明','小儿','哈哈哈'];
const b = ['生活','小店']
const c = [...kuaizi,...b]
2、数组的克隆
const sanzhihua = ['a','b','c']
const D = [...sanzhihua];
3、将伪数组转为真正的数组
10、Symbol 基本使用;ES6引入了一种新的原始数据类型Symbol,表示独一无二的值,它是JavaScript语言的第七种数据类型，
是一种类似于字符串的数据类型
Symbol特点：1、Symbol的值是唯一的,用来解决命名冲突的问题。2、Symbol值不能与其他数据进行运算。3、Symbol定义的对象属性不能使用
for...in循环遍历,但是可以使用RellecLownKeys来获取对象的所以键名。
USONB you are so niubility
u undefined
s string symbol
o object
n null number
b boolean
11、迭代器是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,
就可以完成遍历操作。
1、ES6创造了一种新的遍历命令for...of循环,iterator接口主要供for...of消费
2、原生具备iterator接口的数据(可用for of遍历)
//声明一个数组
const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];
//使用for...of 遍历数组(键值) 使用for...in 遍历数组(键名)
for(let v in xiyou) {
console.log(v)
}
3、工作原理
a、创建一个指针对象,指向当前数据结构的起始位置。
b、第一次调用对象的next方法,指针自动指向数据结构的第一个成员
c、接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员
d、每调用next方法返回一个包含value和done属性的对象。
注意：需要自定义遍历数据的时候,要想到迭代器。
let iterator = xiyou[Symbol.iterator]();
//调用对象的next方法
console.log(iterator.next());
案例
const banji = {
name: "终极一班",
stus: [
'xiaoming',
'xiaohua',
'xiaotian',
'knight'
],
[Symbol.iterator]() {
//索引变量
let index = 0;
let _this = this;
return {
next: function() {
if(index < _this.stus.length) {
const result = {value: _this.stus[index],done:false}
//下标自增
index++;
//返回结果
return result;
}else {
return {value: undefined, done: true};
}
}
}
}
}
