ES6 数组方法 拼接、排序、去重、扁平化、交集、并集、字符串常用方法,数组常用方法

1. 数组拼接,有push方法和concat方法

// 1.push方法
var arr1 = [9, 3, 2, 8, 12];
var arr2 = [6, 10, 4, 7];
var arr3 = ["a", "h", "c", "f"];

arr1.push(...arr2,...arr3) // 改变了arr1数组
// 2.concat方法
arr1.concat(arr2,arr3) // 不改变arr1数组,是一个新的数组

2. 数组扁平化, flat(),一次只能扁平化一层,可以用flat(Infinity)将任何数组扁平化为一维数组;数组去重 new Set();数组排序sort;数组对象方法参考数组方法

var arr4 = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10, 7]
// 扁平化 方法1:flat(Infinity)
let newArr = []
newArr = arr4.flat(Infinity)
// 扁平化 方法2:flat(Infinity)
newArr = arr4.toString().split(",")
console.log(newArr,'扁平化后的数组')
// 递归函数
function flatArr(array){
    let newArray = []
    if(array instanceof Array){
        newArray = array.flat()
    }
    for(let i in array){
        if(array[i] instanceof Array){
            newArray = flatFun(newArray)
        }
    }
    return newArrary
}
newArr = flatArr(arr4)
 
// 去重
newArr = [...new Set(newArr)]
console.log(newArr,'去重后的数组')

// 数组排序,直接用newArr.sort()只能排1-9,对大于9的数字不起作用
newArr.sort((a,b) => {
    return a-b
})
console.log(newArr,'升序排序后的数组')

// 求数组中的最大值
Math.max(arr1)

// 数组对象排序
var arr4 = [
      { name: "a", value: 10 },
       { name: "b", value: 8 },
       { name: "c", value: 16 },
       { name: "d", value: 6 }
     ];
arr4.sort((obj1,obj2)=>{return obj1.value - obj2.value})
  1. 数字数组去重,字符串数组去重;数组合并并去重;数组交集;数组并集;对象合并;
// 数组去重 set,字符串去重
[...new Set(array)] // 数组
[...new Set(str)].join('') // 字符串

// 数组合并并去重
new Set([...array1,...array2])
// 数组求交集
new Set(...array1).filter(x=> array2.has(x))
// 数组求并集
new Set(...array1).filter(x=> !array2.has(x))

// 对象合并:Object.assign()
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
  1. ES2020 引入了“链判断运算符”(optional chaining operator)?.
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default'
// 等同于
const firstName = message?.body?.user?.firstName || 'default'

// 属性的值为null或undefined,默认值就会生效,但是属性的值如果为空字符串或false或0,默认值也会生效
const animationDuration = response.settings.animationDuration || 300
// ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||,但是只有运算符左侧的值为null或undefined时,才会返回右侧的值
const animationDuration = response.settings.animationDuration ?? 300
// 跟链判断运算符?.配合使用,为null或undefined的值设置默认值。
const animationDuration = response.settings?.animationDuration ?? 300
  1. 任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。这时可以将第一个await放在try…catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行,另一种方法是await后面的 Promise 对象再跟一个catch方法,处理前面可能出现的错误
// 01
// async function f() {
//  await Promise.reject('出错了');
//  await Promise.resolve('hello world'); // 不会执行
// }

// 02
async function f() {
  try {
    await Promise.reject('出错了');
  } catch(e) {
  }
  return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// hello world

// 03
async function f() {
  await Promise.reject('出错了')
    .catch(e => console.log(e));
  return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// 出错了
// hello world

// 多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发
let foo = await getFoo();
let bar = await getBar();

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

// import命令会被 JavaScript 引擎静态分析,先于模块内的其他语句执行

字符串扩展

  1. includes():返回布尔值,表示是否找到了参数字符串;
  2. startsWith():返回布尔值,表示参数字符串是否在原字符串的头部;
  3. endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部;
  4. padStart(),padEnd() 在头部或尾部补全:如日期、时间小于10时加0补全,second.toString().padStart(2,‘0’);
  5. trimStart()、trimEnd()消除字符串头部、尾部的空格;
  6. matchAll() 返回一个正则表达式在当前字符串的所有匹配;
  7. replaceAll() 替换所有的匹配,用replace()需要使用正则表达式的g修饰符:‘aabbcc’.replace(/b/g,‘‘) // ‘aa__cc’ ‘aabbcc’.replaceAll(‘b’,’’);
  8. 字符串转数组:[…‘hello’] // [‘h’,‘e’,‘l’,‘l’,‘o’]

数值扩展
9. Math.trunc 去除小数部分,返回整数部分;Math.trunc(4.1) // 4;
10. Math.sign() 判断一个数是正数、负数、还是0,别返回 1,-1,0,-0,NaN;

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值