美文网首页
模块化,箭头函数

模块化,箭头函数

作者: Clover园 | 来源:发表于2019-05-28 11:43 被阅读0次

1.ES6的模块化的基本规则或特点:####

1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取。 一个模块就是一个单例,或者说就是一个对象;

2:每一个模块内声明的变量都是局部变量, 不会污染全局作用域;

3:模块内部的变量或者函数可以通过export导出;

4:一个模块可以导入别的模块
5:ES6的import和export被提前到js的最顶层(提升), 在函数或者对象,或者基本值被导出去的时候提前被静态分析过

2.ES6中模块化主要指import ,export####

export可以导出变量,常量,函数,导出多个可以用{};
import可以在export之后进行导入;

3.箭头函数####

箭头函数修复了this的指向,使其永远指向词法作用域:

4.模板字符串####

ES6中只需要将变量放入${}中既可完成字符串的拼接

//不使用
var name = 'Your name is ' + first + ' ' + last + '.'
//使用
var name = `Your name is ${first} ${last}.`

5.函数参数默认值####

function foo(height = 50, color = 'red')
{
    // ...
}
//不使用情况
function foo(height, color){
    var height = height || 50;
    var color = color || 'red';
    //...
}

6. 解构赋值####

可以获取或修改数组和对象的值

//数组例:
var foo = ["one", "two", "three", "four"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

//如果你要忽略某些值,你可以按照下面的写法获取你想要的值
var [first, , , last] = foo;
console.log(first); // "one"
console.log(last); // "four"
//``````````````````````````````````````````````````````````````````````
//你也可以这样写
var a, b; //先声明变量

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
//对象列:
const student = {
  name:'Ming',
  age:'18',
  city:'Shanghai'  
};

const {name,age,city} = student;
console.log(name); // "Ming"
console.log(age); // "18"
console.log(city); // "Shanghai"

//-------------------------------------------------------------
var {
  StyleSheet,
  Text,
  View
} = React;

等同于
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.Text;

7.延展操作符(Spread operator)####

可用于函数调用,数组拷贝,数组连接,es2018增加了对对象的支持
这个的引入几乎不会用到extend这个函数来。通过它可以将数组作为参数直接传入函数:

var people=['Wayou','John','Sherlock'];
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//改写为
sayHello(...people);//输出:Hello Wayou,John,Sherlock 
function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

8.对象属性简写

const name='Ming',age='18',city='Shanghai';
        
const student = {
    name,
    age,
    city
};
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}

9.Promise

主要解决回调的问题;

var test = (a,b)=>{
    return new Promise((reslove,reject)=>{
        //异步操作
        //...
        
        reslove(resoult)//返回正确结果
        
        //...
        reject(err)    //出错时的结果
    })
}
 
 
//使用
 
test(a,b).then(res=>{
    //...promise   reslove()返回正确结果后执行到这里
}).catch(err=>{
    //前面reject(err)后代码会执行到里
})
 
//或者
 
try{
    var resoult = await test(a,b)
    //...
}catch(er){
    //...
}

10.let和const

都是块级作用域;
let 命令也用于变量声明 ;在函数外部可以获取到b,获取不到a,因此例如for循环计数器就适合使用let

{
    let a = 10;
    var b = 1;        
}

const用于声明一个常量,设定后值不会再改变

const PI = 3.1415;
PI // 3.1415
PI = 3; //TypeError: Assignment to constant variable.

相关文章

  • 模块化,箭头函数

    1.ES6的模块化的基本规则或特点:#### 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载...

  • Js 语法 ES6、ES7、ES8、ES9、ES10、ES11、

    1. ES6(2015) (1)类(class) (2)模块化(ES Module) (3)箭头(Arrow)函数...

  • ES6十个常用新特性

    参考文章-类-模块化-箭头函数-函数参数默认值-模板字符串-解构赋值-延展操作符-对象属性简写-Promise-L...

  • Android:ReactNative语法基础(上)

    ES6特性 类 模块化 箭头函数 函数参数默认值 模板字符串 解构赋值 延展操作符 对象属性简写 Promise ...

  • ES6之后的新语法

    ES6 类 模块化 箭头函数 函数参数默认值 模板字符串 解构赋值 延展操作符 对象属性简写 Promise Le...

  • ES6新特性

    类 模块化 箭头函数 函数参数默认值 模板字符串 解构赋值 延展操作符(展开操作符) 对象属性简写 Promise...

  • ES6~箭头函数

    什么是箭头函数 单表达式箭头函数 相当于 多表达式箭头函数 箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有...

  • 箭头函数和立即执行函数

    箭头函数 箭头函数和普通函数有什么区别?如果把箭头函数转换为不用箭头函数的形式,如何转换主要是this的差别,箭头...

  • 学习 ES 6 箭头函数

    箭头函数的用法 ES6 允许使用“箭头”(=>)定义函数。 箭头函数的一个用处是简化回调函数。 箭头函数 this...

  • 箭头函数

    箭头函数 箭头函数能让this的指向固定化 分析:1)第一个setInterval()中使用了箭头函数,箭头函数使...

网友评论

      本文标题:模块化,箭头函数

      本文链接:https://www.haomeiwen.com/subject/ydyrtctx.html