ES6高級技巧(二)

　Array.from

const cities = [
    { name: 'Milan', visited: 'no' },
    { name: 'Palermo', visited: 'yes' },
    { name: 'Genoa', visited: 'yes' },
    { name: 'Berlin', visited: 'no' },
    { name: 'Hamburg', visited: 'yes' },
    { name: 'New York', visited: 'yes' }
];

const cityNames = Array.from(cities, ({ name}) => name);
解構
cities.map(({name}) => name);

//給數組分組
const chunk=(arr,size)=>{
   return  Array.from({length:Math.ceil(arr.length/size)},(v,i)=>arr.slice(i*size,size*(i+1)))
};

console.log(chunk([1, 2, 3, 4, 45], 2)); //[ [ 1, 2 ], [ 3, 4 ], [ 45 ] ]

面向接口???

　去重

對象的屬性是惟一的
let tempList = [12, 3, 43, 5, 56, 34, 2, 1, 3, 4, 5];
Object.keys(tempList.reduce((acc, val) => (acc[val] = 0, acc), {})).map(Number);

... 對象操做

返回想要的對象(1)
const noPassword=({password,...rest})=>rest;
const user={
    id:100,
    name: 'Howard Moon',
    password: 'password'
};
noPassword(user);
//{ id: 100, name: 'Howard Moon' }


刪除某個屬性(2)

const user={
    id:100,
    name: 'Howard Moon',
    password: 'password'
};
const removeProperty=prop=>({[prop]:_,...rest})=>rest;
//輸入第二個參數的某個屬性去掉
const removePassword = removeProperty('password');
//第二個參數是一個對象
removePassword(user);
//{ id: 100, name: 'Howard Moon' }

(3) 交換位置
const orgenize=({password,...object})=>({...object,password});
console.log(orgenize(user));

將數組中的 VIP 用戶餘額加 10(就是增長一個對象替換原來的)
const users = [
  { username: "Kelly", isVIP: true, balance: 20 },
  { username: "Tom", isVIP: false, balance: 19 },
  { username: "Stephanie", isVIP: true, balance: 30 }
];

users.map(v => (
    v.isVIP ? {...v, balance: v.balance + 10} : v
));

判斷一串字符是否含有["a", "e", "o", "i", "u"]

const randomStr = "hdjrwqpi";
const arr = ["a", "e", "o", "i", "u"];
[...randomStr].some(v => arr.includes(v));

　reduce 對於函數的處理

[x=>x*2,x=>x+x].reduce((acc, val) => val(acc), 10);

複雜點
const double=x=>x+x;
const triple=x=>3*x;
const pipe = (...functions) => input => functions.reduce((acc, val) => val(acc), input);
console.log(pipe(double,triple)(10));

reduce返回數組的一個新方法
[1,2,3,2,3,3,1,2].reduce((acc,val)=>(val==3&&[...acc,val],acc),[])

　reduce 的新技能

const users = [
    { name: "Adam", age: 30, sex: "male" },
    { name: "Helen", age: 27, sex: "female" },
    { name: "Amy", age: 25, sex: "female" },
    { name: "Anthony", age: 23, sex: "male" },
];
//男女分組
users.reduce(([one, two], val) =>
        val.sex == 'male' ? [[...one, val], two] : [one, [...two, val]]
    , [[], []]
);

filter

let a='www.baidu.com/ss/sss/';
    a.split('/').filter(Boolean);

數組取整

['1','2','3'].map(Number)

遞歸的壓棧出棧

你往一個箱子裏放些東西,這個動做叫作壓棧

最後把東西從箱子裏面拿出來叫作出棧

在實際業務中,壓棧的過程就是不斷調用的過程,出棧的過程就不斷執行的過程

注意點

• 設置終止點
• 除了遞歸不要摻入其餘代碼

也就是基數條件和遞歸條件

練習

字符串倒序

const reverse(str)=>{
    if(str.length<=1) return str;
    return reverse(str.slice(1))+str[0];
}

一串字符串,是否有兩個字符相等
const isPalindrome=(str)=>{
    if(str.length) return true;
    if(str.length==2) return str[0] == str[1];
      if(str[0]==str.slice(-1)){
          return isPalindrome(str.slice(1))
      }
};
console.log(isPalindrome('aka'));

數組扁平化
const flatten = arr => arr.reduce((acc, val) => {
    return acc.concat(Array.isArray(val) ? flatten(val) : val);
}, []);

接受一個對象,這個對象的值是偶數,讓其想加

let obj = {
    a: 1,
    b: 2,
    c: {d: 3},
    e: {f: {g: 6}},
    t: {f: {g: {f:10}}},
};
const objSum = obj => {
    let sum = 0;
    for (let key in obj) {
        if (typeof obj[key] == 'object') {
            sum += objSum(obj[key])
        } else if (typeof obj[key] == 'number' && obj[key] % 2 == 0) {
            sum += obj[key];
        }
    }
    return sum
};
console.log(objSum(obj));

const reduceSum=obj=>
    Object.values(obj).
    reduce((acc,val)=>
        typeof val=='object'?
            acc+reduceSum(val):
            acc+val,0);

　尾遞歸(js好像沒有優化不強求)

聽大佬說v8沒有對尾遞歸進行優化,因此知道就好了,不強求

//尾遞歸
function f(x){
    return g(x)
}
//非尾遞歸
function f(x){
    return g(x)+1
}

那尾遞歸和非尾遞歸有什麼不同
執行上下文棧的變化不同

尾調用函數執行時,雖然也調用了一個函數,可是由於原來的函數執行完畢,執行上下文會被彈出,執行上下文棧中至關於只多壓入了一個執行上下文,然而非尾遞歸,就會建立多個執行上下文壓入執行上下文棧

const factorial=n=>{
    if(n=1) return n
    return n*factorial(n-1)
}
把階乘改爲尾遞歸
const fact=(n,res=1)=>{
    if(n=1) return res;
    return fact(n-1,n*res)
}

.......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................