标签：多次 let 表达 ror map 第一个 return error html
折腾了大半年的项目，用的angular折腾快疯了。 总算有个小结了。正好闲下来为新的项目做准备，学点新的玩意玩玩，以往ES6都没用过，感觉被大部队甩好远了,抓紧跟上大部队的脚步...
1.利用let和const引入块级作用域
通过ES6中定义的let关键字可以形成仅作用于该块作用域的局部变量
for(let i=0;i<10;i++){
}
console.log(i);//输出ReferenceError(未定义)
console.log(a);//输出ReferenceError(未定义)，let声明的变量不会变量提升，规范了代码先声明后使用。
let a =2;
let a=3;//error let申明的变量不能重复定义。
与let类似const也能形成块作用域，不同点在于const声明的变量为常量，不可改变
if(true){ const a =888; a = 222;//error. const 声明的变量是常量。不可被修改 } console.log(a);//输出ReferenceError(未定义)。块级作用域、 //有一点要注意的是不能改变const类型变量存储的东西 const person = {}; person.nam = ‘Fink‘; person = {};//error
2.变量解析与赋值
var [a,b,c] = [1,2,3]; var arr = [1,2,3]; var [a,b,c] = arr; //数量不对应 let [a,b,c] = [1,2]; console.log(a);//1 console.log(b);//2 console.log(c); // undefined //多层数组 let [a,[b,c],d] = [1,[2,3],4]; 1,2,3,4 //多层不对应 let [a,[b,c],d] = [1,[2],3]; console.log(a) //1 console.log(b) //2 console.log(c) //undefined console.log(d) //3 //对应值非数组 let [a,b,c] = 1;//error let [a,b,c] = false;//error 等号右边必须是可遍历对象。 //了解映射的原理之后，一个很好的应用场景就是交换数值。 let [a,b] = [1,2]; [a,b] = [b,a] //es6在映射赋值中还加入了默认值 let [a,b=2,c] = [1]; console.log(a); //1 console.log(b); //2 console.log(c); // undefined //针对对象的映射赋值 var {a,b} = {a:‘1‘,b:‘2‘}; console.log(a); //1 console.log(b); //2 根据key查找value //掌握这种方法，可以简化很多操作。如获取一个对象的某些属性 var person = { name:‘fink‘, ‘age‘:23, ‘sex‘:‘male‘ } let {name,age,sex} = person; console.log(name+age+sex); // fink23male
3.增加了模板字符串
let myName = ‘Fink‘; document.getElementById("app").innerHTML = `wo name is ${myName}`;
//$(变量名) 不仅支持变量，还支持函数表达式
var result = `my name is ${(function(){return ‘fink‘})()}`;
4.数组的扩展
//1.Array.from();将伪数组对象转换为真正的数组 //什么是伪数组对象？具有数组的结构，但不是数组对象，不能使用数组的方法如forEach等 let arr1 = { ‘a‘: 1, ‘b‘: 2, ‘c‘: 3 }; function arr2(){ let a2 = arguments; } let arr3 = document.querySelectAll(‘div‘); //上面三个都是伪数组对象。 ‘forEach‘ in arr1; //false let arr = Array.from(arr1);// es5的写法: var arr = Array.slice.call(arr1); ‘forEach‘ in arr1; //true;返回值是boolean。 //2.Array.find();在数组中检索第一个匹配到的元素。 // find()参数为一个函数，设置查找条件 let arr = [1,3,5,7]; var result = arr.find(function(value,index,arr){return value >4}); var result2 = arr.find(function(value,index,arr){return value >10}); console.log(result);// 5 console.log(result2); // 没有找到的时候返回undefined //findIndex()和find()类似，只不过是查找到的结果对应的下标 // 3. Array.fill();给定一个值来替换数组元素。 let arr = [1,2,3,4,5]; arr.fill(5); //[5,5,5,5,5]; // fill 也可以接收三个参数，第二个和第三个参数分别为开始个结束的位置 let arr2 = [1,2,3,4,5,6,7]; arr.fill(5,1,3);//[1,5,5,4,5,6,7];
5.函数增加默认参数。
function show(name,age=23){ console.log(name+","+age) } show(‘fink‘); // fink,23
6.函数新增rest参数(...)。为了不需要使用arguments对象。
function f(v,...vals){
console.log(v);
console.log(vals);
}
f(‘fink‘,1,2,3,4,5,6); //temp 1,2,3,4,5,6
//可以看成将arguments转换为数组，要比arguments更灵活。
// ***需要注意的一点。
function f(...vals,v){}//这种方式会报错，rest参数后不能再加别的参数
除了在函数中作为rest参数，“ ... ”本身可以作为一个运算符使用，用处与rest参数刚好相反，是将一个数组转为用逗号分隔的参数序列，看看栗子：
function add(x,y){ return x + y; }
var arr = [23,12]; add(...arr); //35
Math.max(...[4, 13, 15]) // 等同于Math.max(4, 13, 15);
//结合rest使用 function f(...vals){ vals //[1,2,3] } var arr = [1,2,3]; f(...arr); //当然上面这样用是多次一举，转换为参数再转回来，目的是为了理解两者是互为逆操作的
//其它用法 var nodeList = document.querySelectorAll(‘div‘);
var array = [...nodeList];
var arr1 = [1,2,3],arr2 = [4,5,6];
var arr3 = [...arr1,...arr2]; //合并数组，在ES5中我们一般是这样用的arr1.concat(arr2);
7.=>箭头函数
var f = a =>b //a为参数，b为返回值 //当传入多个参数或对象时，要用（）包裹 var add = (a,b) => a + b //传入对象 var plus = ({name,age}) => name + age; var person = { name:‘Vicfeel‘, age:23 }; plus(person); //Vicfeel23 //this对象的指向是可变的，但是在箭头函数中，它是固定的 var show = { init : function(){ document.addEventListener(‘click‘,e = >this.doThing(e),false); } , dothing: function(e){ console.log(‘do something‘) } }
8.第七种数据类型。Symbol();
该类型通过 Symbol()来创建。(不能使用new)。表示独一无二的。
9.新的数据结构Set
Set数据结构和数组类似，区别在于Set内元素是唯一不重复的,Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化，可以通过add方法添加元素
//ES6环境下 //Set的方法 //Set - 构造函数，参数为一个数组 let arr = [1,2,3,3,4,4]; let s = new Set(arr);//Set{1,2,3,4} //add - 添加一个值,返回结构本身 s.add(5); //Set{1,2,3,4,5} s.add(2); //Set{1,2,3,4,5} s.add(6).add(7);//Set{1,2,3,4,5,6,7} //delete - 删除一个值，返回一个布尔值表明删除是否成功 s.delete(6); //true,Set{1,2,3,4,5,7} //has - 判断是否包含该值，返回一个布尔值 let ok = s.has(6);//false,Set{1,2,3,4,5,7} //clear - 清空Set s.clear();//Set{} //Set的属性 s.size; //0,与数组不同set通过size获取大小 s.add(5); s.size; //1
Set内元素具有唯一性，因此最直观的用途便是数组去重，现在我们可以这样实现数组去重：
function unique(arr){ return [...new Set(arr)]; //...运算符参看ES6系列（二） //或者 return Array.from(new Set(arr)); }
10.新数据结构Map
map一词本身就有映射的意思，Map数据结构提供了一种完善的键值对结构，之所以称之为完善是相对于之前而言，我们知道JS中的对象Object本身就是一种键值对hash结构,然而这种键值对确是不完善的。
Object中只能将字符串作为键，无法使用对象作为键，Map数据结构的提出就是为了解决这个问题
//来看一下Map数据结构的基础用法: //构造函数 var m = new Map(); var p = {name:‘vicfeel‘}; //添加键值对 m.set(p,‘val‘); //获取键值对 m.get(p); //"val" m.get(‘name‘); //undefined //返回大小 m.size; //1 //重复添加相同键会覆盖先前的 m.set(p,‘newVal‘); m.get(p); //"newVal" //利用包含键值对的数组初始化Map,相同键后面也会覆盖前面 var arr = [{‘name‘:‘vicfeel‘},{‘age‘:23},{‘age‘:25}]; var m2 = new Map(arr); m2.get(‘age‘); //25 //判断是否含有某个键 m2.has(‘name‘); //true //删除某个键 m2.delete(‘name‘); m2.has(‘name‘); //false //清空 m2.clear(); m2.size; //0 另外，另外Map数据结构也有一个forEach方法用于遍历： let m = new Map(); m.set(‘name‘,‘vicfeel‘).set(‘age‘,25); m.forEach(function(val,key,map){ console.log("Key: %s, Value: %s", key, val); //Key: name, Value: vicfeel //Key: age, Value: 25 });
11.Iterator(遍历器)
ES新提供的遍历方法for...of的遍历方式便是自动寻找该对象的Iterator接口,一些数据结构是默认部署Iterator接口的，包括数组、Set和Map结构、伪数组（比如arguments对象、DOM NodeList对象）、后文的Generator对象，以及字符串，因此这些数据结构是可以直接使用for...of进行遍历的
标签：多次 let 表达 ror map 第一个 return error html
原文地址：http://www.cnblogs.com/hellotyc/p/6203758.html
