ES6的基础知识

ES6 函数

1、this :this代表当前正在执行的对象

function fn () {
  console.log(this)
}
fn() // window 
const obj = new fn();  // { }
fn.call({ name:"1" })  // { name:'1' }

2、箭头函数
(1)箭头函数的this是在定义的时候就固定不变了
(2)箭头函数 没有自己的this
(3)箭头函数 不能当类(构造器)使用 不可以 new
(4)箭头函数 没有 arguments

  const fn = () => {
    console.log(this);
    console.log(arguments);
  }
  fn()   // undefined    严格模式下    在非严格模式下是 window 
  const obj = new fn();  // undefined

new 一个实例 执行 4 步
(1)创建一个空对象
(2) 执行构造器 Person 把this指向这个 {}
(3) 添加属性
(4) 返回当前实例
fn.call({ name:“1” }) // undefined

3、怎么改变this的指向

call ()

  function person (params) {
     this.name = params
     console.log(this.name);    //  27
   }
   person.call({},27)

bind ()

  function person (params) {
    this.name = params
     console.log(this,this.name);    //  27
   }
   const fn2 = person.bind({age:22},'小花')
   fn2()

####ES6 数组 方法
map filter some forEach every find findIndex reduce
1、 map 返回一个新数组 长度不变

  const arr = [1, 3, 5, 7, 9]

  const newArr = arr.map(v => v+1)  // [2, 4, 6, 8, 10]

  const newArr = arr.map(v => v>3)   //[false, false, true, true, true]

  const newArr = arr.map(v => v>3 && v)   //[false, false, 5, 7, 9]

2、filter 返回一个新数组 长度改变 过滤

  const arr = [1, 3, 5, 7, 9]

  const newArr = arr.filter(v => v>3)    //  [5, 7, 9]

3、 some 只要返回true 就会停止循环

  const arr = [1, 3, 5, 7, 9]

  const newArr = arr.some(v => v===7)    //  返回true  循环了3次

4、 every 只要返回false 就会停止循环

  const arr = [1, 3, 5, 7, 9]

  const newArr = arr.every(v => v===7  )    // 只执行了1次   返回false

5、 foeEach 普通循环 没有返回值

  const arr = [1, 3, 5, 7, 9]

  arr.forEach(v => {

    console.log(v);  //  1, 3, 5, 7, 9

  }) 

6、 find 为true的时候就会停止循环 返回 当前的值

  const data = [{name:'1',id:1}, {name:'2',id:2}, {name:'3',id:3}]

  const newObj = data.find(v => v.id===2)

  console.log(newObj);        //  {name:'2',id:2}

7、 findIndex 为true的时候就会停止循环 返回 当前的值的下标

  const data = [{name:'1',id:1}, {name:'2',id:2}, {name:'3',id:3}]

  const newObj = data.find(v => v.id===2)

  console.log(newObj);        //  返回 1

8、 reduce 两个参数 (函数[必须有return],默认值)
(1)无默认值


  const arr = [1, 3, 5, 7, 9]

  const sum=arr.reduce((a,b)=>{

    return a+b

    // a ->1  b->3         第1次

    // a ->4  b->5         第2次

    // a ->9  b->7  ....   第..次

  })

  console.log(sum);      // 25

(2)有默认值


const arr = [1, 3, 1, 7, 5, 7, 9]

    // a ->{}  b->1              第1次

    // a ->{1:[1]}  b->3         第2次

    // a ->{1:[1],3:[3]}  b->1   第3次

    // a ->{1:[1,1],3:[3]}  b->7   第4次  ....

  const newObj = arr.reduce((a,b)=>{

           if (a[b]) {   a[b].push(b)   } else {   a[b] = [b]   }

           return a

  }, {})

  console.log(newObj);  //{1:[1, 1],3:[3],5:[5],7:[7, 7],9:[9]}

(3)在antd 3.26 表单回填应用


  mapPropsToFields({ obj }) {

     return Object.keys(obj).reduce((pre, d) => {

        return {

         ...pre,

         [d]: Form.createFormField({ value: obj[d] })

        }

      }, {})

   },

9、数组的扩展运算符 …

  const arr = [1, 2, 3]

  const brr = [4, 5, 6]

  console.log([...arr,...brr]);  // [1,2,3,4,5,6]

10、 fill 填充数组

  const str=new Array(50).fill('-').join('')

  console.log(str);  //  ---------------------

11、includes 是否包含

  const arr = [1, 2, 3]

  console.log(arr.includes(2))   // true

12、flat 数组扁平化

  const arr = [1, [2, [3,4] ] ]

  //  默认二维数组扁平化

  console.log(arr.flat() )   // [1,2,[3,4] ]

  //  Infinity 多维数组扁平化

  console.log(arr.flat(Infinity) )  // [1,2,3,4]   

13、Set 数组去重

   let crr= [1,2,1,3,4,5,1,2]

   console.log([...new Set(crr)]);    //  [1,2,3,4,5]

####ES6 对象 方法
1、Object.assign(新对象,对象1,对象2,…) 合并对象
注: 是个浅拷贝

   const obj1 = { name:"小花" }

   const obj2 = { age:20 }

   Object.assign(obj1,obj2) // 浅拷贝   { name:"小花", age:20 }

   //{...obj1,...obj2}        // 浅拷贝   { name:"小花", age:20 }

2、keys 取到所有的key值 values 取到所有的value值

   const obj = { name:"小花", age:20, sex:"男" }

   console.log(Object.keys(obj));  // ["name", "age", "sex"]

   console.log(Object.values(obj)); //  ["小花", 20, "男"]

3、Object.entries( )

  const obj = { name:"小花", age:20, sex:"男" }

  Object.entries(obj)   // [ ["name", "小花"],["age", 20],["sex", "男"] ]

取出对象里的所有key 和 value

(1)、reduce

       Object.entries(obj).reduce((v,[key,value])=>{
              console.log(key,value)           // name 小花  age 20  sex 男
        },'')

(2)、for of

        for(let [key,value] of Object.entries(obj)) {
             console.log(key,value)           // name 小花  age 20  sex 男
        }
ES6   Promise

1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。

2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。

image

(1)、特点:处理异步 异步的代码以同步的方式

(2)、用法 :
new Promise((resolve,reject)=>{                      resolve()  成功                      reject()   失败     })
    (3)、状态:进行中 已成功 已失败  (一旦固定就不会再改变)

1、 Promise.all()    –   用于将多个 Promise 实例,包装成一个新的 Promise 实例   两个promise一起触发

const url = “http://api.baxiaobu.com/index.php/home/v1/register”

const param = qs.stringify({

username:“1111”,

pwd:“222”

})

const fn0 = () => axios.post(url,param)

const fn1 = () => axios.post(url,param)

const p0 = Promise.all([fn0(),fn1()])

p0.then(res=>console.log(res))

.catch()

2、 async     和函数一起用 函数里需要异步方法前面加上  await 
       await  不止异步  任何值    两个promise逐步触发

const URL="https://blogs.zdldove.top/Home/Apis/listWithPage"
async function fn () {
    const res0 = await axios.post(URL)
    console.log(1);
    const res1 = await axios.post(URL)
    console.log(res0,res1);
}
fn()
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值