ES6学习--内有视频授课链接

1.了解ES6

是ECMAScript 6简称,目标使JavaScript语言可以用于编写复杂的大型应用程序 ,成为企业及开发语言 .

1.1 let 和const 命令

<script>
    for(var i=0;i<5;i++){  	//var 作用于全局
        console.log(i);
    }
    console.log("循环外:"+i);   
</script>

---

将var 改成let 后,循环外变错.

---

• let与const都是只在声明所在的块级作用域内有效。

• let声明的变量可以改变，值和类型都可以改变，没有限制。

• const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const a ;//报错,一旦声明变量，应该立即赋值！！
const b = 2;
b = 3//报错，因为定义常量之后不能成重新赋值！！
let a ;
a =123;
console.log(“a=”+a); //a=123
a=“abc”;
console.log(“a=”+a); //a=abc
详细差别

1.2 字符串扩展

• includes() :返回布尔值,表示是否找到了参数字符串.
• startsWith(): 返回布尔值,表示参数字符串是否在原字符串的头部
• endsWith(): 返回布尔值,表示参数字符串是否在源字符串的尾部.

•   console.log(Str,"中是否包含了 wenjian",Str.startsWith("wenjian"));
    console.log(Str,"中是否包含了 wenjian",Str.endsWith("wenjian"));
  

字符串模板 `` ,二个` 之间部分都会作为字符串值,可以任意换行

    let str2="abc\n" +
        "233";
    let str3= `hello
     wenjan
        xuexiES6新特性`;
    console.log(str);
    console.log(str2);
    console.log(str3); 

1.3 解构表达式

ES6中允许按照一定模式从数组和对象中提取值,然后对变量进行赋值.

1.3.1 数组解构

	let arr=[1,2,3]; 
    console.log(arr[1]);  //取数字 2
    const [x,y,z] =arr;  //x,y,z对应arr中每个位置的值
    console.log(y);  //2
    const [,,a]=arr;
    console.log(a); //3

1.3.2 对象解构和优化

 const person={
        name:"jack",
        age:21,
        language:['java','js','react.js']
    };
    let {name,age,language}=person;  //let const 都行,{}必须,name age language  名字位置 一一对应,
    const
    console.log(name,age,language); //jack 21 (3) ["java", "js", "react.js"]
     //  const {name: n,age: a,language:f}=person;
  //     console.log(n,a,f); //jack 21 (3) ["java", "js", "react.js"]
  
==========对象优化=======
const target = { a:1 };
const source1 = { b: 2 };     {a:1,b:2,c:3}
const source2- { c: 3 };
Object.assign(target，source1，source2);
console.log(target);   //{a:1,b:2,c:3}

====声明对象简写=====
const age=123
const name="张三"
const person1 ={age: age,name: name}

const person2 ={age,name}

1.4 函数优化

1.4.1 函数参数默认值

function add(a,b = 1) { // b =b || 1; 默认值
return a+b;
}
console.log(add(10));

1.4.2 函数优化

• 箭头函数

 function print(a) {
       console.log(a);
   }
   print("爱你");
   
let print2 =a =>console.log(a);
   print2("爱你");
   let sun= (a,b) =>console.log(a+b);
   sun("12",3);   //123
   let sun1= (a,b) => {
       return a + b;
   }
   console.log(sun1(33,55));  //88
   
let sayHello = () =>console.log("123");  //无参数,括号作为一个参数占位 
    sayHello();

• 函数属性简写

let person = {
        name: "jack",
        eat : function (food) {   //原先写法
            console.log(this.name+"在吃: "+food);
        },
        //箭头函数
        eat2 :food => console.log(person.name+"在吃: "+food),
        //直接写函数
        eat3(food){
            console.log(this.name+"在吃: "+food);
        }
    }
    person.eat("西瓜");
    person.eat2("冬瓜");
    person.eat3("南瓜");

• 箭头函数和解构表达式结合

const person = {
        name: "jack",
        age: 21,
        language: ['jvav','js',123]
    }
   function hello(person){
       console.log("htllo,"+person.name)
   }
    hello(person);

    const hello2 = ({name})=>
        console.log("hello2,"+name);
    hello2(person);

1.5 map和reduce,数组新增的方法

• map
  map() :接受一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回

let arr =['1','20','-5','3'];
   console.log(arr);
   let newArr = arr.map(s => parseInt(s));   //将字符型转为int
   console.log(newArr);

• reduce
  reduce(): 接收一个函数（必须）和一个初始值（可选），该函数接收两个参数︰
  • 第一个参数是上一次reduce处理的结果
  • 第二个参数是数组中要处理的下一个元素

reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

const arr= [1,20,-5,3];
let result = arr.reduce((a,b) => {
return a+b;
},1);
console.log(result); //有初始值1,则结果为20,没有的话 19

1.6 扩展运算符

spread 是三个点 … ,将一个数组转为用逗号分隔的参数序列

console.log(...[1,2,3]); //1 2 3
    console.log(0,...[1,2,3],4); //0 1 2 3 4

    function add(x,y) {
        return x+y;
    }
    var numbers = [1,2];
    console.log(add(...numbers));  //3
    //数组合并
    let arr =[...[1,2,3],...[4,5,6]];
    console.log(arr);  [1,2,3,4,5,6]
    //与解构表达式结合
    const [first,...rest] = [1,2,3,4,5];
    console.log(first,rest);  //1  [2,3,4,5]
    //将字符串转化成数组
    console.log([...'hello']) // ["h","e","l","l","o"];
//对象合拼
  let age1 = { age:15 }
  let name1 = { name:"Amy" }
let p2 =   {...age1, ...name1 }  //最后的值会覆盖之前的值
console.log(p2}

1.7 promise

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可同样的方法进行处理。

我们可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。

const p = new Promise((resolve,reject) =>{
        //写异步的操作,通常写ajax 操作
       setTimeout( () => {
           //异步操作(模拟-)
           let num = Math.random();
           if (num < 0.5){
               //认为成功了
               resolve("成功了"+num);
           }else{
                reject("失败了"+num);
           }
       });
    });
    console.log("ok");
    p.then(value => {
        console.log(value);
    }).catch(reason => {
        console.log(reason);        //  控制台结果: 先: ok 后: ok2 最后: 成功了0.26380699315303446
    });
    console.log("ok2");
    
    //1、Promise可以封装异步操作
let p = new Promise((resolve,reject)=>{
	//1、异步操作
	$.ajax({
		url:"mock/user.json",
		success:function(data){
			console.log("查询用户成功:",data)
			resolve(data);
		}，
		error:function(err){
			reject(err);
		}
	});
});
p.then((obj)->{
	$.ajax({
		url:^mock/user_corse_${obj.id}.json`,
		success:function(data){
			console.log("查询用户课程成功:",data)
		}，
		error:function(err){
		}
}).catch((err)->{
})

========简化后========
function get(url,data){
	return new Promise((resolve,reject)=>{
		$.ajax({
			url:url,
			data:data,
			success:function(data){
				resolve(data);
			},
			error:function((err){
				reject(err)
			}
		})
	});
)
get("mock/user.json")
	.then((data)=->{
		console.log("用户查询成功:"，data)
		return get(`mock/user_corse_${data.id}.json`);
	})
	.then((data)=→>{
		console.log("课程查询成功:"，data)
		return get(`mock/corse_score_${data.id}.json`);
		})
	.then((data)=>{
		console.log("课程成绩查询成功:"， data)
		})
	.catch((err)=>{
		console.log("出现异常",err)
		});

1.8 set和map

ES6提供了Set和Map的数据结构。|

Set，本质与数组(js弱类型语言,数组可以有不同类型的数值)类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。和java中的Set集合非常相似。

let set = new Set();
    set.add(2);
    set.add(5);
    set.add(2);
    set.add("liwenjian");
    set.forEach(value => {
    set.add("liwenjian");
        console.log(value);   // 2 和字符串"liwenjian" 被忽略
    });
     let set2 = new Set([1,2,"wenjian",2]); //Set(3) {1, 2, "wenjian"}
    console.log(set2);
    const arr = [1,2,"23",2];
    arr.forEach( value => {
        console.log(value);   //数组就不会抛弃哪一个
    });

方法:
set . add(1); //添加
set.clear (); //清空
set.delete(2); //删除指定元素
set.has (2);//判断是否存在
set .forEach(function(i3)//遍历元素
set.size; //元素个数。是属性，不是方法。

---

map,本质与Object类似的结构.不同在于,Object强制规定key只能是String,而Map结构的key可以是任意对象:

• object 是<String,object>集合
• map 是<object,object>集合

const map =new Map([
        ["key1","value1"], //单引号 双引号 都行
        ['key2',"value2"],
    ]);
    console.log(map.get("key1"));
    //接受一个set
    const set = new Set([
        ['key1','value1'],
        ['key2','value2'],
    ]);
    const map2 =new Map(set);
    console.log(map2.get('key2'));
    //或者其他map
    const map3 =new Map(map);
    map.forEach((value, key) => {
        console.log(key,value);
    });

方法 :
map.set(key, value);// 添加
map.clear();// 清空
map.delete(key);// 删除指定元素
map.has(key); // 判断是否存在
map.forEach(function(key,value){})//遍历元素
map.size; // 元素个数。是属性，不是方法
map.values() //获取value的迭代器
map.keys() //获取key的迭代器
map.entries() //获取entry的迭代器 用法：
for (let key of map.keys()) {
console.log(key);
} 或：console.log(…map.values()); //通过扩展运算符进行展开

1.9 class(类) 的基本语法

class User{
        //构造函数
        constructor (name,age = 20){
            this.name= name;
            this.age=age;
        }
        sayHello(){
            return "hello, "+this.name;
        }

        //静态函数
        static isAdult(age){
            if (age>=18){
                return '成年人';
            }
            return "未成年人";
        }
    }
    let user =new User("张三");
    console.log(user);  //User {name: "张三", age: 20}
    console.log(user.sayHello());  //hello, 张三
    //静态方法在class文件被加载时就会分配内存，而非静态方法要在程序运行过程中类实例化后才会存在  
    console.log(User.isAdult(20)); //成年人 

若一个父类中只有一个带参数的构造方法，那么在写其子类的构造方法时必须先通过super调用父类的构造方法才能完成子类的构造方法而且super只能写在子类构造方法体内的第一行。
class Lisi extends User{
        constructor(){
            super(30,30);  //类型可根据需要改变
        }
        test(){
            return "test-> "+this.name;
        }
    }
    let lisi = new Lisi();
    console.log(lisi);
    console.log(lisi.test());
    console.log(lisi.sayHello());
    console.log(Lisi.isAdult(19));

1.10 Generator 函数

Generator 函数是 ES6 提供的 一种异步编程解决方案，语法行为与传统函数完全不同 。

Generator函数有两个特征: 一是 function命令与函数名 之间有一个星号: 二是 函数体内部使用 yield 语句定义不同的
内部状态。

function* hello() {
        yield 1234;
        yield "world";
        yield 'abc';
        return 234;
    }
    let h =hello();
    // console.log(h.next());   //{value: 1234, done: false}
    // console.log(h.next());   //{value: "world", done: false}
    // console.log(h.next());   //{value: "abc", done: false}
    // console.log(h.next());   //{value: 1234, done: true}

    // for of 可以循环遍历Generator函数返回的迭代器
    for (let y of h){
        console.log(y);  // 1234 world abc ,为什么没有234? next()方法中的指针先指向下一位判断是否为空,不为空后,再取本位的数值,(迭代器运行原理)
    }

1.11 修饰器 (Decorator)

修饰器(Decorator)是一个函数， 用来修改类的行为。 ES2017 引入了这项功能， 目前 Babel 转码器己经支持。

@T
     class User {
         constructor(name,age=20) {
             this.name=name;
             this.age=age;
         }
     }
     function T(target) { //target 被修饰的对象
         console.log(target);
         target.contry = "zhong国";// 通过修饰器添加的属性是静态属性
     }
    console.log(User.contry);     

上述会报错, 原因是，在ES6中，并没有支持该用法，在ES2017中才有，所以我们不能直接运行了，需要进行编码后再运行。
转码的意思是：将ES6或ES2017转为ES5执行

1.12 转码器

• Babel (babeljs.io)是一个广为使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而 在浏览器或其他环境执
  行 。
• Google 公司的 Traceur 转码器 Cgithub.com/google/traceur-compiler)， 也可 以将 ES6 代码转为ES5的代
  码。
  2款都是非常优秀的转码工具,是会使用阿里的开源企业级react框架：乌米 UmiJS。

1.12.2 部署安装

首先安装node.js,接下来看本篇最后文档.

1.13 模块化

模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块。
模块功能主要由两个命令构成：export和import。

• export 命令用于规定模块的对外接口,一切js变量都可以导出, 基本类型变量,函数,数组,对象.
• import 命令用导入其他模块提供的功能

链接：https://pan.baidu.com/s/1bXuvGqzJBQARtzSNPP6IWA
提取码：165r