JS语法-ES6

1.介绍

ECMAScript 6简称ES6，是JavaScript语言的下一代标准。

2.常用属性及方法

2.1常量与变量的定义

在JavaScript中，我们一般使用var来定义变量，实际上它是有缺陷的，变量的作用域只存在于function中，在if和for中不存在。而ES6就解决了这个问题。

let来定义变量，const来定义值不变的量。可以很好的替换掉var。

注意：

a.const在定义常量时，必须赋初值；

b.const一旦定义了标识符，就不能再次赋值。

c.如果const定义的是对象，那么对象的属性值可以改变。

2.2箭头函数

语法：将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体，相当于匿名函数。当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。当代码块中只有一行代码时，可以省略大括号进行简写。

(参数列表) => {
    //dosomthing
}

箭头中的this查找方式：向外层作用域中一层层查找，直到有this的定义。当然有的地方也可以对function()进行简写，如get:function()可以简写为get()。但是这种方式不属于箭头函数，是ES6的新特性。

实例1：无参函数的js版和es6版对比

var test1=function test(){
    console.log(123)
}

var test2=()=>{
    console.log(456)
}

//使用函数
test1()
test2()

实例2：单参函数的js版和es6版对比

var test1 = function test(p) {
    console.log(123 + p)
}

var test2 = p => {
    console.log(456 + p)
}

test1('6')
test2('6')

实例3：多参函数的js版和es6版对比

var test1 = function test(p, p2) {
    console.log(123 + p + p2)
}

var test2 = (p,p2) => {
    console.log(456 + p + p2)
}

test1('6', 'abc')
test2('6', 'abc')

实例4：一行代码的js版和es6版对比

var test1 = function test(a, b) {
    return a + b
}

var test2 = (a, b) => a + b

console.log(test1(12, 20))
console.log(test2(12, 20))

说明：当里面只有一行代码时可以使用，另外es6可以省略return关键字。

2.3幂运算**

在es6中可以使用**来进行幂运算，相当于Math.pow()

console.log(3**3)//27
console.log(2**3)//8

2.4includes()方法

用在字符串中，用于判断字符串是否包含某个字串。

string.includes(str)

用在数组中，用于判断数组是否包含某个元素。

array.includes(s)

实例1：判断字符串中是否包含子串

const str = 'abc123bchh'
const str2 = 'bc'
const str3 = '1234'

console.log(str.includes(str2))//true
console.log(str.includes(str3))//false

实例2：判断数组中是否包含某个元素

const arr = [1,2,3,5,7,6]
console.log(arr.includes(9))//false
console.log(arr.includes(5))//true

2.5padStart()与padEnd()方法

padStart()和padEnd()分别用来自动在头部补全和尾部补全，常用于自动补0。

string.padStart(len,str)
string.padEnd(len,str)

len表示最终的字符串的长度，是需要指定的。str是用于补全的字符串。

实例1：格式化时间，如果数字小于10则在前面补0（使用padStart）

const date = new Date();
const year = date.getFullYear()
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = (date.getDate()).toString().padStart(2, '0')
const time = year + "-" + month + "-" + day
console.log(time)

3.模块化的导入与导出

在ES6中，可以使用模块化的导入与导出。导入使用关键字import，导出使用关键字export。

在html中，在引入js的时候，需要加上type="module"。

<script src="test.js" type="module"></script>
<script src="test2.js" type="module"></script>

3.1第一种方式：确定了导出的名称

1）导出对象：使用export {} 来导出对象，大括号中填写要导出的变量名称。test.js内容如下：

const flag = true;
function sum(num1, num2) {
  return num1 + num2;
}

export {flag, sum}

在test2.js中导入使用

import {flag, sum} from "./test.js"

if (flag) {
  console.log("从test1.js导入成功")
}
console.log(sum(25, 30))

2）导出变量：使用export加上变量，直接导出变量。test.js内容如下：

export const message = '导出变量';
export const num = 10;

在test2.js中导入使用

import {message, num} from "./test.js";
console.log(message, num);

上面的两种方式都是通过解构赋值的方式导入的（只导入需要的），其实也可以全部导入。

import * as test from "./test.js";
console.log(test.message)
console.log(test.num)

上面就是全部导入，导入后把它作为一个对象，然后通过这个对象来使用其中的属性和方法。

3.2第二种方式：使用default

有时候到导出的时候不命名，而在导入的时候让导入者自己进行命名就可以使用export default的方法导出，导入的时候import后面也不需要加{}了。。test.js内容如下：

const test = {
    flag: true,
    sum(num1, num2) {
        return num1 + num2;
    }
}

export default test

在test2.js中导入使用

import test from './test.js'
console.log(test.sum(1, 3))
console.log(test.flag)

需要注意的是export default在同一个模块中只能存在一个，不能出现多个。

4.Promise

异步编程的解决方案，多用在网络请求中，解决回调地狱的问题。一般在异步操作中对异步操作进行封装。

只要创建了Promise对象就会立即执行异步操作，如网络请求。异步操作之后有三种状态：pending：等待，fulfill：满足，reject：拒绝。

4.1Pomise的几种使用方式

1）使用then和catch

     new Promise((resolve, reject) => {
　　　　　　　　//异步操作
            //data为异步操作成功返回的数据，err为异步操作失败的错误信息
            if (异步操作成功) resolve(data)
            else reject(err)
        }).then(data => {
            // 异步操作成功时若调用了resolve()方法则会进入这里执行
            console.log(data)
        }).catch(err => {
            // 异步操作失败时若调用了reject()方法则会进入这里执行
            console.log(err)
        })

2）省略catch

    new Promise((resolve, reject) => {
　　　　　　　　//异步操作
            //data为异步操作成功返回的数据，err为异步操作失败的错误信息
            if (异步操作成功) resolve(data)
            else reject(err)
        }).then(data => {
            // 异步操作成功时若调用了resolve()方法则会进入这里执行
            console.log(data)
        }, err => {
            // 异步操作失败时若调用了reject()方法则会进入这里执行
            console.log(err)
        })

4.2Promise的链式调用

异步操作中嵌套异步操作

    new Promise((resolve, reject) => {
　　　　　　  //异步操作
            //data为异步操作成功返回的数据，err为异步操作失败的错误信息
            if (异步操作成功) resolve(data)
            else reject(err)
        }).then(data => {
            // 异步操作成功时若调用了resolve()方法则会进入这里执行
            console.log(data)

            new Promise((resolve, reject) => {
　　　　　　　　　　//异步操作
                if (异步操作成功) resolve(data)
                else reject(err)
            }).then(data => {
                console.log(data)
            }, err => {
                console.log(err)
            })
        }, err => {
            // 异步操作失败时若调用了reject()方法则会进入这里执行
            console.log(err)
        })

4.3Promise中all方法

当需要同时执行两个异步操作时就可以使用all。

      Promise.all([new Promise((resolve, reject) => {
                //异步操作1
                if (异步操作成功) resolve(data)
                else reject(err)
            }),
            new Promise((resolve, reject) => {
                //异步操作2
                if (异步操作成功) resolve(data)
                else reject(err)
            })
        ]).then(results => {
            //results中包含两个操作的结果
            console.log(results)
        })

5.async和await

async和await是用来处理异步的。当需要异步像同步一样执行，等待异步返回结果之后，再往下依据结果继续执行的情况就可以这样使用。

需要注意的是，async和await必须同时使用才能生效，await用在被async修饰的方法里。

//异步的方法
function test(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    })
}

async function testResult () {
    console.log('我是内部1')
    //把异步方法当做同步方法执行，执行完后再执行后面的代码
    let result = await test(30)
    console.log(result)
    console.log('我是内部2')
}

testResult()
/**
 * 打印结果：其中60是在等待2s后打印的
 *  我是内部1
    60
    我是内部2
 */

6.模板字符串

在js中，会遇到很多的在字符串拼接，其实可以使用模板，内容可以出现换行符。变量放到${}里面，最外面使用反引号（`）包裹。这个符号处于键盘esc和tab之间，英文状态下的~。

const year = 2020
const month = 08
const day = 27
//使用模板，
const time = `${year}-${month}-${day}`
console.log(time)//2020-8-27

7.变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

7.1数组的解构

按照对应位置，对变量赋值。如果解构不成功，变量的值就等于undefined。等号左边的模式，只匹配一部分的等号右边的数组也是可以的。

const arr = ['战三', 123, '李四', 22.5]
let [a, b, c, d] = arr
console.log(a)//战三
console.log(b)//123
console.log(c)//李四
console.log(d)//22.5

7.2对象的解构

按照对应位置，对变量赋值.需要注意的是，解构的时候，名称必须一致。如对象里面是name属性，那么后面赋值时也必须是name，否则解构不成功，得到的是undefined。只解构部分属性或方法，就是按照名称对应的规则进行的。

1）全部解构

const person = {
    name: '王敏',
    age: 20,
    sum(a, b) {
        return a + b
    }
}
let { name, age, sum } = person
console.log(name)//王敏
console.log(age)//20
console.log(sum)//[Function: sum]

2）部分解构

let {sum}=person
console.log(sum(10,20))//30

8.函数的扩展

8.1参数默认值

es6中，允许给函数的参数设置默认值，当不传递此参数时，就使用默认值。具有默认值的参数，一般位置要靠后。

function add(a, b, c = 5) {
    return a + b + c
}

console.log(add(4, 6, 7))//17，全部传值，就使用传递的值，4+6+7=17
console.log(add(4, 6))//15,没有传值，就使用默认值，4+6+5=15

实例：与解构赋值进行结合使用

//与解构赋值进行结合使用
const option={
    host:'localhost',
    username:'root',
    password:'1234'
}
//解构赋值，设置参数默认值
function connect({username,password,host='127.0.0.1'}){
    console.log(host)
    console.log(username)
    console.log(password)
}

connect(option)

8.2rest参数

获取参数的实参，当参数是可变值时使用。通过...来标识实参,参数是一个数组。另外，rest参数必须放到最后。

function add(...args){
    console.log(args)
}

add(1,2,3)//[ 1, 2, 3 ]
add(1,2,5,8)//[ 1, 2, 5, 8 ]

9.扩展运算符...

扩展运算符（ spread ）是三个点（...），用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。可以用于数组的合并，类型转换等等。

9.1数组的合并

这种方式可以用来连接数组，并返回一个新的数组。通过...来识别，可以同时连接多个

let arr1 = [1, 3, 5, 6, 4]
let arr2 = [7, 9, 8, 10]
let arr3 = [...arr1, ...arr2]
console.log(arr3) 

9.2set对象转数组

set对象后面有说明，这里先使用。

//使用扩展运算符把集合转为数组
const newArr=[...new Set([1,2,5,6,2,4,6])]

10.迭代器（遍历）

10.1 原生fori的用法

const arr = ['孙悟空', '猪八戒', '沙僧', '唐僧']
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

10.2 for of的用法

遍历数组内容。

const arr = ['孙悟空', '猪八戒', '沙僧', '唐僧']
for (let v of arr) {
    console.log(v)//分别打印'孙悟空','猪八戒','沙僧','唐僧'
}

10.3 for in的用法

遍历数组的索引。

const arr = ['孙悟空', '猪八戒', '沙僧', '唐僧']
for (let v in arr) {
    console.log(v)//分别打印0,1,2,3
}

10.4 forEach的用法

可遍历数组索引和内容。

const arr = ['孙悟空', '猪八戒', '沙僧', '唐僧']
arr.forEach((item, index) => console.log(`索引：${index}，内容：${item}`))

10.3 它们的区别

1）forEach  不能使用break 和return 结束并退出循环；fori、for in 和 for of 可以使用break和 return

2）for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name。故for in 更适合遍历对象，for of 适合遍历数组或者类数组。

11.数据结构

11.1 Set

es6有一个新的数据结构set，它和数组类似，但是它里面的内容是唯一的。

11.1.1声明集合

声明一个空集合

let s1=new Set()

声明一个有值的集合,值必须是数组类型

let s2=new Set([1,2,5,6,2,4,6])
console.log(s2)//Set { 1, 2, 5, 6, 4 }

11.1.2添加元素add

s2.add('你好啊')
console.log(s2)//Set { 1, 2, 5, 6, 4, '你好啊' }

11.1.3删除元素delete

如果元素存在，就会删除成功返回true;如果元素不存在，就会返回false

const r = s2.delete(1)
console.log(r)//true
console.log(s2)//Set { 2, 5, 6, 4, '你好啊' }

11.1.4判断元素是否存在has

存在就返回true，不存在就返回false

const has = s2.has('你好啊')
console.log(has)//true

11.1.5清空集合clear

s2.clear()
console.log(s2)//Set {}

11.1.6遍历

for (let v of s2) {
    console.log(v)
}

11.1.7集合的应用

1）数组去重

const arr = [1, 2, 5, 6, 2, 4, 6]
//使用扩展运算符把集合转为数组
const newArr = [...new Set(arr)]
console.log(newArr)//[ 1, 2, 5, 6, 4 ]

2）计算两个数组的交集

const arr2 = [3, 4, 6, 7, 9]
//先把数组的内容进行去重，然后使用filter方法过滤
const result = [...new Set(arr)].filter(item => new Set(arr2).has(item))
console.log(result)//[ 6, 4 ]

3）计算两个数组的差集

const result2 = [...new Set(arr)].filter(item => !new Set(arr2).has(item))
console.log(result2)

4）计算两个数组的并集

const result3 = [...new Set([...arr, ...arr2])]
console.log(result3)//[1, 2, 5, 6, 4, 3, 7, 9]

11.2 Map

map也是一种集合，通过key-value的形式存放数据。

11.2.1初始化map对象

const map=new Map()

11.2.2添加元素set

map.set('name','张三')
map.set('age',10)
console.log(map)//Map { 'name' => '张三', 'age' => 10 }

11.2.3删除元素delete

根据key删除,删除成功返回true，删除存在的值返回false

const r=map.delete('name')
console.log(r)//true
console.log(map)//Map { 'age' => 10 }

11.2.4清空clear

map.clear()
console.log(map)//Map { }

11.2.5遍历

使用for of，里面的每一项都是一个数组，数组的第一个值是key，第二个值是value,如[ 'age', 10 ]

for(let v of map){
    console.log(v)
}

11.2.6获取get

const map = new Map()
map.set('name',111)
console.log(map.get('name'))

存在时返回对应的值，不存在时返回undefined。

11.2.7 判断是否存在has

存在就返回true，不存在就返回false

const map = new Map()
map.set('name',111)
console.log(map.has('name'))

12.数值扩展

12.1 Number.isNaN()

判断一个数是否是NaN,是则返回true，否则返回false

console.log(Number.isNaN(123))

12.2 Number.parseInt()

把字符串转为整数。

1）如果字符串中以数字开头并包含字符，则只会截取字母前面的部分数字;如果字符串中不以数字开头，则返回NaN

2）如果字符串是一个浮点数，则只取整数部分，舍弃小数部分

console.log(Number.parseInt('125455'))//125455
console.log(Number.parseInt('12.9'))//12
console.log(Number.parseInt('-12.1'))//-12
console.log(Number.parseInt('0.12'))//0
console.log(Number.parseInt('-0.12'))//-0
console.log(Number.parseInt('1254pa20'))//1254
console.log(Number.parseInt('app'))//NaN
console.log(Number.parseInt('aa325'))//NaN

12.3 Number.parseFloat()

把字符串转为浮点型数字。

1）如果字符串中以数字开头并包含字符，则只会截取字母前面的部分数字;如果字符串中不以数字开头，则返回NaN

2）如果小数部分是0,则只取整数部分，返回整数

console.log(Number.parseFloat('125455.0'))//125455
console.log(Number.parseFloat('12.9'))//12.9
console.log(Number.parseFloat('-12.1'))//-12.1
console.log(Number.parseFloat('1254.0pa20'))//1254
console.log(Number.parseFloat('app'))//NaN
console.log(Number.parseFloat('aa325.0'))//NaN

12.4Number.isInteger()

判断一个数是否是整数。是返回true，否则返回false。如果一个数小数部分是0,则也视为是整数。

console.log(Number.isInteger(0))//true
console.log(Number.isInteger(125455.0))//true
console.log(Number.isInteger(123))//true
console.log(Number.isInteger(2.9))//false
console.log(Number.isInteger(-12.1))//false

12.5 Math.trunc()

把数字的小数部分舍弃，返回整数部分。注意，不是进行四舍五入

console.log(Math.trunc(2.9))//2
console.log(Math.trunc(2.1))//2

12.6 Math.sign()

判断一个数的类型，正数返回1、负数返回-1，零返回0

console.log(Math.sign(20))//1
console.log(Math.sign(0))//0
console.log(Math.sign(-20))//-1

13.对象及对象方法的扩展

13.1对象字面量的增强写法

13.1.1对象属性的增强写法

//ES5写法
const name = "yuan";
const age = "21";
const sex = "man";
const obj = {
 name: name,
 age: age,
 sex: sex
}
//ES6写法
const name = "yuan";
const age = "21";
const sex = "man";
const obj = {
 name,
 age,
 sex
}

13.1.2对象方法的增强写法

//ES5写法
const name = "yuan";
const obj = {
 getName: function(){
 console.log("my name is " + name);
 }
}
//ES6写法
const name = "yuan";
const obj = {
 getName(){
 console.log("my name is " + name);
 }
}

13.2 Object.is()

判断两个值是否完全相等。相等返回true，不相等返回false。

ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。而Object.is()就可以解决这个问题。

console.log(Object.is('123','123'))//true
console.log(Object.is('123','123.0'))//false
console.log(Object.is(NaN,NaN))//true

13.3 Object.assign()

用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。第一个参数是目标对象，后面的参数都是源对象。它实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
//把source1，source2合并到target中
Object.assign(target, source1, source2)
console.log(target)//{ a: 1, b: 2, c: 3 }

1）如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

//对象的合并Object.assign()
const target = { a: 1, b: 5 };
const source1 = { b: 2, c: 6 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target)//{ a: 1, b: 2, c: 3 }

2）如果只有一个参数，Object.assign()会直接返回该参数。

const obj = { a: 1 }
console.log(Object.assign(obj) === obj)//true

3）如果该参数不是对象，则会先转成对象，然后返回。undefined和null作为参数会报错，原因是他们无法转为对象。

console.log(typeof Object.assign(2))//object

4）如果非对象参数出现在源对象的位置，那么这些参数都会转成对象，如果无法转成对象，就会跳过。

let obj = {a: 1};
console.log(Object.assign(obj, undefined) === obj) // true
console.log(Object.assign(obj, null) === obj) // true

5）其他类型的值（即数值、字符串和布尔值）不在首参数时，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。

const v1 = 'abc';
const v2 = true;
const v3 = 10;
const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

6）浅拷贝的实例

const obj1 = { a: { b: 1 } };
const obj2 = Object.assign({}, obj1);
console.log(obj1.a.b)//1
console.log(obj1.a.b = 2)
console.log(obj2.a.b) // 2

源对象obj1的a属性的值是一个对象，Object.assign()拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面，上面的实例已经说明这个道理。

如果源对象中属性值不是对象，那么就只是拷贝这个值。那么就可以解决开发中的一些问题。例如vue中的数据复制地址问题，把一个对象先赋值给空对象，再对得到的对象进行修改，则不会影响源对象的内容。

 // this.obj2=this.obj1//obj2的修改会直接影响obj1的值
this.obj2 = Object.assign({}, this.obj1)

因此可以使用第二行代码解决此问题。

13.4 Object.keys()

返回一个数组，成员是参数对象自身的所有可遍历属性的键名，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // ['0', '1', '2']

var obj = { 0: 'a', 3: 'b', 2: 'c' };
console.log(Object.keys(obj)); // ['0', '2', '3']

基于此功能，就可以获取对象中属性的个数

var obj = { 0: 'a', 3: 'b', 2: 'c' ,'name':'' };
console.log(Object.keys(obj).length); // 4

13.5 Object.values()

返回一个数组，成员是参数对象自身的所有可遍历属性的键值，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

var arr = ['a', 'b', 'c'];
console.log(Object.values(arr)); //[ 'a', 'b', 'c' ]

var obj = { 0: 'a', 3 :'b', 2: 'c' };
console.log(Object.values(obj)); //[ 'a', 'c', 'b' ]

13.6 Object.entries()

返回一个数组，成员是参数对象自身的所有可遍历属性的键值对数组。

var arr = ['a', 'b', 'c'];
console.log(Object.entries(arr)); // [ [ '0', 'a' ], [ '1', 'b' ], [ '2', 'c' ] ]

var obj = { 0: 'a', 3 :'b', 2: 'c' };
console.log(Object.entries(obj)); // [ [ '0', 'a' ], [ '2', 'c' ], [ '3', 'b' ] ]

13.7 Object.fromEntries()

是Object.entries()的逆操作，用于将一个键值对数组转为对象。

console.log(Object.fromEntries([ [ '0', 'a' ], [ '2', 'c' ], [ '3', 'b' ] ]))//{ '0': 'a', '2': 'c', '3': 'b' }

14.数组的扩展

14.1 findIndex()

根据条件返回符合的数组的索引值，找不到返回-1。

let arrs = [1, 3, 5, 6, 4]
//获取值等于5的数组的索引，找不到就返回-1
let arr2 = arrs.findIndex(item => {
    return item == 5
})
console.log(arr2 == -1 ? '未找到' : arr2)

14.2 Array.from()

用于将两类对象转为真正的数组。两类对象是类似数组的对象和可遍历的对象（部署了Iterator接口的数据结构）。

1）把类似数组的对象转为数组

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

let arr2 = Array.from(arrayLike);
console.log(arr2)//[ 'a', 'b', 'c' ]

类似数组的对象中，不仅包含基本属性，还包含了长度。

2）把字符串转为数组

const arr3 = Array.from('hello')
console.log(arr3)//[ 'h', 'e', 'l', 'l', 'o' ]

3）把set集合转为数组

let set=new Set()
set.add(5)
set.add(2)
set.add(8)
const arr4=Array.from(set)
console.log(arr4)//[ 5, 2, 8 ]

14.3 Array.of()

将一组值，转换为数组。

console.log(Array.of(3, 11, 8)) // [3,11,8]
console.log(Array.of(5)) // [5]

14.4 fill()

使用给定值，填充一个数组，数组中已有的元素，会被全部替换。。语法是fill(value,start,end)，value是要填充的值（必选），start和end分别是要填充的起始和结束位置（可选）。

1）初始化空数组

const arr5 = new Array(3).fill(7)
console.log(arr5)//[ 7, 7, 7 ]

2）全部替换数组内容

const arr6 = ['a', 'b', 'c'].fill(7)
console.log(arr6)//[ 7, 7, 7 ]

3）部分替换

//从1号位开始，向原数组填充7，到2号位之前结束
const arr7 = ['a', 'b', 'c'].fill(7, 1, 2)
console.log(arr7)//[ 'a', 7, 'c' ]

14.5 flat()

将多维数组转为低位数组，返回一个新数组，原数组的值不变。可以传递一个深度，表示降多少维，默认是1。如果原数组有空位，flat()方法会跳过空位。

1）把二维数组转为一维数组

const arr = [4, 5, 8, [8, 9, 7, 6]]
const newArr = arr.flat()
console.log(newArr)//[ 4, 5, 8, 8, 9, 7, 6 ]

2）把三维数组转为二维数组

const arr2 = [4, 5, 8, [8, 9, 7, 6, 10, 51, [33, 52, 20]]]
const newArr2 = arr2.flat()
console.log(newArr2)//[ 4, 5, 8, 8, 9, 7, 6, 10, 51, [ 33, 52, 20 ] ]

3）把三维数组转为一维数组

const newArr3 = arr2.flat(2)
console.log(newArr3)//[ 4, 5, 8, 8, 9, 7, 6, 10, 51, 33, 52, 20 ]

.