ES6(一)

ES6(一)

技术杂谈小彩虹2021-07-12 18:52:25120A+A-

前端小白,更新一些特别特别基础的知识。 这是我参与更文挑战的第1天,活动详情查看: 更文挑战

1. 字面理解ES6的三种声明方式:

  • var:它是variable的简写,可以理解成变量的意思。 全局变量

  • let:它在英文中是“让”的意思,也可以理解为一种声明的意思。 局部变量

  • const:它在英文中也是常量的意思,在ES6也是用来声明常量的,常量你可以简单理解为不变的量。

2. 解构赋值

① 数组的解构赋值:let [a,[b,c],d]=[1,[2,3],4];

区分 let [a,b="1"]=['2',undefined]; console.log(a+b);let [a,b="1"]=['2',null]; console.log(a+b);

② 对象的解构赋值:

let {foo,bar} = {foo:'1',bar:'2'};
console.log(foo+bar);
let foo;
{foo} ={foo:'1'};    //此行需改成才可编译成功 ({foo} ={foo:'1'});
console.log(foo); 

③ 字符串解构:

const [a,b,c]="qwe";
console.log(a);
console.log(b);
console.log(c);

3. 对象扩展运算符(…):

① 允许它传入的参数是不确定的,这时候可以使用对象扩展运算符来作参数

function q(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);
}
q(1,2,3);    //正确

function q(a,b,c){
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
}
q(1,2,3);    //error

② 扩展运算符的用处:

let arr1=['www','baidu','com'];
let arr2=arr1;                 //对内存堆栈的引用,而不是真正的赋值。
console.log(arr2);
arr2.push('ab');
console.log(arr1);

控制台输出: ["www", "baidu", "com"] ["www", "baidu", "com", "ab"]

这是我们不想看到的,可以利用对象扩展运算符简单的解决这个问题。

let arr1=['www','baidu','com'];
//let arr2=arr1;
let arr2=[...arr1];
console.log(arr2);
arr2.push('ab');
console.log(arr2);
console.log(arr1);

控制台输出:

["www", "baidu", "com"] ["www", "baidu", "com", "ab"] ["www", "baidu", "com"]

Solved

4. rest运算符,用…(三个点)来表示

function q(first,...arg){
    console.log(arg.length);
}
q(0,1,2,3,4,5,6,7);//输出结果为7,arg里有7个数组元素

② 循环输出rest运算符:

es5语法:

function q(first,...arg){
    for(let i=0;i<arg.length;i++){
        console.log(arg[i]);
    }
}
q(0,1,2,3,4,5,6,7);

es6语法:

function q(first,...arg){
    for(let val of arg){
        console.log(val);
    }
}
q(0,1,2,3,4,5,6,7);

ps:for…of的循环可以避免我们开拓内存空间,增加代码运行效率.

微信图片_20210513135134.jpg END.明天见

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们