ES6高级技巧(二) - HelloWorld开发者社区

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)
}

####################################################################################################################################################################################.......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................