ES6入门简介

1.变量
var 可以重复声明、函数级
let 不能重复声明、块级、变量
const 不能重复声明、块级、常量

2.箭头函数
a.方便
①如果只有一个参数,()可以省。
②如果只有一个return,{}也可以省。

eg:正常函数
  var getPrice = function(){
  	  return 4.55;
  };

箭头函数
var getPrice=()=>4.55;

b.修正this
this相对正常点。
3.参数扩展
①收集
②扩展
eg:

  示例1:
  <script>
       function show(a,b,...arg){
       	alert(a);
       	alert(b);
       	alert(arg);
       }

       show(12,5,8,9,22,5,6,4);
       //12
       //5
       //8,9,22,5,6,4
	</script>

示例2:
<script>
	let arr=[12,5,8];
	let arr2=[...arr,...arr];
	alert(arr2);//12,5,8,12,5,8
</script>  

③默认参数

   function calc(x,y){
       x = x||0;
       y = y||0;
       //to do with x,y
       //return x/y
   }

简单地说就是x,y提供了一个默认值为0,不传时x,y以值0来运算,传了就以实际值计算。

4.数组方法
①map 映射

let arr=[12,5,8];
    let result = arr.map(function(item){
        return item*2;
    });
    alert(result);

②reduce 汇总:一堆数据------->一个

<script>
	let arr = [12,69,180,2345];
	let result = arr.reduce(function(tmp,item,index){
       return tmp+item;
	});
    alert(result);//2606 四个数的总和
</script>

③filter 过滤

  <script>
       let arr = [12,5,65,54,787,89];
        let result = arr.filter(item=>item%3==0);
        alert(result);//12,54
	</script>

④forEach 循环

<script>
    let arr = [12,5,8,9];
    let result= arr.forEach((item,index)=>{
       alert(index+':'+item);
    });
    console.log(result);
    //0:12
    //1:5
    //2:8
    //3:9 
</script>

5.字符串
①startsWith/endsWith:判断bool值,数据以什么开头,以什么结尾。

<script>
	let str = "asdagfgdf";
	alert(str.startsWith('a'));//true 字符串是以a开头的
</script>

<script>
let str = '1.txt';
if(str.endsWith('1.txt')){
	alert('文本文件');

}else if(str.endsWith('.jpg')){
	alert('JPJ图片');

}else{
	alert('其他');
}
//输出结果:文本文件

②字符串模板:
a.能折行
b.可以直接加入新数据 ‘axxx{a}xxx{b}’

 	<script>
	let title='标题';
	let content='内容';
	let str=`<div>
	        <h1>${title}</h1>
	        <p>${content}</p>
	        </div>`;
 </script> 

6.Promise 承诺
封装异步操作:有三种状态
①Pending 进行中
②Resolved 已完成
③Rejected 已失败

<script>
	let p = new Promise(function(resolve,reject){
       //异步代码
       //resolve---成功了
       //reject----失败了
       
       alert(resolve);
       $.ajax({
          url:'arr.txt',
          dataType:'json',
          success(arr){
          	resolve(arr);
          },
          error(err){
          	reject(err);
          }
       })
	});

	p.then(function(){
		alert('成功');
	},function(){
		alert('失败了');
	});
</script>

Promise就是用同步的方式写异步的代码,用来解决回调问题。

7.generator 生成器
yield 暂时中止
ps:*可以靠近function,可以写中间,也可以靠近show,不能写成function*show的样式。

  function * show(){
      yield
   }

8.JSON

   JSON.stringify({a:12,b:5}) => '{"a":12,"b":5}'
   JSON.parse('{"a":12,"b":5}') => {a:12,b:5}

9.面向对象

  class Test{
    constructor(){
       this.xxx=
     }
     方法1(){
     }
     方法2(){
     }
  }
class Cls2 extends Cls1{
   constructor(){
     super();//父类(基类)
   }
}

10.解构赋值

let [a,b,c]=[12,5,8]
左右结构一样
右边是个合法的东西
声明、赋值一次完成

<script>
	let[a,b,c]=[1,2,3];
	console.log(a,b,c);//1,2,3
</script>
<script>
	let{a,b,c}={a:12,b:13,c:18};
    console.log(a,b,c);//12,13,18
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章