console.dir(obj.name); //对象的值是可以被修改的
#### 二、模版字符串
* 减少拼接，代码看起来更加的美观
const name = 'autofelix'
//es5
console.log('我的名字是：' + name + '；谢谢大家');
//es6
console.log(我的名字是：${name}；谢谢大家);
#### 三、数组的变量的解构赋值
* ES6允许按照一定的模式 ，从数组和对象中提取值 ，对变量进行赋值 ，这被称作解构赋值
* 数组中的会自动解析到对应接收该值的变量中 ，数组的解构赋值要一一对应 ，否则就是undefined
let [name, age, hobby] = ['autofelix', 26, 'women']; console.log(name, age, hobby); //autofelix 26 women
#### 四、对象的变量的解构赋值
* 对象与数组不同的是 ，对象不需要一一对应 ，但是变量必须和属性同名，才能取到正确的值
let user = { name: 'autofelix', age: 26, hobby: 'women' }
const {name, age, hobby} = user console.log(name, age, hobby); //autofelix 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 = 'autofelix'; 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); //15
var b = fn(2, 10); console.log(b); //12
//不定参数 function fn(...item) { return item.length; }
var a = fn('autofelix'); console.log(a);//1
var b = fn(26,'autofelix'); 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 = 'autofelix';
//实例属性 class user { name = 'autofelix'; constructor () { console.log(this.name); } }
class user {
//默认参数学习，且方法中间不能用逗号
constructor(name = 'autofelix', 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()); //我叫autofelix，年龄26 console.log(user1.like()); //我爱好women
let user2 = new user('飞兔小哥哥', 18, '阅读'); //自定义参数 console.log(user2.say()); //我叫飞兔小哥哥，年龄18 console.log(user2.like()); // 我爱好阅读
#### 九、对象的扩展
* 扩展运算符是三个点（...）。用于取出参数对象的所有可遍历属性，拷贝到当前对象中
* Object.assign 就是进行对象的浅拷贝
var user = { name: 'autofelix', 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', 'autofelix'); map.set('age', 26); console.log(map); //Map {"name" => "autofelix", "age" => 26}
//元素个数 console.log(map.size); //2
//获取元素 console.log(map.get('name')); //autofelix
//删除元素 map.delete('age') console.log(map);// Map {"name" => "autofelix"}
//查找元素 console.log(map.has('name')); //true
//遍历元素 map.forEach((E, K) => { console.log(E + '=' + K); //name=autofelix });
#### 十二、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 => {
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
