程序猿~

ES6(一)

2019-02-17  本文已影响0人  红笔黑字

JavaScript是EMCAScript的一种,它只是一种标准——但是,完全实现它的,暂时只有JavaScript。

ES6新语法:

1.变量/赋值

var:可以重复定义、不能修改限制、没有块级作用域
let:不能重复定义、变量、块级作用域
const:不能重复定义、常量、块级作用域
解构赋值:
        1.左右两边必须一样,右边内容需有意义
        2.定义和赋值必须同时完成

 window.onload = function (ev) {
        let aBtn = document.getElementsByTagName('input');
        for(let i=0;i<aBtn.length;i++){
            aBtn[i].onclick = function () {
                alert(i)
            }
        }
    }
  点击为:0,1,2
  for内的let改为i,点击为:3,3,3

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量,常用解决办法(闭包,常用来防止全局变量污染):

window.onload = function (ev) {
        let aBtn = document.getElementsByTagName('input');
        for(var n=0;n<aBtn.length;n++){
            (function (n) {
                aBtn[n].onclick = function () {
                    alert(n)
            }
            })(n)
        }
    }
解构赋值:let [a,b,c]=[1,{a:2,b:"w",c:""},14];

2.函数

2.1箭头函数:

function(参数,参数){函数体}
(参数,参数)=>{函数体}
        示例:
        let show=(a,b)=>{
                return a+b
        }
1.如果参数只有一个,()可以省略
2.如果函数体只有一句,且是return,{}可以省略
        示例:
        let a=n=>n*2;

2.2默认参数:

        (a,b,c=12)

2.3参数展开(剩余参数,参数数组):

  1.接收剩余参数:
    function show(a, b, ...名字)
    剩余参数必须在参数列表的最后
  2.展开一个数组:
        let arr=["a","b","c"];
        let arr2=[1,2,...arr,3,4];
        console.log(arr2)
       // [1, 2, "a", "b", "c", 3, 4]

3.数组 /json

数组新增了几种方法

    1.map:映射,一一对应
           arr.map(function(){})
    2.filter:  过滤
    3.forEach: 遍历(以前就有了)
    2.reduce:汇总
    5.Array.from([array-like])=>[x,x,x]

json的改变

    1.简写:名字和值一样的,可以省
            let a=1;
            let b=2;
            let json={a,b}
    2.function可以不写
         let json={
                a:1,
                b:2,
                show(){
                    alert(this.a+this.b)
                }
            };

3.1 map的使用

        let arr=[1,2,3,4,5,6];
        let arr2=arr.map(function (item,index) {
            if(item>3){
                return true
            }else{
                return false
            }
        });
        console.log(arr2)
        简写(index没有用到):
      let arr2=arr.map(item=> item>3);

3.2 filter的使用

        let arr=[1,2,3,4,5,6];
        let arr2=arr.filter(item=>item%2);
        //过滤偶数,只剩奇数

3.3 forEach的使用

        let arr=[1,2,3];
        let sum=0;
        arr.forEach(item=>{sum+=item});
        alert(sum)
        //6

3.4 reduce的使用

      let arr=[1,10,100,1000,10000,100000];
        let sum=arr.reduce((tmp,item,index)=>{
            console.log(tmp,item,index);
            return tmp+item
        });
        console.log(sum)
        // sum求出的是综合,tmp是起始数,第一个item是10,第一个index也是1
        //

3.5 Array.from([array-like])=>[x,x,x]

使不是数组的集合,可以用数组的方法

4.字符串

1.字符串模板(要用到反单引号:``):
        console.log(`这是一个$(a),那是一个$(b)`)
        单引号内,可以任意换行
2.startswith/endswith

5.面向对象

5.1有了真正的类(和python越来越像了...):

         class Person{
                constructor(name,age){
                    this.name=name;
                    this.age=age;
                }
                showName(){
                    alert(this.name)
                }
                showAge(){
                    alert(this.age)
                }
            }
            let p=new Person("红笔黑字",10);
            p.showName();
            p.showAge();

5.2继承

        class Worker extends Person{
                constructor(name,age,job){
                    super(name,age);//继承父亲的这两个属性
                    this.job=job;
                }
                showJob(){
                    alert(this.job)
                }
            }
        //属性靠的super,方法靠的extends

5.3this

  普通函数:根据调用我的人  this老变
  箭头函数:根据所在的环境  this恒定(无论谁调,找所在环境,一般是上级)
  bind——给函数定死一个this
            oBtn.onclick=a.bind(a);
  箭头函数优先级高于bind
上一篇下一篇

猜你喜欢

热点阅读