JavaScript的新规范ES6

前言

因为是学习vue的基础，所以在这里就不得不提一下JavaScript的新规范。

ES6;

也就是在javaScript的语法相对于之前的话有所不同

---

const , let and var 的区别：

const , let 是 ES6 中用于声明变量的新关键字;

之前的话，我们是只用到了var的关键字。

const

const定义的变量不可以修改，而且必须初始化

var

var定义的变量可以修改，如果不初始化会输出undefined，不会报错

let

let是块级作用域，函数内部使用let定义后，对函数外部无影响

var就不用多说，我们都用过，但是它于const,let唯一的区别就在于作用范围。

因为const,let的范围是块级的，所以不能作为全局变量。

const
因为它的特性所以通常可以用来单独获取html代码，而不需要去更改。
如果强行更改的话就会报错。

// ES5
var MyBtn = document.getElementId('mybtn');

// ES6
const MyBtn = document.getElementById('mybtn');

let

而let 可以适应多种场面

let name = "aa";
    name = "bb";

console.log(name); 

所以总的说，let,const属于在块级范围内使用

---

对象的创建

相对于之前的不同，如今是先设置，然后创建合成

let name = "liwangwang";
let age = "年龄";
//用ES6的规则定义一个对象
let obj={
	name,
	age,
	getName(){
		return this.age;
	}
};
console.log("对象中的属性:"+obj.name);
console.log("对象中的getName方法:"+obj.getName());

---

箭头函数

嗯，跟之前来说的话，就是说箭头函数更加具有观赏性，和简洁性。

结构:

let fa = (参数 )=> {方法体}

使用的话注意一点箭头函数的函数的个数，和方法体

//无参的函数，并且方法体中只有一行代码
let p =()=>console.log("我是箭头函数1");

//有参数的函数
let p1=(a)=>{console.log(a)};

//可返回的函数
let p2 = (a) =>{return a};
			
p();
p1("我是箭头函数2");
console.log(p2("箭头函数3"));

还有就是箭头函数没有自己的this

如果外部没有函数包着的话，this指的就是window

有的话this就是外部函数这个

---

Map和Set

简单的Map集合：

let map2=new Map();
map2.set('name','张三');
map2.set('age',11);
map2.set('已婚',false);

那么有哪些操作
数组转Map;

  let arr=[['k1','v1'],['k2','v2']];
  let map3=new Map(arr);

Map转数组；

let arry = Array.from(map2);
console.log(arry);

最基本的是集合的迭代
有两种方式

	//for..of 遍历
	for (let [key,value] of map2) {
		console.log(key,value);
	}
	//forEach遍历
	map2.forEach(function(k,v){
		console.log(k,v);
	})

---

Set集合与Map集合不同的是，

Set不是以键值对的形式存在的,并且存在的值不能重复

let mySet=new Set();
  mySet.add('张三');
  mySet.add('李四');

操作
数组转为set

let arr3=[['k1','v1'],['k2','v2']];
let set3=new Set(arr3);

set转为数组

 let arr4=[...set3];
 console.log(arr4);

Set集合的迭代

    // 遍历
    for(let value of mySet.values()){
        console.log(value)
    }
	//forEach遍历
    mySet.forEach(function(value){
        console.log(value)
    });

---

模板字符串

与之前相比较的话也就是非常的简单明了，

并且也对于我们之前的写法差不多

区别在于``符号的运用，和${}的运用

let Str = "姓名："+obj.name+"年龄："+obj.age;
console.log("以前的字符串："+Str);

let esStr = `姓名：${obj.name}，年龄：${obj.age}`;
console.log("ES6的字符串："+esStr);

---

三点运算符

三点运算符就相当之前泛型所用到

反正就是如果没有确定方法的参数就可以用到三点运算符。

 function func(...params){
        console.log(params);

        // 遍历
        params.forEach(function(item,index){
            console.log(item,index);
        });
    }

    func(2,4,5);

Symbol类型

其实也就是一个对象中如果属性多了起来的话，可能会有所重复的属性名

所以现在就有Symbol类型，能够让一个对象中能有多个属性名

 //Symbol实际使用
    // 定义一个对象
    let symbol=Symbol('address'); // 可以加参数 指定属性名
    let symbol2=Symbol('address');
    let obj={name:'jack',age:10};

    // 假如我们要向对象里额外加个属性
    // obj.address='南京路' // 以前的写法，不过假如属性很多的时候，可能会出现属性重复
    obj[symbol]='南京路'; // 这样能保证属性不重复
    obj[symbol2]='南京路2';
    console.log(obj);

并且对于一个对象而言。Symbol.for()

 // Symbol.for() 全局搜索指定key的Symbol，找到的话，就返回该Symbol，找不到，就新建一个
    console.log(Symbol("foo") === Symbol("foo"));      // false
    console.log(Symbol.for("bar") === Symbol.for("bar"));     // true

    // Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。
    let fooKey = Symbol.for("bar1");
    console.log(Symbol.keyFor(fooKey)); // 返回bar1

---

总结

Thanks♪(･ω･)ﾉ希望对大家有所帮助。