ES6学习笔记

ES6学习笔记

1.ES6是什么
ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
标准的制定者有计划，以后每年发布一次标准，使用年份作为版本。因为ES6的第一个版本是在2015年发布的，所以又称ECMAScript 2015（简称ES2015）。
虽然浏览器在不断更新，但并不是所有用户的电脑浏览器都支持ES6，所以在使用的过程中建议还是转成es5，保证代码的可执行性。至于转换的方式大家可以用Babel或者Traceur转码器

2.let和const
1. let代表作用域里面声明变量 ，const代表的是声明常量，常量必须是在定义的时候初始化不可改变；

window.onload=function(){
 var aInput = document.getElementsByTagName("input");
 //传统方法
 for（var i=0;i<aInput.length;i++）{
    (function(i){
        aInput[i].onclick=function(){
        alert(i)
        }
    })(i)    
  } 
     //使用let变量 声明一个块范围变量 简化了i值的索引问题 
  for(let i=0;i<aInput.length;i++){
      aInput[i].onclick=function(){
          alert(i)
      }   
  } 
}
//let不能在同一个作用域内声明重复声明名字相同的变量 不同作用域的话可以
window.onload=function(){
    let name='成龙'；
    let name='房祖名'；
    }
    //同个作用域重复声明会报这个错误Uncaught SyntaxError: Identifier 'name' has already been declared
//不同作用域的话就没有关系  
window.onload=function() {
    let name='成龙';
    console.log(name); 
    (() => {
        let name='房祖名';
        console.log(name)
    })()
}

1. const表示声明常量，在初始化的时候要同时赋值，而且不能修改；

const a=1；
const a=2；
//报Uncaught SyntaxError: Identifier 'a' has already been declared不能重复声明同名变量错误

const a；
a=1；
//报Uncaught SyntaxError: Missing initializer in const declaration初始化缺少初始值错误

const a=1；
a=2；
//Uncaught TypeError: Assignment to constant variable.at window.onload常量一旦声明就能修改

3.字符串模板

//传统字符串拼接
    var text1='利';
    var text2='生死已';
    var str='苟'+text1+'国家'+text2;
    document.write(str);
//字符模板的写法
    var text1='利';
    var text2='生死已';
    var str=`苟${text1}国家${text2}`;
    document.write(str);

4.解构赋值

//以前我们给变量赋值，只能直接指定值
var a = 1；
var b = 2；
var c = 3；
console.log(a,b,c)//1 2 3

//es6中结构赋值写法 只要模式匹配的上就可以了 
var [a,b,c]=[11,22,33];
console.log(a,b,c)//11 22 33

var [b,a,c]=[11,22,33];//注意顺序 值是一一对应的
console.log(a,b,c)//22 11 33

//当然解构赋值还有嵌套比较复杂的写法，如下
let [foo,[[bar],[baz]]]=[111,[[222],[333]]]
console.log(foo,bar,baz);//111 222 333

let [head, ...foot]=[1,2,3,4];
console.log(head,foot);//1 [2,3,4]

//如果找不到对应的值 则会显示undefined
var [bar3,foo3]=[1000];
console.log(bar3,foo3); //1000 undefined;

//另一种情况是不完全匹配 左边数组长度大于右边 这种情况下，解构依旧成立,按顺序赋值
let [x,y]= [100,200,300];
console.log(x,y);//100 200

//设置默认值
let [a,b=2]=[1];
console.log(a,b);//1 2;

//默认值也可以引用其他的变量，但变量必须已经声明

let [a,b=a]=[1];
console.log(a,b);//1 1

//对象的结构也可以指定默认值;

var {x,y=5}={x:1};
console.log(x,y);//1 5

//对象的解构与数组有一个重要的不同 数组的元素是按次序排序的 变量的取值由它的位置决定的；
//而对象的属性没有次序，变量必须与属性同名 才能取到正确的值

var {a，b} = {a:'白百何',b:'李小璐'};
console.log(a,b)//白百何 李小璐;

var {b,a} = {a:'白百何',b:'李小璐'};
console.log(a,b)//白百何 李小璐;

//如果变量名与属性名不一致，必须写成下面这样；
let obj = {Name：'贾乃亮'，color：'green'};
let {Name:N,color} = obj;
console.log(N,color);//贾乃亮 green；

//值得一提的是name是匹配模式真正被赋值的变量的是N；所以
console.log(Name)//会报 Name is not defined；
console.log(N);//贾乃亮

5.复制数组

//数组的浅拷贝，引用之间的拷贝，有没有实现数组的真正复制
var arr1 = [1,2,3];
var arr2 = arr1;
arr2.push(4);
console.log(arr1,arr2);
//[1, 2, 3, 4] [1, 2, 3, 4]

//复制数组深度拷贝，传统做法
var arr1=[1,2,3];
var arr2=[];
//通过for循环遍历之后将arr1数组的每一项赋值给arr2；实现深度拷贝；
for(var i=0;i<arr.length;i++){
    arr2[i] = arr1[i]
};
//数组尾部添加
arr2.push(4);
console.log(arr1,arr2);
//[1, 2, 3] [1, 2, 3, 4];

//ES6 实现数组深度拷贝
var arr1 = [1,2,3];
var arr2 = Array.from(arr1);
//数组尾部添加
arr.push(4);
console.log(arr1,arr2)
//[1, 2, 3] [1, 2, 3, 4];

//ES6 实现数组深度拷贝方法2
var arr1 = [1,2,3];
var arr2 = [...arr1];
//数组尾部添加；
arr2.push(4);
console.log(arr1,arr2);
//[1, 2, 3] [1, 2, 3, 4];

//深度拷贝 在函数中的应用；
let arr=[1,2,3];
function showArr(...args){
    args.push(4);
    return arr;
}
console.log(arr,showArr(...arr));
//[1, 2, 3] [1, 2, 3, 4];

6.Map
JavaScript的默认对象表示方式是{}，但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。

为了解决这个问题，最新的ES6规范引入了新的数据类型Map。

Map是具有极快查找速度的键值对结构。

var map = new Map();
//设置
//map.set(name,value);
map.set('name1','王宝强');
map.set('name2','马碧池');

//获取
//map.get(name);
console.log(map.get(name1)+map.get(name2));

//查询 如果map对象中有结果 则返回布尔值true；
//map.has(name);
console.log(map.get('name1'))//true;
console.log(map.get('name3'))//false;

//删除
//map.delete(name);
console.log(map)//删除前的map对象；//Map(2) {"name1" => "王宝强", "name2" => "马碧池"}
map.delete('name1');
console.log(map)//删除后的map对象；//{"name2" => "马碧池"}

//特别注意map对象不能使用for in 循环 无报错也无任何反应
for(var name in map){
    console.log(name);
}

//实体 map = map.entries();
//不能使用for in 但是可以使用 for of获取对象内容
 for(var name of map){
        console.log(name);
   }//结果是[0:"name1",1:"王宝强"][0:"name2",1:"马碧池"];

//也可以以下这种写法获取准确的值；
for(var [key,value] of map){
    console.log(key,value);//结果分别为 name1 王宝强 和 name2 马碧池
 }

//如果只想要key
for(var key of map.keys()){
    console.log(key)//name1 name2
}

//只获取value
for(var value of map.values()){
    console.log(value)//王宝强 马碧池
}

for-of循环详解
第一眼看是去好像for-of和for-in 没有什么区别，但实际上是如此吗？
我们需要注意几点：
1.这是目前遍历数组最简洁和直接的语法；
2.它避免了for-in的所有缺陷；
3.与forEach()不一样，它支持break，continue和return。
4.for-in循环用于遍历对象属性，for-of循环用于遍历数据——比如数组中单值。

    //for of 一个arr对象
    var arr = ['陈羽凡','王宝强','贾乃亮','谢霆锋'];

    //只循环key
    for(var k of arr.keys()){
        console.log(k);//结果是0 1 2 3
    }
    //只循环value
    for(var value of arr){//数组对象没有.values();
        console.log(value);//结果为'陈羽凡' '王宝强' '贾乃亮''谢霆锋'
    }

    //for in 循环与for of循环的区别
    for(var i in arr){
        console.log(i)//结果是索引值 0 1 2 3
    }
    for(var i of arr){
        console.log(i)//结果是值'陈羽凡' '王宝强' '贾乃亮''谢霆锋'
    }
    //for of 不能循环json 但是可以循环map和set
    var json={'a':'白百何','b':'马蓉','c':'李小璐','d':'张柏芝'};
    for (var name in json){
    console.log(name);//'白百何''马蓉''李小璐''张柏芝'
    console.log(json.a);//'白百何'
    console.log(json['b']);//'马蓉'；
    for(var name of json){
    console.log(json);//报错Uncaught TypeError: undefined is not a function
    }

8.箭头函数
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
箭头函数与传统的JavaScript函数主要区别在于以下几点：
1.函数内置的this的值取决于箭头函数在哪里定义而非剪头函数执行的上下文关系；
2.new 不可用 箭头函数不能使用new关键字来实例化对象 不然会报错
3.this不可变 函数内置this 不可变 在函数体内整个执行环境中为常量
4.没有arguments对象 更不能通过arguments对象访问传入的参数 只能使用显式命名或其他es6新特性来完成

//不传入参数
var sun = ()=> 1 + 2;
//等同于
var sum = function(){
    return 1 + 2;
}
//注意！！argument不能继续使用
var show=()=>{
 console.log(arguments);
}
show(1,2,3);
// 会报错Uncaught ReferenceError: arguments is not defined


//this 的指向问题
var json= {
    name:'渣渣辉'，
    showName:()=>{
        return this.name
    }
}
//因为this指向了 window 所以return ：undefined
console.log(json.showName())

未完待续。。。 祝大家新年快乐