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