學習階段1 ES6的10個新特性

2021-09-28 07:47:14 字數 2733 閱讀 7194

1.js中的變數宣告：const和let

var a = '全域性變數';//


console.log(a); // 全域性變數
從上面可以看出let宣告的是乙個區域性變數，僅在當前的塊級作用域有效，再來說說const，const會宣告乙個常量（即宣告後不可改動的量）：

const a = 0;


a = 10;//報錯，因為a已經是常量0了，不可去修改它的值
const boy = 


boy.name = '小亮';// 正確


boy = ;// 報錯
在使用let和const時要注意，作用域都只在乙個區塊內有效，同時const在宣告時必須要賦值，不然會報錯。

2.箭頭函式

es6中的箭頭函式實際上就是普通函式寫法的簡化版，用括號包引數，後面跟乙個=>，然後跟函式主體部分，下面是箭頭函式的寫法：

//es5寫法


var num = function（x，y）；


//箭頭函式寫法


var num = （x，y）=> x + y；
3.模板字串

一般情況下在拼接模板字串的時候這麼來寫**：

使用+對字串進行拼接，，然而對es6來說，我們可以將表示式寫進字串中進行拼接，用${}界定表示式，然後用反引號``來搞定：

4.函式預設引數值

// es6之前，當未傳入引數時，text = 'default'；


function printtext(text) 


// es6；


function printtext(text = 'default') 


printtext('hello'); // hello


printtext();// default
5.spread / rest 操作符

spread / rest 操作符指的是…，

當被用於迭代器中時，它是乙個 spread 操作符：

function foo(x,y,z) 


let arr = [1,2,3];


foo(...arr); // 1 2 3
當被用於函式傳參時，是乙個 rest 操作符：當被用於函式傳參時，是乙個 rest 操作符：

function foo(...args) 


foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
6.物件超類

es6 允許在物件中使用 super 方法：

var parent = } 


var child = } 


object.setprototypeof(child, parent);


child.foo(); // hello from the parent


// hello from the child
7.for…of迴圈 和 for…in迴圈

for…of 用於遍歷乙個迭代器，如陣列：

let letter = ['a', 'b', 'c'];


letter.size = 3;


for (let letter of letters) 


// 輸出結果: a, b, c
for…in 用來遍歷物件中的屬性：

let stu = ['sam', '22', '男'];


stu.size = 3;


for (let stu in stus) 


// 輸出結果: sam, 22, 男
8.es6中的類
class student 


study() 


static read() } 


console.log(typeof student); // function


let stu = new student(); // "i'm a student."


stu.study(); // "study!"


stu.read(); // "reading now."
9.二進位制和八進位制字面量

es6 支援二進位制和八進位制的字面量，通過在數字前面新增 0o 或者0o 即可將其轉換為八進位制值：

let ovalue = 0o10;


console.log(ovalue); // 8


let bvalue = 0b10; // 二進位制使用 `0b` 或者 `0b`


console.log(bvalue); // 2
10.物件和陣列解構
// 物件


const student = 


// 陣列


// const student = ['sam', 22, '男'];


// es5；


const name = student.name;


const age = student.age;


const *** = student.***;


console.log(name + ' --- ' + age + ' --- ' + ***);


// es6


const = student;


console.log(name + ' --- ' + age + ' --- ' + ***);
記錄學習過程~

ES6新特性 學習總結

let s hello world s.startswith hello true s.endswith true s.includes o true這三個方法都支援第二個引數，表示開始搜尋的位置。let s hello world s.startswith world 6 true s.endsw...

ES6中常用的10個新特性講解

ecmascript 6 es6 目前基本成為業界標準，它的普及速度比 es5 要快很多，主要原因是現代瀏覽器對 es6 的支援相當迅速，尤其是 chrome 和 firefox 瀏覽器，已經支援 es6 中絕大多數的特性。1.不一樣的變數宣告 const和let var x 全域性變數 conso...

ES6中常用的10個新特性講解

ecmascript 6 es6 目前基本成為業界標準，它的普及速度比 es5 要快很多，主要原因是現代瀏覽器對 es6 的支援相當迅速，尤其是 chrome 和 firefox 瀏覽器，已經支援 es6 中絕大多數的特性。es61.不一樣的變數宣告 const和let var x 全域性變數 co...