文档章节

ES6

igoryuyu
 igoryuyu
发布于 2018/08/12 19:09
字数 565
阅读 8
收藏 0

ES6

语法糖

箭头函数

[1,2,3,4].map(item => item + 1)
axios({
  url: 'https://www.zhihu.com/api/v4/me?include=account_status%2Cis_bind_phone%2Cis_force_renamed%2Cemail%2Crenamed_fullname',
  method: 'GET'
}).then(res => res.data)
export default {
  name: 'app',
  data() {
    return {
      initContent: 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no',
    }
  },
  metaInfo() {
    return {
      title: 'VUE',
      meta: [
        { name: 'viewport', content: this.initContent },
      ],
    }
  },
  computed: {
    isMac() {
      return navigator.userAgent.indexOf('Mac') !== -1
    },
  },
  components: {
  },
  watch: {
    $route() {
      document.getElementById('vue_jia').remove()
      this.init()
      window.scrollTo(0, 0)
    },
  },
  created() {
    if (navigator.userAgent.indexOf('iPad') !== -1) {
      this.initContent = 'width=device-width, initial-scale=0.75,user-scalable=yes, minimum-scale=0.75, maximum-scale=3.0'
    } else {
      this.initContent = 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no'
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const url = 'http://v3.jiathis.com/code/jia.js'
      const script = document.createElement('script')
      script.setAttribute('src', url)
      script.setAttribute('id', 'vue_jia')
      document.getElementsByTagName('head')[0].appendChild(script)
    },
  },
}

模块化

js加入原生模块化之前使用的:
解决方案:commonjs amd cmd umd等
模块加载库:requireJs seaJs fis browserify webpack
import React from 'react'

组件化

angular: directory
    
directive("picker", require("./picker"))

picker
--| index.js
--| index.html

....
<picker ng-model="..."><picker/>
....

react vue: component

Header.vue
Header.js[x]

import Header from '../...'

...
<Header></Header>
...

常量(const) 块级作用域(let,const) ,不存在变量提升,必须声明后使用

const

const 为constant的缩写,用于定义常量
const优势: 可以为程序工程化提供内存安全,因为const定义常量的原理是阻隔变量名所对应的内存地址被改变,并非值不可变
ECMAScript在对变量的引用进行读取时,会从该变量当前所对应的内存地址所指向的内存空间中读取内容。而当用户改变变量的值时,
引擎会重新从内存中分配一个新的内存空间以存储新的值,并将新的内存地址与变量绑定。const的原理便是当变量名尝试变更内存地址时抛出异常。


const API = 'api' //常量
API = 'VAPI'        //Uncaught SyntaxError: Identifier 'API' has already been declared


const obj = {
  a: 1
}

obj.a = 3
console.log(obj.a) // 3

obj.b = 1

console.log(obj.b) // 1

let, const 块级作用域
var count = 1 // 全局作用域
let num = '02166668888'
const query = () => {
  var local = 1 // 函数作用域
}
query()
console.log(count)  // 1 
console.log(num)    // 02166668888 
console.log(local)  // Uncaught ReferenceError: local is not defined
for(var i = 0; i < 10; i++){

}
console.log(i) // 10

for(let j = 0; j < 10; j++){

}
console.log(j) // Uncaught ReferenceError: j is not defined

const query = () => {
  var local = 1 // 函数作用域
  console.log(local)
}
query() // 1

for(var i = 0; i < 10; i++){
  console.log(i) //  0 1 2 3 4 5 6 7 8 9
}

for(let j = 0; j < 10; j++){
  console.log(j) //  0 1 2 3 4 5 6 7 8 9
}

© 著作权归作者所有

igoryuyu
粉丝 0
博文 15
码字总数 31758
作品 0
徐汇
高级程序员
私信 提问
[译] You Might Not Use ES6

原文作者:Addy Osmani 原文链接: es6-equivalents-in-es5 译者:snow 喜欢理由:帮助我们更好的了解 ES6 语法 语法目录 箭头函数 块级作用域 模板字符串 计算属性 解构赋值 默认参数 Iter...

snowLu
01/15
0
0
前端开发不得不知的ES6十大新特性

es6排名前十的最佳特性列表 默认参数 in es6 模板文本 in es6 多行字符串 in es6 解构赋值 in es6 增强的对象文本 in es6 箭头函数 in es6 Promise in es6 块作用域构造Let and Const Class...

gyfeng1003
05/02
0
0
张成文——ECMAScript 6 开发体系实践

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

yunwangjun
2016/04/24
2.4K
1
前端开发者不得不知的 ECMAScript 6 十大特性

ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。 本文主要针对ES6做一个简要介绍。 ...

oschina
2016/03/16
26.2K
24
linux 环境下 angular2 生成component 报错 ELOOP:too many symbolic links encountered, stat

adaptercat@debian :/project/angular/AngularTest/src/app$ ng generate component t Error: ELOOP: too many symbolic links encountered, stat '/project/angular/AngularTest/node_modul......

adaptercat
2017/10/10
486
1

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
9
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部