ES6学习(下)
ES6中新增的数组知识
JSON数组格式转换
- JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式
let json = {
'0': 'jspang',
'1': '技术胖',
'2': '大胖逼逼叨',
length:3
}
let arr=Array.from(json);
console.log(arr)
- Array.from(xxx)可以将类似数组结构的代码转换成数组,比如json数据结构与set数据结构等,同时用扩展操作符比如
[...set数据结构]
也能将set数据结构转化成数组
Array.of()方法
- 可以把一堆文本或者变量转换成数组
let arr =Array.of(3,4,5,6);
console.log(arr);
let arr =Array.of('技术胖','jspang','大胖逼逼叨');
console.log(arr);
find( )实例方法:
- 这个方法就是从数组中查找到符合条件的项,返回不是数组,而filter返回时数组
- (ES6-map、filter、find、findIndex讲解)[http://www.cnblogs.com/studyshufei/p/7910384.html]
fill( )实例方法:
- fill()也是一个实例方法,它的作用是把数组进行填充,它接收三个参数,第一个参数是填充的变量,第二个是开始填充的位置,第三个是填充到的位置。
let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('jspang',2,5);
console.log(arr)
数组的遍历:for…of循环
- ES6新增的数组遍历
let arr=['jspang','技术胖','大胖逼逼叨']
for (let item of arr){
console.log(item);
}
箭头函数
ES6中的函数和数组补漏
对象的函数解构
- 我们在前后端分离时,后端经常返回来JSON格式的数据,前端的美好愿望是直接把这个JSON格式数据当作参数,传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值。
let json = {
a:'jspang',
b:'技术胖'
}
function fun({a,b='jspang'}){
console.log(a,b);
}
fun(json);
数组的函数解构
- 函数能解构JSON,那解构我们的数组就更不在话下了,我们看下边的代码。我们声明一个数组,然后写一个方法,最后用…进行解构赋值。
let arr = ['jspang','技术胖','免费教程'];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr);
...arr
这里用到了扩展操作符,因为扩展操作符内默认执行for...of...
循环将扩展操作符是把数组扩展成单独的参数,之后才能解构赋值。(因为解构赋值必须解构结构要统一,不然会报错)
in的用法
- 可以用来检测某个对象中是否有存在某个值
let obj={
a:'jspang',
b:'技术胖'
}
console.log('a' in obj); //true
- 如果检测某个数组中是否存在某个值,可以用
indexOf
方法判断或者用includes
方法判断
新的基本数据类型Symbol
- Symbol就是用来产生一个独一无二的值,可以防止属性名的冲突
声明Symbol
var a = new String;
var b = new Number;
var c = new Boolean;
var d = new Array;
var e = new Object;
var f= Symbol();
console.log(typeof(d));//Symbol
- 声明Symbol前不能加new
Symbol在对象中的应用
- 看一下如何用Symbol构建对象的Key,并调用和赋值
var jspang = Symbol();
var obj={
[jspang]:'技术胖'
}
console.log(obj[jspang]);//技术胖
obj[jspang]='web';
console.log(obj[jspang]);//web
- (Symbol)[https://www.jianshu.com/p/174f88d189c6]
ES6中对象
Object.is( ) 对象比较
- 对象的比较方法,以前进行对象值的比较,经常使用===来判断,比如下面的代码
var obj1 = {name:'jspang'};
var obj2 = {name:'jspang'};
console.log(obj1.name === obj2.name);//true
- 那ES6为我们提供了is方法进行对比。
var obj1 = {name:'jspang'};
var obj2 = {name:'jspang'};
console.log(Object.is(obj1.name,obj2.name)); //true
- 区分=== 和 is方法的区别是什么,看下面的代码输出结果。
console.log(+0 === -0); //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true
- 这太诡异了,我要怎么记忆,那技术胖在这里告诉你一个小妙招,===为同值相等,is()为严格相等。
Object.assign( )合并对象
- 作数组时我们经常使用数组合并,那对象也有合并方法,那就是assgin( )。看一下啊具体的用法。
var a={a:'jspang'};
var b={b:'技术胖'};
var c={c:'web'};
let d=Object.assign(a,b,c)
console.log(d);
Set和WeakSet数据结构
(Set和WeakSet数据结构)[http://jspang.com/2016/06/14/es6001/]
map数据结构
promise的基本用法
let state=1;
function step1(resolve,reject){
console.log('1.开始-洗菜做饭');
if(state==1){
resolve('洗菜做饭--完成');
}else{
reject('洗菜做饭--出错');
}
}
function step2(resolve,reject){
console.log('2.开始-坐下来吃饭');
if(state==1){
resolve('坐下来吃饭--完成');
}else{
reject('坐下来吃饭--出错');
}
}
function step3(resolve,reject){
console.log('3.开始-收拾桌子洗完');
if(state==1){
resolve('收拾桌子洗完--完成');
}else{
reject('收拾桌子洗完--出错');
}
}
new Promise(step1).then(function(val){
console.log(val);
return new Promise(step2);
}).then(function(val){
console.log(val);
return new Promise(step3);
}).then(function(val){
console.log(val);
return val;
});
class类的使用
类的声明与使用
class Coder{
name(val){
console.log(val);
}
}
let jspang= new Coder;
jspang.name('jspang');
类的多方法声明
class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('jspang')+':'+'Skill:'+val);
}
}
let jspang= new Coder;
jspang.name('jspang');
jspang.skill('web');
- 这里需要注意的是两个方法中间不要写逗号了,还有这里的this指类本身,还有要注意return 的用法。
类的传参
- 在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。
class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('jspang')+':'+'Skill:'+val);
}
constructor(a,b){
this.a=a;
this.b=b;
}
add(){
return this.a+this.b;
}
}
let jspang=new Coder(1,2);
console.log(jspang.add());
- 我们用constructor来约定了传递参数,然后用作了一个add方法,把参数相加。这和以前我们的传递方法有些不一样,所以需要小伙伴们多注意下。
class的继承
class htmler extends Coder{
}
let pang=new htmler;
pang.name('技术胖');
- 声明一个htmler的新类并继承Coder类,htmler新类里边为空,这时候我们实例化新类,并调用里边的name方法。结果也是可以调用到的。