一、let定义变量与const定义常量
-
在es5中是使用var这个关键词定义变量和常量的
-
但是var的缺点很明显，它存在变量提升问题，降低代码的可阅读性
-
var这个关键字它没有块级作用域，很容易造成变量污染
-
而let和const都是块级作用于，且在同一个代码块中不允许重复申明，也不存在变量提升问题
-
const定义的常量，无法被重新赋值，而且在定义常量的时候就必须赋值，否则会报错
//变量提升缺点、在变量定义前就可以访问
console.log(name) //var name = ‘’
//没有块级作用域、导致在循环体外可以访问
for (var i = 0; i < 10; i++) {
/** 你的逻辑 **/
}console.log(i) //10
//let无法重新定义
let name = ‘’
let name = ‘飞兔小哥哥’ //Identifier ‘name’ has already been declared//const无法重新定义
const PI = 3.1415926
PI = 3.14 //Identifier ‘PI’ has already been declared//const无法重新赋值
const PI = 3.1415926
PI = 3.14 //Assignment to constant variable.//let有块级作用域，在外部调用会报错，不会造成变量污染
for (let i = 0; i < 10; i++) {
/** 你的逻辑 **/
}console.log(i) //i is not defined
const name; // 只定义未赋值会报错，Missing initializer in const declaration
console.log(nickname); //不存在变量提升，Cannot access ‘nickname’ before initialization
const nickname = ‘’;const uname = ‘’;
uname = ‘飞兔小哥哥’; //不可以重新赋值，Assignment to constant variable.const obj = {
name: ‘’
}
obj.name = ‘飞兔小哥哥’;
console.dir(obj.name); //对象的值是可以被修改的
二、模版字符串
-
减少拼接，代码看起来更加的美观
const name = ‘’
//es5
console.log(‘我的名字是：’ + name + ‘；谢谢大家’);
//es6
console.log(我的名字是：${name}；谢谢大家);
三、数组的变量的解构赋值
-
ES6允许按照一定的模式 ，从数组和对象中提取值 ，对变量进行赋值 ，这被称作解构赋值
-
数组中的会自动解析到对应接收该值的变量中 ，数组的解构赋值要一一对应 ，否则就是undefined
let [name, age, hobby] = [’’, 26, ‘women’];
console.log(name, age, hobby); // 26 women
四、对象的变量的解构赋值
-
对象与数组不同的是 ，对象不需要一一对应 ，但是变量必须和属性同名，才能取到正确的值
let user = {
name: ‘’,
age: 26,
hobby: ‘women’
}const {name, age, hobby} = user
console.log(name, age, hobby); // 26 women
五、箭头函数
-
更简单的方式定义函数
//单个参数定义
//es5
function fn(x) {
return x + 2;
}
//es6
let fn = x => x+2;//多个参数定义
//es5
function fn(x, y) {
return x + y;
}
//es6
let fn = (x, y) => x+y;
六、展开运算符
-
功能一：将字符串变为数组
-
功能二：合并数组
//功能一
let name = ‘’;
const Arr = […name]
console.log(Arr) //[“a”, “u”, “t”, “o”, “f”, “e”, “l”, “i”, “x”]//功能二
let arr1 = [1,2,3]
let arr2 = [4,5,6]const arr = […arr1,…arr2]
console.log(arr); //[1, 2, 3, 4, 5, 6]
七、函数参数的扩展
-
默认参数 ，可以给函数体参数添加默认参数 ，这样即使不传也不会报错
-
不定参数 ，可以不传或者随意传多个参数也不会报错
//默认参数
function fn(a, b=10) {
return a+b;
}var a = fn(5);
console.log(a); //15var b = fn(2, 10);
console.log(b); //12//不定参数
function fn(…item) {
return item.length;
}var a = fn(’’);
console.log(a);//1var b = fn(26,’’);
console.log(b);//2
九、class类
-
增加了class类 ，使得js更加的面向对象编程
-
而且对象原型的写法更加清晰
-
注意事项
-
类的命名有两种 ，匿名类和命名类
-
类不能被重复申明
-
类定义不会被提升，必须在访问前定义，否则会报错
-
类中的方法不需要function关键字
-
方法间不能加分号
// 匿名类
let user = class {
constructor(name) {
this.name = name;
}
}// 命名类
let user = class user {
constructor(name) {
this.name = name;
}
}//属性的定义方式
//公共属性
class user{}
user.prototype.name = ‘’;//实例属性
class user {
name = ‘’;
constructor () {
console.log(this.name);
}
}class user {
//默认参数学习，且方法中间不能用逗号
constructor(name = ‘’, age = 26, hobby = ‘women’) {
this.name = name;
this.age = age;
this.hobby = hobby;
}
say() {
//使用es6语法模板字符串拼接
return我叫${this.name}，年龄${this.age};
}
like() {
//使用es6语法模板字符串拼接
return我爱好${this.hobby};
}
}let user1 = new user(); //默认参数
console.log(user1.say()); //我叫，年龄26
console.log(user1.like()); //我爱好womenlet user2 = new user(‘飞兔小哥哥’, 18, ‘阅读’); //自定义参数
console.log(user2.say()); //我叫飞兔小哥哥，年龄18
console.log(user2.like()); // 我爱好阅读
十、对象的扩展
-
扩展运算符是三个点（…）。用于取出参数对象的所有可遍历属性，拷贝到当前对象中
-
Object.assign就是进行对象的浅拷贝
var user = { name: ‘’, age: 26, hobby: ‘women’ }
//克隆一个新对象出来
var user1 = Object.assign({}, user);
console.log(user1);//第二种方式使用扩展运算符克隆
var use2 = { …user }
console.log(use2);//其他相同，名字不同
var use3 = { …user, name: ‘飞兔小哥哥’ }
console.log(use3);
十一、Set结构
-
ES6提供了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值
-
作用可以用于数组去重
var set = new Set([1, 2, 3]);
console.log(set); //Set {1, 2, 3}//获取元素个数
console.log(set.size); //3//添加元素
set.add(4);
console.log(set); //Set {1, 2, 3, 4}//不会添加重复的值
set.add(4);
console.log(set); //Set {1, 2, 3, 4}//删除元素
set.delete(4);
console.log(set); //Set {1, 2, 3}//查找元素
console.log(set.has(1)); //true//遍历元素
set.forEach(E => {
console.log(E); //1,2,3
});//数组去重
var arr = […new Set([1, 2, 3, 3, 4, 5])]
console.log(arr); //[1, 2, 3, 4, 5]
十二、Map结构
-
ES6提供了Map数据结构。它类似于对象，也是键值对的集合
-
但是它与对象的不同点在于`键`的范围不限于字符串，各种类型的值（包括对象）都可以当作键
var map = new Map();
console.log(map); //Map?{}//添加元素
map.set(‘name’, ‘’);
map.set(‘age’, 26);
console.log(map); //Map?{“name” => “”, “age” => 26}//元素个数
console.log(map.size); //2//获取元素
console.log(map.get(‘name’)); ////删除元素
map.delete(‘age’)
console.log(map);// Map?{“name” => “”}//查找元素
console.log(map.has(‘name’)); //true//遍历元素
map.forEach((E, K) => {
console.log(E + ‘=’ + K); //name=
});
十三、Promise
-
Promise是异步编程一种解决方案
-
解决回调地狱的噩梦
//es5
$.get("/get/user/id", function (res) {
$.get("/get/user/info", function () {
$.get("/get/user/role", function () {
//…
})
})
})//es6
new Promise((resolve, reject) => {
$.get("/get/user/id", res => {
resolve(res)
})
}).then(res => {
//用户基本信息
return new Promise(resolve => {
$.get("/get/user/info", res => {
resolve(res)
})
})
}).then(res => {
//用户角色
return new Promise(resolve => {
$.get("/get/user/role", res => {
resolve(res)
})
})
}).then(res => {
//…
})//错误解决
new Promise((resolve, reject) => {
$.ajax({
url: “/get/user/info”,
type: “GET”,
success: res => {
resolve(res);
},
error: res => {
reject(res)
}
})
}).then(resSuccess => {
//成功的回调
}, resError => {
//失败的回调
})
