文档章节

前端那些事之ES6

上官清偌
 上官清偌
发布于 2017/09/07 10:22
字数 800
阅读 59
收藏 0
ES6

阿里云携手百名商业领袖、技术大咖,带您一探行进中的数字新基建!>>>

ES6学习

let

  • 1.let可以声明变量
  • 2.let 不存在变量提升
 //es5
 var a = [];
 for (var i = 0; i < 10; i++) {
     var c = i;
     a[i] = function () {
         console.log(c);
     }
 }
 a[4]();//9
 //es6
 var b = [];
 for (var j = 0; j < 10; j++) {
     let d = j;
     b[j] = function () {
         console.log(d);
     }
 }
 b[4]();//4
  • 暂时性死区
    • 只要块级作用域内存在let 命令,所有声明的变量就这在区域内,不爱外部的影响。
 {
     console.log(a); //undefined
     let a = 100;
     console.log(a); // 100
 }

 var a = 100;
 {
     console.log(a); //undefined
     let a = 100;
     console.log(a); // 100
 }
  • 不允许重复声明变量
 {
     var a = 100;
     var a = 200;
     console.log(a);
     
 }
 console.log(a);
 {
     var b = 100;
     let b = 200;
 }
 console.log(b);//报错
 {
     let c = 100;
     var c = 200;
 }
 console.log(c);//报错
 {
     let d =100;
     let d = 200;
 }
 console.log(d);//报错
  • 块级作用域
 //es6
 function fun() {
     let num = 100;
     if(true) {
         let num = 200;
         console.log(num); //200
     }
     console.log(num);
 }
 fun();//100

const

  • 定义常量
const pi = 3.149526;
console.log(pi);
 pi =3; //报错
console.log(pi);

  • 块级作用域
if(true) {
     const pi = 3.1415926;
 }
 console.log(pi); //报错,pi is not defined

  • 暂时性死区
 if(true) {
     console.log(pi); //报错,pi is not defined
     const pi = 3.1415926;
 }

  • 不可重复声明
 {
     var a = 1;
     const a =1;
     console.log(a); //报错
 }
  • const 定义对象
const obj = {};
obj.name = "zhangsan";
obj.age = 18;
console.log(obj.name);//zhangsan
console.log(obj.age);// 18
console.log(obj);//Object {name: "zhangsan", age: 18}

 //错误用法
 obj = {};
  • const 定义数组
const arr = [];
arr.push("hello"); //["hello"]
console.log(arr);
arr.length = 0;
console.log(arr); //[""]

 //错误用法
 arr = ["one"];

  • const 冻结对象
const obj = Object.freeze({});
obj.name = "zhangsan";
obj.age = 18;
console.log(obj.name);//undefiend
console.log(obj.age);//undefiend
console.log(obj);//obj
  • const 使用冻结对象
const obj = Object.freeze({
    name: 'zhangsan',
    age : 18
});
console.log(obj.name);//zhangsan
console.log(obj.age);//18
console.log(obj);//obj{name:'zhangsan', age:18}

  • 彻底冻结函数
  var constantize = (obj)=>{
        Object.freeze(obj);
        Object.keys(obj).forEach((key, value)=>{
            if(typeof obj[key] === 'object'){
            constantize(obj[key])
        }
    })
    }

Rest 参数的学习和扩展

  • 1.函数传参可以传多个
    let sum = (...m) => {
        let total = 0;
        for (let i of m) {
            total += i;
        }
        console.log(`total:${total}`); //14
}
sum(2,3,4,5);
  • 2....和数组结合称为函数的扩展
let arr = [1, 2];
    console.log(...arr); // 1 2

    let [a, b] = [4, 5];
    console.log(...[a, b]); // 4 5
  • 3:数组的扩展
 //es5
    let arr1 = [1, 3];
    let arr2 = [4, 5];
    let arr3 = arr1.concat(arr2);
    console.log(arr3); // 1, 3, 4, 5

    //es6
    let arr4 = [1, 3];
    let arr5 = [4, 5];
    let arr6 = [...arr4, ...arr5];
    console.log(arr6); //1, 3, 4, 5


    let  [c, ...d]=[1,2,3,4,5];
    console.log(c);//1
    console.log(d);//2,3,4,5

4:变量的扩展

  let str = 'es6';
    let str1 = [...str];
    console.log(str1);//["e", "s", "6"]

promise对象

//promise对象返回成功回调resolve,失败回调reject
let checkLogin = () =>{
    //一定要返回Promise对象
    return new Promise((resolve, reject) => {
        let flag = document.cookie.indexOf('userId')>-1? true: false
        if(flag = true) {
            //revolve成功回调函数
            resolve({
                status: 0,
                result: true
            })
        }else{
            reject(`error`);
        }
    })
}

checkLogin().then((res) => {
    //成功请求回来
    if(res.status ==0) {
        console.log(`login success`);
    }
}).catch((error) => {
    console.log(`login faild:${error}`);

})


let getUserInfo = () => {
    return new Promise((resolve, reject) => {
        let userInfo = {
            userId:101
        }
        resolve(userInfo)
    })
}

//promise 提供了all方法可以同时调用多个接口和请求
Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2])=> {
    if(res1.status==0){
        console.log(`all:${res1.result}`);//all:true
    }
    console.log(res2.userId);//101

})

es6 数组去重

let arr = [1,2,3,3,4,4,9];
let permissionClusterRepeat = Array.from(new Set(arr));

*es6设置数组 的交集和差集

var Array1 = [5,6,7,8,18,9,90,81]; 
var Array2 = [10,415,54,87,98,65,81];
let a = new Set(Array1);
let b = new Set(Array2); 
// 并集
let unionSet = new Set([...a, ...b]);
// set转化为数组
let unionSet1 = Array.from(unionSet);
console.log(unionSet1);
// 交集
let intersectionSet = new Set([...a].filter(x => b.has(x)));
// set转化为数组
let intersectionSet1 = Array.from(intersectionSet);
console.log(intersectionSet1);
// 差集
let differenceABSet = new Set([...a].filter(x => !b.has(x)));
// set转化为数组
let differenceABSet1 = Array.from(differenceABSet);
console.log(differenceABSet1);

动态生成指定长度的数组

Array.from({length:10}, (v,k) => k);
//[0,1,2,3,4,5,6,7,8,9]

© 著作权归作者所有

上官清偌
粉丝 11
博文 87
码字总数 123753
作品 0
浦东
程序员
私信 提问
加载中

评论(0)

推荐给Web前端开发人员的一些书籍(从基础到架构阶段)

有很多人问我说作为一个前端开发人员都需要看一些什么书籍,尤其是刚入门的新手,今天我整理了一下推荐给大家,大佬绕过。 HTML+CSS+JavaScript 网页设计 从入门到精通 作为一个前端新手,强...

osc_cnw29rq0
2019/03/14
6
0
读懂CommonJS的模块加载

叨叨一会CommonJS Common这个英文单词的意思,相信大家都认识,我记得有一个词组common knowledge是常识的意思,那么CommonJS是不是也是类似于常识性的,大家都理解的意思呢?很明显不是,这...

cherryvenus
2018/09/28
0
0
SegmentFault 2017 年社区周报 Vol.1

Hello,各位 SegmentFault 的 GG 和 MM,SegmentFault 新人 Jenny 来报道啦!本喵资料:性别女,爱好你猜,皂片请点击头像~ 新人一周见闻:分享了技术头条,学习了技术问题,放行了一丢丢内容...

Jenny
2017/04/21
0
0
Webpack4+Babel7+ES6兼容IE8

前阵子重构了一个挺有意思的项目,是一个基于浏览器环境的数据采集sdk。公司各个产品的前端页面中都嵌入了这个sdk,用于采集用户的行为数据,上传到公司的大数据平台,为后续的运营决策分析提...

drafish
2019/04/09
0
0
ES6模块与commonJS模块的差异

参考: 前端模块化 ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案。 其模块功能主要由两个命令构成:和。命令用于规定模块的对外...

DurianPudding
2019/03/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

.NET中小数,浮点数和双精度之间的区别? - Difference between decimal, float and double in .NET?

问题: What is the difference between decimal , float and double in .NET? .NET中的decimal , float和double float什么区别? When would someone use one of these? 有人什么时候会使用......

fyin1314
55分钟前
15
0
如何找出Windows上正在侦听端口的进程? - How can you find out which process is listening on a port on Windows?

问题: 如何找出Windows上正在侦听端口的进程? 解决方案: 参考一: https://stackoom.com/question/CXO/如何找出Windows上正在侦听端口的进程 参考二: https://oldbug.net/q/CXO/How-can...

技术盛宴
今天
10
0
OSChina 周三乱弹 —— 一家动物都快饿成标本了~

@黑觉非常君 :前天晚上9点开始睡觉,睡到昨天上午8点起床,昨天下午2点又睡,睡到下午7点多,晚上10点又困了,又睡,睡到今天上午8点,中途没醒过,怎么这么能睡,是不是快挂了。 能睡不是好...

小小编辑
今天
15
0
神剧推荐全剧最污片段精剪

神剧推荐,全剧最污片段精剪 豆瓣评分最高,脑洞最大,脑回路最曲折,恶搞无数经典,没有一条差评的神剧 整个系列完整版 到这里观看

a57571735
今天
22
0
pingan.

职位诱惑:金融,技术研发,技术攻关,大舞台大作为职位描述:职位诱惑:立志打造一支国内一流实盘量化交易框架开发团队职位描述:职位描述:负责实盘低时延量化交易框架及附属行...

MtrS
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部