ES6新特性总结-julia

一： let、const 和 block 作用域

1：let 和 const 都是块级作用域（ES6 推荐在函数中使用 let 定义变量，而非 var：）

var a = 2;
{
  let a = 3;
  console.log(a); // 3
}
Xconsole.log(a); // 2

2：let 定义的变量不会被变量提升

console.log(a);  // undefined
var a = 'hello';

# 上面的代码相当于
var a;
console.log(a);
a = 'hello';

# 而 let 就不会被变量提升
console.log(a); // a is not defined
let a = 'hello';

3：const 定义的常量不能被修改

//ES5中的常量，把常量绑定在全局对象window中
Object.defineProperty(window,"PI2",{
    value:3.1415926,
    writable:false,
})
console.log(window,PI2);

//　ES6中实现常量
const PI  = 3.1415926;
console.log(PI);
PI = 4;

// 控台输出显示赋值无效并且报错时,用以下代码输出不影响下边的执行
try {
   PT=4
  } catch (e) {
    console.log(e); 
  }

var name = "bai";
name = "ming";
console.log(name); // ming


const name = "bai";
name = "ming"; // Assignment to constant variable.
console.log(name);

const 声明的常量类似于指针，它指向某个引用，也就是说这个「常量」并非一成不变的

{
  const ARR = [5,6];
  ARR.push(7);
  console.log(ARR); // [5,6,7]
  ARR = 10; // TypeError
}

4：作用域

用块 ( 花括号 ) 给代码做一个隔离：

//es5中写法比较复杂（用立即执行函数
(function(){
    var foo  = function(){
        return 1
    }
    console.log("foo()===1",foo()===1);
    (function(){
        var foo = function(){
            return 2
        }
        console.log("foo()===2",foo()===2);
    })();
})();

//es6中用一个花括号代表一个新的块级作用域保证不被干扰  
{
    function fou(){
        return 1;
    }
    console.log('fou()===1',fou()===1);
    {
        function fou(){
            return 2;
        }
        console.log('fou()===2',fou()===2);
    }
    console.log('fou()中fou()===1',fou()===1);

}

//ES5  6 6 6
const callbacks = [];
for(var i=0; i<=2;i++ ){
    callbacks[i] = function(){
        return i*2;
    }
}

console.table([
    callbacks[0](),
    callbacks[1](),
    callbacks[2](),
]);


//ES6  0 2 4
const callbacks2 = [];
for(let j = 0;j<=2;j++){
    callbacks2[j] = function(){
        return j*2;
    }
}

console.table([
    callbacks2[0](),
    callbacks2[1](),
    callbacks2[2](),
]);

显示结果：

所有value都是6，在for循环内使用的var声明变量，被变量提升到了for循环之外的前面了，callbacks[i]中的i=0，但是function函数中因为闭包，return中的i并没有取值为0，返回的是一个表达式。在console的时候去执行，那是i已经等于3，所以无论怎么执行，都是输出3*2。

let声明的变量，有一个块作用域，function函数中的闭包可以使用，for循环每次执行都可以生成这个作用域。

有几个点需要注意：

let 和 const 声明只在最靠近的一个块中（花括号内）有效
当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING
const 在声明时必须被赋值

二：箭头函数

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体：例子

需要注意的是，上面例子中的 getPrice 箭头函数采用了简洁函数体，它不需要 return 语句，下面这个例子使用的是正常函数体：例子

1：写法比较简单:（//小括号是用来写参数的）

{
  // ES3,ES5
  var evens = [1, 2, 3, 4, 5];
  var odds = evens.map(function(v) {
    return v + 1
  });
  console.log(evens, odds);
}; 

{
  // ES6
  let evens = [1, 2, 3, 4, 5];
  let odds = evens.map(v => v + 1);
  console.log(evens, odds);

　//  参数只有一个的时候，括号可以被省略，花括号中的表达式直接作为返回值时，也是可以被省略的
}

2：this指向有了新的意义

 {
  // ES3,ES5  this指向是该函数被调用的对象（哪个对象调用了这个function,this指向的时谁）
  var factory = function() {
    this.a = 'a';
    this.b = 'b';
    this.c = {
      a: 'a+',
      b: function() {
        return this.a
      }
    }
  }

  console.log(new factory().c.b());   //a+
};

//ES6 箭头函数中this的指向是定义时this的指向

{
  var factory = function() {
    this.a = 'a';
    this.b = 'b';
    this.c = {
      a: 'a+',
      b: () => {
        return this.a
      }
    }
  }
  console.log(new factory().c.b());   //a
}

es6中的箭头函数用来解决this指向不明确，避免this在运行的时候指向不确定（，即定义的时候指向的是哪个就是哪个）

三：默认参数、可变参数

// ES3、ES5中默认参数写法
{
    function f(x,y,z){
       if(y===undefined){
        y=7;
       }
       if(z===undefined){
        z=42;
       }
       return x+y+z;
    }
    console.log(f(1,3));
}
//ES6默认参数
{
    function f(x,y=7,z=42){
        return x+y+z;
    }
    console.log(f(1,3));
}

参数默认必选性检查：（声明一个函数，检查参数是否为空，空的话抛出异常即可）

{
    function checkParameter(){
        throw new Error('can\'t be empty');
    }
    function f(x=checkParameter(),y=7,z=42){
        return x+y+z;
    }
    console.log(f(1));
    try{
        f();
    }catch(e){
        console.log(e);
    }finally{

    }
    //  检查x是否已经赋值 即对函数的必选参数进行校验

可变参数求和

//ES3，ES5可变参数求和
{
    function f(){
        var a =Array.prototype.slice.call(arguments);
        var sum = 0;
        a.forEach(function(item){
            sum+=item*1;
        })
        return sum;
    }
    console.log(f(1,2,3,4,6));
}
// ES6可变参数
{
    function f(...a){
        var sum=0;
        a.forEach(item=>{
            sum+=item*1;
        });
        return sum;
    }
    console.log(f(1,2,3,4,6));
}

四：展开运算符

第一个用途：合并数组

let color = ['red', 'yellow'];
let colorful = [...color, 'green', 'blue'];
console.log(colorful); // ["red", "yellow", "green", "blue"]

{
    var params=['hello',7,true];
    var other=[1,2,...params];
    console.log(other);
}

第二个用途：获取数组除了某几项的其他项

let num = [1, 3, 5, 7, 9];
let [first, second, ...rest] = num;
console.log(rest); // [5, 7, 9]

五：模板字符串

解决了 ES5 在字符串功能上的痛点。

第一个用途：字符串拼接。将表达式嵌入字符串中进行拼接，用 `` 和 ${}来界定。

// es5
var name1 = "bai";
console.log('hello' + name1);

// es6
const name2 = "ming";
console.log(`hello${name2}`);

第二个用途：在ES5时我们通过反斜杠来做多行字符串拼接。ES6反引号 `` 直接搞定。

// es5
var msg = "Hi \
man!";

// es6
const template = `<div>
    <span>hello world</span>
</div>`;

六：import、export

import导入模块、export导出模块

// 全部导入
import people from './example'

// 将整个模块当作单一对象进行导入，该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.getName())

// 导入部分，引入非 default 时，使用花括号
import {name, age} from './example'


// 导出默认, 有且只有一个默认
export default App

// 部分导出
export class App extend Component {};

七：进阶指导

posted @ 2020-03-20 23:09 Julia-Yuan 阅读(279) 评论(0) 收藏举报

刷新页面返回顶部

Julia-Yuan