码迷,mamicode.com
首页 > 其他好文 > 详细

ES6上

时间:2018-10-09 23:59:33      阅读:510      评论:0      收藏:0      [点我收藏+]

标签:har   length   括号   bind   cto   js对象   就是   简介   ...   

ES6简介

  1. EMCAScript(ECMA、ES)标准
  2. JavaScript是EMCAScript的一种

ES6新语法

1.变量、赋值

var 可以重复定义、不能限制修改、没有块级作用域
var 需要封装进function
let 不能重复定义、变量、块级作用域{}
const 不能重复定义、常量、块级作用域{}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    window.onload=function (){
      var aBtn=document.getElementsByTagName('input');

      for(var i=0;i<aBtn.length;i++){
        aBtn[i].onclick=function (){
          alert(i);
        };
      }
    };
    </script>
  </head>
  <body>
    <input type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
  </body>
</html>

alert出来的都是3
把alert的内容放到函数中才正常

<script>
window.onload=function (){
  var aBtn=document.getElementsByTagName('input');

  for(var i=0;i<aBtn.length;i++){
    // var 需要函数级作用域包起来
    // let 和 const不用,它们只需要大括号即可
    (function(i){
      aBtn[i].onclick=function (){
        alert(i);
      };
    })(i);
    }
};
</script>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
</body>

如let则不需要封装进function中

<script>
window.onload=function (){
  let aBtn=document.getElementsByTagName('input');
  // for 循环本身就是语法块
  for(let i=0;i<aBtn.length;i++){
    aBtn[i].onclick=function (){
      alert(i);
    };
  }
};
</script>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
</body>

解构赋值
1.左右两边必须一样
2.定义和赋值必须同时进行

<script>
window.onload=function (){
  // 给a、b、c分别赋值
  // 两边结构要一样,如同数组、同json等
  let [a,b,c]=[12,13,15];
  let {a,b,c}={a=12,b=13,c=15};
  //粒度
  let [a,b,c]=[12,{b:{f:66},g:12},c=12]
</script>
2.函数
//原来  
function (参数,参数){  
    函数体  
  }  
//箭头函数   
  (参数,参数)=>{  
    函数体  
  }  
  1.如果有且仅有1个参数,()可以省
  2.如果函数体只有一句话,而且是return,{}可以省
  *关于this

  默认参数
    (a, b=xx, c=xx)

  参数展开(剩余参数、数组展开)
  1.“三个点”的第1个用途:接收剩余参数
    function show(a, b, ...args)
    剩余参数必须在参数列表的最后
    function show(a,b,...args){

    }

    def show(a,b,*args,c,d):
    pass

  2.“三个点”的第2个用途:展开一个数组  
3.数组/json
  数组——5种
  map     映射:一个对一个
  let arr=[66,50,78,92,16]
  let arr2=arr.map(item=>item>=60)

  reduce  汇总:一堆->一个
  let arr=[66,50,78,92,16]
  let sum=arr.reduce((tmp,item.index)=>{
    return tmp+item
  });

  filter  过滤:
  let arr=[66,51,78,93,16]
  let arr2=arr.filter(item=>item%2)    

  forEach 遍历:
  let arr=[66,51,78,93,16]
  let sum=0
  arr.forEach(item=>{
    sum+=item
  });

   // 把类数组对象转化成数组,才可以调用forEach进行遍历
  Array.from([array-like])=>[x,x,x]  

json——2变化
    1.简写:名字和值一样的,可以省
        let a=5;
        let b=12;
        json={a:a,b:b}等价于{a,b}
    2.function可以不写
        <script>
        /*let json={
          a: 12,
          b: 5,
          show: function (){
            alert(this.a+this.b);
          }
        };*/
        let json={
          a: 12,
          b: 5,
          show(){
            alert(this.a+this.b);
          }
        };

        json.show();
        </script>
4.字符串

字符串模板:植入变量、任意折行

// 字符串模板 `` 反单引号
let json={name: 'mu', age: 18};
//alert('我叫:'+json.name+',我今年'+json.age+'岁');
alert(`我叫:${json.name},我今年${json.age}岁`);
// 随便换行
/*alert('abc');*/
alert(`ab
  cde
  f
  d`);

if(sNum.startsWith('135')){
  alert('移动');
}else{
  alert('联通');
}

if(filename.endsWith('.txt')){
  alert('文本文件');
}else{
  alert('图片文件');
}
5.面向对象
//传统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('mu',18)
p.showName()
p.showAge()
//--------------------------------------------------
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('mu', 18, '打杂的');

w.showName();
w.showAge();
w.showJob();
//------------------------------------------------
// class/constructor
class Person{
  constructor(name, age){
    this.name=name;
    this.age=age;
  }

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

let p=new Person('mu', 18);
p.showName();
p.showAge();
//---------------------------------------------
// extends/super
class Worker extends Person{
  constructor(name, age, job){
    //super-超类(父类)
    super(name, age);
    this.job=job;
  }

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

let w=new Worker('mu', 18, '打杂的');
w.showName();
w.showAge();
w.showJob();
//-------------------------------------------
// bind——给函数定死一个this
class Person{
  constructor(name, age){
    this.name=name;
    this.age=age;
  }

  showName(){
    alert(this);
    alert('我叫'+this.name);
  }
  showAge(){
    alert('我'+this.age+'岁');
  }
}
let p=new Person('mu', 18);
document.onclick=p.showName.bind(p);
//----------------------------------------------------
//普通函数:根据调用我的人  this老变  


//----------------------------------------------------
//箭头函数:根据所在的环境  this恒定
// 输出document对象
document.onclick=function (){
  let arr=[1,2,3];

  arr.a=()=>{
    alert(this);
  };

  arr.a();
};  
6.Promise
7.generator
8.async/await
9.模块化 ES6

ES6上

标签:har   length   括号   bind   cto   js对象   就是   简介   ...   

原文地址:https://www.cnblogs.com/guotianbao/p/9744646.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!