ES6学习笔记

ES6学习笔记

1.let和const

• let定义一个局部变量，const定义一个常量

• //var
  for (var i = 0; i < 10; i++) {
      console.log(i)
  }
  console.log(i++); //i仍然有值
  console.log(i++);//i仍然有值
  console.log(i++);//i仍然有值
  
  //let
  for (let i = 0; i < 10; i++) {
      console.log(i);
  }
  console.log(i++); //i没有值
  console.log(i++);//i没有值
  
  //const
  const i = 10;
  console.log(i);
  i=11; //修改常量
  console.log(i) //报错
  

2.解构表达式

• 更加方便的获取数组和对象中的值

  //数组
  let arr = [1, 2, 3];
  //用x,y,z接受数组的值
  const [x, y, z] = arr;
  console.log(x);
  console.log(y);
  console.log(z);
  
  //对象
  const person = {
      name: "tom",
      age: 18,
      language: ['java', 'php', 'python']
  };
  //接受对象的值时必须使用{}
  const {name, age, language} = person;
  console.log(name);
  console.log(age);
  console.log(language);
  
  //修改变量名，console.log(alex) == consoel.log(name)
  const {name:alex} = person
  

3.为函数参数设置默认值

//es6之前的写法
function add(a, b) {
    //如果b有值则返回b否则返回1
    b = b || 1;
    return a + b;
}

//es6的写法
function add(a, b = 1) {
    return a + b;
}

4.箭头函数

//传统函数写法
var print = function (obj) {
    console.log(obj);
};

//箭头函数写法
//var定义变量
//print为函数名
//obj为参数，当存在多个参数时应写（a,b），当没有参数的时候应该写（）
// => 后面是方法体，当只有一条语句时不需要加{}，并且只有一条语句时自动返回结果
//当函数体写在{}里面的时候如果需要返回结果必须添加return即使只有一条语句
var print = obj => console.log(obj);

//含有两个参数
var add = (a, b) => a+b;
console.log(add(1, 2));

//无参数
let print = () => "hello world";
console.log(print());

//函数体有多条语句
let print = () => {
    console.log("hello");
    console.log("world");
    return 1+1;
};

5.对象中函数的写法

let person = {
    name: 'tom',
    //传统写法
    eat: function (food) {
        console.log(this.name + '吃' + food);
    },
    //箭头函数的写法，箭头函数中不能获得this
    eat1: food => console.log(person.name + '吃' + food),
    //简便写法，本人推荐使用这种
    eat2(food) {
        console.log(this.name + '吃' + food);
    }
};
person.eat("香蕉");
person.eat1("香蕉");
person.eat2("香蕉");

6.map和reduce

• map对数组中的每一个数值进行操作，返回新的数组，map中接受一个函数

  let arr = ['1', '2', '-3'];
  let newArr = arr.map(num => parseInt(num));
  

• reduce接受一个函数和初始值，函数中由两个参数，第一个参数为上一次计算后的结果，第二个参数时下一个元素的值

  const arr = [1, 20, -5, 3];
  console.log(arr.reduce((a, b) => a+b, 1));
  

7.扩展运算符

//将数组变为一个序列1，2，3
console.log(...[1,2,3])

8.Promise函数

//resolve和reject都是函数
//resolve接受正确的结果
//reject接受错误的结果
const p = new Promise((resolve, reject) => {
     setTimeout(() => {
         const num = Math.random();
         if (num < 0.5) {
             resolve("成功！num=" + num);
         } else {
             reject("失败！num=" + num);
         }
     }, 300)
 });
//then接受的是resolve
//catch接受的是reject
 p.then((msg) => {
     console.log(msg);
 }).catch((msg) => {
     console.log(msg);
 })

9.类以及集成

//user类
class User {
    constructor(name, age = 20) {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        return 'hello world';
    }
    //静态方法
    static isAdult(age) {
        if (age >= 18) {
            return "成年人";
        }
        return "未成年人";
    }
}
let user = new User("tom");
console.log(user);
console.log(user.sayHello());
console.log(User.isAdult(20));

//person类继承User,和java相似
class person extends User {
    constructor() {
        super("tom", 18);
        this.address = '上海';
    }
}
let tom = new person();
console.log(tom.name, tom.address);
console.log(tom.sayHello());