胡说八道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的这些新特性是不是很神奇,好了,今天我们先说到这里,工作中大家可以使用,具体的原理,我们后面讲。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。