关于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去掉。

 1 // 如:
 2 let name = "周浩"
 3 let obj = {
 4     name: name,
 5      sing: function () { 
 6          console.log("你好帅!!!")
 7    }
 8  }
 9 
10 
11 //  es6 简写为:
12  let name = "周浩"
13  let obj = {
14      name,
15       sing() { 
16           console.log("你好帅!!!")
17     }
18   }

 

4解构赋值

01对象的解构赋值

 

 1 let obj = {
 2     name: "周浩",
 3     age: 18
 4 }
 5 //01普通方法获取对象中的属性值
 6  let name = obj.name;//周浩
 7  let age = obj.age;  //18
 8 
 9 
10 // 02解构赋值
11 // let {对象的属性名: 要声明的变量名} = 对象 如   :let { name: mingzi } = obj;
12 // 就会自动声明一个变量出来,变量的值就是对象中对应的属性的值
13 let { name: mingzi } = obj;
14 console.log(mingzi);
15 
16 
17 // let {对象的属性名: 要声明的变量名} = 对象
18 // 03如果 对象的属性名 和要声明的变量名同名 可以简写成一个,(对象的简写+解构赋值)
19 // let { name: name, age: age } = obj;
20  let { name, age } = obj;
21  console.log(name, age);

 

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

 1 let obj = {
 2     name: "周浩",
 3     age: 18
 4 }
 5 
 6 function test({name, age}) {//设置解构
 7     console.log(name, age)
 8 }
 9  
10 test(obj);//把对象直接传入,在函数形参设置解构

 

数组的解构,如下

 1 let arr = [1, 2, 3, 4];
 2 //普通获取数组中值的写法
 3 // let num1 = arr[0]
 4 // let num2 = arr[1]
 5 // let num3 = arr[2]
 6 // let num4 = arr[3]
 7 //利用解构的写法,获取数组中的值
 8 let [num1, num2, num3, num4] = arr;
 9 console.log(num1)// 1
10 console.log(num2)// 2
11 console.log(num3)// 3
12 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对象在声明的时候使用变量作为属性名

 1 var key = "name";
 2 
 3 // 如何以变量的值作为属性名
 4 // key="name"  就想让对象的属性名是name
 5 //只要上边变量key的值变化,下边对象[key]也会随着变化
 6 var obj = {
 7     [key]: "周浩"   //{ name: '周浩' }
 8 }
 9 
10 
11 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关键字  就相当于 构造函数。 用来创建对象的

构造函数写法如下方代码

 1 function Person(name, age) { 
 2     this.name = name;
 3     this.age = age;
 4 }
 5 
 6 Person.prototype.sayHello = function () { 
 7 
 8 }
 9 
10 var p = new Person("周浩", 18);

构造函数是用来批量创建 具有相同属性相同方法的对象
 1         class Person{//  相当于  function Person(){ }
 2             constructor(name, age) {//固定格式  constructor
 3                 this.name = name;
 4                 this.age = age;
 5             }
 6         // 在类中的方法会自动添加到构造函数的原型中!!
 7             say() {
 8                 console.log("lei hao a");
 9             }
10         }
11         var p = new Person("周浩", 18);
12         console.log(p);//Person {name: "周浩", age: 18}

 

成员:属性和方法的统称

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

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

 

 

flat  可以数组扁平化

使用es6中提供的Array.prototype.flat 处理  将数组扁平化
arr=arr.flat(Infinity)
 
 
 
Array.from() 转为数组
 
 
 
 
 
 
posted @ 2019-08-14 19:27  javascript9527  阅读(294)  评论(0编辑  收藏  举报