模块化,箭头函数

2019-05-28  本文已影响0人  Clover园

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.
上一篇 下一篇

猜你喜欢

热点阅读