es6新增语法

一、对象字面量增强写法：

var name = '小明'
var age = 18
var height = 175
var obj = { //直接把name、age、height给obj对象
    name,
    age,
    height
}

二、可变参数 "..." 的用法：(收集参数、展开数组)

//例1：
sum(...num){//可以接受多个参数，将参数都放进了一个数组
    var sum = 0;
    for(var i=0; i  < num.length; i++){
      sum+=num[i];
    }
    return sum;
}
//例2：
fun(a,b, ...args){//当不知道有多少参数传进来时，接收剩余的参数
  console.log(a)
  console.log(b)
  console.log(args)
}
//例3：
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = [...arr1, ...arr2];//[1,2,3,4,5,6]展开数组

三、in跟of的简洁遍历：

let list = [
{
  name:"老王",
  age:19
},
{
  name:"贾榜",
  age:20
},
{
  name:"波波",
  age:18
},
]
//方式一：in
for(let i in list){
  console.log(list[i].name)
}
//方式二：of
for(let item of list){
  console.log(item.name)
}

四、高阶函数：

1、filter：（过滤器）

var nums = [12, 354, 5267, 123, 23, 1, 13];
var newNums = nums.filter(function(n){
  return n < 100; //一定要返回一个boolean值
})
//计算后newNums 的值是[12, 23, 1, 13]

2、map：（映射：一个对一个）

var nums = [12, 23, 1, 13];
var newNums = nums.map(function(n){
  return n * 2; //每一次返回的是数组的新值
})
//newNums:[24, 46, 2, 26]

3、reduce:（汇总：一堆对一个）

var nums = [12, 23, 1, 13];
//求和运算
var sum = nums.reduce(function(preValue, num, index){//index是循环下标
  return preValue+num; //每一次preValue是函数上次返回的值
})
//也可以指定传入的第一次结果
var sum = nums.reduce(function(preValue, num, index){
  return preValue+num; //第一次的值是后面的0
}, 0)
//sum最后的值是：49

4、forEach:（迭代）

//将a数组中的数依次加上b数组中的数
let a = [1, 2, 3, 4, 5];
let b = [12, 42, 32, 41, 95];
a.forEach((item, index) => {
   a[index] = item + b[index];
});
//a:[13, 44, 35, 45, 100]

五、" ` "模板字符串的用法：

优点1：里面的字符串可以换行
优点2：字符串中可以插入变量：

var x = 1, y = 2;

`${x} + ${y} = ${x + y}`;

六、箭头函数 =>：

1、基础用法：

//-------传统写法-------
function sum(num1, num2){
  return num1 + num2
}
//-------箭头函数---------
let sum = (num1, num2) => {
  return num1 + num2
}
//或者简写
let sum = (num1, num2) => num1+num2 //如果函数体只有一行代码可以直接这样简写，会自动返回。如果没有返回值则返回undefined
//如果只有一个参数可以不要括号
let add = num => num+num

2、箭头函数中的this指的是谁：

向外层作用域中，一层层查找this，直到有this的定义

七、字符串方法startsWith、endsWith

let url1 = "git://abcd.com";
url.startsWith("http://") //false
let url2 = "swiper.png";
url.endsWith('.png') //true（可以用来判断扩展名确定文件类型）

八、面向对象：

1、类的定义：

老版本写法：

function User(name, age) {
    this.name = name;
    this.age = age;
}
User.prototype.showName = function () {
    console.log(this.name);
};
User.prototype.showAge = function () {
    console.log(this.age);
};
let user1 = new User("小敏", "20");
user1.showName();
user1.showAge();

es6写法：

class User {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
   showName() {
      console.log(this.name);
   }
   showAge() {
      console.log(this.age);
   }
}
let user1 = new User("小敏", "20");
user1.showName();
user1.showAge();

老版写法的缺点：
①类跟构造函数不分（User既是类又是构造函数）
②一个类的写法散开了（强行用prototype凑出的一个类）

2、继承：

老版写法：

function VipUser(name, age, level) {
   User.call(this, name, age);
   this.level = level;
}
VipUser.prototype = new User();
VipUser.prototype.constructor = VipUser;
VipUser.prototype.showLevel = function () {
   console.log(this.level);
};

es6写法：

class VipUser extends User {
   constructor(name, age, level) {
      super(name, age);
      this.level = level;
   }
   showLevel() {
      console.log(this.level);
   }
}

最后编辑于：2020.08.06 16:50:42