ES6 简介
仅做备忘录,如有错误,请指出,谢谢
块级作用域
let声明
使用let 声明 ,语法和var一样,就有块级作用域,在块外门无法访问
使用let声明,没有声明提前
同一个块级里,let不能重复声明
<script> for(let i = 0; i<5 ; i++){ console.log(i); } console.log(i);//出错 </script>
const声明
const是声明常量的,其他和let一样,常量声明的同时必须赋值
const的命名全部大写,单词与单词之间用下划线连接
<script type="text/javascript"> var a = 20; if (true) { const b = 20; b = 30; //错误,常量不能重新赋值 const c; //错误,常量声明的同时必须赋值 } </script>
函数的新增特性
带默认参数的函数
在非严格模式下,arguments就是函数的形参,形参变化,它里面的值也会变化,如果不传入参数,则arguments里没有数值
在严格模式下,arguments就是形参的初始值,不随形参变化而变化,默认值不会给arguments参数
ES6会自动使用严格模式
//这个函数如果只传入第一个参数,后面两个不传入,则会使用默认值,如果后面两个也传入了参数,则不会使用默认值 function makeRequest(url, timeout = 2000, callback = function() {}) { // 其余代码 }
剩余参数
语法 : …变量
- 剩余参数最多只能有一个,而且只能在参数列表最后面
<script type="text/javascript">
function foo(a, ...b) {
console.log(a);
console.log(b instanceof Array); //true .多余的参数都被放入了b中,b其实就是一个数组
}
foo(2, 3, 4, 6);
</script>
扩展运算符
语法: …
剩余参数是用在声明的时候的参数列表中,而且必须在参数列表的后面
扩展运算符是用在函数调用的时候作为实参来传递的,没有限制位置
<script type="text/javascript"> let values = [25, 50, 75, 100] console.log(Math.max(...values)); //使用扩展运算符,相当于拆解了数组 console.log(Math.max(...values, 200)); //也可以使用扩展运算符和参数的混用,则这个时候就有5个数进行比较 </script>
箭头函数
箭头函数语法
(形参)=>{ //代码 }
箭头函数可以赋值给变量,也可以像匿名函数一样直接作为参数传递
1.如果只有一行代码,则大括号可以省略,而且返回了这行代码计算后的值 2.如果形参只有一个,则小括号也可以省略 3.箭头函数没有自己的 this,它的this其实就是它的外部函数的this 4.箭头函数不适合作为对象方法,比较适合作为回调函数 5.箭头函数的this和调用者没有关系,只和声明的地方有关系
对象字面量的语法扩展
简写属性初始化
<script type="text/javascript">
function createPerson(name, age) {
//返回一个对象:属性名和参数名相同
return {
name, //当对象属性名和本地变量名相同时,可以省略冒号和值
age
}
}
console.log(createPerson("lisi", 30)); // {name:"lisi",
age:30}
</script>
简写方法
<script type="text/javascript">
var person = {
name:'李四',
sayHell() {//省略了冒号和function
console.log("我的名字是" + this.name);
}
}
person.sayHell()
</script>
在字面量中动态计算属性名
<script type="text/javascript">
var attName = 'name';
var p = {
[attName] : '李四', // 引用了变量attName,相当于添加了一个属性名为name的属性
age : 20
}
console.log(p[attName]) // 李四
</script>
新增的方法
Object.is()
javascript
Object.is(0,-0) false Object.is(NaN,NaN) true 除了这两个,其余和===一样
Object.assign()
var obj = {
name : "lizi",
age: 20,
foo : [2,5]
};
var p = {};
Object.assign(p,obj);//把obj中的属性和方法复制到p中,如果属性值是对象,则复制的为对象地址值
- assign方法可以接受任意多的提供者,后面提供的同名属性会覆盖前面的属性
字符串功能的增值
查找子字符串
var s = "ewfsfsffaewfewa";
var s1 = s.includes("fs");//fs在s中任意位置为true,否则为false
var s2 = s.startsWith("w");//w在s中开始位置为true,否则为false
var s3 = s.endsWith("w");//fs在s中末尾位置为true,否则为false
console.log(s1,s2,s3)
repeat方法
var s = "ewfsfsffaewfewa";
var s4 = s.repeat(3);//字符串s重复的3次
console.log(s4);
字符串模板
基本语法
使用一对反引号“来表示模板字面量
解构
对象解构
let node = {
type: "Identifier",
name: "foo"
};
//这里就相当于声明了两个变量 type = node.type; name:node.name
let { type, name } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
解构赋值表达式
<script type="text/javascript">
let node = {
type: "Identifier",
name: "foo"
},
type = "Literal",
name = 5;
//此处必须要在圆括号中才能使用解构表达式
({type, name} = node);
console.log(type); // "Identifier"
console.log(name); // "foo""
</script>
赋值给不同的变量名
<script type="text/javascript">
let node = {
type: "Identifier",
name: "foo"
};
// localType才是要定义的新的变量 type是node属性
//也可以使用默认值
let {type: localType, name: localName = "aaa"} = node;
console.log(localType); // "Identifier"
console.log(localName); // "foo"
</script>
数组解构
基本语法
let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
如果只想取数组中的某一项,可以不用命名
let colors = [ "red", "green", "blue" ];
//只取数组中第三项
let [ , , thirdColor ] = colors;
console.log(thirdColor); // "blue"
解构表达式
和对象结构不同,不需要放入圆括号中
let colors = [ "red", "green", "blue" ],
firstColor = "black",
secondColor = "purple";
[ firstColor, secondColor ] = colors; //可以不用加括号
??
console.log(firstColor); // "red"
console.log(secondColor); // "green"
<script>
//两个数进行交换
//第一种
var a = 10,b=20;
/*var temp = a;
a = b;
b = temp;
console.log(a,b);*/
//第二种
/*a = a + b ;
b = a - b;
a = a - b;
console.log(a,b)*/
//第三种
/*a = a ^ b;
b = a ^ b;
a = a ^ b ;
console.log(a,b)*/
//第四种
/*[a,b] = [b,a];
console.log(a,b)*/
//第五种
({a,b} = {a: b, b: a});
console.log(a,b)
</script>
ES6 的类
1.1 类的使用
<script>
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
//方法相当于放在了原型上
say(){
console.log("aaa");
}
}
var p1 =new Person("lisi","34");
console.log(p1.name,p1.age);
p1.say();
</script>
说明:
在类的内部,不能直接书写语句,只能声明方法
1.constructor 这个构造函数内,负责给对象添加属性
2.直接在类中添加方法
3.任何的类都有一个默认的无参的constructor ,如果手动添加constructor,
则默认的constructor不再存在
4. 如果用typeof 对类名进行测试,则结果还是function ,es6中的类本质还是构造函数
5.类不会声明提前,必须先声明在使用
6.类不能用for...in遍历
1.2 类作为参数和返回值使用
function foo(cla) {
var p = new cla();
p.say();
return class{
eat(){
console.log("bbb");
}
}
}
var cla = foo(class{
say(){
console.log("aaa");
}
})
new cla().eat();
1.3 静态方法
<script>
class Person{
static say(){
console.log("aaa...");
}
}
Person.say();
</script>
说明:
静态方法: 直接添加到了构造函数,在类中,使用关键字static来添加的方法
静态方法直接通过类名来调用,不能通过对象调用
1.4 继承
<script>
class Person{
//属性写在constructor中
constructor(name){
this.name = name;
}
//类方法直接写在Person中
say(){
console.log("aaa...");
}
//静态方法
static foo(){
console.log("foo...");
}
}
//继承父类使用extends
class Son extends Person{
constructor(name){
super(name);//相当于以前的构造函数的借调
}
//覆写父类中say方法
say(){
super.say();
console.log("子类的方法")
}
}
var p1 = new Son("lisi");
console.log(p1.name);
p1.say();
Son.foo();
</script>
说明:
继承: 使用extends关键字
1.在构造函数中,使用super就相当于在对象初始化属性,就是以前的构造函数借调,super() 调用父类的构造函数
的时候不要加点,而且要放在构造函数的第一行
2.在子类中可以覆写父类的方法,而且也可以在子类的方法中
使用 super.父类方法()来
调用父类的方法, 而且这个时候父类方法中的 this 其实指的是子类的对象
3. 使用类的的时候, 静态方法也可以继承