2020.11.21 ES6--11 解構賦值 ES6新增字串的簡易宣告(反引號) 物件宣告的簡化 箭頭函式 傳參時可以賦初始值
ES 6–11
解構賦值
定義:允許按照一定模式從陣列和物件中提取變數,並對變數進行賦值
型別一:陣列型別的解構賦值
//型別一:陣列型別
const Name = ['鄧柱', '燈珠', '燈柱'];
//定義四個變數分別對應陣列中的值
let [a, b, c] = Name;
console.log(a);
console.log(b);
console.log(c);
型別二:物件型別的解構賦值
//型別二:物件的解構
const zhao = {
name: '趙本山',
xiaopin: function() {
console.log('我會小品');
}
}
let {
name, //將name等從 zhao中解出來 就可以直接用了,定義了一個變數等於zhao中的name;
xiaopin
} = zhao;
console.log(name); //不需要寫 zhao.name
console.log(xiaopin);
、、、、
、、、、、
、、、、、
、、、、、
ES6新增字串的簡易宣告
用反引號宣告
let str = `鄧柱無敵啦`; //反引號
特性:內容之間可以出現換行符;//字串可以拼接 : ${ 字元變數 };
//特性:內容之間可以出現換行符
let string =
`鄧柱
又
行啦`;
console.log(string);
//字串可以拼接 : ${ 字元變數 };
let string2 = `${str} 這是好的`
console.log(string2);
、、、、、、
、、、、、
、、、、、
、、、、、、
、、、、、、
物件宣告的簡化:可以直接在{}內書寫變數和函式,作為物件的屬性和方法;
//物件宣告的簡化
//可以直接在{}內書寫變數和函式,作為物件的屬性和方法;
let change = function() {
alert('鄧柱在改變');
}
let duixiang = {
a, //呼叫了前面定義的變數a
change, //直接呼叫方法函式
//新的方法建立
improve() {
alert(str);
}
}
箭頭函式
箭頭函式的定義
//箭頭函式
//箭頭函式的定義:
let fn = (a, b) => {
return a + b;
}
//省掉了function
箭頭函式的特性
箭頭函式的特性 一: 箭頭函式中的this是靜態的 始終指向函式宣告時的this的值
// call 可以改變函式內部的屬性name值
特性二:不能作為建構函式去例項化物件
特性三:當 傳入引數只有一個時 小括號()可以省略;當函式內部的程式碼只有一句時 ,{}可以省略。
如:
箭頭函式的應用
一、
在設定 setTimeout時 如果用常規方法不能用this來指代點選的地方
因為 setTimeout 中的 this 指向的是全域性作用域
如果用剪頭表示式就可以 因為 箭頭表示式中的this是靜態的不會改變;
、、、、、、
二、
array.filter()方法:括號內為陣列中的數滿足什麼條件的能被返回
const arr = [1, 3, 4, 5, 6, 12];
let result = arr.filter(function(item) {
if (item < 6) {
return true;
} else {
return false;
}
});
console.log(result);
通過箭頭函式可以更加簡便的書寫:
let result = arr.filter(item => item < 6);
、、、、、、、、
、、、、、、、、
、、、、、、、、、
、、、、、、、、、、
、、、、、、、
、、、、、、、、、
傳參時可以賦初始值
function add(a, b, c = 10) {
return a + b + c;
}
add(1, 2, 10);
傳參賦初始值和解構賦值的連用
在傳參時 將傳入的物件引數解構賦值,並且還可以新增新的屬性dislike ='girl’
//在傳參時 將傳入的物件引數解構賦值,並且還可以新增新的屬性dislike ='girl';
function person({
dislike = 'girl',
name,
age,
hobby
}) {
alert(name +
age +
hobby +
dislike);
}
//在呼叫person
person({
name: '鄧柱',
age: '19',
hobby: 'processing'
});
相關文章
- 高階函式與標籤函式,解構賦值與物件字面量的簡化學習函式賦值物件
- JavaScript函式引數解構賦值JavaScript函式賦值
- es6學習筆記整理(一)變數宣告、解構賦值筆記變數賦值
- ES6 變數宣告與賦值:值傳遞、淺拷貝與深拷貝詳解變數賦值
- ES6小技巧 - 使用解構賦值設定函式引數預設值賦值函式
- JavaScript 同時宣告多個變數並賦值JavaScript變數賦值
- go語言變數的宣告與賦值Go變數賦值
- ES6中的解構賦值賦值
- ES6解構賦值賦值
- ES6 解構賦值賦值
- ES6學習-4 解構賦值(1)陣列的解構賦值賦值陣列
- JavaScript 字串解構賦值JavaScript字串賦值
- JavaScript 物件解構賦值JavaScript物件賦值
- ES6:變數的解構賦值變數賦值
- ES6 變數的解構賦值變數賦值
- Java建立陣列、賦值的四種方式,宣告+建立+初始化 詳解Java陣列賦值
- ES6之解構賦值賦值
- ES6 解構賦值+改名賦值
- ES6箭頭函式的剩餘引數函式
- ES6 - 變數的解構賦值解析變數賦值
- ES6之變數的解構賦值變數賦值
- ES6 -- 變數的解構賦值的用途變數賦值
- 函式表示式和函式宣告簡單介紹函式
- js判斷一個變數是否已經宣告或者宣告未賦值JS變數賦值
- ES6學習解構賦值賦值
- 深入解析 ES6:解構賦值賦值
- 箭頭函式、簡寫函式、普通函式的區別函式
- 簡單總結es6箭頭符號符號
- ES6箭頭函式的使用函式
- 簡述箭頭函式和普通函式的區別函式
- 深入ES6 三 變數的解構賦值變數賦值
- ES6箭頭函式函式
- Kotlin 變數詳解:宣告、賦值與最佳實踐指南Kotlin變數賦值
- ES6新特性總結之解構賦值和字串模板賦值字串
- js中宣告提升、作用域(鏈)、`this`關鍵字和箭頭函式JS函式
- ES6 => new Set || map||...解構賦值賦值
- [譯]JavaScript ES6解構賦值指南JavaScript賦值
- java裡面給物件賦值,慎用賦值符號(=) (轉)Java物件賦值符號