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);