ES6

发表于： 2019年1月20日 2019年1月21日
分类： Javascript

变量
js传统变量缺点
1.可以重复声明

var a=11;
var a=12;
console.log(a);

2.无法限制修改（没有常量）
3.没有块级作用域

ES6变量改进
let 不能重复声明变量（可以修改）
const 不能重复声明常量（无法修改）

let a=5;
let a=6;
console.log(a);

报错：
Uncaught SyntaxError: Identifier ‘a’ has already been declared

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script type="text/javascript">
  window.onload=function(){
      var btnObj=document.getElementsByTagName('button');
      for(var i=0;i<btnObj.length;i++){
			  btnObj[i].onclick=function(){
			  alert(i);
			  }  
      }
  }
</script>
点击任何一个按钮都弹出3

改进方法①

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script type="text/javascript">
    window.onload = function () {
        var btnObj = document.getElementsByTagName('button');
        for (var i = 0; i < btnObj.length; i++) {
            (function (i) {
                btnObj[i].onclick = function () {
                    alert(i);
                }
            })(i);
        }
    }
</script>

改进方法②

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script type="text/javascript">
    window.onload = function () {
        var btnObj = document.getElementsByTagName('button');
        for (let i = 0; i < btnObj.length; i++) {
                btnObj[i].onclick = function () {
                    alert(i);
                }
        }
    }
</script>

函数箭头函数
如果只有一个参数,()可以省
如果只有一个return，return和{}可以省

  let func=function(a){
     return a*2;
  }
  alert(func(3));

  let func=(a)=>{
     return a*2;
  }
  alert(func(3));

  let func=a=>{
     return a*2;
  }
  alert(func(3));

  let func=a =>a*2
 
  alert(func(3));

箭头函数改写arr.sort

改写前

  let arr=[1,23,13,25];
  arr.sort(function(a,b){
  return a-b;
  })
  alert(arr);

改写后

  let arr=[1,23,13,25];
  arr.sort((a,b)=>a-b)
  alert(arr);

函数参数
参数扩展（…args必须是最后一个，名字随便定义）
①收集参数

  function func(a,b,...args){
   alert(a);  //1
   alert(b);  //2
   alert(args);  //3,4,5,6
  }
 
  func(1,2,3,4,5,6);

②展开数组

let arr=[1,2,3];
function func(a,b,c){
alert(a);  
alert(b);
alert(c);
}
func(...arr);  //依次弹出 1,2,3 
 
let arr2=[4,5,6];
alert([...arr,...arr2]);     // 1,2,3,4,5,6

解构赋值：
左右两边必须一样
右边必须是个东西
声明和赋值不能分开（必须在一句话里完成）

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

let {a,b,c}={a:3,b:4,c:5};
console.log(a,b,c);  //3 4 5   变量名必须对应json对象中的键

let [{a,b,c},[n1,n2],str,num]=[{a:3,b:4,c:5},[6,7],8,9];
console.log(a,b,c,n1,n2,str,num);  //3 4 5 6 7 8 9

let [json,arr,str,num]=[{a:3,b:4,c:5},[6,7],8,9];
console.log(json,arr,str,num);  //Object { a: 3, b: 4, c: 5 }  Array [ 6, 7 ]  8 9

数组
①map 映射

let arr=[11,22,33];
let res=arr.map(function(item){
  return item*2;
})
alert(res);  //22,44,66

let arr=[33,61,90,22];
let res=arr.map(item=>item>=60?'及格':'不及格');
alert(res)  //不及格,及格,及格,不及格

②reduce 汇总
求和

let arr=[1,3,5,7,9];
let res=arr.reduce(function(temp,item,index){
	console.log('temp '+temp);
	console.log('item '+item);
    return temp+item;
})
console.log(res);
 
temp 1
item 3
temp 4
item 5
temp 9
item 7
temp 16
item 9
25

求平均数：

let arr=[1,3,5,7];
let res=arr.reduce((temp,item,index)=>{
     if(index!=arr.length-1){
	   return temp+item;
	 }else{
	   return (temp+item)/arr.length;
	 }
})
console.log(res);  //4

箭头函数简化：

let arr=[1,3,5,7];
let res=arr.reduce((temp,item,index)=>index==(arr.length-1)?(temp+item)/arr.length:(temp+item))
console.log(res);  //4

③filter 过滤器
demo1

let arr=[12,33,11,17];
let res=arr.filter((item)=>{
  if(item%3==0){
  return true;
  }else{
  return false;
  }
})
alert(res)  //12,33

demo2

let arr=[12,33,11,17];
let res=arr.filter((item)=>{
  return item%3==0
})
alert(res)  //12,33

④forEach 循环(迭代)

字符串
startsWith()

let str="https://www.baidu.com/";
if(str.startsWith('https')){
  alert('以https开头');
}

endsWith()

let str="1.txt";
if(str.endsWith('txt')){
  alert('我是一个文本文件');
}

字符串模板

let title="这里是标题";
let content="内容";
 
let str="<div>\
<h1>"+title+"</h1>\
<h2>"+content+"</h2>\
</div>";
 
let str2=`<div>
<h1>${title}</h1>
<h2>${content}</h2>
</div>`;
 
document.write(str);
document.write(str2);

ES6面向对象

<script type="text/javascript">
   //创建类
   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);  //super指向的是当前对象的原型对象
           this.level=level;
       }
 
       showLevel(){
           alert(this.level);
       }
   }
 
   //实例化
   var vip=new VipUser('XIAOMING','123456','VIP');
 
   vip.showName();
   vip.showPass();
   vip.showLevel();
</script>

ES6 JSON

        let a= 1,
            jsonTest ={
                a,//当key值和valuew值相同时可省略写法
                fn(){//书写json方法可以省去繁琐的function
                  console.log('这是fn的输出'+123);
                }
            };
        console.log(jsonTest,jsonTest.a);
        jsonTest.fn();

无心者

最难走的路，往往是上坡路。

224

无心者

发表评论 取消回复

发表评论取消回复