ES6(ECMAScript 6),也被称为ES2015,是JavaScript的一种版本,引入了许多新的语法和功能,使得JavaScript更加强大和易用。下面是一些ES6的新语法和特性:
块级作用域(Block Scope):引入了let和const关键字,可以在块级作用域中声明变量和常量,避免了变量提升和全局污染的问题。
箭头函数(Arrow Functions):使用箭头函数可以更简洁地定义函数,并且自动绑定了上下文的this值。
解构赋值(Destructuring Assignment):可以通过解构赋值从数组或对象中提取值,并赋给变量,简化了变量的声明和赋值过程。
模板字符串(Template Strings):使用反引号(`)包裹字符串,可以在字符串中插入变量或表达式,更方便地拼接字符串。
默认参数(Default Parameters):在函数定义时可以为参数设置默认值,简化了函数调用时的参数传递。
扩展运算符(Spread Operator):使用三个点(...)可以将数组或对象展开,方便地进行数组合并、复制和对象属性的拷贝。
类(Classes):引入了类的概念,可以使用class关键字定义类,并通过extends关键字实现继承。
模块化(Modules):使用import和export关键字可以方便地进行模块的导入和导出,实现了更好的代码组织和复用。
这些只是ES6中的一部分新语法和特性,ES6还引入了更多的功能,如箭头函数、Promise、迭代器、生成器等。这些新语法和特性使得JavaScript更加现代化和强大,提升了开发效率和代码质量。希望这些信息对你有所帮助!
ES6将弱类型的js提升为中弱类型。我们也一定要学习ES6.
ES6新增知识点:
1、
定义变量
之前定义变量一直用的是var,但是es6中可以使用let和const
但是let有几个特点:
-不允许声明变量
不存在预解析
在大括号中声明的变量只能在大括号中使用
const的特点:
不允许重复声明
不允许重新赋值(可以给对象中新增属性)
声明的时候必须赋值
不存在预解析
在大括号中声明的变量只能在大括号中使用,如if、for的大括号中声明的变量
2、
箭头函数:箭头函数是用来简写函数的
注意:如果只有一个小形参时,小括号可以省略
注意:如果代码块中只有一行代码,箭头函数可以省略大括号,并将这行代码作为返回值
let fn = ()=>{console.log(111);}
1
1
箭头函数使用注意事项:
(1) 箭头函数中的this比较混轮,所以在函数和方法中使用到this的时候,就不要用箭头函数
(2) 箭头函数中没有arguments
函数默认值:
es6中可以定义默认值:
function add(a,b=2){
return a + b;
}
console.log(add(5));
1
2
3
4
1
2
3
4
解构赋值:
解析一个数据结构并赋值,可以快速的从对象或数组中取出需要的内容,对象使用大括号,数组使用中括号
解构对象:
let obj = {
name:"张三",
age:12,
sex:"男",
}
let {name} = obj;
/*
表示从obj中获取name属性,并赋值给声明的name变量
*/
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
注意:obj必须是一个对象。obj中必须有name属性
3、
this 关键字
每个函数内容都有一个关键字叫做this。不同的情况下,this代表的内容也是不一样的。
(1)普通函数中的this代表window对象
function fn(){
console.log(this);
}
fn(); // window
1
2
3
4
1
2
3
4
(2)定时器中的this代表window
var obj = {
eat:function(){
setTimeout(function(){
console.log(this);
});
}
};
obj.eat(); // window
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
(3)自调用函数中的this代表window
document.querySelector("button").onclick=function(){
(function(){
console.log(this);
})()
}
// window
1
2
3
4
5
6
1
2
3
4
5
6
(4)对象方法中的this代表调用这个方法的对象
document.querySelector("button").onclick=function(){
(function(){
console.log(this);
})()
}
// window
1
2
3
4
5
6
1
2
3
4
5
6
(5)事件函数中的this代表当前事件的事件源
document.querySelector("button").onclick=function(){
console.log(this);
}
// <button>按钮</button>
1
2
3
4
1
2
3
4
(6)箭头函数的this在定义箭头函数的时候就知道了,代表上一行代码的this
document.querySelector("button").onclick=function(){
// 这里的this代表button按钮,所以箭头函数的this也是button按钮
setTimeout(()=>{console.log(this);});
}
// <button>按钮</button>
1
2
3
4
5
1
2
3
4
5
4、 上下文调用模式
也叫作方法借用模式。任何函数都能调用call、apply、bind这三个方法。这三个方法主要用于改变函数中this的指向。
call:call方法不仅可以用来调用函数,还可以指定调用函数的this指向