es6的新特性学习笔记

ES6-ES11

js高级

//构造函数的prototype属性
function Fun(){}
Fun.prototype.text = function()
{
	console.log("text执行")
}
//每个函数都会有一个空的object类型的prototype属性
console.log(Fun.prototype)
//prototype属性里的constructor属性指向原函数
console.log(Fun.prototype.constructor === Fun)
const fun = new Fun()
//构造函数的prototype属性里的方法是给实例对象使用的
fun.text()

	//显示原型与隐式原型
		function Fun(){}
		Fun.prototype.text = function()
		{
			console.log("test()")
		}
		let fun = new Fun()
		//隐式原型是在实例对象上存在的，他指向显式原型所指向的对象
		console.log(Fun.prototype === fun.__proto__)
		fun.text()

1.let关键字声明的变量

let的特性

//1.不能声明两个相同的变量
let a = 10;
let a = 20; '这会报错'
//2.没有变量提升
console.log(str) //这会输出undefined
var str = 'haha'
console.log(str) //这会直接报错
let str = 'haha'
//3.有块级作用域的概念 (if,else,for)
{
    let b = 50;
    var c = 60;
}
'这时在外面读的到c读不到b'
//4.不影响作用域链
{
    let school = 'hbcj';
    function saySchool(){
        console.log(school)
    }
    saySchool()
}
'这样的话也是正常输出'

2.const关键字声明的常量

const的特性

//常量声明出来之后不能进行修改，所以它要赋初始值
const A;'错误写法'
const A = 100;
//2。块级作用域的概念
{
    const NUM = 40
}
console.log(NUM) '这里是访问不到NUM这个常量的'

3.解构赋值

//数组的解构
//数组结构声明的变量可以是任何名字
let arr = ['lcz','jtt','jjs','zfx']
let [a,b,c,d] = arr
console.log(a) 'lcz'
//对象结构声明的变量只能是对象里已经存在的属性
let obj = {
    name:'jtt',
    age:18,
    jineng:function(){
        console.log('hahaguai')
    }
}
let {name,age,jinneg} = obj
console.log(name) 'jtt'
//函数与解构赋值相结合
function add({a,b,c}){
    console.log(a) 
}
add({b:1,a:2,c:3})

4.模板字符串

//1.可以在模板字符串内进行换行
let str = `<ul>
				<li>哈哈哈哈</li>
			</ul>`
//2.可以进行变量的拼接
let str1 = 'lcz';
let str2 = `${str1},喜欢去洗脚`

5.对象的简化写法

let name = 'lcz'
function sayName(){
	console.log(name)
}
let obj = {
	name,
	sayName,
    `fun:function(){
		 console.log('haha')
	}`
    '可简写为：'
    fun(){
        console.log('haha')
    }
}
obj.sayName()

6.箭头函数

let fun = ()=>{
    
}
//1.this的指向是静态的，只指向声明函数时函数所处的作用域比如：
var obj = {
     fun2 : ()=>{
        console.log(this) 
    }
}
obj.fun2()
'this指向window'

7.rest获取函数实参

'在ES5中函数获取实参是使用argments'
function data(){
	console.log(arguments)
}
data(1,2,1,2) //此时获取的实参列表为对象类型

'ES6中引入rest方式获取实参'
function data(...args){
    console.log(args)//此时值为[1,2,1,1]
}
data(1,2,1,1)  //此时获取的实参为数组类型
'...args只能放在形参的最后，用来接收未赋值的形参'
function data(a,...args){
    console.log(args) //此时值为[2,1,1]
}
data(1,2,1,1) 

8.扩展运算符

[...]
 //使用扩展运算符相当于把数组展开
let arr = ['zhangsan','lisi','wangwu']
function text(){
	console.log(arguments)
}
text(arr)   '为一个数组'
text(...arr) '为三个实参'
//使用扩展运算符合并数组
let arr = ['zhangsan','lisi','wangwu']
let arr2 = ['hahaguai','xixiguai']
let arr3 = [...arr,...arr2]
console.log(arr3)
//克隆数组
let arr4 = [...arr]
console.log(arr4)

8.1 symbol,set和map

symbol,

/*
	syboml 是用来声明一个不重复的变量的，多用做对象的私有属性，特点：用做对象的属性是时遍历不到它
**/
let name = Symbol('name')
let obj = {
    [name]: 'jjs'
}
console.log(Object.keys(obj))

map 是键值对的有序列表，键和值可以是任意类型。

9.迭代器

//什么是迭代
'按照一定的顺序，不断的元素中取出值'
//怎样去自定义迭代
				//声明一个迭代器
				[Symbol.iterator](){
					let _this = this
					let index = 0
					//返回一个对象
					return {
						//返回一个next方法
						next:function(){
							if(index < _this.arr.length){
								//返回一个对象
								let result = {value:_this.arr[index],done:false}
								//指向下一个元素
								index++
								return result
							}else{
                                //如果数组长度完结那么我们就结束迭代
								return {value:'undefined',done:true}
							}
						}
					}
				}

10.生成器

'生成器的声明'
function * fun(){
    console.log('hahah')
}
let its = fun()
its.next()
'可以通过yield分区域执行'
function * fun2(){
    console.log('111')
    yield 111
    console.log('222')
}
'这时想要输出222就必须调用两次next()函数'
its.next()
its.next()
console.log(its.next()) //他的值时yield后面的值或者表达式

11.集合

'声明一个集合'
let s = new Set()
let s2 = new Set(['jtt','lcz','jjs','jjs'])
'这时就只会输出三个值过滤掉相同的值'
console.log(s2)
//集合的方法
'添加'
s2.add('zfx')
'删除'
s2.delete('zfx')
'清空'
s2.clear()
'检查是否存在某元素'
console.log(s2.has('jtt'))
//将集合转化为数组
let arr = [...s2]

// set中引用的对象不会被释放
let set = new Set(),obj = {}
set.add(obj)
obj = null
console.log(set)

12class

12.1class的基本语法

'使用ES5的方法来声明构造函数'
function Person(name,age){
    this.name = name
    this.age = age
}
person.protoType.call = function(){
    console.log('我可以打电话')
}
var wx = new Person('wx','20')
console.log(wx)
wx.call()

'使用ES6声明构造函数'
class Person{
    //构造器
    constructor(name,age){
        this.name = name
        this.age = age
    }
    //方法,只能使用ES6的语法
    call(){
        console.log('我会吃饭')
    }
}
var lcz = new Person('lcz',20)
console.log(lcz)
lcz.call()

12.2静态属性

'什么叫做静态属性'
//只属于类自己的不属于类的实例对象的
class Person{
    static name = 'jtt'
	static age = 18
}
let lcz = new Person()
console.log(lcz.name) '这样是访问不到类的name属性的'

12.3类的继承

'类的继承使用extends关键字'
	class Phone{
				constructor(name,size) {
				    this.name = name
					this.size = size
				}
				call(){
					console.log('我可以打电话')
				}
			}
	class xiaomi extends Phone{
				constructor(name,size,jiage) {
                    //使用super关键字调用父类的属性
				    super(name,size)
					this.jiage = jiage
				}
				playGame(){
					console.log('我可以打游戏')
				}
			}
	let xiao = new xiaomi('xiaomi','5.0inch',1999)
	console.log(xiao)
	xiao.playGame()
	xiao.call()

'子类对父类方法的重写，子类不可以调用父类中的同名元素'
class Vivo extends Phone{
    constuctor(name,size,jiage){
        super(name,size)
        this.jiage = jiage
    }
    call(){
        console.log('我可以打视频通话')
    }
}
let s3 = new Vivo('vivo','5.5inch',2999)
'这个call方法将不会再是父类的方法而是他自己的方法'
s3.call() 

13对象方法的扩展

'判断两个值是否相等'
Object.is()
console.log(Object.is(1,1))
'对象的和并'
let obj1 = {
    name:'jtt',
    age:20,
    mess:'sg',
    text:'haha'
}
let obj2 = {
    name:'lcz',
    age:20,
    mess:'cg'
}
console.log(Object.assign(obj1,obj2))
'参数2覆盖参数1对象的共同部分，没有的属性就留下来'

14ES6模块化

'使用exprot,improt关键字'
//在js文件中使用 exprot关键字导出
//1.分别暴露
export var a = 10
export function fun(){
    console.log('haha')
}

//2.统一暴露
var name = 'jtt'
function text(){
    ....
}
export {name,text}

//默认暴露 ,以一个对象的形式
export default {
   n:'jtt',
    text(){
        console.log('hahah')
    }
}

//1,2在引入文件中使用improt关键字
//1.通用形式
import * as name from './01.js'
console.log(name.a) //这时的name属性值里就是导出的a
//如果使用弟三钟方式的话，就需要多加一层default
console.log(name.dafault.text())

//2.解构赋值的形式,不能导入默认形式
import {a,fun} from './01.js'
'这时候我们可以直接拿到a'
console.log(a) 
'使用默认形式导出的'
import {default as m1} from '01.js'
console.log(m1.name)

//3.简便形式只对默认导出的有效
import m1 from './02.js'