es6 个人学习记录

1.配置node：

1. 去网上找到node安装包进行安装
2. 安装后需要在dos输入命令检查是否安装成功：npm - v &node - v

2.配置webpack：（HBuilder X）

1. 在git下载es6-webpack配置文件
2. 导入webpack：文件 - 打开目录 - 选择对应的包导入
3. 打开 HBuilder X 的终端（没有的需要先安装终端，如果内置终端无法使用，则需要在dos下对应文件夹下进行操作）
4. 输入指令：
   1. npm install – 本地安装，会根据package.json中的依赖去外国的服务器上下载所需的包 （如下载出现问题（error）可通过cnpm下载）
   2. npm install webpack -g --全局安装
   3. npm install webpack -server -g
   4. npm start --启动项目 （如跳出浏览器页面则成功安装）

3.es6参数及操作

1. 前端js文件可以建立多个，然后用导入的方式配置在主页面js文件下，用法如下：

   import 导入名 from ‘文件路径’

   用此方法可以在主页面js下使用导入的js中的函数/方法

2. let 和 var 的区别：

   let是遵循作用域的，属于局部变量，而var是全局变量

3. const:

   es3 - es5 设置常量的方式,将当前变量挂载到window对象下面,通过writable:false禁止写入来实现常量

   const是es6用来设置常量的方式，语法示例：const PI = 3.14

4.解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

1. es6中的结构赋值 如果赋值不正确，会出现undefined

   let [xiaoming, [xiaohong, xiaogang]] = ["小明", ["小红", "小刚"]]
   

2. 将变量变成一个数组，如果多变量同时赋值时，数组必须放在最后赋值

   let [xiaomi, huawei, ...apple] = ["小米10", "荣耀10", "iphoneX", "iphone11", "iphone11 pro"];
   

3. 赋值规则按照对应的位置赋值，一个萝卜一个坑

   let [, , a1] = [12,32,43]     
   //此时a1 = 43
   

4. function* fids() {
   	let a = 1;
   	let b = 2;
   	while (true) {
   		console.log("前")
   		console.log("前",b)
   		yield b;
   		console.log("后");
   		[a, b] = [a, a+b];
   		console.log("后",b)
   	}
   }
   let [c,d,e,f] = fids();
   

   此例子中，除了第一个遍历的参数是正常循环，后面的参数都是从yield后面开始循环，属于Generator 函数

5. 默认值

   1. 当不能正常赋值时，可以提供默认选项（右边括号没有值，a = true，有值，a = 当前值）
      如果在给定默认值的情况下，赋值为undefined 将不再进行赋值

      let [a = true , b = 2] = [1,undefined];
      

   2. 元素默认值是函数时的赋值方法

      function fun(){
      	console.log("这是一个方法")
      	return 121;
      }
      let [a = fun()] = [undefined];
      

   3. //在赋值的先后顺序也会影响结果

      let [x = y , y = 1] = []
      
      //此时x = undefined
      

5.对象的解构赋值

1. 对象的解构赋值是根据名字来赋值，而不是顺序
   可以用这种方法获取json数据的值，非常方便

   let{a,b,c} = {c:1,b:2,a:3};
   

2. 将对象中的方法和变量中的名字进行匹配，如果匹配成功，就可以直接通过变量名来调用指定的方法

   let {log , cos , sin} = Math;
    console.log(sin(30))
   
   const {log} = console;
   log('hello');
   

3. 解决变量名和属性名不一致的情况

   let {foo:baz} = {foo:'aaa',bar:'bbb'}     //此时baz = ‘aaa’     foo在这里作为了一个中转站
   

4. 嵌套对象解构赋值

   let obj = {
   	p:[
   		"hello",
   		{y:"world"}
   	]
   }
   let{p,p:[a,{y:b}]} = obj;
   b = "world"
   

5. 注意，对象的解构赋值可以取到继承的属性。

   const obj1 = {};
   const obj2 = { foo: 'bar' };
   //通过设置obj1的原型，使obj1可以使用obj2的内容
   Object.setPrototypeOf(obj1, obj2);
   
   const { foo } = obj1;
   foo // "bar"
   

6. 对象的解构也可以指定默认值

   对象解构中的默认值
    var {a = 2,b:test} = {b:3};
    console.log(a);//2
    console.log(test);//3
   

6.字符串的解构赋值

1. 可将字符串进行分解，赋值给每一个变量

   let [a , b ,c , d,e] = "hello";
    console.log(a);//h
    console.log(b);//e
    console.log(c);//l
    console.log(d);//l
    console.log(e);//o
   

2. 数组中的length属性可以直接赋值

   let {length:len} = "hello";
    console.log(len);//5
   

3. 对于String的扩展
   在es6中为字符串增加了遍历的方法，可以直接进行字符串的遍历

   for(let codePoint of "good afrernoon"){
    	console.log(codePoint);
    }
   

7.数值和布尔类型的解构赋值

1. 判断赋值内容是不是一个数字

    let {toString:s} = "123";
    console.log(s === Number.prototype.toString)
   

2. 判断指定的对象是不是一个数组

    let a = "test";
    let {toString:s} = a;
    console.log(s === Array.prototype.toS tring);
    console.log(typeof a);
   

8.关于函数的解构赋值

1. 函数的参数也可以使用解构赋值。

   function add([x, y]){
     return x + y;
   }
   
   add([1, 2]); // 3
   

2. map 遍历的一个方法，遍历集合 map（每次遍历的具体操作）

    //=> 箭头函数
    console.log([[1,2],[3,4]].map(([a,b]) => a+b))
    //代码原理同上
   

3. 对参数进行解构分析，如果能解析成功就赋值，如果不能就赋默认值

    function move({x = 0,y = 0}){
    	return[x,y];
    }
   
   console.log(move({x:1,y:2}))
   

4. 如果在参数中使用解构赋值，当调用方法传参的时候会覆盖解构赋值等号右边的内容
   建议在实际开发过程中将默认值写在等号左边

function move({x,y} = {x:1,y:2}){
	return[x,y];
}
console.log(move({x:3}))//3,undefined

5. 参数的解构赋值，undefined就会触发函数参数的默认值。

   [1, undefined, 3].map((x = 'yes') => x);
   // [ 1, 'yes', 3 ]
   

6. 一下返回多个值的情况

    function fun(){
    	return [1,2,32,5,34,5,3]
    }
    //通过解构赋值就可以更快速的去把返回值处理掉
    let [a,b,c,d,e,f] = fun();
    console.log(a);
   

7. 获取json数据实例

   let jsonData = {
   	id:'1',
   	userName:'admin',
   	data:{
   		success:'true'
   	}
   }
   let {id,userName,data,data:{success}} = jsonData;
   console.log(data);//true
   

8. 创建一个map对象 通过一个键值对的方式来存储数据

    let map = new Map();
    map.set("firstName","Tom");
    map.set("lastName","jerry");
    //通过键的方式来获取指定的值
    // var firstName = map.get("firstName")
    // console.log(firstName);
    //遍历输出map集合中的内容
    for([key,value] of map){
    	console.log(key+"+"+value)
    }
   

9.对于函数的扩展

1. 设定默认值

   //es3-es5判断默认值方法
   function fun(x,y){
   	if(x === undefined){
   		x = 'hello'
   	}
   	if(y === undefined){
   		y = 'world'
   	}
   	console.log("x",x);
   	console.log("y",y);
   }
   fun("good","morning");//x,good y,afternoon
   //es6允许在方法中直接给参数设定默认值
   function fun(x,y = 'world'){
   	console.log(x+'---'+y)
   }
   fun("hello");//hello---world
   
   

2. 参数变量是默认声明的，所以不能用let或const再次声明。

   function foo(x = 5) {
     let x = 1; // 报错
     const x = 2; // 报错
   }
   

3. 在方法传参的时候,绝对不能去传相同名字的参数

   function fun(x,x,y){
   	console.log(x);
   }
   fun(1,2,3);//报错
   

4. 在函数的默认值中，可以写一个表达式，并且这个表达式会在每次参数为undefined的时候去执行一次

   //惰性求值
   let x = 99;
   function fun(p = x+1){
   	console.log(p)
   }
   fun(12);
   x+=1;
   fun();
   

5. 默认参数的位置 建议所有的函数才有默认值的参数全部往后放
   如果在看别人的函数时，发现参数中有默认值，即可忽略

   function fun(y,x = 1){
   	console.log(x,y)
   }
   fun(2);
   
   //函数.length,可以返回当前没有赋默认值的参数的个数，默认值要往后靠，放第一个后面就都是0了
   var length = (function fun(x,y,z=1){}).length
   console.log(length);//2
   

6. 设置抛出异常的方法

   //实例 用户没有按照规定给参数赋值怎么办？
   function checkSomething(){
   	//js中的抛出异常的方法
   	throw new Error('参数是必填的，你少传了一个参数')
   }
   //当x = undefined时，会将报错的方法赋值给x并执行
   function fun(x = checkSomething()){
   	console.log(x);
   }
   fun();
   

7. 遍历数组

   function add(...num){
   	let sum = 0;
   	//遍历数组，类似于java中的foreach
   	for(var val of num){
   		sum += val;
   	}
   	return sum;
   }
   var result = add(1,2,3,4,5,677,322)
   console.log(result);
   

8. rest参数 接收数组并排序

   //es5
   function test1(){
   	//将传入的参数转成数组并进行排序，通过argument可以获得到传进方法的参数
   	return Array.prototype.slice.call(arguments).sort();
   }
   console.log(test1(1,2,3,4,5,677,322));
   
   //es6
   function soutTest(a,b){
   	return a-b
   }
   function fun(...num){
   	return num.sort();
   }
   var fun = (...num) => num.sort(soutTest);//webpack语法问题，直接在sort括号内写会报错
   console.log(fun(1,2,3,4,5,67,32,12));
   

9. rest参数

   //es5接收数组并排序
   function test1(){
   	//将传入的参数转成数组并进行排序，通过argument可以获得到传进方法的参数
   	return Array.prototype.slice.call(arguments).sort();
   }
   console.log(test1(1,2,3,4,5,677,322));
   
   
   

10. 严格模式

    //从 ES5 开始，函数内部可以设定为严格模式。
    function doSomething(a, b) {
      'use strict';
      // code
    }
    
    //es6 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。
    function doSomething(a, b = a) {
      'use strict';
      // code
    }
    doSomething();// 报错
    
    //在严格模式下使用八进制
    var num = Number.parseInt("070",8);
    console.log(num);
    

11. name属性

    //es6函数的name属性 ,可通过name属性来获取到函数的名字
    function fun(){
    	
    }
    console.log(fun.name);
    
    //新建一个函数会得到一个匿名的名字
    console.log((new Function).name);
    

12. 箭头函数

    //当箭头函数没有参数或者有多个参数的时候，用（）来表示参数的位置
    
     var v = v => v;
     console.log(v(1));
    	
     var v = () => 5;
     console.log(v());
    	
    //箭头函数会默认添加return 关键字
     var sum = (num1,num2) => num1 + num2;
     console.log(sum(1,3));
    	
    //当箭头函数代码块多余一行的时候要用大括号括起来
     var sum = (num1 ,num2) => {console.log(num1);return num1+num2}
     console.log(sum(1,3));
    	
    //如果箭头函数要返回对象，使用圆括号来将大括号括起来，避免解释器误判
     var returnObj = ({id,name}) => ({id:id,name:name});
     console.log(returnObj({id:1,name:'admin'}))
    	
    //判断参数是否是偶数
     const isEvent = (i) => i%2 === 0;
     console.log(isEvent(2));
    	
    	
     var sum = [1,2,3].map(x => x*x);
     console.log(sum)
    	
    //箭头函数的实际用法
     var newArray = [1,2,43,454,2,34,6].sort((a,b) => a-b);
     console.log(newArray);
    	
    //在箭头函数中的箭头指向问题 在箭头函数中，this的指向是固定的，指的就是当前函数中内容
     function foo(){
     	setTimeout(() => {
     		console.log('id',this.id);
     	},100)
     }
     var id = 42;
     foo.call({id:43});
     function foo1(){
     	console.log(this)
     }
     foo1.call({id:10});
    	
     var obj = {
     	userName : 'admin',
     	fn:function(){
     		console.log(this.userName);
     	}
     }
     //函数中的this执行的是当前函数的调用方
     obj.fn();
    

​