javascript-ecmaScript6(初步了解)

1.let和count变量
01.let声明的变量名称是唯一的
var val=1;
var val=888;//覆盖了前面的val不报错
let vals=’骚年’;
let vals=666;//Uncaught SyntaxError: Identifier ‘vals’ has already been declared (变量名称不是唯一导致)
02.let声明的变量不能隐式转换默认的值
console.log(cot)
console.log(cots)
var cot=’var使用’;//undefined
let cots=’let使用’;//Uncaught ReferenceError: cots is not defined
03.let可以创建块级作用域
var num=666;
{
let num=888;
console.log(num);//888
}
console.log(num);//666
04.count是声明的变量都是常量(唯一的值)
{
const ARR=[8888,6666];//长亮一般为大写
var getArr=[8888,6666];
ARR.push(666);
console.log(‘typeof_const–’+ (typeof ARR)); //object
console.log(‘typeof_Var–’+ (typeof getArr));//object
console.log(‘array:’+ARR);//array:8888,6666,666
console.log(‘getArr’+getArr);//1,2,6
ARR=333;//TypeError: Assignment to constant variable. 不能改变变常量的值
getArr=888;//number 类型
}
2.箭头函数
01.让函数输出更简洁
//.箭头函数 ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体
var getPrice = haha();
function haha() {
return 4.666;
}
console.log(‘ecma5:’ + getPrice);//ecma5:4.666
//ecma6写法
let getPrices = () => 666;
console.log(‘箭头:’ + getPrices);//箭头:() => 666
02.特质函数本身this
//ecma6指针函数 箭头函数不仅仅是让代码变得简洁，函数中 this 总是绑定总是指向对象自身
let arr = [‘1’, ‘2’, ‘3’];
//map 是返回一个处理后的新数组
let newArr = arr.map(val => {
return val + ‘666’;
})
console.log(newArr)// [‘1666’, ‘2666’, ‘3666’]
03.第二个案例再次证明指向本函数
//2.指针例子
function Person() {
this.age = 0; //能够传递数据给子级
setInterval(function olds() {
this.age++; //不能传递数据给父级，因为不同的域
}, 1000)
}
//ecma5解决方法
function Person2(){
var self=this;
self.age=0;
setInterval(function olds(){
self.age++;
},1000);
}
//ecma6解决的方法写法
function Person3(){
this.age=0;
setInterval(()=>{
// |this| 指向 person 对象
this.age++;
},1000)
}
3.参数函数默认值
01.函数计算写法
//3.函数默认值 =>返回结果
var getResult=(price,tax)=>price*tax;
console.log(getResult(5,6))//30
4.ecma5迭代器知识学习
01.了解遍历和迭代其区别
遍历是指对数据结构中每一个成员进行一次访问的操作
迭代是指对数组中的对象进行遍历操作的是数组
02.js迭代器
1.forEach(接受一个函数)2.every迭代器(返回bool需要写返回值是bool的函数)3.some迭代器和every一样
2.reduce迭代器 将数组中的所有数字都累加起来（也可以将所有的字符串合并在一起）
3.map迭代器 但是map会改变数组，生成新的数组
4.fiter迭代器和every迭代器类似，传入一个返回值为布尔类型的函数，和every方法不同的是，当数组中所有元素对应该函数返回的结果均为true时该方法并不返回true，而是返回一个新的数组，该数组包含对应函数返回结果为true的元素
5.sprend/rest操作符 …
01.sprend操作符的使用
//当被用于迭代器中时，它是一个 Spread 操作符：
function foo(a,b,c,d){
console.log(a,b,c,d);//1 9 9 2
let arrs=[1,9,9,2];
console.log(a)//1
}
foo(… arrs);
02.rest操作符的使用
function foo0(…arrs){
console.log(arrs)//[‘我是666’, true, 12, 3.555, null, undefined]
}
foo0(‘我是666’,true,12,3.555,null,undefined)
6.对象词法扩展
01.允许声明在对象字面量时使用简写语法，来初始化属性变量和函数的定义方法，并且允许在对象属性中进行计算操作
function getCar(mark,model,val){
return {
mark,
model,
val,
// 属性可以使用表达式计算值
// 忽略 function 关键词简写对象函数
depreciate() {
val=this.mark;
console.log(val)//leen
}
}
}
let car=getCar(‘leen’,’haha’,3000);
car.depreciate();
console.log(car)
7.二进制和八进制字面量
//ES6 支持二进制和八进制的字面量，通过在数字前面添加 0o 或者 0O 即可将其转换为二进制值：
let oValue = 0o10;
console.log(oValue); // 8
let bValue = 0b10; // 二进制使用 0b 或者 0B
console.log(bValue); // 2
8.对象和数组解扣
//解构可以避免在对象赋值时产生中间变量：
function foo1(){
return [1,2,3];
}
let arr0=foo1();
let [a,b,c]=foo1(); //数组解构
console.log(a)//1
console.log(b)//2
console.log(c)//3
function bar(){
return {
l:1,
e:2,
o:3
}
}
let {l:l,e:e,o:o}=bar();
console.log(l,e,o);//1,2,3
9.对象超类
01.super方法
var parent={
foo(){
console.log(‘hellow! from the parent’);//被执行
}
}
var child={
foo(){
super.foo();
console.log(‘hellow! from the child’)//被执行
}
}
Object.setPrototypeOf(child,parent);
child.foo();
10.模板语法分隔号
01.使用…//ES6中有一种十分简洁的方法组装一堆字符串和变量。{ … } 用来渲染一个变量 和作为分隔符
let user='leon',old=25;
console.log(Hi user{old} !`);//注意单引号 “~ ” 这个键位
11.for…of和for…in区别
//10. for…of VS for…in
let nicknames=[‘id’,’bool’,’trys’];
for(let elm of nicknames){
console.log(elm)//元素 id,bool,trys
}
for (let els in nicknames) {
console.log(els);//下标 0,1,2
}
12.map和weakmap使用
1.map
//ES6 中两种新的数据结构集：Map 和 WeakMap。事实上每个对象都可以看作是一个 Map。一个对象由多个 key-val 对构成，在Map 中，任何类型都可以作为对象的 keyvar myMap=new Map();var keyString = ‘a string’,keyObj = {},keyFunc = function () {};// 设置值 myMap.set(keyString, ‘value 与 ‘a string’ 关联’); myMap.set(keyObj, ‘value 与 keyObj 关联’); myMap.set(keyFunc, ‘value 与 keyFunc 关联’); console.log(myMap.size); // 3 // 获取值 myMap.get(keyString); // ‘value 与 ‘a string’ 关联’ myMap.get(keyObj); // ‘value 与 keyObj 关联’ myMap.get(keyFunc); // ‘value 与 keyFunc 关联’
2.weakmap
//WeakMap 就是一个 Map，只不过它的所有 key 都是弱引用，意思就是 WeakMap 中的东西垃圾回收时不考虑，使用它不用担心内存泄漏问题。 —另一个需要注意的点是，WeakMap 的所有 key 必须是对象。它只有四个方法 delete(key),has(key),get(key) 和 set(key, val)：
let myWeakMap = new WeakMap();
var element = document.querySelector(‘.element’); //这里需要注意 .element是需要获取到classname才能后继续执行
myWeakMap.set(element, ‘Original’);
myWeakMap.get(element) // ‘Original’
element.parentNode.removeChild(element);
element = null;
myWeakMap.get(element) // undefined
上面代码中， 变量myMeakMap是一个WeakMap实例， 我们将一个DOM节点.element作为键名， 然后销毁这个节点， element对应的键就自动消失了， 再引用这个键名就返回undefined。
区别:
WeakMap 与 Map 在 API 上的区别主要是两个， 一是没有遍历操作（ 即没有key()、 values() 和entries() 方法）， 也没有size属性； 二是无法清空， 即不支持clear方法。 这与WeakMap的键不被计入引用、 被垃圾回收机制忽略有关。 因此， WeakMap只有四个方法可用： get()、 set()、 has()、 delete()。
13.Set
//Set 对象是一组不重复的值，重复的值将被忽略，值类型可以是原始类型和引用类型：
let mySet = new Set([1, 1, 2, 2, 3, 3,’a’,’a’,’c’,’cb’,’cb’,2.14,true,true,2.14]);
mySet.size; // 8
mySet.has(‘a’); // true 判断数组中是否存在数据存在返回true
mySet.add(‘strings’);
mySet=mySet.add({ a: 1, b:2 });//当添加相同的对象时不会排除重复的对象
mySet=mySet.add({ a: 1, b:2 });
mySet=mySet.add({ a: 1, b:2,c:3 });//添加数据
mySet.delete(1); //删除下标为1的数据
mySet.clear();//清空
//WeakSet 类似于 WeakMap，WeakSet 对象可以让你在一个集合中保存对象的弱引用，在 WeakSet 中的对象只允许出现一次：
14.类
//ES6 中有 class 语法。值得注意是，这里的 class 不是新的对象继承模型，它只是原型链的语法糖表现形式。
//函数中使用 static 关键词定义构造函数的的方法和属性：
class Task{
constructor() {
console.log(‘task instantiated!’);//当对象创建的时候就执行是构造函数
}

              showId() {                  console.log(23);              }              static loadAll() {                  console.log('Loading all tasks..');              }          }          console.log(typeof Task); // function          let task = new Task(); // 'task instantiated!'          task.showId(); // 23          Task.loadAll(); // 'Loading all tasks..'          class Car {              constructor() {                  console.log('Creating a new car');              }          }          class Porsche extends Car {              constructor(){                  super();                  console.log('Creating Porsche');              }          }          let pro = new Porsche(); //super继承了父亲的构造函数          /*          * extends 允许一个子类继承父类，需要注意的是，子类的 constructor 函数中需要执行 super() 函数。当然，你也可以在子类方法中调用父类的方法，如 super.parentMethodName()。在 这里 阅读更多关于类的介绍。

有几点值得注意的是：
类的声明不会提升（hoisting)，如果你要使用某个 Class，那你必须在使用之前定义它，否则会抛出一个 ReferenceError 的错误
在类中定义函数不需要使用 function 关键词
* */
15.Symbol
01. Symbol 是一种新的数据类型，它的值是唯一的，不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符，不过你访问不到这个标识符
var sym = Symbol( ‘some optional description’ );
console.log(typeof sym); // symbol
//注意，这里 Symbol 前面不能使用 new 操作符。
//如果它被用作一个对象的属性，那么这个属性会是不可枚举的：
let opt = {
val: 10,
vals: 10,
[ Symbol(‘random’) ]: ‘I’m a symbol’,
[ Symbol(‘random2’) ]: ‘I’m a symbol’,
};
//返回对象自己的属性的名称。一个对象的自己的属性是指直接对该对象定义的属性，而不是从该对象的原型继承的属性。对象的属性包括字段（对象）和函数。 —Object.getOwnPropertyNames
console.log(Object.getOwnPropertyNames(opt)); // [‘val’, ‘vals’]
//
console.log(Object.getOwnPropertySymbols(opt))// [Symbol(random), Symbol(random2)]
16.迭代器
01.迭代器允许每次访问数据集合的一个元素，当指针指向数据集合最后一个元素是，迭代器便会退出。它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和 value 属性的对象。ES6 中可以通过 Symbol.iterator 给对象设置默认的遍历器，无论什么时候对象需要被遍历，执行它的 @@iterator 方法便可以返回一个用于获取值的迭代器。数组默认就是一个迭代器：
var arr03 = [11,12,13];
var itr = arr03Symbol.iterator;

      itr.next(); // { value: 11, done: false }      itr.next(); // { value: 12, done: false }      itr.next(); // { value: 13, done: false }      itr.next(); // { value: undefined, done: true }

转载地址：http://www.barretlee.com/blog/2016/07/09/a-kickstarter-guide-to-writing-es6/