关于ES6的新特性

1 let声明变量

　　　　01 let声明的变量，不可重复声明，比如 let a=1 ； let a=2 ；这样申明会报错

　　　　02 let声明的变量，有块级作用域，比如 if( ){ }这用语句有了作用域

　　　　03 let声明的变量不再声明提前

 for (var i = 0; i < 100; i++){

     setTimeout(function () {

         console.log(i);

     }, 0)

 }

 //结果是输出  100个100；

 //setTimout属于异步操作，它会在主线程代码执行完毕之后，才执行

 for (var let = 0; i < 100; i++){

      setTimeout(function () {

          console.log(i);

      }, 0)

  }

// 结果是输出，0 1 2 3-----直到 99

2 const声明的叫做常量

　　　　1. const声明变量不可以进行重复声明

　　　　2. const声明也有块级作用域

　　　　3. const声明的变量不能被修改值

　　　　4. const声明变量的时候必须赋一个初始值！

作用：防止变量被修改，一些不想被修随意修改的属性值，可以用const定义

总结：

　　es6中声明变量：

　　1. let 变量

　　2. const 常量

　　都有块级作用域

　　都不能重复声明

　　onst声明的变量不能被修改值

　　const声明变量的时候必须赋一个初始值

3 ES6 对象简写

　　　　01 属性简写，如果属性名和属性值的变量名相同，就可以简写为一个

　　　　02 方法简写，可以吧：和function去掉。

 // 如：

 let name = "周浩"

 let obj = {

     name: name,

      sing: function () {

          console.log("你好帅！！！")

    }

  }

 //  es6 简写为：

  let name = "周浩"

  let obj = {

      name,

       sing() {

           console.log("你好帅！！！")

     }

   }

4解构赋值

01对象的解构赋值

 let obj = {

     name: "周浩",

     age: 18

 }

 //01普通方法获取对象中的属性值

  let name = obj.name;//周浩

  let age = obj.age;  //

 // 02解构赋值

 // let {对象的属性名: 要声明的变量名} = 对象 如   ：let { name: mingzi } = obj;

 // 就会自动声明一个变量出来，变量的值就是对象中对应的属性的值

 let { name: mingzi } = obj;

 console.log(mingzi);

 // let {对象的属性名: 要声明的变量名} = 对象

 // 03如果 对象的属性名 和要声明的变量名同名 可以简写成一个，（对象的简写+解构赋值）

 // let { name： name, age: age } = obj;

  let { name, age } = obj;

  console.log(name, age);

对象和函数的解构赋值应用，如下

 let obj = {

     name: "周浩",

     age: 18

 }

 function test({name, age}) {//设置解构

     console.log(name, age)

 }

 test(obj);//把对象直接传入，在函数形参设置解构

数组的解构，如下

 let arr = [1, 2, 3, 4];

 //普通获取数组中值的写法

 // let num1 = arr[0]

 // let num2 = arr[1]

 // let num3 = arr[2]

 // let num4 = arr[3]

 //利用解构的写法，获取数组中的值

 let [num1, num2, num3, num4] = arr;

 console.log(num1)//

 console.log(num2)//

 console.log(num3)//

 console.log(num4)// 4

// let arr = [[1, 2], [3, 4]];

// let [[num1, num2], [num3, num4]] = arr;

// console.log(num1, num2,num3, num4)

结果： 1 2 3 4

数组解构中的剩余元素(RestElement)

let arr = [1, 2, 3, 4, 5];

// ... 语法在数组解构赋值中叫做 RestElement

// 剩余元素！！ 

// 1. 剩余元素只能有一个！

// 2. 剩余元素只能是最后一个元素

let [num1, ...num2] = arr;

console.log(num2);

// 输出结果：[ 2, 3, 4, 5 ]

5箭头函数

　　　　箭头函数的写法 var f = (参数列表)=>{ 函数体 }

　　　　箭头函数的简写形式：

　　　　01 如果箭头函数的参数列表中只有一个参数，小括号()可以省略

　　　　02 如果箭头函数的函数体只有一句代码，那么大括号{}可以省略

　　　　03 如果箭头函数的函数体只有一句代码，并且这句代码是返回语句,那么return和大括号都可以省略

　　　　平时确定一个函数中的this是谁，我们需要通过调用模式来确定

　　　　1. 函数调用模式 this ---> window 函数名()

　　　　2. 方法调用模式 this ---> 调用方法的对象对象.方法名()

　　　　3. 构造函数调用模式 this ---> 创建出来的实例 new 函数名()

　　　　4. 上下文调用模式 this ---> call和apply的第一个参数函数名.call()

　　　　箭头函数中没有this(因为箭头函数中没有this，所以要是在箭头函数中使用this，this会向上一级作用域中进行查找this)

　　　　如果在箭头函数中使用this, 会向上一级作用域中进行查找this(也就是说箭头函数内外this一致) （也可以这样理解：箭头函数中没this，它和离自己最近的this指向是一样的）

　　　　箭头函数中没有arguments！！！

// 本题要点 ： 在浏览器中，函数中的this默认指向window;  在node.js中 函数的this默认指向一个空对象

var name="sb"  //window中的name

let obj = {

    name: "周浩",//对象中的name

    sayHello() {

            setTimeout(function(){

                  console.log('它叫'+ this.name);//函数中的this，在浏览器中指向window，在node中指向空对象

            },1000)

    }

}

obj.sayHello();

//结果 ： 在浏览器中，console.log 输出的是 它叫 sb  。 在node中输出的结果是 它叫undefined

var name="sb"  //window中的name

let obj = {

    name: "周浩",//对象中的name

    sayHello() {

             var that=this  //对象方法中的this，默认指向 调用方法的对象。也就是说这里的this指的是obj

            setTimeout(function(){

                  //函数会先在自己的作用域中找that，自己没有，继续往上找，所以函数中的that和sayHello方法中的that是一样的，都指向obj

                  console.log('它叫'+ that.name);

            },1000)

    }

}

obj.sayHello();

// 输出结果为： 它叫周浩

var name="sb"  //window中的name

let obj = {

    name: "周浩",//对象中的name

    sayHello() {

            setTimeout(function(){

                  //01函数作用域中没有obj，它会顺着作用域链继续往上找

                  //02syHello方法是由obj调用的，所以找到了obj。

                  console.log('它叫'+ obj.name);

            },1000)

    }

}

obj.sayHello();

// 输出结果:   它叫周浩

箭头函数中this的利用

<!DOCTYPE html>

<html lang="en">

<head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <meta http-equiv="X-UA-Compatible" content="ie=edge">

      <title>Document</title>

</head>

<body>

      <script>

           let obj = {

               name: "周浩",

               sayHello() {

                   let func = () => {

                    //箭头函中没有this，所有它会顺着作用域链往上找

                    //找到syaHello方法，sayHello方法中的this指向的是obj

                       console.log(this); //obj对象

                       console.log(this.name);//周浩

                   }

                   func();

               }

           }

           obj.sayHello();

      </script>

</body>

</html>

arguments的作用(不是es6新特性)

　　　　arguments是一个伪数组

　　　　在函数被调用的时候，会将所有的实参存储到arguments对象中

arguments什么时候使用？

　　　　参数个数不确定的情况下需要使用arugments来获取所有的实参

例子：封装一个函数，求和，参数不定，可能是两个参数求和，也可能是10个参数求和

      <script>

function sum() {

    var result = 0;

    for (let i = 0; i < arguments.length; i++){

        result += arguments[i];

    }

    return result;

}

console.log(   sum(1)         )

console.log(   sum(1, 2)      )

console.log(   sum(1, 2, 3)   )

      </script>

判断是不是数组的方法：

　　　　特别注意：typeof 不能判断是不是数组 typeof array返回的是object

　　　　可以使用：

　　　　　　　　　　01Array.isArray(判断对象)

　　　　　　　　　　02判断对象 instanceof Array

　　　　　　　　　　ar arr = [1,2,3,1];

　　　　　　　　 03alert(arr.constructor === Array); // true

箭头函数中没有aguments怎么解决？使用...剩余参数

例子：封装一个函数，求和，参数不定，可能是两个参数求和，也可能是10个参数求和，使用箭头函数

<!DOCTYPE html>

<html lang="en">

<head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <meta http-equiv="X-UA-Compatible" content="ie=edge">

      <title>Document</title>

</head>

<body>

      <script>

// 要点：forEach() 遍历数组arr中的每个元素，将每个元素执行相同的操作，无返回结果

//      因为箭头函数没有aguments 所以要使用 剩余参数...

 var sum=(...arr)=>{

      //此时传入的arr是一个数组

      let result=0

      arr.forEach( elem => result+=elem )  //elem表示arr数组中的每个值,箭头函数简写

      return result

 }

 console.log(   sum(1,2,3,4,2)   )

      </script>

</body>

</html>

// 剩余参数只能有一个，并且只能是参数列表的最后一个！！

// 剩余参数是一个真数组！！ 可以使用任何数组的方法！！

function func(...a) {

    console.log(a);//[1, 2, 3, 4]

}

func(1, 2, 3, 4);

6 ES6函数默认值的使用

<!DOCTYPE html>

<html lang="en">

<head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <meta http-equiv="X-UA-Compatible" content="ie=edge">

      <title>Document</title>

</head>

<body>

      <script>

// 函数参数默认值的使用，如果没传参调用，a默认等于100，b默认等于100

function sum(a = 100, b = 100) {

    return a + b;

}

console.log(sum(1, 2));//3

console.log(sum());// 200

console.log(sum(1));//101

      </script>

</body>

</html>

7对象在声明的时候使用变量作为属性名

 var key = "name";

 // 如何以变量的值作为属性名

 // key="name"  就想让对象的属性名是name

 //只要上边变量key的值变化，下边对象[key]也会随着变化

 var obj = {

     [key]: "周浩"   //{ name: '周浩' }

 }

 console.log(obj);//{ name: '周浩' }

8对象扩展运算符

//将 a对象中的属性和方法快速添加到b对象中

使用剩余参数 ...将 a对象中的属性和方法拷贝到b对象中。
var wcs = {

    name: "周浩",

    age: 18,

    sing() {

        console.log("解开yy的鞋带！")

    }

}

// 使用...可以将对象中所有的属性给当前对象添加一份！

var xiaowsc = { ...wcs, money: 9999999999999 };

console.log(xiaowsc)

// 输出结果

// { name: '周浩',

//   age: 18,

//   sing: [Function: sing],

//   money: 9999999999999 }

9 class关键字

　　es6中class关键字就相当于构造函数。用来创建对象的

构造函数写法如下方代码

 function Person(name, age) {

     this.name = name;

     this.age = age;

 }

 Person.prototype.sayHello = function () { 

 }

 var p = new Person("周浩", 18);

构造函数是用来批量创建 具有相同属性 和  相同方法的对象

         class Person{//  相当于  function Person(){ }

             constructor(name, age) {//固定格式  constructor

                 this.name = name;

                 this.age = age;

             }

         // 在类中的方法会自动添加到构造函数的原型中！！

             say() {

                 console.log("lei hao a");

             }

         }

         var p = new Person("周浩", 18);

         console.log(p);//Person {name: "周浩", age: 18}

成员：属性和方法的统称

实例成员：通过实例访问的成员

静态成员：通过构造函数本身访问的成员

flat 可以数组扁平化

使用es6中提供的Array.prototype.flat 处理将数组扁平化

arr=arr.flat(Infinity)

Array.from() 转为数组

巴特西

关于ES6的新特性

最新文章

热门文章