検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >es6 のコア機能は何ですか

es6 のコア機能は何ですか

青灯夜游
青灯夜游オリジナル
2022-04-19 19:27:183052ブラウズ

es6 のコア機能は次のとおりです: 1. Class キーワードを使用してクラスを作成し、そのクラスをインスタンス化してオブジェクトを作成します; 2. コールバック関数の作成を簡素化するために使用されるアロー関数; 3. 代入の構造化特定のモードに従って実行でき、配列およびオブジェクトから値を抽出し、変数に値を割り当てます。 4. データ、配列、および配列のようなオブジェクトを走査するために使用される「For...of」ループ。

es6 のコア機能は何ですか

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

ES6 のコア機能

1. クラスクラス

ES6 Class キーワード は、 「クラス」 を作成し、その後、「クラス」 をインスタンス化することで 「オブジェクト」 を作成することが正式に有効になっています。 。 クラスはオブジェクトのパブリック部分を抽象化し、クラスをインスタンス化することで特定のオブジェクトを取得できます。

    クラス名の最初の文字
  • には 大文字 を使用します。
    • インスタンス化されたクラス
  • では、New キーワードを使用する必要があります。
    • 単純化
  • オブジェクト指向カプセル化、継承、ポリモーフィズム。
    • キーワード
  • extendsは、サブクラスを作成するために使用できます。 クラスの
    • Constructor 関数
  • は、 実際のパラメータ を受け取り、 インスタンス オブジェクト を返します。
    • サブクラスは親クラスを継承した後、
  • 親クラスのメソッドを呼び出します、または 親クラスのメソッドをオーバーライドすることができます (優先順位の呼び出し) 。 キーワード
  • super オブジェクトの親クラス #Ordinary の関数 、 コンストラクター および ## にアクセスして呼び出すために使用されます。関数を使用できます。 New を使用してインスタンスを作成すると、 はコンストラクター関数
    • を自動的に呼び出します。
  • この関数を記述しない場合は、 クラス関数は自動的に生成されます。 [注意]サブクラス コンストラクターで super を使用する場合、
    • はこの
  • の前に配置する必要があります。つまり、 呼び出し最初に親クラスの構築メソッド を使用し、次に サブクラスの構築メソッド を使用します。 
    // 1.使用Class关键字创建类
class 类名 {
    // 自有属性
    constructor(形参1, 形参2, ...) {
        this.属性名1 = 形参1;
        this.属性名2 = 形参2;
        ...
    }
    // 共有属性
    init() {
        函数体;
    }
    ...
}

// 2.利用类结合New关键字实例化对象
let Object = new 类名(实参1, 实参2, ...);

// 3.在已有类基础上创建子类
class 子类 extends 类名 {
    // 自有属性（与父类相同）
    constructor(形参1, 形参2, 新形参1...) {
        //super函数调用父类的constructor
        super(形参1, 形参2, ...);
        // 子类新增属性需要单独定义
        this.新属性1 = 新形参1;
        ...
    }
    // 共有属性（子类函数位于自身父级原型上，优先调用，父类同名函数在更上层原型链上)
    init() {
        函数体;
    }
    ...
}
    2. アロー関数

アロー関数使用コールバック関数 の

記述
を簡略化します。
  • イベントの簡略化された矢印関数Need これはウィンドウを指していることに注意してください。
    • 操作方法
  • : 関数を省略、()と{}の間に=>を追加、
    • 単一パラメータ()を省略
  • , 単一ステートメントの関数本体は {} を省略します。単一ステートメントが return ステートメントである場合は、直接 {} を省略して return します。 アロー関数は、変数の構造化と組み合わせて使用​​できます。 中括弧はコード ブロックとして解釈されるため、アロー関数がオブジェクトを直接返す場合は、オブジェクトの外側に上括弧を追加する必要があります。追加しないとエラーが報告されます。 #注意事項
アロー関数には独自の this オブジェクトがありません。

yield コマンドは使用できないため、アロー関数をジェネレーター関数として使用することはできません。 コンストラクターとして使用することはできません。つまり、新しいコマンドをアロー関数に使用することはできません。それ以外の場合は、エラーが報告されます。

引数オブジェクトは使用できません。オブジェクトは関数本体に存在しないため、残りのパラメータで置き換えることができます。
  • 最初の機会はオブジェクトのメソッドを定義することであり、メソッドにはこれが内部的に含まれます。 2 番目のケースは、
    • が動的 this を必要とする場合であり、アロー関数
  • は使用すべきではありません。
  • アロー関数内で、アロー関数を再度使用することもできます。以下は、ES5 構文の複数のネストされた関数です。
  • #3. 代入の構造化
    • ##代入の構造化とは、
  • 構造を分析して値を代入することです。
    • 、ES6 では、
特定のパターンに従って
、

配列とオブジェクトから値を抽出する 、変数に値を代入する、これは ## と呼ばれます#Destructuring、この書き方は

「パターン マッチング」
に属します。

等号の両側のパターンが同じ である限り、左側の変数は の値には、対応する値 が割り当てられます。 配列分割代入等号の右側のデータが # の場合##通過不可能な構造は エラーを報告します。

完全な分解: 等号の左側と右側の構造はまったく同じです

、解析された構造には値が割り当てられます。
一つずつ。
  • 不完全な分解: 等号の左側のパターン , は、等号の右側の配列の一部とのみ一致します、
    • はまだ分解成功です
  • 。 代入の構造化デフォルト値の指定を許可します、ES6 内部
    • 厳密等価演算子 (===) を使用して値が存在するかどうかを判断します特定の位置
  • では、配列メンバー が厳密に未定義に等しい場合にのみ、デフォルト値が有効になります。 #オブジェクト分割代入<blockquote><ul> <li>如果<code>解构失败，变量的值等于 undefined。
  • 对象属性没有次序，但变量必须与属性同名，才能解析到正确的值。
  • 对象解构可以指定默认值，默认值生效的条件是对象的属性值严格等于undefined。
  • 对象解构时，由于JavaScript引擎会将{}理解成一个代码块，从而发生语法错误，需要将整个解构赋值语句放在圆括号()里面，即可正确执行。

字符串解构赋值

  • 字符串也支持解构赋值，此时字符串被转换成了类数组对象。
  • 类数组对象都有一个Length属性，因此可以对这个属性解构赋值。

函数参数解构赋值

// 函数参数支持解构赋值
function sum([x, y]) {
    return x + y;
}

// 传入参数时，数组参数解构为x与y
sum([1, 2]);

圆括号使用注意

  • 函数参数禁用圆括号。
  • 变量声明语句禁用圆括号。
  • 赋值语句的模式匹配部分禁用圆括号。
  • 只有赋值语句的非模式匹配部分，可以使用圆括号。

4、For…of 循环

  • 优点，支持Break，Continue 和 Return关键字， for-of循环用于遍历数据、数组、类数组对象。
  • 缺点，没有提供下标，不能修改原数组，只能遍历索引数组，不能遍历 Hash 数组（对象）。
for (value of arr) {
    执行操作;
}

Iterator

一种新的遍历机制，拥有两个核心。

  1. 迭代器是一个接口，能快捷的访问数据，通过Symbol.iterator来创建迭代器，通过迭代器的next()方法获取迭代之后的结果。
  2. 迭代器是用于遍历数据结构的一个指针（类似于数据库的游标）

5、数值新增方法

Number.isInteger()

  • Number.isInteger()，用来判断数值是否为整数。
  • 如果参数不是数值返回false。
  • JavaScript内部整数和浮点数采用同样的储存方法，所以25和25.0被视为同一个值。
  • JavaScript数值存储为64位双精度格式，数值精度最多可以达到53个二进制位(1个隐藏位与52个有效位)，如果数值的精度超过这个限度，第54位及后面的位就会被丢弃，方法失效。

Math.trunc()

  • Math.trunc()方法用于去除一个数的小数部分，返回整数部分。
  • 对于非数值，Math.trunc()内部使用Number方法将其先转为数值。
  • 对于空值和无法截取整数的值，返回NaN。
// 低版本浏览器兼容语法
Math.trunc = Math.trunc || function (x) {
    return x < 0 ? Math.ceil(x) : Math.f1oor(x);
};

Math.sign()

  • Math. sign()方法用来判断一个数到底是正数、负数、还是零。
  • 如果参数是非数值，会自动转为数值，对于无法转为数值的值，会返回NaN。
  • 它会返回五种值，参数为正数返回+1，参数为负数返回-1，参数为0返回0，参数为-0返回-0，其他值返回NaN。

6、字符串新增方法

模板字符串

模板字符串用于简化字符串拼接，模板字符串支持解析变量、换行、调用函数。

模板字符串（template string）是增强版的字符串，用反引号标识，可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

`文本${变量}文本${变量}文本`

includes()、startsWith()、endsWith()

  • includes()，返回布尔值，表示是否找到了参数字符串。
  • startsWith()，返回布尔值，表示参数字符串是否在原字符串的头部。
  • endsWith()，返回布尔值，表示参数字符串是否在原字符串的尾部。
    -【注】这三个方法都支持第二个参数，表示开始搜索的位置。

padStart()、padEnd()

ES2017引入了字符串补全长度功能，padstart() 用于头部补全，padEnd() 用于尾部补全。

  • padstart() 和 padEnd() 共接受两个参数，第一个参数是字符串补全生效的最大长度第二个参数是用来补全的字符串，如果省略第二个参数，默认使用空格补全长度。
  • 如果原字符串的长度等于或大于最大长度，则字符串补全不生效，返回原字符串。
  • 如果用来补全的字符串与原字符串两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。
  • padstart()的常见用途是为数值补全指定位数，也可以用于提示字符串格式。
// 补全长度方法提示字符串格式
&#39;12&#39;.padStart(10, &#39;YYYY-MM-DD&#39;); // "YYYY-MM-12"
&#39;08-31&#39;.padStart(10, &#39;YYYY-MM-DD&#39;); // "YYYY-08-31"

trimStart()、trimEnd()

trimStart()消除字符串头部的空格，trimEnd()消除字符串尾部的空格，它们返回的都是新字符串，不会修改原始字符串，两个方法对字符串头部（尾部）的tab键、换行符等不可见的空白符号也有效。

repeat()

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

replaceAll()

ES2021引入了replaceAll()方法，可以一次性替换所有匹配，它的用法与 replace()相同，返回一个新字符串，不会改变原字符串。

7、对象新增方法

  • 在ES6中，可以直接在对象中写入变量，key相当于变量名，value相当于变量值，并且可以直接省略value，通过key表示一个对象的完整属性。
  • 除了属性可以简写，函数也可以简写，即省略掉关键字function。

Object.is()

它用来比较两个值是否严格相等，与严格比较运算符(===) 的行为基本- -致。

console.log(Object.is(+0, -0)); //false
console.log(Object.is(NaN, NaN)); //true

Object.assign()

  • object. assign()方法用于对象的合并,将源对象(source) 的所有可枚举属性,复制到目标对象(target) 。
  • obiect. assign()方法的第一个参数是目标对象.后面的参数都是源对象。注意，如果目标对象与源对象有，同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

8、数组新增方法

Array.from()

  • Array.from()用于将类数组对象和可遍历对象（包括Set和Map）转为真正的数组。
  • Array.from()方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.of()

  • Array.of()用于将一组值转换为数组。
  • Array. of()返回参数值组成的数组，如果没有参数就返回一个空数组。
  • 此方法可以弥补数组构造函数Array()因为参数个数的不同的差异。
  • Array.of()基本上可以替代Array()或new Array()，它不存在由于参数不同而导致的重载。
// 兼容版本Arrayof()方法
function Arrayof() {
    return Array.prototype.slice.call(arguments);
}

数组实例的fill()

  • fill()方法使用给定值，填充一个数组。
  • 用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。
  • 方法支持第二个和第三个参数，用于指定填充的起始位置和结束位置。
  • 如果填充的类型为对象，那被赋值的是同一个内存地址的对象，而不是深拷贝对象。

数组实例的find()

  • 用于找出第一个符合条件的数组成员，如果没有找到返回undefined。

findIndex()

  • 用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。

includes()

  • 表示某个数组是否包含给定的值，返回布尔值。

9、Let & Const

ES6中，除了全局和局部作用域，新增了块级作用域。

Let

  • 语法：let 变量名 = 变量值;
  • let禁止在相同作用域内重复声明同一个变量，所以不能在函数内部重新声明参数。
  • let声明的变量只在 let 命令所在的代码块内有效，带有{块级作用域}，不会导致声明提升，可以记录触发鼠标事件元素的下标。

Const

  • 语法：const 常量名 = 常量值;
  • 常量不占内存空间，常量名一般使用纯大写。
  • const声明变量必须立即初始化，不能留到以后赋值。
  • const声明的常量只在所在的块级作用域内有效，带有{块级作用域}，不会导致声明提升，同样存在暂时性死区，且同一常量禁止重复声明，常量值无法改变。
  • const声明的变量，可以保证变量的内存地址不变，对于简单类型的数据来说相当于常量，对于引用类型的数据只能保证其内存地址中指向实际数据的指针不变，而无法保证数据结构不变，将对象声明为常量需要特别注意！

暂时性死区

暂时性死区（TDZ）一种语法规则，只要块级作用域内存在 let 或 const 命令，内部声明的变量就会"绑定"这个区域，形成封闭作用域，即代码块内的变量必须先声明再使用。

10、模块化开发

  • 用于分工合作，每一个js都是一个模块，每个工程师都可以单独开发自己的模块，主模块最后引入调用
  • 1、子模块要公开暴露
    export var obj={};
    2、主模块引入并且使用
    import {obj as 别名} from “./文件路径”
    3、HTML页面引入时需要将type更换为module
  • ES6模块功能主要有两个命令构成，export和import，export用于规定独立的对外接口，import用于输入其他模块提供的功能，一个模块就是一个独立的文件，引入模块的script标签的type要设置为module。

11、扩展运算符 & Rest运算符

ES6中新增了扩展运算符和 Rest运算符，它们可以很好地解决函数参数和数组元素长度未知情况下的编码问题，使得代码能更加健壮简洁。

扩展运算符

  • 扩展运算符用3个点表示...。
  • 作用：将数组或类数组对象转换为用逗号分隔的值序列，基本用法是拆解数组和字符串。
// 1.扩展运算符代替apply()函数获取数组最大值
let arr = [1, 4, 2, 5, 3];

// apply()方法
Math.max.apply(null, arr);
// 扩展运算符方法
Math.max(...arr);

// 2.扩展运算符代替concat()函数合并数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// concat()方法
arr1.concat(arr2);
// 扩展运算符方法
[...arr1, ...arr2];

Rest运算符（剩余参数）

  • Rest运算符使用3个点表示...。
  • 作用：与扩展运算符相反，用于将以逗号分隔的值序列转换成数组。
  • 使用rest运算符进行解构时，res运算符对应的变量必须放在最后一位，否则变量无法识别读取多少个数值，就会抛出错误。
  • 函数的参数是一个使用逗号分隔的值序列，可以使用rest运算符转换成数组以代替arguments的使用。
// 1.Rest运算符与解构组合使用拆分数组
let arr = [1, 2, 3, 4, 5];
// 将数组拆分，第一个元素赋值到arr1，其余元素赋值到arr2
let [arr1, ...arr2] = arr;
// 将数组拆分，前两个元素赋值到arr1与arr2，其余元素赋值到arr3
let [arr1, arr2, ...arr3] = arr;

// 2.Rest运算符代替arguments
function sum(...arg) {
    // 获取形参数组
    console.log(arg);
}
// 传入形参
sum(形参1, 形参2, ...);

区分两种运算符

  • スプレッド演算子とレスト演算子は相互の逆演算です, スプレッド演算子は配列を独立したシーケンスに分割します 、rest 演算子 は 独立したシーケンスを配列にマージするです。
  • 関数パラメータ または 代入等号の左側に 3 つのドット が表示される場合、それは rest 演算子です。 ＃＃＃。 関数の引数 または代入等号の右側の
    • に
  • 3 つのドット が表示される場合、それは 展開演算子 です。
拡張 | Let、Var、Const の違い

##Let

宣言された
    variable
  • 、 ブロックレベルのスコープがある 、 変数のプロモーションはありません 、 値は変更可能です 。 Var宣言された
    • 変数
  • 、存在します 関数スコープ、存在する変数プロモーション、値は変更可能です 。 Const宣言された
    • constant
  • は ブロック レベルのスコープ に存在し、値は変更できません。 #Extension | ES6 オブジェクト プロパティをトラバースする 5 つの方法

##for…in

  • for…in は、オブジェクトとそのオブジェクト自体および継承された列挙可能なプロパティ (シンボル プロパティを除く) を走査するために使用されます。

Object.keys(obj)

  • Object.keys() 関数は、すべてのオブジェクト自体を含む配列を返します。継承されたプロパティとシンボル プロパティを除く、列挙可能なプロパティ。

Reflect.ownKeys(obj)

  • Reflect.ownKeys(obj) 関数は、次の値を含む配列を返します。列挙型プロパティ、列挙不可能なプロパティ、およびシンボル プロパティ (継承されたプロパティを除く)。

Object.getOwnPropertyNames(obj)

  • Object.getOwnPropertyNames(obj) 関数は、オブジェクトを含む配列を返します。それ自体、列挙可能なプロパティと列挙不可能なプロパティ (継承されたプロパティとシンボル プロパティを除く)。

Object.getOwnPropertySymbols(obj)

  • Object.getOwnPropertySymbols(obj) 関数は、オブジェクトを含む配列を返します。それ自体 他の属性を除く、すべてのシンボル属性。

    • 【関連する推奨事項:
JavaScript ビデオ チュートリアル
、

Web フロントエンド

]

以上がes6 のコア機能は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript ecmascript html es6 String Array Object 常量 运算符 比较运算符 for 面向对象 封装 多态 父类 子类 构造函数 math const break continue 回调函数 字符串 循环 指针 数据结构 继承 接口 class 引用类型 Length var 形参 实参 map JS number undefined symbol function 对象 作用域 事件 字符串模板 constructor 变量提升 this 鼠标事件 数据库
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：es6 で 2 つの配列の交差部分を見つける方法次の記事：es6 で 2 つの配列の交差部分を見つける方法

関連記事

続きを見る