ES6

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. 使用类的的时候, 静态方法也可以继承