是ECMAScript 6简称,目标使JavaScript语言可以用于编写复杂的大型应用程序 ,成为企业及开发语言 .
将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 详细差别
字符串模板 `` ,二个` 之间部分都会作为字符串值,可以任意换行
let str2="abc\n" + "233"; let str3= `hello wenjan xuexiES6新特性`; console.log(str); console.log(str2); console.log(str3);ES6中允许按照一定模式从数组和对象中提取值,然后对变量进行赋值.
function add(a,b = 1) { // b =b || 1; 默认值 return a+b; } console.log(add(10));
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
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}所谓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) });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()); //通过扩展运算符进行展开
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()方法中的指针先指向下一位判断是否为空,不为空后,再取本位的数值,(迭代器运行原理) }修饰器(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执行
首先安装node.js,接下来看本篇最后文档.
模块化就是把代码进行拆分,方便重复利用。类似java中的导包:要使用一个包,必须先导包。而JS中没有包的概念,换来的是模块。 模块功能主要由两个命令构成:export和import。
export 命令用于规定模块的对外接口,一切js变量都可以导出, 基本类型变量,函数,数组,对象.import 命令用导入其他模块提供的功能链接:https://pan.baidu.com/s/1bXuvGqzJBQARtzSNPP6IWA 提取码:165r