文档章节

前端那些事之ES6

上官清偌
 上官清偌
发布于 2017/09/07 10:22
字数 800
阅读 18
收藏 0
点赞 0
评论 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
博文 85
码字总数 118451
作品 0
浦东
程序员
SegmentFault 2017 年社区周报 Vol.1

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

Jenny ⋅ 2017/04/21 ⋅ 0

ES6-7

JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMAScript 6 Promises规范为中心,着重向各位读者介绍JavaScr...

掘金官方 ⋅ 01/05 ⋅ 0

前端的那些事之JavaScript(上)

1.javascript的概念以及和ECMAScript的关系 B/S架构非常火热,B代表的是浏览器,Javascript是浏览器内置语言,采用V8引擎,又称:ECMAScript ES5和ES6: ES5是基于客户端开发的,ES6是基于服务...

上官清偌 ⋅ 2016/12/09 ⋅ 0

张成文——ECMAScript 6 开发体系实践

2016年04月23日14:00時,在武汉市东湖高新技术开发区民院路38号纽宾凯鲁广国际酒店(光谷步行街地铁C出口省测绘局斜对面),舉行的规模在800人左右的2016源创会武汉站。由张成文(腾讯SNG web)分...

yunwangjun ⋅ 2016/04/24 ⋅ 1

【GitChat】精选——JavaScript进阶指南

GitChat 是一款基于微信平台的 IT 阅读/写作互动产品。我们的目的是通过这款产品改变 IT 知识的学习方式,让专业读者获得自主选择权,让知识分享者获得收益。 关于GitChat 你想知道的都在这里...

blogdevteam ⋅ 2017/11/24 ⋅ 0

Mozilla CTO:JavaScript 未來將年年小改版

用来规范JavaScript(ECMAScript)的标准ECMA-262,其实作以及制定的工作由TC39(技术委员会,Technical Committee)负责,成员来自各大科技公司,像是Google、Mozilla、微软以及Apple等等,...

oschina ⋅ 2015/10/10 ⋅ 13

第一次经历金三银四,前端面试总结

距离上次面试已经是21个月了,又要面试了,不免忐忐忑忑 小伙伴支招,最起码要投两轮简历吧: 第一轮,投不是最意向的,大公司小公司都投一下试试,了解一下市场对一年多工作经验的前端有什么...

瓦斯程序媛 ⋅ 05/16 ⋅ 0

浅谈前端与网络请求

作者:不洗碗工作室 - 张景浩 博客地址:http://michaelcode.cn版权归作者所有,转载请注明出处 toc: 前端 学前端也有一段时间了,想浅谈一下前端与网络请求。谈网络请求,自然绕不开的一个话...

不洗碗工作室 ⋅ 2017/12/08 ⋅ 0

ELSE 技术周刊(2017.11.06期)

业界动态 NEWS: Node.js 8 Moves into Long-Term Support and Node.js 9 Becomes the New Current Release Line Node 8成为LTS版本,当前发布版本为Node 9。Node的版本发布越来越快了。 Vers......

风清洋ELSE ⋅ 2017/11/07 ⋅ 0

React 最佳实践示例项目

Github 上已经有一堆基于 React 的 HackerNews 客户端,为什么还需要一个新的? 这一个是用 React 实现的 HackerNews 客户端,项目地址在这 react-hacker-news。 写在前面 GitHub 上已经有一...

kamidox ⋅ 2016/11/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部