胡说八道es6

栏目: JavaScript · 发布时间: 5年前

内容简介:说起es6大家都很熟悉,有些es6新特性chrome等高级浏览器已经实现,不用我们去编译了。今天我简单说下es6的一些特性,为什么写呢?一方面自娱自乐,一方面是因为我有段时间不用就会忘,我给自己回回炉。说的不对,大家给我留言拍砖哈。声明变量有两种方法,let和const。 let用来声明变量,const用来声明常量。什么是变量?变化的量。比如你的名字,公司地址。

说起es6大家都很熟悉,有些es6新特性chrome等高级浏览器已经实现,不用我们去编译了。今天我简单说下es6的一些特性,为什么写呢?一方面自娱自乐,一方面是因为我有段时间不用就会忘,我给自己回回炉。说的不对,大家给我留言拍砖哈。

1、声明变量有变化,不再傻傻分不清

声明变量有两种方法,let和const。 let用来声明变量,const用来声明常量。

什么是变量?变化的量。比如你的名字,公司地址。

什么是常量?永远不会变的东西。比如你的生日,当然你伪造的话那就不算。

平时我们声明var的变量可以重复声明,但let声明的变量不能重复声明,但是它们都可以重复赋值。

const声明的常量即不能重复赋值也不能重复声明。

2、作用域定义有变化,让你随手画个圈

之前js的作用域是用function来定义的,一个function内是一个作用域。现在是通过{}来定义的, 一个花括号内是一个作用域。

//var声明的i
var arr=[];
for (var i=0; i<10; i++){
    arr[i]=function(){
        console.log(i);
    }
}
arr[6]();//var声明的i指向i的地址,所以是10

//var声明的i如果要得到6,需要用一个立即执行和闭包。把i给num,

//然后在function里面console.log(num)即可,每一个num都是一个新变量。
	var arr=[];
	for (var i=0; i<10; i++){
	    arr[i]=(function(num){
	         return function () {
            console.log(num);
        }
	    })(i);
	}
arr[6]();

//let声明的i
var arr=[];
for (let i=0; i<10; i++){
//let声明的i在这个花括号内是一直存在的,到下次循环的时候i=i+1
    arr[i]=function(){
        console.log(i);
    }
}
arr[6]();//6

复制代码

3、解构赋值二合一,省时省力好简洁

用人话来说就是左边和右边结构一样。

第一可以省一部分赋值代码,让代码看起来简洁。

let [a,b]=[1,2];
console.log(a); //1
console.log(b); //2

复制代码

第二json简洁,提取方便。如果key和value是同样的命名,可以缩写。

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

复制代码

4、有了字符串模板,远离+++拼接

let str="真好啊";
console.log("今天天气"+str+",心情也好!");
//现在可以写成
console.log(`今天天气${str},心情也好! `);

复制代码

5、函数增加新特性,箭头函数省省省,rest参数略略略

函数里面加了一个箭头函数和rest参数

箭头函数可以极大的缩写我们的函数

如果参数只有一个,可以省略function(); 如果有return 返回,可以省略{return };

//一个参数和返回

//以前
let show=function(r){
    return r;
}

//现在
let show=r=>r;

//两个参数和返回
let show=(a,b)=>{return a+b};
复制代码

写起来是不是看着更简洁了,当然如果你不常写的话,以我的经验就是你不出一周就忘了怎么写了。

rest参数(...rest)顾名思义就是拿剩下的参数呗

function show(a,b,...arg){
    console.log(arg);
}
show(1,2,3,4,5);//[3,4,5]

复制代码

而且rest参数还可以帮我们展开数组

let arr=[1,2,3];
console.log(...arr);
复制代码

展开有什么用呢?

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
复制代码

可以看到展开后可以做合并和赋值。

6、数组有了新方法,遍筛累加很省劲儿。

map和forEach都可以遍历数组,既然都可以遍历数组,为什么要定义两个方法呢?

其他这两个方法是有不同的地方的:

内部代码在return的时候,forEach不会生成新数组。map会生成一个新数组。

foreEach要想改变数组需要在callback函数中去改。

//map改变数组
let arr=[1,3,5];
let curArr=arr.map(function(item,index){
    return item*2;
});
console.log(curArr);//[2,6,10]

//forEach改变数组
let arr=[1,3,5];
let curArr=arr.forEach(function(item,index){
    return arr[index]=item*2;
})
console.log(arr);//[2,6,10]
console.log(curArr);//undefined;
复制代码

filter是过滤器的意思,可以根据条件用来筛选数组中的元素。就好比流水线上的检查员,筛选出合格的产品。

let arr=[1,2,6];
let curArr=arr.filter(function(item,index){
    return item%2;
})
console.log(curArr);
复制代码

reduce是减少的意思,它可以执行数组的累积运算然后返回一个数。就好比搭积木,多个积木最后搭成一个东西。

let arr=[1,2,6];
let sum=arr.reduce(function(prev,cur,index,arr){
//prev是前一步的操作和
//cur是当前值
//index是当前的索引
//arr是当前的数组
    return prev+cur;
})
console.log(sum);
复制代码

7、对象继承新形式,声明继承更简单。

我们先看下之前的对象声明和继承是怎么做的。

//定义父类
function Animal(name,color){
    this.name=name;
    this.color=color;
}
Animal.prototype.showName=function(){
    console.log(this.name);
}
Animal.prototype.showColor=function(){
    console.log(this.color);
}
let obj1=new Animal('mimi','白色');
obj1.showName();//mimi
obj1.showColor();//白色 
//定义子类
function Cat(name,color,age){
    Animal.apply(this,arguments);
    this.age=age;
}
//继承
Cat.prototype=new Animal();
Cat.prototype.constructor=Cat;
Cat.prototype.showAge=function(){
    console.log(this.age);
}
let obj2=new Cat('hh','红色',3);
obj2.showName();
obj2.showColor();
obj2.showAge();
复制代码

之前的继承做法是通过原型链先指向父类的原型,然后把子类的构造函数指向定义的构造函数。

这样原型链上就有了父类的方法,构造函数里面也会有父类的构造函数。

这样定义有个问题就是类和构造函数是一起的,单把构造函数拿出来,也能做类也能做函数。

es6里面更严谨了,声明类有了专门的class,继承有了extends

//父类声明
class Animal{
   //构造函数声明
    constructor(name,color){
        this.name=name;
        this.color=color;
    }
    //对象的方法声明
    showName(){
        console.log(this.name);
    };
    showColor(){
        console.log(this.color);
    }
}
let obj1=new Animal('mimi','白色');
obj1.showName();//mimi
obj1.showColor();//白色

//子类使用extends继承
class Cat extends Animal{
   
    constructor(name,color,age){
        //构造函数内继承父类的构造函数
        super(name,color);//super在这里代表了父类的构造函数
        this.age=age;
    }
    showAge(){
        console.log(this.age);
    }
}
let obj2=new Cat('haha','红色',6);
obj2.showAge();//6
obj2.showName();//haha
obj2.showColor();//红色
复制代码

8、异步回调好麻烦,aysnc和await来帮忙

我们常见的异步回调会操作地狱回调,让你傻傻分不清,经常问自己,我代码在哪里呢?我逻辑走到哪里去了?

$.ajax({url:'/data.txt'},function(){//第一步
   $.ajax({url:'/data2.txt'},function(){//第二步
     $.ajax({url:'/data3.txt'},function(){//第三步
        $.ajax({url:'/data4.txt'},function(){//第四步
          $.ajax({url:'/data5.txt'},function(){//第五步
    
           })
        })
     })
   }) 
})
复制代码

如果我们用async和await就可以实现同步写法实现异步回调的作用。

(async ()=>{
      let res=await $.ajax({
          url: '/data.txt'
       });
       //第一步
       console.log(res);
        let res2=await $.ajax({
          url: '/data2.txt'
       });
       //第二步
      console.log(res2);
      let res3=await $.ajax({
          url: '/data3.txt'
       });
       //第三步
      console.log(res3);
      let res4=await $.ajax({
          url: '/data4.txt'
       });
       //第四步
      console.log(res4);
      let res5=await $.ajax({
          url: '/data5.txt'
       });
       //第五步
      console.log(res5);
 })()
show();

复制代码

当然现在有很多提到Promise,Promise链式调用,我们来看下如果用Promise要怎么用

let p1=new Promise(function(resolve,reject){
       $.ajax({
            url: 'data.txt',       
        })
        .done(function(data) {
           resolve(data);
        })
        .fail(function(err) {
           reject(err);
        }) 
   }) 
   p1.then(function(data){
   //成功
    console.log(data);
    return $.ajax({url: 'data2.txt'})//抛出Promise
   },function(err){
   //失败
    console.log(err);
   })
   //第二个Promise的处理
   .then(function(data){
       console.log(data);
   },function(err){
       console.log(err);
   })
复制代码

这里因为用的是jquery3.0的ajax,返回的其实是一个promise,你可以打出来ajax的看下。

9、模块导入新方法,import和export要配合

es6用export来暴露模块的属性和方法,用import来引入模块。

a.js

let a=2;
let b=3;
export {a,b}
复制代码

index.html

<script type="module">
 import {a,b} from './a.js';
 console.log(a);
 console.log(b);
 </script>
复制代码

在页面中引入模块,type是一定要声明的,目前在谷歌最新版本的浏览器中测试的时候,如果不声明会报错。

es6的这些新特性是不是很神奇,好了,今天我们先说到这里,工作中大家可以使用,具体的原理,我们后面讲。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

解密SEO

解密SEO

欧朝晖 / 电子工业出版社 / 2007-05-01 / 49.80元

《解密SEO:搜索引擎优化与网站成功战略》帮助读者建立搜索营销的概念,分析搜索营销中的几种形式的手段,并从认识搜索引擎的原理开始,导出搜索引擎优化的具体解释,向读者引入以搜索引擎优化为宗旨的网站建设的新观念和设计理念。对网站结构优化、单页优化、链接优化等技术进行了详细的解说和示范。读者还可以接触到网站养育的新概念,帮助读者网站发展成熟,达到网络营销的目标。对搜索引擎优化中观念上和技术上常犯的错误,......一起来看看 《解密SEO》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具