es6新特性

最新推荐文章于 2025-03-04 12:50:49 发布

jierenjia

最新推荐文章于 2025-03-04 12:50:49 发布

阅读量366

点赞数

本文链接：https://blog.youkuaiyun.com/jierenjia/article/details/80935556

版权

大家好，我是IT修真院郑州分院第8期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网JS-8任务中可能会使用到的知识点：

es6新特性

1.背景介绍

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

2.知识剖析

下面是介绍es6中常用的字符串、数组、对象的扩展及应用

INCLUDES方法
includes()：返回布尔值，表示是否找到了参数字符串。

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true

字符串REPEAT()
repeat方法返回一个新字符串，表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

如果repeat的参数是负数或者Infinity，会报错。

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

数组 ENTRIES()，KEYS() 和 VALUES()

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"

对象的Object.keys()，Object.values()，Object.entries()

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj) //["foo", "baz"]
Object.values(obj) //[bar,42]

Object.entries(obj)//[["foo", "baz"],[bar,42]]

类数组转为数组
Array.from()

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

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

数组实例的 FIND() 和 FINDINDEX()
数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5
上面代码找出数组中第一个小于 0 的成员

[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26

上面的代码中，find函数接收了第二个参数person对象，回调函数中的this对象指向person对象。

SUPER 关键字
ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

const proto = {
foo: 'hello'
};

const obj = {
foo: 'world',
find() {
return super.foo;
}
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"