网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
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
![img](https://img-blog.csdnimg.cn/img_convert/45c67a5119564f3fe76cde7cf1ca49b0.png)
![img](https://img-blog.csdnimg.cn/img_convert/2a6dd3fc98c8c0f5644ddb6bb0463c6e.png)
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上C C++开发知识点,真正体系化!**
**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**
**[如果你需要这些资料,可以戳这里获取](https://bbs.csdn.net/topics/618668825)**
ap.has('name')); //true
[外链图片转存中...(img-VyYRlXfW-1715677654778)]
[外链图片转存中...(img-m3LjOBtM-1715677654779)]
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上C C++开发知识点,真正体系化!**
**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**
**[如果你需要这些资料,可以戳这里获取](https://bbs.csdn.net/topics/618668825)**