搜尋

首頁  >  文章  >  web前端  >  es6核心特性是什麼

es6核心特性是什麼

青灯夜游
青灯夜游原創
2022-04-19 19:27:183048瀏覽

es6核心特性有：1、使用Class關鍵字創建類，再透過實例化類別來建立物件；2、箭頭函數，用於簡化回呼函數的書寫；3、解構賦值，可依照一定模式，從陣列和物件中擷取值，將變數賦值；4、「For…of」循環，用於遍歷資料、陣列、類別陣列物件。

es6核心特性是什麼

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

ES6核心特性

1、類別Class

ES6正式啟用Class 關鍵字來建立"類別」，再透過實例化"類別」來建立「物件」。 類別抽象化了物件的公共部分，透過實例化類別可以得到一個具體的物件。

  • 類別名稱首字母使用大寫。
  • 實例化類別必須使用 New 關鍵字。
  • 簡化物件導向的封裝、繼承、多態。
  • 關鍵字 extends 可以用來建立一個子類別。
  • 類別的 Constructor 函數，可以接收實參，並傳回實例物件。
  • 子類別繼承父類別後，可以呼叫父類別的方法，也可以重寫父類別的方法（優先呼叫） 。
  • 關鍵字 super 用於存取和呼叫物件父類別上的函數，建構子和普通函數皆可。
  • 使用New 建立實例時會自動呼叫Constructor 函數，如果不寫此函數，類別函數會自動產生。
  • 【註】子類別在建構子中使用super，必須放到this 前面，也就是先呼叫父類的建構方法，再使用子類別建構方法。 
// 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、箭頭函數

  • 箭頭函數用於簡化回呼函數的書寫。
  • 事件中簡化箭頭函數需要注意 this 指向為 window。
  • 運算方法：省略function，在() 和{} 間加入=>，單一形參省略( )，單語句函數體省略{}，若單一語句為return 語句直接省略{} 和return 。
  • 箭頭函數可以與變數解構結合使用。
  • 由於大括號被解釋為程式碼區塊，如果箭頭函數直接傳回對象，必須在對像外面加.上括號，否則會報錯。

注意事項

  • #箭頭函數沒有自己的this物件。
  • 無法使用yield指令，因此箭頭函數不能用作Generator函數。
  • 無法當作建構函數，也就是不能對箭頭函數使用new指令，否則報錯。
  • 無法使用arguments對象，該對像在函數體內不存在，可用rest參數取代。
  • 第一個場合是定義物件的方法，且方法內部包含this。
  • 第二個場合是需要動態this的時候，也不應使用箭頭函數。
  • 箭頭函數內部，還可以再使用箭頭函數。下面是一 個ES5語法的多重巢狀函數。

3、解構賦值

#解構賦值即解析結構再賦值 ，ES6允許依照一定模式，從陣列和物件中提取值，對變數進行賦值，稱為解構（Destructuring），這種寫法屬於"模式匹配"，只要等號兩邊模式相同，左邊的變數就會被賦予對應的值。

陣列解構賦值

  • #如果等號的右邊資料是不可遍歷結構則會報錯。
  • 完全解構：等號左右兩邊的結構完全相同，就會解析結構一一對應賦值。
  • 不完全解構：等號左邊的模式，只符合一部分的等號右邊的陣列，依舊可以解構成功。
  • 解構賦值允許指定預設值，ES6內部使用嚴格相等運算子（===）判斷某一位置是否有值 ，只有陣列成員嚴格等於undefined 預設值才會生效。

物件解構賦值

  • 如果解构失败，变量的值等于 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運算子互為逆運算，擴充運算子是將陣列分割成獨立的序列 ，而rest運算子是將獨立的序列合併成一個陣列。
  • 當三個點出現在函數形參上或賦值等號左側，則為rest運算子。
  • 當三個點出現在函數實參上或賦值等號右側，則為擴充運算子。

拓展| Let、Var、Const區別

  • Let聲明的變數，存在區塊層級作用域，不存在變數提升，值可變更。
  • Var宣告的變數，存在函數作用域，存在變數提升，值可更改。
  • Const宣告的常數，存在區塊層級作用域，值無法改變。

拓展| ES6遍歷物件屬性五種方法

  • #for…in

  • #for…in用於遍歷物件和自身和繼承的可枚舉屬性(不包含Symbol屬性)。

Object.keys(obj)

  • #Object.keys()函數傳回一個數組，包含物件本身所有可枚舉屬性,不包含繼承屬性和Symbol屬性。

Reflect.ownKeys(obj)

  • #Reflect.ownKeys(obj)函數傳回一個數組，可包含枚舉屬性,不可枚舉屬性以及Symbol屬性,不包含繼承屬性。

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames(obj)函數傳回一個數組，包含物件自身的可枚舉屬性和不可枚舉屬性，不包含繼承屬性和Symbol屬性。

######Object.getOwnPropertySymbols(obj)################.getOwnPropertySymbols(obj)函數傳回一個數組，包含物件自身所有Symbol屬性,不包含其他屬性。 #########【相關推薦：###javascript影片教學###、###web前端###】###

以上是es6核心特性是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

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怎麼求兩個陣列的交集下一篇：es6怎麼求兩個陣列的交集

相關文章

看更多