乐趣区

ES6的基础知识(二)

demo 地址
函数

默认参数
function Person(name = “xiaohong”, age = 18) {
this.name = name;
this.age = age;
}
let person1 = new Person();

console.log(person1.name); // xiaohong

省略参数
function test(…arg) {
let res = arg.reduce(function(sum, item) {
return sum + item;
});
console.log(res); // 6
}

test(1, 2, 3);

箭头函数
let sum = (a, b) => {
return a + b;
};
console.log(sum(1, 2)); // 3

// 单个参数可省略小括号, 直接返回可省略函数大括号
let double = num => num * 2;
console.log(double(2)); // 4

// 箭头函数没有 this, 内部的 this 就是上层代码块的 this
let obj = {
name: “xiaohong”,
say: function() {
// 指向上层代码块 obj
setTimeout(() => {
console.log(this.name); // xiaohong
});

// 指向 window
setTimeout(function(){
console.log(this.name); // undefined
});
}
};
obj.say();

let fn = () => {
console.log(this); // window
};
fn();

Array.from() 将类数组转成数组
function sum() {
return Array.from(arguments).reduce((val, item) => {
return val + item;
});
}
console.log(sum(1, 2, 4)); // 7

fill 填充数组
let arr = [, ,];
console.log(arr.fill(1)); // [1, 1]

find 找到数组中第一个满足条件的元素
let arr = [1, 2, 3];
let item = arr.find(item => {
return item > 1;
});
console.log(item); // 2

findIndex 找到数组中第一个满足条件的元素索引
let arr = [1, 2, 3];
let index = arr.findIndex(item => {
return item > 1;
});
console.log(index); // 1

some 数组中是否存在满足条件的元素
let arr = [1, 2, 3];
let flag = arr.some(item => {
return item >= 3;
});
console.log(flag); // true

every 数组中是否所有元素都满足条件
let arr = [1, 2, 3];
let flag = arr.every(item => {
return item >= 3;
});
console.log(flag); // false

对象

对象的属性和方法可简写
let name = ‘xiaohong’;
let obj = {
// 当 key 值和变量一致时可省略
name,
// 方法可简写成这样
sayName(){}
}

对象的继承
let obj = {
name:’xiaohong’,
sayName(){
console.log(this.name)
}
};
let newObj = {
name:’xiaoli’
};

Object.setPrototypeOf(newObj, obj);
newObj.sayName(); // xiaoli

class 类
// 声明类, 只能通过 new 生成对象, 不能直接使用
class Parent {
// 构造函数
constructor(name) {
// 实例私有属性
this.name = name;
}

// 静态属性 不需要通过实例调用, 类直接用
static hello() {
return “hello”;
}

// 实例公共方法
sayName() {
return this.name;
}
}

// extends 继承
class Child extends Parent {
constructor(name) {
// super 父级的构造函数
super(name);
}
}

let p = new Child(“xiaoli”);
console.log(p.name); // xiaoli
console.log(p.sayName()); // xiaoli

退出移动版