小胖墩er
小胖墩er
2021-08-09

ES6新增方法

# 数组的解构

概念： 在ES6中可以使用 [ 变量 ] 的形式按照一定的规则(下标匹配模式)从数组中提取对应的值 语法：

 // ES5
let arr = ['广东省','广州市','xx路']
let province = arr[0]
let city = arr[1]
let street = arr[2]

// ES6 数组结构
let [province, city, street] = ['广东省','广州市','xx路']
// 下标相等的变量会与数组中相同下标项进行匹配
1
2
3
4
5
6
7
8
9

注意

  1. 数组的结构可以有缺省值
let [, city, street] = ['广东省', '广州市', 'xx路']

console.log(city, street) // '广州市'  'xx路'
1
2
3
  1. 数组的结构允许嵌套解构
let [[f,b], ,arr] = [['foo','bar'],1,[1,2,3]]

console.log(f, b, arr) // 'foo' 'bar'  [1,2,3]
1
2
3
  1. 匹配不到的将会返回undefined
let [, city, street, test] = ['广东省', '广州市', 'xx路']

console.log( test) // undefined
1
2
3
  1. 解构支持默认值
let [, city, street, test = '42号'] = ['广东省', '广州市', 'xx路']

console.log( test) // 42号
1
2
3

# 对象的解构

**概念：**在ES6中对象也可以按照一定的规则(key匹配模式)从对象中提取对应的值

语法：

let {id, name, artist} = {
    id: 347230,
    name: "海阔天空",
    artist: "Beyond",
    album: "海阔天空",
    duration: 326000,
    mark: 8192
}

console.log(id, name, artist) // 347230  "海阔天空"  "Beyond"
1
2
3
4
5
6
7
8
9
10

注意

  1. 在对象的结构中,变量的顺序不会影响匹配的属性。必须要保证匹配的变量名一定要和对象key一致

  2. 解构的变量名可以自定义，其实对象的结构就是 左边结构对象匹配右边对象数据的key。将右边对应key的value值赋值给左边结构对象 value 变量。因为ES6中对象key与value相同时 可以简写为 {key} 等价于 {key：key}

let { name: musicName, artist: artist, id: id} = {
    id: 347230,
    name: "海阔天空",
    artist: "Beyond",
    album: "海阔天空",
    duration: 326000,
    mark: 8192
}

console.log(id, musicName, artist)
1
2
3
4
5
6
7
8
9
10
  1. 匹配不到的属性将会返回undefined
let { time } = {
    id: 347230,
    name: "海阔天空",
    artist: "Beyond",
    album: "海阔天空",
    duration: 326000,
    mark: 8192
}

console.log(time) // undefined
1
2
3
4
5
6
7
8
9
10
  1. 对象的结构同样支持嵌套解构
let {id, artists: [a1, a2], artists} = {
    id: 347230,
    name: "舒克贝塔",
    artists: [{
            name: '舒克'
        },
        {
            name: '贝塔'
        }
    ],
    duration: 326000,
    mark: 8192
}

 console.log(id) // 347230
 console.log(a1) // {name: '舒克'} 
 console.log(a2) // {name: '贝塔'} 
 console.log(artists) // [{name: '舒克'}, {name: '贝塔'}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  1. 嵌套解构如果不匹配会返回undefined, 对undefined再进行结构将会报错
 let {id: {name}} = {
    id: 347230,
    name: "舒克贝塔",
    duration: 326000,
    mark: 8192
}

console.log(name) // undefined

let {id: { name: {a} }} = { // Error Cannot read property 'a' of undefined
    id: 347230,
    name: "舒克贝塔",
    duration: 326000,
    mark: 8192
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 展开运算符 (...)

**概念：**ES6提供了展开运算符,功能展开数组或者对象(去除[] 或者 {})

语法：

let arr = [1,2,3,4]
let arr1 = [...arr, 7] //  [1,2,3,4,7]

let person = { name: '小明', age: 18}
let newPerson = {...person, address: 'gz'} // { name: '小明', age: 18, address: 'gz'}
1
2
3
4
5

注意

  1. 使用对象的展开运算符给对象添加新的属性或实现对象的合并,如果出现相同的属性,后者将会替换前者
let obj = {
    name: '小明',
    age: 18
}

let obj1 = {
    age: 19,
    address: 'gz'
}


console.log({...obj, ...obj1, address: 'sz'}) 
/*输出结果 {address: "sz",age: 19,name: "小明"} */
1
2
3
4
5
6
7
8
9
10
11
12
13
  1. 在解构中...支持剩余（rest）运算
let [a, b, ...c] = [1, 2, 3, 4, 5]
// a 1
// b 2
// c [3, 4, 5]

let {name, ...otherDetail} = {
  name: '小明',
  age: 18,
  address: 'gz',
  hobby: []
}
// name  '小明'
// otherDetail {  age: 18,  address: 'gz', hobby: []}
1
2
3
4
5
6
7
8
9
10
11
12
13
  1. 字符串是一个特殊的数组,所以也可以使用展开运算符
[...'hello']  // ['h', 'e', 'l', 'l', 'o']
1
  1. 解构,展开运算符, rest运算都可以应用在函数的参数上
 // 形参使用解构直接获取对象中需要用到的属性
function sayHello({name,age,city,...otherDetail} ) {

    console.log('你好!我叫' + name+'今年'+age+'岁' + ',来自' + city)
    console.log(otherDetail)
}

let p = {
    name: '小明',
    age: 25,
    city: '深圳',
    hobby: [],
    married: false
}

sayHello(p)

// 数组使用展开运算符向函数传递实参
function add(x, y) {
    console.log(x + y)
}

let arr = [8, 17]

add(...arr)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# ES6对Array新增了很多API

# map

概念： 遍历当前数组生成一个新的数组

语法： map会接收一个函数,函数接收两个参数. map返回的结果是该数组中的每个元素是调用一次提供的函数后的返回值。

  • 参数一 遍历数组当前的项的值

  • 参数二 遍历数组当前的项的下标

let ages = [12, 14, 18, 13, 25]
let newAges = ages.map(function (item, index) {
        if(item >= 18) {
            return '成年'  
        }
        return "未成年"  // return 会返回新数组每一项的值
})

console.log( newAges) // ["未成年", "未成年", "成年", "未成年", "成年"]
console.log( ages) // [12, 14, 18, 13, 25]
1
2
3
4
5
6
7
8
9
10

# filter

概念： 遍历当前数组生成一个过滤后的新的数组

语法： map会接收一个函数,函数接收两个参数. 该函数若返回true则保留数组的当前遍历项,若返回false则过滤。

  • 参数一 遍历数组当前的项的值

  • 参数二 遍历数组当前的项的下标

let ages = [12, 14, 17, 23, 18, 13, 25]

let newArr = ages.filter(function(item，index) {
    if(item % 2 === 0) {
        return true // 保留
    }else {
        return false // 删除
    }
})

console.log(newArr)
1
2
3
4
5
6
7
8
9
10
11

# from

概念： 对数组进行遍历生成一个新数组

**语法：**Array.from(arr[, mapFunc, mapThis])

  • 参数一 需要遍历数组对象

  • 参数二 每次遍历都会调用的map函数 （可选）

  • 参数三 指定参数二内部的this （可选）

let arr = [1,2,3,4]

let cat = {
    name: '小白',
    age: 2
}

let newArr1 = Array.from(arr, function(item, index){
    // item 数组的每一项的值
    // index 数组每一项的下标
    console.log(index, this)
    return item * 3
}, cat) // 参数三是 参数二方法中的this

console.log(newArr1) // [3,6,9,12]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# *of

概念： 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型(使用较少)

语法：

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]
Array(undefined);  // [undefined]
1
2
3
4
5
6
7

# *copyWithin

**概念：**方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。该方法会修改原数组(使用较少)

**语法：**copyWithin(target[, start[, end]])

  • 参数一 指定替换拷贝数组的下标位置

  • 参数二 拷贝的其实下标位置 可选 默认0

  • 参数三 替换的长度 可选值 默认 起始位置到替换目标位置的长度

[1,2,3,4,5,6].copyWithin(2,0) // [1,2, 1,2,5,6]
[1,2,3,4,5,6].copyWithin(3,1,2) // [1,2,3,2,3,6]
1
2

# find

概念： 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

语法： array.find(mapfuc)

  • 参数一: find遍历数组每一项时都会调用一次该方法。该方法接收两个参数（当前项的值，当前项的下标）
let array = [0,12,22,55,44]

console.log(array.find((item,index) => item >= 18))

let todos = [{
            id: 1,
            text: '学习es6',
            completed: false
        },
        {
            id: 2,
            text: '学习vue',
            completed: true
        },
        {
            id: 3,
            text: '学习react',
            completed: false
        },
        {
            id: 4,
            text: '学习js',
            completed: false
        },
    ]

console.log(todos.find(item => item.id === 2)) // {id: 2,text: '学习vue',completed: true}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# findIndex

概念：  方法返回数组中满足提供的测试函数的第一个元素的下标。否则返回 -1。

语法： array.findIndex(mapfuc)

  • 参数一 mapfuc遍历数组每一项时都会调用一次该方法。该方法接收两个参数（当前项的值，当前项的下标）
let array = [0,12,22,55,44]

console.log(array.find((item,index) => item >= 18)) // 2

let todos = [{
            id: 1,
            text: '学习es6',
            completed: false
        },
        {
            id: 2,
            text: '学习vue',
            completed: true
        },
        {
            id: 3,
            text: '学习react',
            completed: false
        },
        {
            id: 4,
            text: '学习js',
            completed: false
        },
    ]

console.log(todos.find(item => item.id === 2)) // 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# includes

概念：  includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

语法：

const array1 = [1, 2, 3];

console.log(array1.includes(2)); // true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat')); //  true

console.log(pets.includes('at')); //  false
1
2
3
4
5
6
7
8
9

# reduce

概念： reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

语法： reducer(mapFunc)

  • 参数一 遍历当前数组每一项时都会触发函数,该函数接收两个参数(参数一 上一次执行该函数的返回值, 参数二 当前项的值)

  • 参数二 initalValue reduce的初始值

let price = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

console.log(price.reduce(function (reduce, item) {
        console.log(item, reduce)
        return item + reduce
})) // 55


let todos = [{
            id: 1,
            text: '学习es6',
            completed: false
        },
        {
            id: 2,
            text: '学习vue',
            completed: false
        },
        {
            id: 3,
            text: '学习react',
            completed: true
        },
        {
            id: 4,
            text: '学习js',
            completed: false
        },
    ]

todos.reduce((prevCount, item) => {

    if (!item.completed) {
        return prevCount + 1
    }
    return prevCount
}, 0)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# *fill

概念： fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引(使用较少)

语法： fill(val [,start [,end]])

  • 参数一 指定填充的值

  • 参数二 填充的起始位置 可选

  • 参数三 填充的结束位置,不包括结束位置 可选

[1,2,3,4,5].fill(7) // [7,7,7,7,7]

[1,2,3,4,5].fill(7, 2) // [1,2,7,7,7]
 
[1,2,3,4,5].fill(7, 2, 4) // [1,2,7,7,5]
1
2
3
4
5

其他的Array API: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

# 对象的简洁写法

概念： ES6允许在对象大括号内键值对同名的情况下简写成一个key值,如果key的值为函数可以简写为 key(){}的形式

语法：

let name = '小明'
let age = 18

let obj = {
    name, // 等价于 name: name
    age, // 等价于 age
    sayHello() {  // 等价于 sayHello: function(){}
        console.log('123')
    }
}
1
2
3
4
5
6
7
8
9
10

# 对象的动态键名

概念： ES6允许在对象大括号中使用[js表达式的形式]让对象的key属性成为动态键名

语法：

let key = 'currentKey'
let obj = {
    [key]: 123,  // currentKey: 123
    [key.split('').reverse().join('')]: 1, // yeKtnerruc: 1
    sayHello() {
        console.log('123')
    }
}
1
2
3
4
5
6
7
8

# 字符串的模板语法

概念： ES6新增了一个 使用模板字符串语法对字符串进行增强,简化了一些复杂的字符串拼接

语法： 模板字符串使用反引号`配合${js表达式}语法

`你好!我叫${name}。明年${age+1}岁,来自${city}市。`
//等价于
'你好!我叫' + name + '。明年' + (age + 1) + '岁' + ',来自' + city+'市。')
1
2
3

注意模板字符串支持换行,输出的字符串会自带换行符

`hello
world`
1
2

# ES6其他API

Map/Set 链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map

链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set

ArrayBuffer 链接： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer

# 合并空运算符

概念： 返回第一个不是 null 或 undefined 的值

语法： 使用??

let name = ""
let age = 0
let sex = "man"
let test = null
let test1 = undefined
let test2 = false

console.log(name || 'Max') // 'Max'
console.log(age || 18) // 18
console.log(test || 18) // 18

// null
console.log(name ?? 'Max') // ""
console.log(age ?? 18) // 0
console.log(test ?? 18) // 18

// undefined
console.log(test1 ?? 18) // 18

// false
console.log(test2 ?? 18) // false
console.log(18 ?? test2) // 18

// 两个都不是null或者undefined,返回第一个值
console.log(age ?? sex) // 0
console.log(sex ?? age) // man

// 或者可以根据需要将其进行多次链接
null ?? undefined ?? false ?? 'min'     // false
null ?? '' ?? 'min'                     // ''
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 可选的链接操作

概念： ES2020可以使用? 符号对一些可选属性进行判断,若问指定的可选属性为空则返回undefined。

注意 ?符号只能用在链式调用中.不能以?结尾

data?.artist?.name?   // 错误
1
let data = null
/*
// 模拟歌曲api返回的数据
    {
        id:10086
        artist: {
            name: '吴亦凡',
            id: 1000,
            alias: '十万伏特'
        }
    }
*/
// ES2020之前 异步数据 判断其指定属性是否存在
let artist = data && data.artist && data.artist.name
let alias = (data && data.artist && data.artist.alias) || ''
// ES2020
let artist = data?.artist?.name
let alias = data?.artist?.alias ?? ''

p.innerHTML = `${data.artist.name} (${data.artist.alias})`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 动态引入

概念： 如果您有一个写满实用程序功能的文件，而且其中某些功能可能很少使用，那么导入其所有依赖项可能只是浪费资源。 现在，我们可以使用async / await在需要时动态导入依赖项。

语法： import('模块路径')

const doMath = async (num1, num2) => {
  if (num1 && num2) {
    const math = await import('./math.js');
    console.log(math.add(5, 10));
  };
};

doMath(4, 2); // 如果函数doMath 从来没有被调用过 './math.js'就永远不会被执行
1
2
3
4
5
6
7
8
在线编辑 (opens new window)
#ES6
上次更新: 2021/11/14, 07:48:46
模块
Promise

← Promise→

最近更新
01
毛玻璃效果
 11-23
02
svg基本绘制
 11-23
03
滑动登录界面
 11-23
更多文章>
🖥️

© 2021 小胖墩er 💌 粤ICP备2021158933号 🛀 Theme by 💝 Vdoing

×