ES6 干货指南 (上)

在这里插入图片描述

本节所要介绍的是关于 ES6 基础部分的内容 ES6 干货指南 (上)


在这里插入图片描述

一、新增关键字

letconst ES6新增的两个声明变量/常量的关键字

  • 不能重复声明;
  • 不会预编译,无变量提升(即不会有声明提前,但事实上只是人为看到的效果,实际上是有声明提前,提前临时性的死区中)
  • 块级作用域,ES6新增了一个作用域 块级作用域,一个"{ }"就是一个块级作用域
  • 暂时性死区,一个作用域内未声明则不可使用
  • 声明的变量不会挂在window中,不会造成全局变量的污染;
  • const不能修改,const声明和赋值必须一次性完成,并且后期不允许改变存储空间的地址

二、模板字符串

字符串换行问题

	// 以往方式,当字符串长度极长时,出现换行则必须用+连接,并重新用""包裹
	let str = "asdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjkl" +
			"qwertyuioqwertyuioqwertyuioqwertyuioqwertyuioqwertyuio" +
			"zxcvbnmzxcvbnmzxcvbnmzxcvbnmzxcvbnmzxcvbnmzxcvbnm" ;
			
	// 模板字符串只需整体前后``包裹即可	
	let stri = `asdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjkl
			qwertyuioqwertyuioqwertyuioqwertyuioqwertyuioqwertyuio
			zxcvbnmzxcvbnmzxcvbnmzxcvbnmzxcvbnmzxcvbnmzxcvbnm` ;

字符串拼接变量

	let tmp = "Hello";
	
	let str = tmp + "world";	// 普通拼接方式 + 连接
	let stri = `${tmp}world`;	// 模板字符串``前后包裹,变量用${}存放即可

三、解构赋值

什么是解构赋值?

	let obj = {
		name : "Json",
		sex : "man",
	}
	let {name : oName, sex:oSex} = obj;		// 这样将对象的属性值反向赋值的操作即是 解构赋值
	
	console.log(oName,oSex);	// Json	man

结构赋值简单的应用在数组上

	let arr = [1,2,3,4,5];
	let {4:a,2:b,0:c} = arr;
	
	console.log(a,b,c);			// 输出:5 3 1

四、点点点运算符

点点点运算符的主要作用:收集参数,构成一个参数数组(真数组)

	function foo(...arg){
		console.log(arg);		// 这里的arg是真数组 可以调用Array对象的方法
		console.log(arguments);	// arguments伪数组
	}
	foo(1,2,3,4,5)

点点点运算符还可直接操作数组

	let arr = [1,2,3];	
	let arr2 = [4,5,6];
	
	console.log(...arr);	// 1 2 3
	
	let newArr = [...arr,...arr2];
	console.log(newArr);	// [1, 2, 3, 4, 5, 6]

在ES7中点点点运算符可以操作对象

	let a = {
		name :"Json",
		age : 24
	};
	let b = {
		name :"Code",
		sex : "man"
	};
	let c = {
		...a,
		...b
	};
	
	console.log(c);		// {name: "Code", age: 24, sex: "man"}

五、形参默认值

形参默认值即函数调用时未传实参,则形参使用设置的默认值

	function foo(a=0,b=0){   
		console.log(a,b);
	}
	
	foo(1,1);	// 1 1
	foo();		// 0 0

形参默认值也有暂时性死区

	function foo(a=b,b=0){   
		console.log(a,b);
	}
	
	foo(1)		// 1 0
	foo();		// Cannot access 'b' before initialization

六、箭头函数

箭头函数写法
  1. 创建一个箭头函数
	const foo = (para1,para2) => { 
		console.log("Hello Wolrd");
	}	
  1. 箭头函数参数只有一个,可以省略小括号
	const foo = para=> console.log("Hello Wolrd");
  1. 箭头函数只有一条返回语句,可以省略花括号,可以省略 return
	const foo = (para1,para2) => 返回值;
  1. 如果返回值是一个对象,直接用{}返回会被当作成函数体,所以需要将返回值变成表达式的形式可用()包裹需返回的对象
	const foo = (para1,para2) => ({
		a : para1,
		b : para2
	})
箭头函数的 this 问题
	// 事实上箭头函数中没有this,如果要强行使用,则指向函数外层对应的 this (箭头函数也没有argument和new.target)
	const fun = () => console.log(this);	// window
	
	const obj = {
		fun: function(){
			const foo = () => console.log(this);	// {fun: ƒ}
		}	
	}
箭头函数的原型
	// 箭头函数没有原型,不能当成构造函数来使用,所以占用空间非常小,
	const fun = () => { }
	console.log(fun.prototype);	  // undefined
	let obj = new fun();		  // fun is not a constructor
箭头函数使用时要注意那些问题?
  • 临时使用的函数,并不会刻意的去调用异步的处理函数、事件的处理函数
  • 继续去沿用外层的 this
  • 对象的属性不要去用箭头函数,除非是特别的需求
  • 数组方法的时候,保证代码的简洁

七、class类

类产生的原因?

要探究类产生的原因那么就得看传统的构造函数有那么问题。

  1. 构造函数下的属性及方法和原型上的属性及方法分离了,代码可读性差
  2. 构造函数原型上的属性及方法是可以枚举的
  3. 构造函数也是可以当成普通函数使用的
	function Person(name,age,sex){
		this.name = name;
		this.age = age;
		this.sex = sex;
		// too many code
	}
	Person.prototype.foo= function(){
		console.log(this.name,this.age,this.sex);
		// too many code
	}
	
	for(const prop in new Person())	   
		console.log(prop);			// name  age  sex  foo
	
	console.log(Person());			// undefined
	console.log(new Person());		// Person {name: undefined, age: undefined, sex: undefined}
针对上述三点类做的优化:
  1. 类的声明不会被提升,和let const 一样,有暂时性死区
  2. 类的所有代码全都是在严格模式中执行
  3. 类的所有方法都是不可枚举的
  4. 类的所有方法都无法当成构造函数直接使用
  5. 类的构造器必须使用new来调用
	class Person{
		constructor(name,age,sex){
			this.name = name;
			this.age = age;
			this.sex = sex;
			// too many code
		}
		foo(){
			console.log(this.name,this.age,this.sex);
		}
	}
	
	const obj = new Person();
	
	for(const prop in obj )	
		console.log(prop);			// name age sex
		
	const ob = new obj.foo();		// obj.foois not a constructor
	const oc = Person();			// Class constructor PersonC cannot be invoked without 'new'
类的静态成员
  • 使用static声明,添加的是类的静态成员
  • 没有使用,则位于对象上
  • 箭头函数在类中使用,指向当前对象
	class Person{
		a = "对象上的属性";
		static b = "类的静态属性";
		c = 0;
		static c = 1;
		foo = () => console.log(this.c);
	}
	
	console.log(new Person().a);	// "对象上的属性"
	console.log(Person.b);		  	// "类的静态属性"
	new Person().foo();				//  0
类的继承
  • 继承:如果存在两个类 A 和 B 且 B 是 A ,则 B 继承自 A,A 派生 B,B 是 A 的子类,A 是 B 的父类
  • 类中的继承采用extends定义
  • 继承中同名的属性及方法会进行覆盖
  • super既可以当作函数使用,也可以当作对象使用
     直接当成函数调用,表示父类的构造;
     当成对象使用,则表示父类的原型;
	class Animal{
		constructor(type,name){
			this.type = type;
			this.name = name;
		}
		foo(){
			console.log(this.type,this.name)
		}
	}
	
	class Dog extends Animal{
		// 如果子类定义了constructor,则必须在constructor的第一行手动调用父类的构造函数super()
		// 如果子类不写constructor,则会有默认的构造器,自动去调用父类的构造器
		constructor(type,name,age){
			super(type,name);
			this.age = age;
		}
		foo(){   	// 同名方法覆盖
			super.foo();
			console.log(this.age);
		}
	}
	
	const obj = new Dog("犬类","柯基",5);
	console.log(obj);		// Dog {type: "犬类", name: "柯基", age: 5}
	obj.foo();				// 犬类 柯基	5

八、Object 扩展方法

Object.is()

作用:基本上和 === 一样,除了以下两种情况

	console.log(NaN === NaN);	// false
	console.log(Object.is(NaN,NaN))	// true

	console.log(+0 === -0)		// true
	console.log(Object.is(+0,-0))	// false
Object.assign()

作用:用于混合对象,带浅克隆 (将后者的内容覆盖到前者)

	const tmp= {
		a : 123,
		b : 456,
	}
	const bar= {
		a : 789,
		e : "asdf"
	}

	Object.assign(tmp,bar); 
	console.log(tmp);		// {a: 789, b: 456, e: "asdf"}
Object.getOwnPropertyNames()

作用:枚举出来对象的属性, 返回一个数组 (枚举的顺序由浏览器厂商自行规定)

	const obj = {
		a : 1,
		b : 2,
		c : 3,
		0 : 4,
		1 : 5,
		2 : 6
	}
	
	const arr = Object.getOwnPropertyNames(obj)
	console.log(arr);		//  ["0", "1", "2", "a", "b", "c"]
Object.setPrototypeOf()

作用:设置某个对象的隐式原型(一种对象的继承方式)

	const tmp= {
		a : 1
	}
	const bar= {
		b : 2
	}

	Object.setPrototypeOf(tmp,bar);		// 该方法等价于 tmp.__proto__ = bar
	console.log(tmp.__proto__.b);		// 2

九、Array 扩展方法

Array.from(arg)

作用:将类数组、可迭代对象,转换成新的数组

	<div></div>	<div></div>	<div></div>	<div></div>	<div></div>
	
	<script>
		const div = document.getElementsByTagName("div");
		console.log(Array.from(div));		// (5) [div, div, div, div, div]
	</script>	
Array.find(callback) & Array.findIndex(callback)

作用:筛选出满足条件的元素 & 筛选出满足条件的元素的下标

	const arr = [
		{
			name : "a",
			id : 1
		},
		{
			name : "b",
			id : 2
		},
		{
			name : "c",
			id : 3
		},
	]

	const result = arr.find(item => item.id == 3);	  // 筛选出满足条件的元素
	const resultIndex = arr.findIndex(item => item.id == 3);	// 筛选出满足条件的元素的下标
	
	console.log(result);			// {name: "c", id: 3}
	console.log(resultIndex);		//  2
Array.fill(data)

作用:用指定的数据填充代码

	const arr = new Array(5);
	arr.fill("code");
	
	console.log(arr);	// (5) ["code", "code", "code", "code", "code"]
Array.copyWithin(targt,[start],[end])

作用:在数组内以指定元素为目标进行复制

	const arr = [1,2,3,4,5,6];

	// 使用该实例方法会修改原数组
	arr.copyWithin(2);
	console.log(arr);		// (6) [1, 2, 1, 2, 3, 4]

	arr.copyWithin(2,1);	
	console.log(arr);		// (6) [1, 2, 2, 1, 2, 3]
	
	arr.copyWithin(2,1,3);	
	console.log(arr);		// (6) [1, 2, 2, 2, 2, 3]

~~~~~~~~ 关于ES6 的基础部分先说到这,后续还有ES6进阶部分,干货满满 Bye ~~~~~~~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值