1. 箭头函数
const func = ()=>{}
箭头函数的this继承当前上下文的this
箭头函数和普通函数的区别
1. 箭头函数的语法比普通函数更加简洁,省去了function关键字
2. 箭头函数都是匿名函数,普通函数既可以是匿名也可以是具名
3. 箭头函数不能用于构造函数,不能new
4. 箭头函数的this指向其上下文的this,call和apply也改变不了
5. 箭头函数没有arguments,但可以用扩展运算符代替
2. 模板字符串
允许在字符串中嵌入表达式,并支持多行文本,不需要拼接,使用反引号``表示字符串
const name = "tom"
const age = 20
const word = `${name}今年${age}岁`
3. 解构赋值
可以将对象或数组的属性取出赋给其他变量。
let obj = {
id:1,
name:'tom',
age:20
}
const {id,name,age} = obj
// 也可以取别名
const {id:count,name:user} = obj
let arr = ['apple','good','happy']
let [a,b,c] = arr //a='apple',b='good',c='happy'
let [n,,m] = arr //如果不想要某个值,可以省略,n='apple',m='happy'
console.log(a,b,c);
//还可以进行交换数据,就可以不用定义第三个变量用来进行交换了
[a,b] = [b,a] //a='good',b='apple'
4. let,const
let和const是es6新增的声明关键字
与var的区别:
var能够变量提升,而let和const不行
var定义的变量名可以重复,let和const定义的变量名不能被重复
let和var声明的变量可以被修改,const定义后成为常量,不能被修改
let和const存在块级作用域
5. 类和继承
通过class关键字定义类
类的继承必须通过关键字extends实现
constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法
一个类中必须有constructor方法
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
say() {
console.log(this.name + ":" + this.age);
}
}
class Student extends Person {
constructor(name, age, sex) {
super(name, age);
this.sex = sex;
}
}
var student = new Student("tom", 18, "male");
student.name; //'tom'
student.sex; //'male'
student.say(); //'tom:12'
6. Symbol
symbol是es6引入的新的基本数据类型,可以创建出一个独一无二的值,不可以与其他数据类型进行运算
js的数据类型有:
基本数据类型:String、Number、Boolean、null、undefined、Symbol
引用数据类型:Array、Function、Object
7. Map和Set
Map
Map对象用于保存键值对
Map的属性有size,返回键值对的数量
Map的常用方法有:
get()返回指定键关联的值,如果没有则返回undefined
set()存入键值对
has()查找map对象是否存在该健,如果存在返回true,反之返回false
clear()删除所有键值对
delete()删除指定键的键值对,返回布尔值
keys()返回map对象中所有元素的键
values()返回map对象中所有元素的值
let map = new Map()
// 存入键值对
map.set("id",1)
map.set("name","tom")
map.set("age",18)
console.log(map); //Map(3) {'id' => 1, 'name' => 'tom', 'age' => 18}
map.sise //3
map.get("name") //tom
map.get("sex") //undefined
map.has("id") //true
map.has("sex") //false
map.keys() //MapIterator {'id', 'name', 'age'}
map.values() //MapIterator {1, 'tom', 18}
map.delete("age") //true map=>Map(2) {'id' => 1, 'name' => 'tom'}
map.clear() //Map(0) {size: 0}
Set
Set和Map类似,但存储的不是键值对。
类似数组,但Set里的元素是不重复的,利用这一特性,可以对数组进行去重操作
set的常用属性为size,返回值的数量
常用的方法有:
add()插入值
has()查找set对象中是否存在该值,存在则返回true,反之返回false
clear()清空元素
delete()删除某一个元素,返回布尔值
keys()和values()返回所有元素的值
const arr = [1,1,2,2,3,4,5]
let set = new Set(arr)
//arr=>Set(5) {1, 2, 3, 4, 5}
set.size //5
set.add(6) //Set(6) {1, 2, 3, 4, 5, 6}
//如果set中已存在,则不会插入进去
set.has(4) //true
set.has(7) //false
set.keys() //SetIterator {1, 2, 3, 4, 5, 6}
set.values() //SetIterator {1, 2, 3, 4, 5, 6}
set.delete(3) //true set=>Set(5) {1, 2, 4, 5, 6}
set.clear() //Set(0) {size: 0}
8.数组新方法
1. Array.from()
将可迭代对象/类数组转换为新的数组
该方法可以有三个参数:
第一个为可迭代对象/类数组
第二个为对该数组操作的可回调函数(可省略)
第三个为this指向(可省略)
类数组就是
有索引属性和length属性的对象
const str = "abc"
let arr = Array.from(str) //['a', 'b', 'c']
const likearr = {
0:'name',
1:'age',
length:2
}
let arr1 = Array.from(likearr) //['name', 'age']
2. includes()
查看数组中是否存在这个元素,返回布尔值
const arr = [1,3,5,6,7]
arr.includes(3) //true
arr.includes(4) //false
3. map(),filter()
map返回一个由原数组中的每个元素调用的一个指定方法后的返回值组成的新数组
filter是对原数组进行过滤筛选,产生的一个新的数组对象
两者都不会改变原数组
let arr = [1,2,3,20,12,4]
const a2 = arr.map(item=>item*2) //[ 2, 4, 6, 40, 24, 8 ]
const a3 = arr.filter(item=>item>10) //[ 20, 12 ]
4.forEach(),find()
forEach()遍历数组,没有返回值
find()查找数组中满足条件的第一个元素,并返回该元素
const arr = [1,3,5,6]
const arr1 = arr.find(item=>{
return item>3
}) //5
5. some(),every()
some查询数组中有符合条件的就返回true
every查询数组中所有符合条件的才会返回true
some一真即真,every一假即假
const arr = [1,3,5,6]
const some = arr.some(item=>item>3) //true
const every = arr.every(item=>item>3) //false
const some1 = arr.some(item=>item>9) //false
const every1 = arr.every(item=>item>0) //true
9. 对象的新方法
1. Object.is()
判断两个值是否为同一个值,返回布尔值
地址相同的时候返回true,直接赋值是共用一个地址所以相同
const obj1 = {}
const obj2 = {}
console.log(Object.is(obj1,obj2)); //false
const obj3 = obj1
console.log(Object.is(obj3,obj1)); //true
2. Object.assign()
将后面的对象合并到前面的对象,如果属性重复将直接覆盖
const obj1 = {a:1,b:2}
const obj2 = {a:2,c:3}
const obj3 = {a:3,d:4}
console.log(Object.assign(obj1,obj2,obj3)); //{ a: 3, b: 2, c: 3, d: 4 }
3. Object.keys(),Object.values(),Object.entries()
Object.keys()返回对象所有属性
Object.values()返回对象所有属性值
Object.entries()返回键值对的数组
10. 扩展运算符
可以拷贝数组或对象,也可以合并数组或对象
const arr = [1,2,3,4,5,6]
const arr2 = [3,4,5,6,7]
const arr3 = [...arr,...arr2]
console.log(arr3); //[1,2,3,4,5,6,3,4,5,6,7]
const obj = {
id:1,
name:'tom',
age:18
}
const obj2 = obj
console.log(obj2===obj) //true
const obj3 = {...obj}
console.log(obj3===obj) //false
11. Promise和Proxy
Promise是异步编程的一种解决办法,能够很好的解决回调地狱的问题
Proxy用于创建一个对象的代理,从而实现基本操作的拦截和自定义,vue3便是使用Proxy进行数据拦截的
12. 模块化
通过import xx form xx导入模块
export或export default导出模块
优点:防止命名冲突,复用性强
import和export语句必须在其他语句和函数的外面
export和export default的区别:
export default向外暴露的成员,可以使用任意变量来接收,并且只允许向外暴露一次
export向外暴露的成员,只能使用{}的形式来接收,并且可以向外暴露多个成员