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'