前端ES6簡單總結

2021-10-24 23:11:58 字數 4583 閱讀 7088

首先是es6當中新增了

let有以下2個特點:

1.作用域嚴格

2.不允許重名和重複賦值

console.

log(a)

; console.

log(b)

;

這樣的話執行時會報a沒賦值的錯誤

let a =

"123"

;var b =

"456"

;var b =

"789"

;

這樣執行之後b是789,a是123

let a =

"123"

;let a =

"456"

;var b =

"789"

;

這就會報錯,a不可以重複宣告

還有一種變數const,他是不允許修改的,是唯讀變數

const a=

1;

**,比如我設定乙個陣列arr和物件,並把其中陣列的所有數分配給a,b,c,物件的所有數分配給name ,age ,family 以前是這樣分配

let arr=[1

,2,3

];let a=arr[0]

;let b=arr[1]

;let c=arr[2]

;const person

const name = person.name;

const age = person.age ;

const family = person.family ;

現在可以用下面這種寫法更加方便快捷

let arr=[1

,2,3

];let[a,b,c]

=arr;

const person

const

= person

下面是字串拓展

let str =

"hello.vue"

str.

startswith

("hello");

//是否以hello開頭

str.

endswith

("vue");

//是否以vue結尾

str.

includes

("e");

//是否包含e

str.

startswith

("vue");

//是否包含vue

多行字串

let str =

`hello

`;

function

fun(

)let abc=

"張三"

let age =

"10"

;console.

log(

"我是"$

,"我的年齡是"$

,"方法返回值為"$

)

當方法沒傳引數時設定預設值

fun

(a,b=1)

當b沒有傳引數時b為1。

不定引數

function

test

(...values)

test(1

,2);

//2test(1

,2,3

,4);

//4

上面test方法顯示隨便傳幾個值,然後控制台輸出輸入引數的個數。

箭頭函式

以前建立乙個方法給物件

var

print

=function

(obj)

箭頭函式建立

var

print

= obj => console.

log(obj)

;//單個引數 方法內**只有一行

varsum

=(a,b)

=> a+b;

//多個引數 方法內**只有一行

varsum2

=(a,b)

=>

物件優化

const person

object.

keys

(person)

;//["name","age","family"]

object.

values

(person)

;//["張三",18,["媽媽","爸爸","妹妹"]]

object.

entries

(person);//

const target=

;const source1=

;const source2=

;object.

assign

(target,source1,source2)

;//

宣告物件優化

//傳統

const age=

18const name =

"zhangsan"

const person =

//新版

const age=

18const name =

"zhangsan"

const person =

//同名的話可以直接使用變數名作為屬性名

箭頭函式不能用this

let person=

eat2

= food=> console.

log(

this

.name+

"在吃"

+food)

;//這裡會報錯顯示無法獲取name

eat3

= food=> console.

log(person.name+

"在吃"

+food)

;//修改這樣可以獲取

eat4

(food)

}person.

eat(

"蘋果");

person.

eat2

("蘋果");

person.

eat3

("蘋果");

person.

eat4

("蘋果"

);

物件拓展運算子

let person

let copyperson=

//這樣會把person當中的所有鍵值對賦值給copyperson,而如果copyperson中之前有值而且key相同,則會被person當中的值覆蓋

let arr=

["1"

,"-13"

,"567"];

//這是乙個字串的數字陣列

arr= arr.

map(item=>item*2)

;//這樣可以直接將字串陣列當中的數字的值乘2

console.

log(arr)

;//輸出arr["2","-26","1134"]

let result=arr.

reduce

((a,b)

=>);

console.

log(result)

;

promise非同步操作

我們先建立乙個mock資料夾,在資料夾下面建立3個json檔案

user.json,user_corse.json,corse_score,json

user.json

user_corse.json

corse_score

我們先寫乙個get方法

function

get(url,data)

, error:

function

(err),}

)}}get

("/mock/user.json").

then

((data)

=>

.json`);

}).then

((data)

=>

.json`);

}).then

((data)

=>).

catch

((err)

=>

);

前端 ES6總結

1 arr.push 在陣列末尾新增元素,返回陣列長度 let arr 1,2,3 let length arr.push 4 console.log length 4console.log arr 1,2,3,4 2 arr.unshift 在陣列首位新增元素,返回陣列長度 let arr 1,2...

前端知識整理 ES6

es6 1 模組化 export default export function fn1 export function fn2 import util from util1.js import from util2.js 2 使用babel npm install babel core babel...

前端學習筆記 ES6

1 塊級作用域 任何一對花括號 中的語句集都屬於乙個塊,在塊中宣告的變數在 塊外都是不可訪問的,稱之為塊級作用域,es5以前沒有塊級作用域 2 let 關鍵字 let用於宣告變數 類似於var 其宣告的變數只在當前 塊內有效,實際上是建立了塊級作用域 1 建立塊級作用域 if true consol...