javascript-ecmaScript6(初步了解)

太过爱你忘了你带给我的痛 2022-06-11 06:08 198阅读 0赞

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/][http_www.barretlee.com_blog_2016_07_09_a-kickstarter-guide-to-writing-es6]

[http_www.barretlee.com_blog_2016_07_09_a-kickstarter-guide-to-writing-es6]: http://www.barretlee.com/blog/2016/07/09/a-kickstarter-guide-to-writing-es6/