本文共 4466 字，大约阅读时间需要 14 分钟。

es6学习第一集

#需要学习的东西：

支持es6的浏览器：ie10+ ， chrome，firefox，移动端，nodejs

也可以编译转换

1：在线转换

es6新特性：

• 变量
• 函数
• 数组
• 字符串
• 面向对象
• promise
• generator
• 模块儿化

js之前的缺陷：

• var可以重复声明

• 没有常量
• 没有块儿级作用域

if(){
   }

出现了

{
     let a = 1;}alert(a);

闭包问题

for(var i = 0 ; i < btns.length ; i++){
           (function(i){
             btns[i].onclick = function(){
               alert(i+btns[i].innerText)          }        })(i)    }            可以用let    for(let i = 0 ; i < btns.length ; i++){
           btns[i].onclick = function(){
             alert(i+btns[i].innerText)        }    }

函数

箭头函数

如果只有一个参数，()可以省略

()=>{
   }window.onload = function(){
   				alert('abc');			}window.onload = ()=>{
     alert(123);}let show = (a,b) => {
     alert(a+b);}show(1,2)let arr = [12,5,6,7,143,412];arr.sort(function(n1,n2){
     return n1-n2;})arr.sort( (n1,n2) =>{
     return n1-n2;} )//return必须省略arr.sort( (n1,n2) => n1-n2 )

函数的参数

1. 参数扩展/展开

• 收集剩余参数

//收集剩余参数function show(a,b, ...args){
     alert(a);  alert(b);  alert(args);}show(1,2,3,4,5,6,7,8,9)//数组展开，就相当于把东西拿出来放上var arr = [1,2,3];show(...arr);  let arr1 = [1,2,3];  let arr2 = [4,5,6];  let arr0 = [...arr1,...arr2];    //不符合语法的  let a;  a = ...arr1;     //收集剩余参数和数组展开综合起来玩儿

2. 默认参数

解构赋值

注意事项

1. 左右两边结构必须一样
2. 右边必须是一个东西(数组，json，任何存在的合法的对象即可)
3. 声明和赋值必须在一句话里面

let [a,b,c] = [1,2,3];let [{
   a,b},[n1,n2,n3],num,str] = [{
   a:12,b:5},[12,4,6],6,'deffw'];let [json,arr,a1,a2] = [{
   a:12,b:5},[12,4,6],6,'deffw'];

数组

1. 多了四个方法

• map 映射
• reduce 汇总
• filter 过滤器
• foreach 循环

//map  let score = [11,23,54,76,86];  let result = score.map(item => item>=60 ? '及格' : '不及格')  alert(result)//reduceresult = score.reduce(function(temp , item , index){
     return temp+item;})alert(result)//求平均数：result = score.reduce(function(temp , item , index){
     if(index == score.length - 1){
       return (item+temp)/score.length  }  return temp+item;})//filter，返回的是item本身let arr = [1,2,3,4,5,6,7,8];result = arr.filter(item=>{
     return item%2 == 0 ? true : false;})alert(result);let cloth = [  {
   title:'男士衬衫',price:123},  {
   title:'男士衬衫2',price:134},  {
   title:'女士衬衫',price:123321},  {
   title:'女士衬衫',price:123111}];let result = cloth.filter(item=>item.price >= 10000);console.log(result);//forEachcloth.forEach((item,index)=>{
     alert(index+':'+ item.title);})

字符串

1. 多了两个方法
   str.startsWith()
   str.endsWith()
2. 字符串模板

ES6面向对象

创建对象

老版本

function User(name,pass){
     this.name = name;  this.pass = pass;}User.prototype.showName = function(){
     alert(this.name);}User.prototype.showPass = function(){
     alert(this.pass);}var url = new User('wxf','111111');url.showName();url.showPass();

新版本

class User{
     constructor(name,pass) {
         this.name = name;    this.pass = pass;  }  showName(){
       alert(this.name);  }  showPass(){
       alert(this.pass);  }}let u = new User('wxf','111111');u.showName();u.showPass();

继承

老版本继承

function User(name,pass){
     this.name = name;  this.pass = pass;}User.prototype.showName = function(){
     alert(this.name);}User.prototype.showPass = function(){
     alert(this.pass);}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);}var v1 = new VipUser('wxf',111111,3);v1.showName();v1.showPass();v1.showLevel();

新版本

class User{
     constructor(name,pass) {
         this.name = name;    this.pass = pass;  }  showName(){
       alert(this.name);  }  showPass(){
       alert(this.pass);  }}class VipUser extends User{
     constructor(name,pass,level){
       super(name,pass);    this.level = level;  }  showLevel(){
       alert(this.level);  }}let vip1 = new VipUser('wxf',111111,1);vip1.showName();vip1.showPass();vip1.showLevel();

JSON

• JSON对象
• 简写
  • 名字一样
  • 方法

json对象

let json = {
   "a" : 1 , "b" : 5};alert(JSON.stringify(json));//json标准写法,//key为双引号let str = '{"a" : 12 , "b" : 3}';alert(JSON.parse(str))

简写

//老版本		let json = {
   "a" : "a" , "b" : "b"};		console.log(json)				//简写,名字和值一样的时候,保留一个就行		let a = 12;		let b = 34;		let json2 = {
   a,b}		console.log(json2)    //新版本：//里面如果有function，直接可以和写es6的类一样		let json = {
   			a:12,			showA(){
   				alert(this.a);			}		}		json.showA();

promise

用同步的语法去写异步

异步：多线程，代码复杂

Promise.all()

简单封装一下

jquery已经封装好了的异步

转载地址：https://blog.csdn.net/qq_40666620/article/details/100711877 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！