首页 > 其他 > 详细

初学ES6

时间:2019-06-27 21:35:19      阅读:109      评论:0      收藏:0      [点我收藏+]

今天看了es6,虽然比较老,

但是对于初学者我来说还是有点帮助的。

一 .变量

定义变量:let    不能重复声明  ;常量:可以修改(let a=1; a=3); 有快级作用域(if(true){ a=1;} )

对于快级作用域需要讨论一下,

for(var i=0;i<a.length;i++){

    (function(i){

a[i].onclick=function(){

alert(i);

};})(i);

}

for(let i = 0;i<a.length;i++){

a[i].onclick=function(){

alert(i);

}

}

定义变量:const  不能重复声明;常量:不可以修改;快级作用域

二.函数 

1.箭头函数 =>

这两个价值等同

<script>
/*window.onload=function (){
alert(‘abc‘);
};*/
window.onload=()=>{
alert(‘abc‘);
};
</script>

----------------------------------------

同时我们发现也可以是这样的

--------------------------------------

<script>
/*let show=function (){
alert(‘abc‘);
};*/

let show=()=>{
alert(‘abc‘);
};

show();

</script>

---------------------------------

 

1), 如果只有一个参数,()可以省

2),如果只有一个return ,{} 可以省

<script>
let arr=[12, 5, 8, 99, 33, 14, 26];
/*arr.sort(function (n1, n2){
return n1-n2;
});*/

arr.sort((n1, n2)=>n1-n2);

alert(arr);
</script>

------------------------

一个参数的情况下

-------------------

<script>
let show=a=>a*2;

alert(show(12));
</script>

2.函数参数

1),参数的扩展

传入的参数如下

args 为剩余参数,必须为最后一个形参

<script>

function show(a,b,...args){

alert(a);

alert(b);

alert(args)

}

show(12,13,12,12)

</script>

--------------------------

<script>

let arr=[1,2,3]

show(...arr);

function show(a,b,c){

alert(a);

alert(b);

alert(c)

}

</script>

----------------------

<script>
function show(...args){
fn(...args);
}

function fn(a, b){
alert(a+b);
}

show(12, 5);
</script>

------------------

2),默认参数 (传了听你的,没传听我的)

<script>
function show(a, b=5, c=12){
console.log(a, b, c);
}

show(99, 19, 88);
</script>

--------------------------

3.解构赋值:

1).左右两边结构必须一样

2).右边必须是个东西

3).声明和赋值不能分开(必须在一句话里完成)

------------------------------

<script>
let [a,b,c]=[1,2,3];

console.log(a, b, c);
</script>

----------------------------------

let {a, c, d}={a: 12, c: 5, d: 6};

console.log(a, c, d);

-------------------------------------

let [{a, b}, [n1, n2, n3], num, str]=[{a: 12, b: 5}, [12,5,8], 8, ‘cxzcv‘];

console.log(a,b,n1,n2,n3,num,str);

-------------------------------------------------------

//粒度
let [json, arr, num, str]=[{a: 12, b: 5}, [12,5,8], 8, ‘cxzcv‘];

console.log(json,arr,num,str);

------------------------------------------

三.数组

map   映射  一对一

----------------------------------

<script>
let arr=[12,5,8];

let result=arr.map(function (item){
return item;
});

alert(result);
</script>

--------------------------------

<script>
let arr=[12,5,8];

let result=arr.map((item)=>{
return item;
});

alert(result);
</script>

--------------------------

<script>
let arr=[12,5,8];

let result=arr.map(item=>item);

alert(result);
</script>

----------------------

return item>=60?‘及格‘:‘不及格‘   ;

------------

<script>
let score=[19, 85, 99, 25, 90];

let result=score.map(item=>item>=60?‘及格‘:‘不及格‘);

alert(score);
alert(result);
</script>

--------------------------

reduce  汇总

---------------------------

<script>
let arr=[12,69,180,8763];

let result=arr.reduce(function (tmp, item, index){
//alert(tmp+‘,‘+item+‘,‘+index);
return tmp+item;
});

alert(result);
</script>

-----------------------------

<script>
let arr=[12,69,180,8763];
//tmp 是12,81 开始是第一个,剩下的是和,item是要相加的数,index是下标
let result=arr.reduce(function (tmp, item, index){
if(index!=arr.length-1){ //不是最后一次
return tmp+item;
}else{ //最后一次
return (tmp+item)/arr.length;
}
});

alert(result);
</script>

filter     过滤

----------------

<script>
let arr=[12,5,8,99,27,36,75,11];

let result=arr.filter(item=>{
return item%3==0;
});

alert(result);
</script>

------------------------

<script>
let arr=[12,5,8,99,27,36,75,11];

let result=arr.filter(item=>item%3==0);

alert(result);
</script>

-----------------------

<script>
let arr=[
{title: ‘男士衬衫‘, price: 75},
{title: ‘女士包‘, price: 57842},
{title: ‘男士包‘, price: 65},
{title: ‘女士鞋‘, price: 27531}
];

let result=arr.filter(json=>json.price>=10000);

console.log(result);
</script>

forEach 循环(迭代)

------------

<script>
let arr=[12,5,8,9];

arr.forEach((item,index)=>{
alert(index+‘: ‘+item);
});
</script>

四.字符串

五.面向对象

六.Promise

七.generator

八.模块化

初学ES6

原文:https://www.cnblogs.com/limingming1993/p/11099609.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!