JS 语法之-- 解构，Promise（异步）

解构：

　　JS 的结构很灵活：参考

　　　　https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

　　列表解构

　　　　

　　参数解构  

　　　　

　　数组解构

　　　　

　　　　

　　　　　　结构的时候，变量从左到右和元素对齐，可变参数放到最右边

　　　　　　能对应到数据就返回数据，对应不到数据，返回默认值，没有默认值，就返回undefined

　　对象解构

　　　　

　　　　　　解构时，需要提供对象的属性名，会根据属性名找到对应的值，没有找到的返回缺省值，没哟缺省值的，返回undefined

　　复制解构

　　　　数组

　　　　

　　　　对象：

　　　　

　　数组的操作：

　　　　

　　　　测试：

const arr = [1,2,3,4,5]
arr.push(6,7)
console.log(arr)

console.log(arr.pop())
console.log(arr)

console.log('================ map =================')
// map 返回一个新数组
const p = arr.map(x => x*x);
console.log(p) 
console.log('================ forEach =================')

// forEach 没有返回值
const newarr = arr.forEach(x => x + 10)
console.log(newarr, arr)
console.log('------------------------------------------')
narr =[]
Arr = arr.forEach(x => narr.push(x +1));
console.log(Arr, narr)
console.log('------------------------------------------')

var newarr1 = [] // 不需要for了
console.log(arr.forEach(x => {
    newarr1.push(x * 2)
}))
console.log(newarr1)
console.log('------------------------------------------')

var newarr2 = [] // 不需要for了
console.log(arr.forEach( (x,y,z) => {
    console.log(x) // value
    console.log(y) // index
    console.log(z) // arr
    newarr2[y] = x * 2
}))

console.log('================ filter =================')

// filter 返回新数组
var ARR = arr.filter(x => x%2==0)
console.log(ARR)

 

　　　　结果：

Info: Start process (19:56:39)
[ 1, 2, 3, 4, 5, 6, 7 ]
7
[ 1, 2, 3, 4, 5, 6 ]
================ map =================
[ 1, 4, 9, 16, 25, 36 ]
================ forEach =================
undefined [ 1, 2, 3, 4, 5, 6 ]
------------------------------------------
undefined [ 2, 3, 4, 5, 6, 7 ]
------------------------------------------
undefined
[ 2, 4, 6, 8, 10, 12 ]
------------------------------------------
1
0
[ 1, 2, 3, 4, 5, 6 ]
2
1
[ 1, 2, 3, 4, 5, 6 ]
3
2
[ 1, 2, 3, 4, 5, 6 ]
4
3
[ 1, 2, 3, 4, 5, 6 ]
5
4
[ 1, 2, 3, 4, 5, 6 ]
6
5
[ 1, 2, 3, 4, 5, 6 ]
undefined
================ filter =================
[ 2, 4, 6 ]
Info: End process (19:56:40)

 

　　　　练习：

　　　　有一个数组 const arr=[1,2,3,4,5]; 要求算出所有元素平方值是偶数且大于10 的平方值　　

　　　　　　

 

　　对象操作：

　　　　　　　　

　　　　

　　　　

 

 2、Promise

　　Promise对象用于一个异步操作的最终完成（包括成功和失败）及结果的表示

　　简单的说，就是处理异步请求的

　　之所以叫promise ，就是我承诺，如果成功则怎么处理，失败则怎么处理

 　　

　　　　executor

• • • executor是一个带有 resolve 和reject 两个参数的函数 
    • executor 函数在Promise 构造函数执行时同步执行，被传递resolve 和reject 函数（executor函数在Promise构造函数返回新建对象前被调用）
    • executor内部通常会执行一些异步操作，一旦完成，可以调用resolve函数来将Promise状态改成fulfilled 即完成，或者在发生错误式将他的状态改为rejected即失效
    • 如果在executor 函数中抛出一个错误，那么该promise 状态为rejected，executor函数的返回值被忽略
    • executor中，resolve 或reject 只能执行其中一个函数

 　　　　Promise

• • • pending：初始状态，不是成功或失败的状态
    • fulfilled：意味着操作成功完成
    • rejected：意味着操作失败

 　　　　Promise.then(onFulfilled, onRejected) ：注意先后位置，但是测试发现，fulfilled 即便没有onFulfilled 也会走onRejected

 　　　　　　参数是2 个函数，根据Promise的状态来调用不同的函数，fuifilled走 onFulfilled 函数，rejected 走onRejected 函数

　　　　　　then的返回值，是一个新的Promise对象，调用任何一个参数后，其返回值会被新的promise对象来resolve，向后传递

　　　　

 　　　　　　只要出现一种状态（rejected 或fulfilled） 就会回调then中的函数，是promise去调用

　　　　　　结果发现两个 ========都打印了，也就是说不影响后面的代码。

 　　　　　　如果 rejected后，then中没有 处理rejected的函数，就抛出异常，

 　　　　　　

 　　　　　　

 　　　　catch( onRejected )

 　　　　　　为当前Promise 对象添加一个拒绝回调，返回一个新的Promise 对象，onRejected函数调用其返回值会被新的Promise对象来resolve

　　　　　　

 　　　　　　

 　　　　　　

var myPromise = new Promise(
    function (resolve, reject) {
        setTimeout(() => {
            // resolve ('hello');
            console.log('=================')
            reject('world')
            console.log('=================')

        }, 1000) // 睡3秒
})
console.log(myPromise, '====1')

myPromise.then(
    // 如果成功，则显示结果
    (value) => console.log(1, myPromise, value),
    // 如果失败则显示结果
    (reason) => console.log(2, myPromise, reason)
) // 新的promise对象，往下再 then
.then(
    (value) => console.log(5, myPromise, value),

    function (v) {
        console.log(2.5, v);
        return Promise.reject(v, '***')
    }
    (reason) => console.log(4, myPromise, reason)
)
.catch( reason => {
    console.log(3, reason)
    return Promise.resolve(reason)
})

 

 

 　　　　异步实例：

　　　　　

function runAsync() {
    return new Promise(function(resolve, reject){
        // 异步操作
        setTimeout(function(){
            console.log('do sth')
            resolve('ok------')
        },1000)
    })
}

runAsync().then(value =>{
    console.log(value)
    return Promise.reject(value + '*')
}).catch(reason => {
    console.log(reason)
    return Promise.resolve(reason + '*')
}).then(value => {
    console.log(value)
    console.log('end')
})

console.log('=========== fin ===========')