ES6【var let const 解构赋值箭头函数模板字符串 promise】

本文链接：https://blog.csdn.net/YhWyl527/article/details/106660574

var let const

        他们声明变量
区别 ： var 不会将变量所在的代码块变成死去 存在变量提升
        let和const声明的变量会把代码块变成死区
        不存在变量提升
        let声明的变量可以改 const声明的变量不可以改
        但是const可以修改数组对象变量值中的内容

变量的结构赋值

基本数据类型：数字、字符串、布尔值、undefined、null、symbol
引用数据类型：对象Obj、数组Array
数组的结构赋值

// 解构赋值时声明变量的结构和后面要解构的值的结构要一致
// 数组/对象,字符串都可以直接进行解构赋值
// 数据是前后一一对应的关系 但是字符串的解构赋值会把字符串进行切割前面声明的变量和切割后的字符串数组会一一对应

数组

var arr = ['小鱼人', '特朗普', '德玛西亚']
方法：var [name1,name2,name3] = arr
var arr = ['小鱼人', ['特朗普'], ['德玛西亚']]
方法：var [name1, [name2], [name3]] = arr2
    声明一个变量的name1他的值是德玛西亚
方法：var [ , , name1] = arr
    声明一个新数组 数组中的值是 '特朗普', '德玛西亚'
方法： var [, ...arr1] = arr // ...arr1必须写在最后一个

对象

// 对象的结构赋值给默认值可以用等号去链接value
// 如果解构得到的值是''这时候默认值不会生效
// 但是当结构得到的值是undefined 默认值可以生效
var obj = {
     name: '赵信',
     text: undefined,
     sex: '男'
   }
var { text = aaa, name, sex} = obj

字符串

var aaa = '一点寒芒先到,随后抢出如龙'
var [...a] = aaa
如果是 var [a] = aaa 那么a是 '一'

函数参数

函数参数的解构赋值其实就是基于对象或者数组的解构赋值完成的只不过可以省略声明变量的关键字和形参
var role = {
     name: '喜之郎',
     sex: '公',
     hit: 65
   }

function fun({name, sex, hit}) {
   console.log(name,sex,hit)
}
fun(role)

数字和布尔值

本身不能结构赋值 但可以转为字符串进行结构赋值

箭头函数

    //普通的函数写法
    function fun(){
    }
    var fun = function (text){
        return '德玛西亚' + text
    }
    console.log(fun(' | 勇士长存'))
    function show(){
        console.log(arguments)//可以直接拿到参数
    }
    show(1,2,3,4)
    // 箭头函数写法
    // 简写方式
    var fun2 = text => text
    console.log(fun2('德玛西亚'))
    // 当箭头函数参数大于一个的时候 ,则括号不能省略
    var fun3 =(parm1,parms2)=>{
        return parm1 + parms2
    }
    var fun6 = (param1,param2) => param1 + param2
    console.log(fun6('1','2'))
    console.log(fun3('1','2'))
    // 对象的错误写法
    // var fun4 = pbj =>{name :'李白', sex: '男'} 
    // 正确写法 箭头函数返回一个对象的时候对象要用()包裹
    var fun5 = () => ({name :'李白', sex: '男'}) 
    console.log(fun5())
    var fun4 = obj => obj
    console.log(fun4({name :'李白', sex: '男'}))
   
    // 箭头函数完整写法 
    var fun7 = () =>{

    }

    // 箭头函数 this 指向
    var obj = {
        run() {
            console.log(this) //指向 fun()
            setTimeout(function () {
                   console.log(this)  // 指向window
            },1000)
            setTimeout(function () {
                   console.log(this)  //指向run
            }.bind(this),1000) 
        }
    }
    obj.run()

    // 使用注意点--箭头函数有几个使用注意点。
    // （1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
    // （2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
    // （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
    // （4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

    //JavaScript中this的9种应用场景及三种复合应用场景
    // https://www.cnblogs.com/frontendnotes/articles/6411441.html

模板字符串

    var a = '你才是麻瓜'
    var b = '你也是个麻瓜'
    var str 
    // 正常的拼接方法
    // var html = ''
    // html+="<div>"
    // html+="<div>" + a + "</div>"
    // html+="<div>" + b + "</div>"
    // html+="</div>"
    // console.log(html)
    //ES6的拼接方法
    var html = `
        <div>
            <div>${a}</div>
            <div>${b}</div>
        </div>
    `
    // 使用方法 需要先引入jQuery.js
    $('.abc').append(html)
    //面试问题： 可以换行  使用变量时 要使用 ${}   {内部拼接要使用的变量}

字符串扩展

// includes()：返回布尔值，表示是否找到了参数字符串。
// startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
// endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。 
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

// 这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
repeat()
// repeat方法返回一个新字符串，表示将原字符串重复n次。参数如果是小数，会被取整。如果repeat的参数是负数或者Infinity，会报错。

数组扩展

<body>
<ul>
    <li  class="item"></li>
    <li  class="item"></li>
    <li  class="item"></li>
    <li  class="item"></li>
    <li  class="item"></li>
    <li  class="item"></li>
    <li  class="item"></li>
</ul>
<script>
    // var list = document.getElementsByClassName('item')
    // console.log(list)

    Array.from()
    // var arr = ['a','b','c']
    // // 相当于 类数组对象
    // var obj = {
    //     "0":"1",
    //     "1":"2",
    //     "2":"3",
    //     length:3
    // }
    // var newArr = Array.from(obj) // 用于将两类对象转化为数组
    // console.log(newArr)

    new Set()
    // var arr = ['英雄联盟','地下城与勇士','云顶之一','英雄联盟']
    // //数组去重
    // var newArr = []
    // for(i=0;i<arr.length;i++){
    //     if(newArr.indexoff(arr[i]) === -1){
    //         newArr.push(arr[i])
    //     }
    // }
    // // new Set()去重
    // var set= [...new Set(arr)]


    Array()
    // 当值只有一个参数且是数字时，代表是数组的长度，是字符串时代表数组的内容 
    // 当值有多个参数时，是数组的内容
    Array.of()
    // 弥补数组构造函数Array()的不足
    find()
    //寻找数组中是否有某个内容
</script>
</body>

Promis

原理回调函数解决异步

    var i
    function fun(params){
        setTimeout(()=>{
        i=1
        params(i)
        },0)
    }
    function setStr(a){
        console.log(a)
    }

封装 promise原理

    class Promse{
        constructor(fn){
            this.status = "pending" //记录Promse执行的状态
            this.value= ''  ///记录Promse执行成功或失败的时候传递过来的参数
            var resolve = (value) => {//代码运行成功时运行此函数 定义实行resolve函数将Promse转化为成功的状态
                if(this.status === 'pending'){
                    this.status = 'fulfilled'
                    this.value = value
                }
            }
            var reject = (error) => {//代码运行失败时运行这个函数
                if(this.status === 'pending'){
                    this.status = 'rejected'
                    this.value = error
                }
            }
            //try...catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码
            try {
                fn(resolve,reject)
            } catch (en){
                reject(en)
            }
        }
        then(resolved,rejected){
             switch(this.status){
                 case 'fulfilled':
                 resolved(this.value)
                 break;
                 case 'rejected':
                 rejected(this.value)
                 break;
             }
        }
    }
    function fun(res,rej) {
        // res(1)
        rej('no')
       
    }
   var promise = new Promse(fun)
   promise.then(data =>　{
        console.log(data)
   },error =>{
        console.log(error)
   })

异步问题解决

    class Promse{
        constructor(fn){
            this.status = "pending" //记录Promse执行的状态
            this.value= ''  ///记录Promse执行成功或失败的时候传递过来的参数
            this.onresolve = [] //记录成功的回调
            this.onreject = [] //记录失败的回调
            var resolve = (value) => {//代码运行成功时运行此函数 定义实行resolve函数将Promse转化为成功的状态
                if(this.status === 'pending'){
                    this.status = 'fulfilled'
                    this.value = value
                    this.onresolve.forEach(fun => fun())
                }
            }
            var reject = (error) => {//代码运行失败时运行这个函数
                if(this.status === 'pending'){
                    this.status = 'rejected'
                    this.value = error
                    this.onreject.forEach(fun => fun())
                }
            }
            //try...catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码
            try {
                fn(resolve,reject)
            } catch (en){
                reject(en)
            }
        }
        then(resolved,rejected){
            if(this.status === "pending") {
            this.onresolve.push(() => {
                resolved(this.value)
            })
            this.onreject.push(() => {
                rejected(this.value)
            })
            } 
            switch(this.status){
                 case 'fulfilled':
                 resolved(this.value)
                 break;
                 case 'rejected':
                 rejected(this.value)
                 break;
             }
        }
    }
    function promsie () {
    return new Promse((resolve, reject) => {
        setTimeout(() => {
        resolve('德玛西亚')
        })
    })
    }
    promsie().then(function(data) {
    // debugger
    console.log(data)
    }, function(error) {
    // console.log(error)
    })

promsie的使用方法一

var promise = new Promise(function(resolve, reject) {
      setTimeout(() => {
        // resolve('德玛西亚') // 会把promise转化为fulfilled状态 promise执行成功的状态
        reject("执行失败了") // 会把promise转化为失败的状态 rejected
      },1000)
    })
    // console.log(promise) pending状态 也就是promsie正在执行中的状态
    promise.then((data) => { // promise的then方法有两个参数 第一个是成功的数据的回调函数 第二个是失败的数据的回调函数
      console.log(data)
      console.log(promise)
    }, (error) => {
      console.log(promise)
      console.log(error)
    })

promsie的使用方法二(请求数据需要先引入 axios.js)

function promise() {
  return new Promise((resolve, reject) => {
    axios.get('https://cnodejs.org/api/v1/topics').then(res => {
      resolve(res)
    }).catch(error => {
      reject(error)
    })
  })
}
promise().then((data) => {
  console.log(data)
}, error=> {

})

模块化开发

当使用export导出时 导出一个对象对象中是要导出的方法的集合
我们要使用 import {要导入的方法} from 'module'
导入成功后可以在页面中直接使用方法

当使用export default 导出时 可以导出一个对象也可以直接导出一个变量或者方法
导入的方法是 import 变量 from 'module'
当export default 导出的是一个对象的时候那么变量就表示是一个对象
可以通过变量.方法或者变量名的形式使用对象中的方法
当导出的数据只是一个方法或者变量的时候
我们导入时定义的变量就是我们导出的方法或者变量的值

es6模块化导入数据时 可以使用as属性修改变量的名字
as前面是要修改的数据的名称 后面是要改成的变量的名称
import { globalData as a } from '../api/topic'

class

工厂函数构造函数

 function Role(name,hit,la){
        this.name = name
        this.hit = hit
        this.say = function(){
            console.loa(la)
        }
    }
    Role.prototype.type = "jio" //添加属性
    var role = new Role('瞎子','78','一库')//实例化对象
    role.say()//调用方法
    //class是一个类
    class Role {
         constructor(name, hit, la) {
            this.name = name
            this.hit = hit
            this.text = la
        }
        say(word){
            console.log(word)
        }
        dance(){
            console.log('武当派')
        }
    }
    Role.prototype.type = "大宝剑"  //添加属性
    var role = new Role('盖伦', 72, '德玛西亚') //实例化
    role.say('只有傻瓜才会为了荣誉献身') //调用方法

hasOwnProperty() 检测对象中是否有某个key值(是否有这个属性)

class Point {
constructor(x, y) {
    this.x = x;
    this.y = y;
}
toString() {
    return '(' + this.x + ', ' + this.y + ')';
}
}
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

class继承

// class继承
    class Game {
        constructor(name,map) {
            this.name = name,
            this.map = map
        }
        sale(){
            console.log('不卖给你')
        }
    }
    var game =new Game('英雄联盟','召唤师峡谷')
    console.log(game)
    //class可以使用extends使前者继承后者的属性和方法
    class Role extends Game{ 
        //继承的时候如果不写 constructor 则不用写surper 也可以继承方法 但无法继承属性
        //相反 如果写了 constructor，那么 constructor 内部必须写super 用于修改this指向 并且super必须写在属性上面(也就是constructor 内部第一行)
        constructor(name,map) { //要在这里有形参
            super(name,map)
            this.roleName = "卡牌"
            this.sex = "男"
            this.job= "赌徒"
        }
        hitType(){
            console.log('飞牌')
        }
    }
    var role = new Role('英雄联盟','召唤师峡谷')
    console.log(role)
    role.hitType()
    role.sale() // 继承方法