zoukankan      html  css  js  c++  java
  • ES6学习笔记

    一、let和const

    1、let
    (1)let所声明的变量,只在命令所在的代码块内有效;
    (2)let所声明的变量,在域解析的时候不会被提升,即:声明变量前,不可被调用;
    (3)let不允许在同一个作用域下声明已经存在的变量;
    (4)在for循环语句之内是一个父作用域;在循环体内是一个子作用域;二者相互分离,互不干涉。

    2、const
    (1)const所声明的变量,只在命令所在的代码块内有效;
    (2)const所声明的变量,在域解析的时候不会被提升,即:声明变量前,不可被调用;
    (3)const不允许在同一个作用域下声明已经存在的变量;
    (4)const声明的变量必须赋值;
    (5)const声明的常量存储简单的数据类型的时候不可改变其值;如果存储的是对象,那么引用不可被改变,至于对象里面的数据如何变化,是没有关系的。

    学习网址:http://blog.csdn.net/u014695532/article/details/51814984

    二、变量的解构赋值

    1、数组的结构赋值:变量的取值由位置决定
    2、对象的解构赋值:变量名与属性名一一对应,次序不重要
    3、基本类型解构赋值:null/undefined不能进行解构赋值

    学习网址:http://www.cnblogs.com/Gary-Guoweihan/p/5822937.html

    三、数据结构Set

    1、集合的概念
    集合是由一组无序且唯一的项组成,类似于数组,但没有重复的值。
    特点:key和value相同,没有重复的value。
    2、如何创建一个Set:const s = new Set([1,2,3]);
    3、Set的属性:s.size = 3;
    4、Set类的方法
    (1)add(value)添加一个数据,返回set结构本身;s.add(“value”)
    (2)delete(value)删除指定数据,返回一个布尔值,表示删除是否成功;
    (3)has(value)判断该值是否为Set成员,返回一个布尔值;
    (4)clear()清除所有数据,没有返回值;
    (5)keys()返回键名的遍历器;
    (6)values()返回键值的遍历器;
    (7)Entries()返回键值对的遍历器;
    (8)ForEach()使用回调函数遍历每个成员:
    s.forEach(function(value,key,set){ });

    学习网址:http://www.cnblogs.com/diligenceday/p/5479076.html

    5、set不允许有重复数据,如何利用set为数组进行去重?

    var array = [1,2,3,4,2,2,5];
    var set = new Set(array);
    array = Array.from(set);
    //注:Array.from()方法从一个类似数组或可迭代的对象中创建一个新的数组实例。
    

    学习网址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
    为数组去重:https://segmentfault.com/a/1190000009122238

    四、数据结构Map(字典类型)

    1、字典:是用来存储不重复key的hash结构;不同于集合(set)的是,字典使用的是[键,值]的形式来储存数据的。
    2、如何创建一个Map

    Const map = new Map([
    	[‘a’:1],
    	[‘b’:2]
    ]);
    

    3、Map类的属性map.size = 2;
    4、Map类的方法
    (1)set(key,value):设置键名key对应的键值为value,然后返回整个Map结构,如果key已经有值,则键值会被更新,否则就新生成改键。

    map.set(“key”,”value”).set(“key2”,”value2”).set(“key”,”value3”);
    //注:key对应的键值最终为value3
    

    (2)get(key)读取key对应的键值,如果找不到key,返回undefinded

    map.get(“key”);=====>value3
    

    (3)delete(key) 删除某个键,返回true。如果删除失败,返回false

    map.delete(“key”);=====>true
    

    (4)has(key) 方法返回一个布尔值,表示某个键是否存在当前Map对象之中

    map.has(“key2”);=====>true
    map.has(“key”);=====>false
    

    (5)clear() 清除所有数据,没有返回值;
    (6)keys()返回键名的遍历器;
    (7)values()返回键值的遍历器;
    (8)Entries()返回键值对的遍历器;
    (9)ForEach()使用回调函数遍历每个成员:map.forEach(function(value,key,map){ });

    //注:map属于地址存值,里面的key的排列顺序是按照添加顺序进行排列的。
    

    学习网址:http://www.jb51.net/article/110048.htm

    五、iterator和for-of循环

    1、iterator是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署iterator接口,就可以完成遍历操作,而且这种遍历操作是依次处理该数据结构的所有成员。
    2、iterator遍历器的作用:
    (1)为各种数据结构,提供一个统一的、简便的访问接口;
    (2)使得数据结构的成员能够按某种次序排列;
    (3)ES6新增了遍历命令for..of循环,iterator接口主要供for..of消费。
    3、手写iterator接口

    Const arr = [1,2,3];
    Function iterator(arr){
    	let index = 0;
    	return{
    		next:function(){
    			return index < arr.length ?
    			{value : arr[index++], done : false} :
    			{value : undefined, done : true};
    		}
    	}
    }
    Const it = iterator(arr);
    Console.log(it.next());====>1
    Console.log(it.next());====>2
    Console.log(it.next());====>3
    Console.log(it.next());====>undefined
    

    学习网址:http://www.cnblogs.com/sker/p/5520518.html

    4、凡是具备symbol.iterator属性的数据结构都具备iterator接口
    5、凡是具备iterator接口的数据结构都可以进行如下操作:解构赋值+扩展运算符
    如何给一个不具备iterator接口的数据结构部署一个iterator接口?

    六、class的基本使用

    1、原型链

    Class miaov{
    	Constructor(a,b){
    		This.a = a;
    		This.b = b;
    		Return this;
    	}
    	Print(){
    		Console.log(this.a + ‘ ’ + this.b );
    	}
    };
    
    Const miaov = new miaov(“hello”,”world”).print();
    

    2、miaov中的constructor方法是构造方法,this关键字则代表实例对象,也就是说,ES5的构造函数miaov,对应ES6的miaov这个类的构造方法;
    3、miaov这个类除了构造方法,还定义了一个print方法:注意,定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错;
    4、构造函数的prototype属性,在ES6的“类”上面继续存在,而且类的所有方法都定义在类的prototype属性上面;
    5、定义在“类”中的方法都是不可以枚举的。

    Console.log(object.keys(miaov.prototype));
    

    6、constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法,一个类必须有constructor方法,如果没有显示定义,一个空的constructor方法会被默认添加;
    生成类的实例对象的写法,与ES5完全一样,也是使用new命令。如果忘记加上new,像函数那样调用class,将会报错;

    七、class的继承相关知识(canvas画布实现小球自由落体运动)
    1、extends、static、super
    通过extends继承父类,通过super()传递参数

    八、Symbol数据类型

    1、什么是Symbol?
    (1)Symbol表示独一无二的值,它是js中的第七种数据类型
    (2)js数据类型:
    基本数据类型:Symbol、string字符串、number数字、boolean布尔、array数组、Null、Undefined
    引用数据类型:object对象
    2、创建symbol数据类型值

    Let sl = Symbol();
    
    //注:Symbol函数前不能使用new,否则会报错,原因在于Symbol是一个原始类型的值,不是对象。
    

    3、Symbol参数

    Let s2 = Symbol(“a”); //a就是Symbol的参数
    //Symbol函数读取一个字符串作为参数,表示对Symbol的描述,主要是为了在控制台显示,或者转为字符串的时候,比较容易区分。
    

    4、Symbol数据类型的转换

    String(Symbol(“miaov”)); //转换成字符串
    Symbol(“leo”).toString(); //转换成字符串
    !!Symbol(); //true值
    //注:Symbol不能使用任何运算符进行运算
    

    5、作为对象的属性名

    //注:不能被for...in...循环遍历
    

    九、内置对象的扩展

    1、字符串的扩展
    模板字符串:

    (1)字符串放在反引号当中(tab上的为反引号)
    (2)<span> ${ ‘首页’ } </span>
    (3)支持三目运算
    

    2、repeat

    Let str1 = ‘a’;
    Let str2 = str1.repeat(3); //输出aaa
    

    3、includes()、startsWith()、endsWith() //返回true/false

    4、数组的扩展

    //转换成数组:Array.from()、Array.of()、find()、findIndex()【函数】、fill()
    Array.from(); //转换成数组
    Array.of(1); //输出[1]
    Let res = arr.find(function(){
    })
    

    5、对象的扩展
    (1)对象的简洁表示法:
    (2)Object.is(+0,-0); //返回false
    (3)Object.assign():用于对象的合并,将源对象的所有可枚举属性,复制到目标对象,例:Object.assign(目标对象,源对象,源对象);

    十、函数的扩展

    1、为函数参数指定默认值

    function fn(a=10,b=20){};
    Fn(0,10);
    

    2、函数的rest参数
    Rest 参数形式为(“...变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了,rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

    Function sum(a,...arr){
    
    	//其中,...arr为rest参数
    
    }
    
    

    3、箭头函数:使用“箭头”(=>)定义函数

    Const fn = a => a; //调用fn(1),输出1
    Const fn = (a,b) => a+b; //调用fn(1,2),输出3
    (3)Const fn = (a,b) => {
    			a = a *2;
    			b = b *2;
    			return a+b;
    		} //调用fn(1,2),输出6
    
    (4)const fn = (a,b) => ({a,b}); //调用fn(1,2),输出一个对象{a:1,b:2}
    
    

    注意:
    (1)箭头函数体内没有自己的this对象,所以在使用的时候,其内部的this就是定义时所在环境的对象,而不是使用时所在环境的对象;不能给箭头函数使用call、apply、bind去改变其内部的this指向;
    (2)箭头函数体内没有arguments对象,如果要用,可以用rest参数代替;
    例:const fn = (...arr) => arr; //调用fn(1,2,3,4),输出1,2,3,4
    (3)不可以当做构造函数,不可以使用new命令,否则会抛出一个错误;
    (4)箭头函数不能当做Generator函数。

    十一、异步操作之Promise

    1、基本概念
    Promise: 是ES6中新增的异步编程解决方案,体现在代码中它是一个对象,可以通过Promise构造函数来实例化。

    new Promise(cb) //===>实例的基本使用,
    //三种状态:Pending(进行中) Resolved (已完成)Rejected(已失败),状态一旦改变就不会更改。
    

    两个原型方法:

    //----Promise.prototype.then()
    //----Promise.prototype.catch()
    

    两个常用的静态方法:

    //----Promise.all()
    //----Promise.resolve()
    //例:
    const p = new Promise(function(resolve,reject){
    	Const img = new Image();
    	Img.src = imgs[0];
    	Img.onload = function(){
    		resolve(this);
    	};
    	Img.onerror = function(){
    		reject(new Error(‘图片加载失败’));
    	};
    });
    
    p.then(function(img){ //处理成功时执行的回调函数
    	$(“body”).append(img);
    }).catch(function(err){ //捕获失败时的异常
    	console.log(err);
    })
    
    //封装函数:
    Function loadImg(url){
    	const p = new Promise(function(resolve,reject){
    		Const img = new Image();
    		Img.src = url;
    		Img.onload = function(){
    			resolve(this);
    		};
    		Img.onerror = function(){
    			reject(new Error(‘图片加载失败’));
    		};
    	});
    	return p;
    }
    

    2、Promise.all()可以将多个Promise实例包装成一个新的Promise实例
    (1)当所有Promise实例的状态都变成resolved,Promise.all的状态才会变成resolved,此时返回值组成一个数组,传递给then中的resolve函数;
    (2)只要其中一个被rejected,Promise.all的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

    //例:
    const allDone = Promise.all([loadImg(imgs[0]),loadImg(imgs[1]),loadImg(imgs[2])]);
    allDone.then(function(datas){
    	//执行成功时的回调函数
    }).catch(function(err){
    	Console.log(err); //捕获失败时的异常
    })
    

    3、Promise.resolve()
    (1)参数是Promise实例,将不作任何修改,原封不动地返回这个实例。

    //例:
    Promise.resolve(lloadImg(imgs[0])).then(function(img){
    	$(“body”).append(img);
    })
    

    (2)将对象转为Promise对象,然后就立即执行thenable对象的then方法

    //例:
    Promise.resolve({
    	then(resolve,reject){
    	
    		const img = new Image();
    		Img.src = imgs[1];
    		Img.onload = function(){
    			resolve(this);
    		}
    	}
    }).then(function(img){
    	$(“body”).append(img);
    })
    

    (3)参数是一个基本数据类型或者不传参数,那么返回一个状态为resolved的Promise对象。

    //例:
    Promise.resolve(‘miaov’).then(function(str){
    	Console.log(str);
    })
    //或者
    const p = Promise.resolve(); //console.log(p),输出一个状态为resolved的	Promise对象。
    

    十二、ES6是如何实现模块化的?
    ES6原生支持模块化了,通过自带的export(导出)和import(导入)来实现。
    1、传统的模块模式基于闭包,返回“公有API”;
    2、export的使用方法
    方式一:

    export function fn() {
    	// 导出函数
    }
    export var num = 42; // 导出变量
    var arr = [1,2,3];
    export { arr };
    

    方式二:

    function fn() {
    
    }
    var num = 42;
    var arr = [1,2,3];
    export {fn,num,arr}; //统一导出
    

    3、import的使用方法
    如果想导入一个模块的API中的特定命名成员到顶层作用域,使用以下语法:

    import { foo, bar, baz } from "foo";
    
    ps: 这里的{ .. }语法可能看起来像一个对象字面量,甚至是像一个对象解构语法。但是,它的形式仅对模块而言是特殊的,所以不要将它与其他地方的{ .. }模式搞混了。
    

    被罗列的标识符foo,bar和baz必须匹配在模块的API上的命名导出(这里将会发生静态分析和错误断言)。它们在你当前的作用域中被绑定为顶层标识符。

    import { foo } from "foo";
    foo();
    

    可以重命名被导入的绑定标识符,就像:

    import { foo as theFooFunc } from "foo";
    theFooFunc();
    
  • 相关阅读:
    获取一个数组里面第K大的元素
    小白初识 归并排序(MergeSort)
    小白初识 基数排序(RadixSort)
    memset()的正确用法
    HDU2071(水题)
    HDU 2090
    并查集模板
    HDU 1222
    HDU1084(快速排序)
    HDU 2043
  • 原文地址:https://www.cnblogs.com/gaos/p/7767954.html
Copyright © 2011-2022 走看看