ES6基础语法

一、 定义变量

let a = 1;
var b = 2;
const c = 3;

let var const 对比:

let 声明的变量:

1> 只在所在的代码块可访问
{
    let a = 2;
}
a;  // 只能所在代码块内使用
2> 不存在“变量提升”,即:不能在声明之前使用
a = 2;  // 是错误的,不存在变量提升
let a = 1;
3> 暂时性死区
var temp = 'aa';
{
    temp = 'bb';  // temp is not defined
    // 很好理解,let temp 是局域变量,优先级高于全局变量,let 变量不存在变量提升
    // let 变量屏蔽的外界的变量,只看代码块中的变量使用即可
    let temp = 'cc';
}
4> 不允许重复声明一个变量
{
    let a = 1;
    // 不行的
    let a = 3;
}

var 声明的变量:

1> 存在变量提升
var temp = 'a';
{
    console.log(temp); // 输出为 und
    var temp = 'b';
}
2> 可以重复声明一个变量

const 定义的变量:

1> 和 let 声明变量一样的特性完全一样
2> 定义变量必须直接赋值,且不能修改。

小结:编程中尽可能使用 let const 定义变量。避免 var 的一些诡异的特性。

二、字符串模板

var name = 'Bob';
// ES5,字符串拼接
console.log("hello" + name)
// ES6,字符串模板
console.log(`hello ${name}`)

三、箭头函数

1、单个参数

// ES5
var sayHello = function(name) {
            return 'Hello ' + name + '!';
        };
// ES6
var sayHello1 = name => `hello ${name}`;

2、多个参数

var greet = (greeting,name) => {
    return `${greeting} ${name}`;
};

var greet = (greeting,name) => `${greeting} ${name}`;

四、函数扩展

//ES6:
function log(x, y = 'World') {
  console.log(x, y);
}

//参数默认值和解构赋值配合使用:
function foo({x, y = 5}) {
  console.log(x, y);
}
foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2

新增rest参数来获取函数的多余参数,这样就不需要用arguments对象。rest参数搭配一个数组就是,多余的参数会放入数组中:

function add(...values) {
   let sum = 0;
   for (var val of values) {
      sum += val;
   }
   return sum;
}
add(2, 5, 3) // 10

五、顶层变量

顶层变量:浏览器中是指 window,Node 中是指 global.
ES6中 var function声明的全局变量默认也是顶层变量的属性。

六、解构赋值

1、数组解构赋值

let [a,b,c] = [1,2,3];

1> 默认值
默认值是当解构出来的值是 undefined的就取默认值。

let [x = 1,y = 2] = [2,3]
x = 2,y = 3

2、对象解构赋值

// 属性和变量值一样的情况
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

// 属性和变量值不一样的情况
let{foo:baz} = {foo:"aaa"}
baz // "aaa"

可以利用这个特性,从函数中返回多个值,然后进行对象的解析。

七、for of

var array = [12,3,45,5,6]
for(let index of array){
 if (index === 45) {break;}
 console.log(index)
}

八、类

class Person{
    // 类的构造函数
    constructor(name){
        this.name = name;
        console.log(`this person'name is ${this.name}`);
    }
    // 类的函数
    sayHello(){
        console.log('hello world');
    }
    printName(){
        this.print(`this name is ${this.name}`);
    }
    print(text){
        console.log(text);
    }
}

this 指针

    // this默认是指向类的实例的,但是单独使用的话,this 是指向这个函数所在的运行环境
    // 解决方法1:在构造函数中绑定这个函数 this.printName = this.printName.bind(this)
    // 解决方法2:箭头函数中的 this默认是绑定了

参考总结来自:阮一峰ES6语法

你可能感兴趣的:(ES6基础语法)