【南京】ES6新增方法【黑马web前端】

更新时间:2019年07月26日 10时54分29秒来源:黑马程序员论坛

let

区别1:
let定义的变量只能在代码块{}里面使用,形成一个{}块级作用域
var作用于函数作用域

区别2:
let不允许重复声明,它是一个封闭空间,解决了i问题

var a=5
var a=12 //-->a=5
let a=5
let a=12 //-->error

区别3:

const

const用来定义常量,一旦定义了,后面就不能修改了

箭头函数=>
function()中this是指向调用这个函数的对象

箭头函数中,this指向了window
arguments,不能使用
由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略

解构赋值

左右两边结构一样
右边必须是合法结构（错误例子：{12,5,8}）
声明和赋值写在一句话中（错误例子：let [a,b]; [a,b]=[12,5];）

   //数组
   let [a,b,c]=[12,5,101] // a=12,b=5,c=101
   //JSON
   let {a,b,c}={b:5,a:12,c:101} // json跟顺序无关,a=12,b=5,c=101
   //混合型，左右结构、顺序一致
   let [{a,b},[n1,n2,n3],num,str] = [{a:12,b:5},[12,5,8],8,'EcmaScript']

   //a=3,b=8,c is not defined 对数组的解构
   var [a,b]=[3,5,8];
//x=V,y=u,z=e 对字符串的结构
   var [x,y,z]=Vue;
//m=10,n=20 对象的解构,对key进行拆分
   var {n,m}={m:10,n:20};
复制数组
var arr1=[1,2,3,4]
for(var i=0;i<arr1.length;i++){
arr2=arr1
}
arr2=Array.from(arr1)

JSON
//简写，当key,value一样时，可以只写一个
{m:m,n:n}--->{m,n}
//其中也可以有key、value不相同的
let a=12;
let b=5;
let json={a,b,c:8}；  //{a:a,b:b,c:8}
console.log(json);  //{a:12,b:5,c:8}

//JSON里的方法简写,`:function`可以省略
let json={
  a:12,
  show(){  //show:function(){
alert(this.a)
  }
}

字符串模板 ``（反单引号）
用于字符串连接，可以换行
`string text ${expression} string text`
rest参数...（3个点）…args必须是最后一个，不能放前面

  var [x,...y]=[4,8,10,30]  //x=4,y=[8,10,30]  y成了动态参数
  let xy=[...'es6'];  //['e','s','6']  拆解
  //数组拆分
  console.log(...[4,8])  //4,8
  //数组拆分的进阶
  let arr1 =[1,3];let arr2=[4,8];
  [...arr1,...arr2]  //[1，3,4,8]

默认参数function show(a,b=5,c=12){
  console.log(a,b,c);
}
show(99,19) //99,19,12
show(99) //99,5,12

for of循环//for in
var arr=['apple','banana','orange','pear']
for(var i in arr){
console.log(i); // for in 出来的是索引0 1 2 3
}

//for of
var arr=['apple','banana','orange','pear']
for(var i of arr){
console.log.(i); // for of 出来的是实际apple,banana等
}

for of可以循环数组,但是不能循环json,因为它是为了与map配合使用
Map（数据结构）与for of配合使用，是一个key、value
var map = new Map();
map.set(name,value); // 可以设置name,value

map.get(name); // 可以单独获取name

map.delete(name); // 可以单独删除name

//与for of 的配合
for(var name of map){
console.log(name);  // a,apple b,banana
}

for(var [key,value] of map){
console.log(key,value); // key,value
}

for(var key of map.keys) // 可以只循环map中的key值

map（数组）映射–原数组映射成新数组，一个对应一个
//例一
let arr=[12,5,8];

let result=arr.map(item=>item*2);

alert(result);

//例二
let score=[19, 85, 99, 25, 90];

let result=score.map(item=>item>=60?'及格':'不及格');

alert(score);
alert(result);
reduce（数组）汇总–求和–多个变成一个
//求和
let arr=[12,69,180,8763];

let result=arr.reduce(function (tmp, item, index){
   //alert(tmp+','+item+','+index);
   return tmp+item;
});

alert(result);

//求平均数
let arr=[12,69,180,8763];

let result=arr.reduce(function (tmp, item, index){
   if(index!=arr.length-1){ //不是最后一次
      return tmp+item;
   }else{                   //最后一次
      return (tmp+item)/arr.length;
   }
});

alert(result);
filter（数组）过滤器
let arr=[12,5,8,99,27,36,75,11];
//选择能够被3整除的数
let result=arr.filter(item=>item%3==0);

alert(result);

forEach（数组）循环–迭代
let arr=[12,5,8,9];

arr.forEach((item,index)=>{
   alert(index+': '+item);
});
面向对象class
使用了class关键字，现在构造函数和类分开了
class里面直接加方法

//old
function User(name, pass){
   this.name=name;
   this.pass=pass;
}
User.prototype.showName=function (){
   alert(this.name);
};
User.prototype.showPass=function (){
   alert(this.pass);
};

//ES6
class User{
   constructor(name, pass){
      this.name=name;
      this.pass=pass;
   }
   showName(){
      alert(this.name);
   }
   showPass(){
      alert(this.pass);
   }
}
继承extends

old: 子类.prototype = new 父类
ES6: class 子类 extends 父类{}
supper关键字：超类、父类
//old
function VipUser(name, pass, level){
   User.call(this, name, pass);

   this.level=level;
}

VipUser.prototype=new User();
VipUser.prototype.constructor=VipUser;

VipUser.prototype.showLevel=function (){
   alert(this.level);
};

//ES6
class VipUser extends User{
   constructor(name, pass, level){
      super(name, pass);

      this.level=level;
   }

   showLevel(){
      alert(this.level);
   }
}
模块化
exprot default // 导出
import modA from './a.js' // 引入模块

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

【南京】ES6新增方法【黑马web前端】

相关阅读