阅读 190

Es6常用语法总结记录

1、声明变量的两种方式

在es6之前所使用的var  因为有变量提升  不适合大型项目
es6中的  	let  和  const
let  不具备变量提升  只在该声明的同一层  和该层后 使用  
const  定义常量  不具备变量提升   如果声明的对象  可以改变 该对象里的属性值
复制代码

2、箭头函数

es6之前  声明一个方法 
  function a () {
		这种方法闭包   this指向  window
	}
  箭头函数  
  let a = () => {
	不属于闭包  this 指向 上一层
	}
复制代码

3.数组扩展

3.1 Array.from()

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)

3.2 ...运算符

扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

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

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
复制代码

关于函数传参的问题,如果函数直接用...传参,传入的参数实际上是个数组,且后面不能再有参数。如果函数参数定义了一个数组,用...传入,实际上参数为数组中的值

function fn(...items){}
//等同于
function fn([数组内容]){}

let items = ['a', 'b', 'c']
function fn(...items){}
// 等同于
function fn('a', 'b', 'c') {}
复制代码

3.3 ...运算符的应用

复制数组(克隆数组

let arr1 = [1, 2, 3]
let arr2 = [...arr1] // [1, 2, 3]

合并数组

const arr1 = ['a', 'b']
const arr2 = ['c']
const arr3 = ['d', 'e']
const arr4 = [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]

与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

将字符串转换为真正的数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]
复制代码

3.4 Array.of(), 用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
复制代码

3.5 数组实例的fill()

三个参数,后面两个可以省略,第一个参数为替换成什么内容,第二个为替换的起始位置,
第三个为替换的终止位置

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
复制代码

3.6 数组实例的 entries(),keys() 和 values()

三个方法都是遍历数组,都可以用for...of...唯一的区别是keys()是对键名的遍
历、values()是对键值的遍历,entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"
复制代码

4.sort 排序

let a = [1, 2, 3, 4]
	let b = a.sort( (e, r) => {
		return e - r   表示升序
		return r - e   表示降序
	})

	let c = [{a: 6},
			{a: 2},
			{a: 1},
			{a: 9}]
	let d = c.sort( (e, r) => {
		return e.a - r.a   表示升序
		return r.a - e.a   表示降序
	})
复制代码

5.promise 请求

第一种基本写法

new Promise((resolve,reject)=>{
        setTimeout(()=>{
            // 成功时候调用resolve
            // resolve('hello-1')

            // 失败的时候调用reject
            reject('error message')
        },1000)
    }).then((data)=>{
        console.log(data);
    }).catch(err=>{
        console.log(er);
    }) 

第二种写法,多次异步调用

new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve()
        },1000)   
    }).then(()=>{
        console.log('hello-100');

       return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve()
            },1000)
        })
    }).then(()=>{
        console.log('hello-200');

        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
            //    resolve()

            reject('error-300')
            },3000)
        })
    }).then(()=>{
        console.log('成功回调');
    }).catch(err=>{
        console.log(err);
    })

第三种写法

new Promise((resolve,reject)=>{
        setTimeout(()=>{
            // resolve('hello-world')
            reject('error')
        },1000)
    }).then((data)=>{
        console.log(data);
    },(err)=>{
        console.log(err);
    })
复制代码

5.1 promise的链式调用

第一种写法

new Promise((resolve,reject)=>{
          setTimeout(() => {
              resolve('链式调用')
          }, 1000);   
      }).then((data)=>{
             console.log(data + '111');
            
             return new Promise((resolve,reject)=>{
                resolve(data+'222')
             })
      }).then(data1=>{
          console.log(data1);

             return new Promise((resolve)=>{
                 resolve(data1 + '333')
             })
      }).then(data2=>{
          console.log(data2);
      })

第二种写法

new Promise((resolve,reject)=>{
            setTimeout(()=>{
                // 请求成功时的回调
                resolve('哈哈哈')

                // 请求失败时的回调
                // reject('报错')
            })
        }).then((data)=>{
               console.log(data+'111');

               return Promise.resolve(data)
        }).then(data=>{
            console.log(data+'222');

            return Promise.resolve(data)
        }).then(data=>{
            console.log(data + '333');
        }).catch(err =>{
            console.log(err);
        })

第三种写法

new Promise(resolve=>{
            setTimeout(()=>{
               resolve('呵呵呵')
            },1000)
        }).then(data=>{
            console.log(data+'111');

            return data 
        }).then(data=>{
            console.log(data+'222');

            return data 
        }).then(data=>{
            console.log(data+'333');
        })
 第四种最简写法–请求失败

new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve('啊啊啊')
            }, 1000);
        }).then(data=>{
            console.log(data);

            throw 'error-data'
        }).then(data=>{
            console.log(data);

            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve(data)
                },1000)
            })
        }).then(data=>{
            console.log(data);
        }).catch(err=>{
            console.log(err);
        })
复制代码

5.2 promise的all处理多个请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        Promise.all([
            new Promise((resolve,reject)=>{
                setTimeout(() => {
                    resolve('第一次请求')

                    // reject('第一次请求失败')
                }, 2000);
            }),
            new Promise((resolve,reject)=>{
                setTimeout(() => {
                    resolve('第二次请求')

                    // reject('第二次请求失败')
                }, 1000);
            })
        ]).then(result=>{
            console.log(result);  //得出数组结构:["第一次请求", "第二次请求"]
            console.log(result[0]);
            console.log(result[1]);
        }).catch(err => {
            // console.log(err);
            // console.log(err[0]);
            // console.log(err[1]);
        })
    </script>
</body>
</html>
复制代码
文章分类
前端