Home

hogen

Follow Excellence. Success will chase you.

Home About Github Email

ES6 新特性01

变量/赋值

  • var 可以重复定义、不能限制修改、没有块级作用域
  • let 不能重复定义、变量、块级作用域
  • const 不能重复定义、常量、块级作用域

    解构赋值:

  • 左右两边必须一样;右边得是个东西
  • 必须定义和赋值同步完成

    let {a,b}={a: 12, b: 5};
    let [a,b]=[12,5];
    let [x,{a:{b,c},d},y] = [12,{a:{b:1,c:2},d:3},88];
    console.log(`a的值是${a},b的值是${b},c的值是${c},d的值是${d}`);
    

    箭头函数

    function (参数,参数){
      函数体
    }
    
    (参数,参数)=>{
      函数体
    }
    

如果有且仅有1个参数,()可以省; 如果函数体只有一句话,而且是return,{}可以省

let arr = [2,10,5,99];
let sort_arr = arr.sort((n1,n2)=>n1-n2);// 函数体只有一句 return
alert(sort_arr);

默认参数

ES5 默认赋值的写法

function show(a, b, c){
  b=b||5;
  c=c||12;// 调用方法如果 c 的值为空,此处赋值12
  console.log(a,b,c);
}
show(12, 37);

ES6 默认赋值新写法

function show(a=1, b=2, c=3){
  console.log(a,b,c);// 12 37 3
}
show(12, 37);

参数展开(剩余参数、数组展开)

let arr=[12,5,8,99];
//...arr    <=>    12,5,8,99
let arr2=[...arr, arr];
let arr3=[...arr,...arr];
let [a,b,c,d] = arr;
console.log(arr2);// [12, 5, 8, 99, Array(4)]
console.log(arr3);// [12, 5, 8, 99, 12, 5, 8, 99]
console.log(`a的值是${a},b的值是${b},c的值是${c},d的值是${d}`);// a的值是12,b的值是5,c的值是8,d的值是99

“三个点”的第1个用途:接收剩余参数

function show(a, b, ...args) //  剩余参数必须在参数列表的最后`

“三个点”的第2个用途:展开一个数组

function show(a, b, ...args){
  console.log(a,b,args);// 12 37 Array(4)
}
show(12, 37, 88, 99, 123, 56);

数组(新增5种方法)

forEeach 遍历

let arr = [1,2,3,4];
arr.forEach(function(element,index,arr){
    alert(arguments.length);//forEach有3个参数,箭头函数不适应arguments
    console.log(a+','+b+','+c);
    console.log(`第${index}个元素是${element},最后一个元素是${arr}`);//0 1 (4) [1, 2, 3, 4]
});

利用 forEeach 方法求和

let sum = 0;
arr.forEach(element=>sum+=element);
alert(sum);

map 映射

arr.map(function(element,index,arr){
    alert(arguments.length);//map有3个参数,箭头函数不适应arguments
    console.log(a+','+b+','+c);
    console.log(`第${index}个元素是${element},最后一个元素是${arr}`);
});

map 方法求分数是否及格

let score = [100,20,30,70,50];
let result = score.map(element=>element>60?"及格":"不及格");
alert(result);

reduce 汇总

let arr = [1,2,3,4,5];
arr.reduce(function(tmp,element,index,arr){
    // alert(arguments.length);//reduce 有4个参数
    // console.log(a+','+b+','+c+','+d);
    console.log(`首个参数是${tmp},第${index}次相加的元素是${element},最后一个元素是${arr}`);
});

reduce 求平均数

let avg = arr.reduce((tmp,element,index)=>{
    if (index!=arr.length-1) {
        return tmp+element;
    }else{
        return (tmp+element)/arr.length;
    }
});
alert(avg);

filter 过滤

let arr = [1,3,4,5];
arr.filter(function(element,index,arr){
    alert(arguments.length);//filter函数有3个参数
    console.log(`第${index}个元素是${element},最后一个元素是${arr}`);
});

filter 过滤出数组中能被2整除的数

let result = arr.filter(function(element){
    if (element%2==0) {
        return true;
    }else{
        return false;
    }
});
//上述可简写成:
let result = arr.filter(item=>item%2==0);/

alert(result);

Array.from:处理 array-like 型数据

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      div {width:200px; height:200px; background:#CCC; float:left; margin:10px;}
    </style>
    <script>
    window.onload=function (){
      let aDiv=document.getElementsByTagName('div');//aDiv并不是一个真正意义上的数组
      Array.from(aDiv).forEach(div=>{
        div.style.background='yellow';
      });
    };
    </script>
  </head>
  <body>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
  </body>
</html>

json

  • 简写:名字和值一样的,可以省

    let a=12;
    let b=5;
    let json={a, b};
    console.log(json);//{a: 12, b: 5}
    
  • function可以不写

    let json={
       a: 12,
       b: 5,
       show(){
        alert(this.a+this.b);
      }
    /*show: function (){
        alert(this.a+this.b);
      }*/
    };
    
    json.show();
    

    字符串

  • 字符串模板:植入变量、任意折行 a变量的值是:${a}
  • startsWith 方法
  • endsWith 方法

    面向对象

传统 Js 面向对象的民间写法(非官方,不统一)

function Person(name, age){
  this.name=name;
  this.age=age;
}

Person.prototype.showName=function (){
  alert('我叫'+this.name);
};
Person.prototype.showAge=function (){
  alert('我'+this.age+'岁');
};

let p=new Person('blue', 18);
p.showName();
p.showAge();

//传统 js 继承写法-------------------------
function Worker(name, age, job){
  Person.call(this, name, age);
  this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;
Worker.prototype.showJob=function (){
  alert('我是做:'+this.job);
};

let w=new Worker('blue', 18, '打杂的');

w.showName();
w.showAge();
w.showJob();

ES6 面向对象的官方新写法

class Person{
  constructor(name, age){
    this.name=name;
    this.age=age;
  }

  showName(){
    alert('我叫'+this.name);
  }
  showAge(){
    alert('我'+this.age+'岁');
  }
}

let p=new Person('blue', 18);

p.showName();
p.showAge();

//ES6 继承新写法-------------------------
class Worker extends Person{
  constructor(name, age, job){
    //super-超类(父类)
    super(name, age);
    this.job=job;
  }

  showJob(){
    alert('我是做:'+this.job);
  }
}

let w=new Worker('blue', 18, '打杂的');
w.showName();
w.showAge();
w.showJob();

hogen

2018-01-17
Home About Github Email