ES6知识点大汇总

  1 //1.搭建ES6的开发环境；
  2 let a=1;
  3 console.log(a);
  4 //2.var 声明的是全局变量   全局变量会污染外部的区块
  5 //let 局部变量
  6 //const 常量  声明了就不能改变
  7 var b='zhangfan';
  8 //console.log(b);
  9 window.onload=function(){
 10     //console.log(b);   //zhangfan  能看出是全局变量
 11 };
 12 {
 13     var b='zf';
 14 }
 15 //console.log(b);//zf  覆盖了zhangfan
 16 {
 17     let b='fz';
 18     console.log(b);//fz
 19 }
 20 console.log(b);//zf
 21 const c='zfa';
 22 console.log(c);
 23 for(var f=1;f<10;f++){
 24     console.log('循环内'+f);//1~9
 25 }
 26 console.log('循环外'+f);//10
 27 for(let h=1;h<10;h++){
 28     console.log('循环内'+h);//1~9
 29 }
 30 //console.log('循环外'+h);//报错
 31 //3.解构赋值 常用于前后端分离对json文件的解构
 32 /*let [aa,bb,cc]=[0,1,2];
 33 console.log(aa);
 34 console.log(bb);
 35 console.log(cc);*/
 36 /*let [aa,[bb,cc],dd]=[0,1,2,3]
 37 console.log(aa);
 38 console.log(bb);
 39 console.log(cc);
 40 console.log(dd);*/ //报错
 41 let [aa,[bb,cc],dd]=[0,[1,2],3];
 42 console.log(aa);
 43 console.log(bb);
 44 console.log(cc);
 45 console.log(dd);
 46 let [foo=true]=[];
 47  console.log(foo);//true
 48 let [uu,mm='zd']=['sg'];
 49 console.log(uu + mm);//sgzd
 50 //undefined,null
 51 let [uu1,mm1='zd']=['sg',undefined];//没有值，所以取默认值
 52 console.log(uu1 + mm1);//sgzd
 53 let [uu2,mm2='zd']=['sg',null];//null有值但为空
 54 console.log(uu2 + mm2);//sgnull
 55 //对象解构
 56 let {foo1,bar}= {foo1:'sd',bar:'sf'};//必须一一对应
 57 console.log(foo1 + bar);//sdsf
 58 let foo2;
 59 ({foo2}={foo2:'jspang'});//必须加（）
 60 console.log(foo2);
 61 //字符串的解构
 62 const [w,e,r,t,y,g]='jspang';
 63 console.log(w);//j
 64 console.log(e);//s
 65 console.log(r);//p
 66 console.log(t);//a
 67 console.log(y);//n
 68 console.log(g);//g
 69 // 4.对象扩展运算符和rest运算符
 70 //对象扩展运算符
 71 function jspang(...arg){
 72     console.log(arg[0]);//1
 73     console.log(arg[1]);//2
 74     console.log(arg[2]);//3
 75     console.log(arg[3]);//undefined
 76 }
 77 jspang(1,2,3);
 78 //以前的写法：
 79 function js(a,b,c){
 80     console.log(a);//1
 81     console.log(b);//2
 82     console.log(c);//3
 83 }
 84 js(1,2,3);
 85
 86 let arr1=['happy','ha','fa'];
 87 let arr2=arr1;
 88 console.log(arr2);//["happy", "ha", "fa"]
 89 arr2.push('ma');
 90 console.log(arr1);//["happy", "ha", "fa", "ma"]
 91 // 运用扩展运算符解决问题：
 92 let arr3=['happy','ha','fa'];
 93 let arr4=[...arr3];
 94 console.log(arr4);//["happy", "ha", "fa"]
 95 arr4.push('ma');
 96 console.log(arr4);//["happy", "ha", "fa", "ma"]
 97 console.log(arr3);//["happy", "ha", "fa"]
 98 //rest(剩余)运算符...
 99 function Jspang(first,...arg){
100     console.log(arg.length);//7
101  //获取元素以前的写法：
102  for(let i=0;i<arg.length;i++){
103      console.log(arg[i]);//1,2,3,4,5,6,7
104  }
105  //新的写法：
106  for(let val of arg){
107      console.log(val);//1 2 3 4 5 6 7
108  }
109 }
110 Jspang(0,1,2,3,4,5,6,7)
111 //5.字符串模板
112 //以前的写法：
113 let happy='haha';
114 let blog='今天非常高兴'+happy+'啊';
115 console.log(blog);//今天非常高兴ha
116 //es6的新写法：
117 let happy1='haha';
118 let g1=5;
119 let l=6;
120 let blog1=`<h1>今天</h1>非常<br/>高兴${happy1}啊${g1+l}`;
121 console.log(blog1);
122 //查找
123 let hh='我很好';
124 let ll='今天天气很冷，但是我很好';
125 console.log(ll.indexOf(hh));//9
126 console.log(ll.includes(hh));//true  //查找有没有此字符串
127 console.log(ll.startsWith(hh));//false//查找开头有没有此字符串
128 console.log(ll.endsWith(hh));//true//查找结尾有没有此字符串
129 //字符串的复制
130 document.write('zhangfan'.repeat(3))//zhangfan zhangfan zhangfan
131 //6.数字的操作
132 //二进制声明Binary
133 let binary=0o10101;
134 console.log(binary);//4161
135 //八进制声明Octal
136 let octal=0o666;
137 console.log(octal);//438
138 let aw=11/4;
139 console.log(Number.isFinite(aw));//true//isFinite判断是否是数字
140 console.log(Number.isFinite('aa'));//false//isFinite判断是否是数字
141 console.log(Number.isFinite(NaN));//false
142 console.log(Number.isFinite(undefined));//false
143 //NaN
144 console.log(Number.isNaN(NaN));//true
145 //Number.isInteger  判断是否是一个整数
146 let ee=918.16;
147 console.log(Number.isInteger(ee));//整型 //false
148 console.log(!Number.isInteger(ee));//浮点型  //true
149 console.log(Number.parseInt(ee));//转换成整型 //918
150 console.log(Number.parseFloat(ee));//转换成浮点型 //918.16
151 let jsp=Math.pow(2,53)+1;
152 console.log(jsp);//9007199254740992  2的53次方 最大值
153 console.log(Number.MAX_SAFE_INTEGER);//9007199254740991最大安全整数
154 console.log(Number.MIN_SAFE_INTEGER);//-9007199254740991最小安全整数
155 console.log(Number.isSafeInteger(jsp));//false判断是否是安全整数 false，将+1去掉就是true;
156 //7.有关数组的知识
157 //json数组格式
158 let json={
159     '0':'jspa',
160     '1':'技术胖',
161     '2':'jspa',
162     length:3
163 };
164 //Array.from方法
165 let arr=Array.from(json);  //将对象转换成数组
166 console.log(arr);//['jspa','技术胖','jspa']
167 //Array.of方法
168 //‘3，4，5，6’
169 let arry=Array.of(3,4,5,6);
170 console.log(arry);//[3,4,5,6]
171
172 //普通方法：
173
174 let stt='[3,4,5,6]';
175
176 let arr5=eval(stt);
177
178 console.log(arr5);//[3, 4, 5,
179 // //find() 实例方法  查找数组元素
180 let arr6=[1,2,3,4,5,6,7];
181 console.log(arr6.find(function (value, index, arr) {//value查找的值 index值的索引 arr原型
182     return value > 5;
183 }));//6
184 let arr0=['jspa','技术胖','jspaa'];
185 console.log(arr0.find(function (value, index, arr) {//value查找的值 index值的索引 arr原型
186     return value =='jspa';
187 }));//jspa
188  //fill  填充替换
189  let arr7=['jspa','技术胖','jspaa'];
190  arr7.fill('web',1,3);//将数组中1-3中间的元素换成web;
191  console.log(arr7);//['jspa','web','web']
192  //数组循环
193  //以前的方法：
194  let arr8=[1,2,3,4,5,6,7,8];
195  for(let i=0;i<arr8.length;i++){
196      console.log(arr8[i]);//1 2 3 4 5 6 7 8
197  }
198 //新方法：
199 for(let item of arr8){
200     console.log(item);//1,2,3,4,6,7,8
201 }
202 for(let item of arr8.keys()){  //输出数组的下标
203     console.log(item);//0,1,2,3,4,6,7
204 }
205 for(let item of arr8.entries()){//输出数组的下标和元素
206     console.log(item);//[0,1] [1,2] [2,3]
207 }
208 for(let [index,val] of arr8.entries()){//输出数组的下标和元素
209     console.log(index+':'+val);//0:1 1:2 2:3...
210 }
211  //8.entries 条目 记录
212  let arr9=['jspa','技术胖','jspaa'];
213  let list=arr9.entries();
214  console.log(list.next().value);//[0,'jspa']
215  console.log('........');
216  console.log(list.next().value);//[1,'技术胖']
217  console.log('........');
218  console.log(list.next().value);//[2,'jspaa']
219 //9.函数的扩展  箭头函数
220 //es5函数
221 function add(a,b){
222     return a+b;
223 }
224 console.log(add(1, 2));//3
225 //es6函数  默认值
226 function add2(a,b=1){
227     if(a==0){
228         throw new Error('A is Error')
229     }
230     return a+b;
231 }
232 console.log(add2(1));//2
233  function add3(a,b=1){
234      //'use strict';  //严谨模式
235      return a+b;
236  }
237  //console.log(add3(1));//报错
238 console.log(add3(1, 2));//3
239 console.log(add2.length);//1  获得需要传递参数的个数
240 //箭头函数
241 var add4=(q,o=1) => q+o;
242 console.log(add4(1));//2
243 var add4=(q,o=1) => {return q+o};
244 console.log(add4(2));//3
245 var add4=(q,o=1) => {
246     console.log('11111');
247     return q+o;
248 } ;
249 console.log(add4(3));//4
250  //10.函数和数组
251  //对象的函数解构json
252  let json2={
253      a:'jspang',
254      b:'web'
255  }
256  function fun({a,b='web2'}){
257      console.log(a, b);//jspang web
258  }
259  fun(json2);
260  //数组解构
261  let aar=['jspang','jishu','前端教程'];
262  function fun2(a,b,c){
263      console.log(a, b, c);
264  }
265  fun2(...aar);//jspang jishu 前端教程
266 //in的用法
267 let obj={
268     a:'jishupang',
269     b:'fafa'
270 };
271 console.log('a' in obj);//true 判断对象里是否有a
272 //判断数组
273 let aaa=[,,,];
274 console.log(1 in aaa);//false
275 let aaa1=['gg',,,];
276 console.log(0 in aaa1);//t
277 //数组遍历 1.forEach
278 let ss=['aa','ff','gg'];
279 ss.forEach((val,index)=>console.log(index,val));//0 'aa' 1 'ff' 2 'gg'
280 //2.filter
281 ss.filter(x=>console.log(x));//aa ff gg
282 //3.some
283 ss.some(x=>console.log(x));//aa ff gg
284 //4.map 替换
285 console.log(ss.map(x=>'web'));//["web", "web", "web"]
286 //数组转换成字符串
287 console.log(ss.toString());//aa,ff,gg
288 console.log(ss.join('|'));//加入 aa|ff|gg
289 //11.es6对象
290 //对象的赋值
291 //es5对象的赋值：
292 let name='zhangfan';
293 let skill='web';
294 let obj1={
295     name:name,
296     skill:skill
297 };
298 console.log(obj1);//{name: "zhangfan", skill: "web"}
299 //es6对象的赋值：
300 let obj2={
301     name,
302     skill
303 };
304 console.log(obj2);//{name: "zhangfan", skill: "web"}
305 //key值的构建
306 let key='skill';
307 var obj0={
308     [key]:'web'
309 }
310 console.log(obj0);//{skill:'web'}
311 //自定义对象的方法：
312 let obj3={
313     add:function(a,b){
314         return a+b;
315     }
316 }
317 console.log(obj3.add(1, 2));//3
318 //is() 对两个对象进行比较
319 let obj4={name:"zzzz"};
320 let obj5={name:"zzzz"};
321 //es5方法：
322 console.log(obj4.name === obj5.name);//true
323 //es6方法：
324 console.log(Object.is(obj4.name, obj5.name));//true
325 //同值相等
326 console.log(+0 === -0);//true
327 console.log(NaN === NaN);//false
328 //严格相等
329 console.log(Object.is(+0, -0));//false
330 console.log(Object.is(NaN, NaN));//true
331 //assign  对象的合并
332 let dd1={dd:'ww'};
333 let ddd={ddd:'www'};
334 let dddd={dddd:'wwww'};
335 let d2=Object.assign(dd1,ddd,dddd);
336 console.log(d2);//{dd: "ww", ddd: "www", dddd: "wwww"}
337 //12.Symbol 数据类型
338 let p1=new String;
339 let p2=new Number;
340 let p3=new Boolean;
341 let p4=new Array();
342 let p5=new Object;
343 let f1=Symbol();
344 console.log(typeof f1);//symbol
345 console.log(typeof p1);//object
346 console.log(typeof p2);//object
347 console.log(typeof p3);//object
348 console.log(typeof p4);//object
349 console.log(typeof p5);//object
350
351  let jspang2=Symbol('jishupang');
352  console.log(jspang2);//Symbol('jishupang') 红色的
353  console.log(jspang2.toString());//Symbol('jishupang') 黑色的
354
355  let jspang3=Symbol();
356  let obj6={
357      [jspang3]:'jspo'
358  }
359  console.log(obj6[jspang3]);//jspo
360  obj6[jspang3]='webd';
361  console.log(obj6[jspang3]);//webd
362
363 let obj7={name:'jsp',skill:'web'};
364 let age=Symbol();
365 obj7[age]=18;
366 console.log(obj7);//{name: "jsp", skill: "web", Symbol(): 18}
367 for(let item in obj7){
368     console.log(obj7[item]);//jsp web
369 }
370 console.log(obj7[age]);//18
371  //13.Set  数组去重
372  let setArr=new Set(['jsp','技术胖','webb','jsp']);
373  console.log(setArr);//Set{'jsp','技术胖'，'webb'}
374  //has 查找
375  console.log(setArr.has('jsp'))//true
376  //clear() 全部删除
377  //setArr.clear();
378  //console.log(setArr);//Set{}
379  //delete() 删除
380  setArr.delete('webb');
381  console.log(setArr)//Set{'jsp','技术胖'}
382 //循环输出  for...of
383 for(let item of setArr){
384     console.log(item);
385 };
386 //forEach
387 setArr.forEach((value)=>console.log(value));//jsp,技术胖
388 //size  属性
389 console.log(setArr.size);//2
390 //WeakSet
391 let weakObj=new WeakSet();
392 let obj9={a:'jsp',b:'webb'};
393 let obj99={a:'jsp',b:'webb'};
394 weakObj.add(obj9);
395 weakObj.add(obj99);
396 console.log(weakObj);//WeakSet{Object{a:'jsp',b:'webb'},Object{a:'jsp',b:'webb'}}
397  //14.map 数据类型  很重要，很灵活
398  let jason={
399      name:'ff',
400      skill:'webl'
401  };
402  console.log(jason.name);//ff
403 //=>
404 var map=new Map();
405 //set
406 map.set(jason,'iam');
407 console.log(map);///Map(1) {{…} => "iam"}
408 map.set('jsonb',jason);
409 console.log(map);///Map(2) {{…} => "iam", "jsonb" => {…}}
410 //map增删查
411 //get
412 console.log(map.get(jason));//iam    jason为key iam为value
413 console.log(map.get('jsonb'));//{name: "ff", skill: "webl"}  //'jsonb'为key jason为value
414
415 //delete  clear
416 map.delete(json);
417 console.log(map);
418 console.log(map.size);//2
419 //查找 has
420 console.log(map.has('ff'));//false
421 // //15.proxy 代理  增强对象和函数（方法）vue生命周期 钩子函数 预处理
422 let obje={
423     add:function(val){
424         return val+100;
425     },
426     name:'I am Jaspang'
427 }
428 console.log(obje.add(100));//200
429 console.log(obje.name);//i am jaspang
430
431  let pro=new Proxy({
432      add:function(val){
433          return val+100;
434      },
435      name:'I am Jaspang'
436  },{
437      //预处理机制 get set apply
438      get:function(target,key,property){
439          console.log('come in get');
440          return target[key];
441      },
442      set:function(target,key,value,receiver){
443          console.log(`setting ${key}=${value}`);//setting name=技术胖
444          return target[key]=value;//返回结果
445      }
446  });
447  console.log(pro.name);//come in get
448  pro.name='技术胖';
449  console.log(pro.name)//技术胖
450 //apply
451 let target=function(){
452     return 'i am zhangfan'
453 }
454 let handler={
455     apply(target,ctx,args){
456         console.log('do apply');
457         return  Reflect.apply(...arguments);
458     }
459 };
460 let pro1=new Proxy(target,handler);//handler为预处理
461 console.log(pro1());//i am zhangfan
462 //16.promise  解决es5中回调地狱问题
463 let state=1;
464 function step1(resolve,reject){
465     console.log('1.开始，洗菜做饭');
466     if(state==1){
467         resolve('洗菜做饭完成')
468     }else{
469         reject('洗菜做饭错误')
470     }
471 }
472 function step2(resolve,reject){
473     console.log('2.开始，坐下来吃饭');
474     if(state==1){
475         resolve('坐下来吃饭完成')
476     }else{
477         reject('坐下来吃饭错误')
478     }
479 }
480 function step3(resolve,reject){
481     console.log('3.开始，收拾桌子洗碗');
482     if(state==1){
483         resolve('收拾桌子洗碗完成')
484     }else{
485         reject('收拾桌子洗碗错误')
486     }
487 }
488 new Promise(step1).then(
489     function(val){
490         console.log(val);
491         return new Promise(step2)
492     }
493 ).then(
494     function(val){
495         console.log(val);
496         return new Promise(step3)
497     }
498 ).then(
499     function(val){
500         console.log(val);
501     }
502 )
503 //17.class类
504 class Coder{
505     name(val){
506         console.log(val);//大技术胖
507         return val;
508     }
509     skill(val){
510         console.log(this.name('大技术胖') + ':' + 'skill-' + val);
511     }
512     //类的传参
513     constructor(a,b){
514         this.a=a;
515         this.b=b;
516     }
517     add(){
518         return this.a+this.b;
519     }
520 }
521 let jspang1=new Coder;
522 //jspang1.name('大技术胖');
523 jspang1.skill('web');
524 let ha=new Coder(1,2);
525 console.log(ha.add());//3
526 //类的继承
527 class htmler extends Coder{};
528 let pang=new htmler;
529 console.log(pang.name('大技术胖'));
530 //18.模块化操作
531 //export 输出操作
532 //import 引入操作
533 //1.export的引入方式
534 //import {name,cname,skill} from './temp';
535 //console.log(name);
536 //2.export default的引入方式
537 //import shy from './temp';
538 //console.log(shy);
539 //src/babel-node index.js