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

3. 数字数组去重，字符串数组去重；数组合并并去重；数组交集；数组并集；对象合并；

// 数组去重 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);

4. 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

5. 任何一个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；

最后

以上就是霸气猎豹为你收集整理的ES6 数组方法 拼接、排序、去重、扁平化、交集、并集、字符串常用方法，数组常用方法的全部内容，希望文章能够帮你解决ES6 数组方法 拼接、排序、去重、扁平化、交集、并集、字符串常用方法，数组常用方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。