8.20 学习日志

es6

对象

在es6中,有新的对象方法和类的定义有了更加简单的方法去定义

var name="karen";
var age=18;
var obj={
name,
age,

}
console.log(obj);

打印出来的obj对象中有name属性和age属性,他会将形参的名字当做属性名,把里面的值当做属性的值

let person = {name: "Amy", age: 15};
			let someone = { ...person };

这是对象的深拷贝

// var name="karen"
			// var rank="_cd"
			// var grand=100
			// var arr=["userid","1234"]
			
			// var obj={
			// 	name,
			// 	age:"100",
			// 	["hyqj"+rank]:"成都中心",		//添加属性,因为属性里面有变量所以使用方括号这个办法进行添加
			// 	[grand>60?"P":"F"]:"result",		//方括号中可以进行运算,
			// 	[0&&"h5"]:100,
			// 	[arr[0]]:arr[1],
			// 	say(){console.log(666)},
			// 	say2(name){console.log(name)},
			// 	say3({name,age}){console.log(name,age)},
			// 	say4:function () {console.log(444)},
			// 	say5:(num1,num2)=>{console.log(num1+num2)},
			// 	["say"+6](){console.log(666)},
			// 	["say7"]:function () {console.log(444)},
			// 	["say8"]:(num1,num2)=>{console.log(num1+num2)},
			// }

数组

创建数组的方法
1.var arr = [10,20];
2.var arr1 = new Array(10,20)
3.var arr2 = Array.of(10,20)
4.var arr3=Array.from(arr)

var nodelist=document.querySelectorAll("li")
			console.log(nodelist)
			var re=Array.from(nodelist,function(el) {
				console.log(this)
				el.innerHTML="66666666"
				return el
			},document.body)

将页面中所有的li装在nodelist这个类数组中,使用Array的静态from函数,第一个形参传入需要使用的数组,第二个形参传入函数,函数里面传入的形参为数组中的每一个元素(el),改变el的innerHTML值,再返回这个元素到新的数组中,如果要指定传入this的值,可以在函数后面打逗号然后添加想要的对象

var re=Array.from(nodelist)
			var arr=re.map(function(el) {
				console.log(this)
				el.innerHTML="66666666"
				return el
			})

还可以使用,数组的map方法,通过直接的点语法调用map函数达到同样的效果

var str="hello华清远见"
			var re=Array.from(str)
			console.log(re)

如果from后面不加函数,会将这个传入的数据转化为数组
数组的find语法,将数组里面需要寻找的数据的条件的值返回出去

var arr=[100,23,2,3,2,13,21,4,3,5,34,56]
			
			var re=arr.find(function(el) {
				return el<60
			})
			console.log(re)		//23

	var arr=[100,23,2,3,2,13,21,4,3,5,34,56]
			var re=arr.findIndex(function(el) {
				return el<20
			})
			var re2=arr.indexOf(2)
			console.log(re,re2)		//2,2

返回符合条件的元素的下标,比indexOf好在可以添加一些比较宽泛的条件,而不是像indexOf一样必须是一模一样的值
fill()：将一定范围索引的数组元素内容填充为单个指定的值。

let arr = Array.of(1, 2, 3, 4);
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]

entrys()：遍历键值对

for(let [key, value] of ['a', 'b'].entries()){
    console.log(key, value);
}
// 0 "a"
// 1 "b"
 
// 不使用 for... of 循环
let entries = ['a', 'b'].entries();
console.log(entries.next().value); // [0, "a"]
console.log(entries.next().value); // [1, "b"]
 
// 数组含空位
console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]

flat()

console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
 
// 指定转换的嵌套层数
console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
 
// 不管潜逃多少层
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
 
// 自动跳过空位
console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]

箭头函数

//普通函数
var f = function(a){
 return a;
}
f(1);  //1

//箭头函数
var f = a => a
f(10); //10

箭头函数有很多可以省略的地方,比如上个例子中的 f = a => a,第一个a是形参,因为只有一个,所以可以吧括号给省略掉,第二个a是函数内部的代码块,因为只有一个语句,所以可以将花括号也给省略掉,并且将其作为该函数的返回值,也就省略下了return,当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来,箭头函数里面的this和es5中的函数的this不一样,他代表的是该函数外层的调用者,而es5中的this代表的是该函数的调用者

var obj = {
	name: "xx",
	show: function() {
		console.log(this); //this表示当前对象
	},
	say: () => {
		console.log(this); //this表示全局window对象
	}
}

注意：箭头函数不可以作为构造函数，也就是不能使用 new 命令，否则会报错
箭头函数可以与解构一起使用

let cal = (a, b) => {
    return {
        add: a+b,
        sub: a-b,
        mul: a*b,
        div: a/b
    };
}
let {add, sub, mul, div} = cal(10, 5);

//形参为目标，实参为源
var show = ({one, two}) => {
	console.log(one + "---" + two);
}
show({one: "hello", two: "你好"});

使用好处在于:ES6 之前，JavaScript 的 this 对象一直很令人头大，回调函数，经常看到 var self = this 这样的代码，为了将外部 this 传递到回调函数中，那么有了箭头函数，就不需要这样做了，直接使用 this 就行。

所以，当我们需要维护一个 this 上下文的时候，就可以使用箭头函数。
小结:

• 要有个箭头
• 箭头的前面是小括号，放形参，只有一个形参的时候可以省略小括号；
• 箭头的后面是函数体；
• 如果函数体只有一个语句，没有{}，此时的返回值不需要return；
• 箭头函数里面的this总是指向window；
• 对象里面的方法，尽可能不要使用箭头函数；
• 箭头函数里面没有arguments，可以使用…reset，接收过来就是数组类型，接收的是形参之外的所有的实参；

类

类是一种函数,在es6中使用系统提供的class函数模拟出了java中的类.好处在于,在创建对象的时候,让其原型对象更加清晰
属性：ES6的类中不能直接定义变量，变量被定义在constructor中。

class People {		
	//a = 10; //SyntaxError: Unexpected token =
	constructor() {
		this.a = 100; //定义变量
	}
} 
let p = new People();
console.log(p.a);

当使用这个类新建类的时候,里面的constructor就会相当于该函数的属性进行声明
constructor 方法是类的默认方法，创建类的对象时被调用。也被称为类的构造方法（构造函数、构造器）。一个类中有且仅有一个构造方法。
原型方法：不需要使用function关键字，通过“对象.原型方法”调用。

class People {
	say(world) {
		console.log(`say ${world}`);
	}
    add(a, b) {
        console.log(a + b);
    }
}
let p = new People();
p.say("hello"); //say hello
p.add(1, 2); //3

当有constructor()时,在constructor()后面加逗号就可以在其原型对象上面新建属性,所以例子就是在其原型上面新加了say方法和add方法
class也有静态属性,使用方法和添加方法和对象的静态属性类似.
类的继承:

• 解决代码的复用
• 使用extends关键字实现继承
• 子类可以继承父类中所有的方法和属性
• 子类只能继承一个父类（单继承），一个父类可以有多个子类
• 子类的构造方法中必须有super()来指定调用父类的构造方法，并且位于子类构造方法中的第一行
• 子类中如果有与父类相同的方法和属性，将会优先使用子类的（覆盖）

class People {
    //父类构造方法
	constructor() {
        this.a = 100; //父类中定义的变量
		console.log("People constructor");
	}
    //原型方法
	eat() {
		console.log("eat...")
	}
    //静态方法
    static play() {
		console.log("play...")
	}
}
			
class Student extends People {
    //子类构造方法
	constructor() {
		super(); //调用父类构造器，必须存在，且位于子类构造器第一行的位置
        this.b = 200; //子类定义的变量
		console.log("Student constructor");
	}
	study() {
		console.log("study...");
	}
}
let stu = new Student();
console.log(stu.a， stu.b);
stu.eat();
stu.study();
Student.play();

这个继承和对象中的改变原型对象不同,其父类的属性不是出现在这个子类的原型对象上,而是在这个子类上就有.使用方法就是在声明类的时候将父类写在子类后面,在中间加入关键字extends,在constructor()中的第一行代码添加super()