1. let 关键字
特性:
let 关键字用来声明变量,使用 let 声明的变量有几个特点:
1. 不允许重复声明;
2. 块儿级作用域(局部变量);
3. 不存在变量提升;
4. 不影响作用域链;
应用场景: 推荐以后使用 let 来定义变量
2. Const 关键字
特性:
const 关键字用来声明常量,const 声明有以下特点:
1. 声明必须赋初始值;
2. 标识符一般为大写(习惯);
3. 不允许重复声明;
4. 值不允许修改;
5. 块儿级作用域(局部变量);
应用场景: 推荐声明对象类型使用 const,非对象类型声明选择 let;
3. 解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值;
1、数组的解构赋值 let arr = ["张三","李四","王五","赵六"]; let [a,b,c,d] = arr; 2、对象的解构赋值 let obj = { name : "张三", age : 22, sex : "男", } let {name,age,sex} = obj;
应用场景: 频繁使用对象方法、数组元素,就可以使用解构赋值形式;
4. 模板字符串
模板字符串是增强版的字符串,用反引号( ` )标识,特点:
字符串中可以出现换行符;
可以使用 ${xxx} 形式引用变量;
应用场景: 当遇到字符串与变量拼接的情况使用模板字符串;
5. 简化对象写法
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁;
let name = "张三"; let fun = function(){ console.log("哈喽"); } let obj = { name, fun }
6. 箭头函数
ES6 允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式。
箭头函数多用于匿名函数的定义;
箭头函数的注意点:
1. 如果形参只有一个,则小括号可以省略;
2. 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果;
3. 箭头函数 this 指向声明时所在作用域下 this 的值;
4. 箭头函数不能作为构造函数实例化;
5. 不能使用 arguments;
特性:
1. 箭头函数的 this 是静态的,始终指向函数声明时所在作用域下的 this 的值;
2. 不能作为构造实例化对象;
3. 不能使用 arguments 变量;
注意:
ES6 允许给函数参数赋值初始值
fun.call(obj) 箭头函数不能修改 this 指向
7. 拓展运算符
... 扩展运算符能将数组转换为逗号分隔的参数序列;
let arr = ['张三','李四','王五']; console.log(...arr);
8. Symbol
ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。
Symbol 的值是唯一的,用来解决命名冲突的问题;
let s2 = Symbol('a'); let s3 = Symbol('a'); console.log(s2==s3); // false
9. Promise 对象
Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数,用来封装异步操作
并可以获取其成功或失败的结果;
1. Promise 构造函数: new Promise (function(resolve,reject) { }); 2. Promise.prototype.then 方法; 3. Promise.prototype.catch 方法;
语法格式:
let num = 2; new Promise(function(resolve,reject){ setTimeout(function(){ if(num == 1){ resolve("成功"); }else{ reject("失败"); } },2000) }).then(function(res){ console.log(res); }).catch(function(err){ console.log(err); })
Promise 封装:
let ajax = (obj) => { if(obj.type == undefined || obj.type == ''){ obj.type = "GET" } if(!obj.data == undefined || !obj.data == ''){ let statu = 1; obj.url += '?' for (let k in obj.data){ if(statu > 1){ obj.url += "&" + k + "=" + obj.data[k]; }else{ obj.url += k + "=" + obj.data[k]; statu = 2; } } } return new Promise(function(resolve, reject) { let xml = new XMLHttpRequest(); xml.open(obj.type,obj.url); xml.send(); xml.onreadystatechange = function() { if (xml.readyState == 4) { if (xml.status == 200) { resolve(xml.response); } else { reject(xml.status); } } } }) }
封装调用:
ajax({ type:"get", url:"http://www.wangruolin.top/api/Index/index", data:{ id: 10 } }).then(function(res) { console.log(JSON.parse(res)); }).catch(function(err) { console.log(err); })
10. Map 集合
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类
型的值(包括对象)都可以当作键。
Map 的属性和方法:
1. size 返回 Map 的元素个数; map.size
2. set 增加一个新元素,返回当前 Map; map.set(键,值)
3. get 返回键名对象的键值; map.get(键)
4. has 检测 Map 中是否包含某个元素,返回 boolean 值; map.has(键)
5. clear 清空集合,返回 undefined;map.clear()
11. Set 集合
ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的。
Set 的属性和方法:
1. size 返回集合的元素个数; set.size
2. add 增加一个新元素,返回当前集合; set.add(值)
3. delete 删除元素,返回 boolean 值; set.delete(值)
4. has 检测集合中是否包含某个元素,返回 boolean 值; set.has(值)
5. clear 清空集合,返回 undefined; set.clear()
12. Class 类
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过 class 关键字,
可以定义类。基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新
的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已;
知识点:
1. class 声明类;
2. constructor 定义构造函数初始化;
3. extends 继承父类;
4. super 调用父级构造方法;
5. static 定义静态方法和属性;
6. 父类方法可以重写;(子类中定义同名的方法会覆盖掉父类里的方法)
定义类:
class Parent { constructor(name, sex) { this.name = name; this.sex = sex; } hi() { console.log("哈喽,你好呀!"); } static age = 18; } let Hello = new Parent("张三", "男"); Hello.hi(); console.log(Hello); console.log(Hello.age); console.log(Parent.age);
继承类 :
class Child extends Parent{ constructor(name, sex, height) { super(name,sex); this.height = height; } run(){ console.log("我跑的超快"); } } let zhi = new Child('李四','女',180); console.log(zhi); zhi.hi();
Class 中 getter 获取和 setter 设置:
class Cla { get num (){ console.log("原价"); return 100; } set num (val){ console.log('现价'); return val; } } let shangpin = new Cla(); console.log(shangpin.num); console.log(shangpin.num = 999);