資訊專欄INFORMATION COLUMN
摘要：所以，如果一個數(shù)組成員不嚴(yán)格等于，默認(rèn)值是不會生效的因為不嚴(yán)格等于對象解構(gòu)對象的解構(gòu)與數(shù)組有一個重要的不同。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。
http://es6.ruanyifeng.com/?se...
一、作用域 let//i作用域在全局，每次循環(huán)i都被重新賦值了而覆蓋了之前的值
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
//for循環(huán)還有一個特別之處，就是循環(huán)語句部分是一個父作用域，
//而循環(huán)體內(nèi)部是一個多帶帶的子作用域
//所以循環(huán)體內(nèi)的i每次的作用域都不一樣而互不影響
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
const
二、解構(gòu) 數(shù)組解構(gòu)const實際上保證的，并不是變量的值不得改動，而是變量指向的那個內(nèi)存地址不得改動。對于簡單類型的數(shù)據(jù)（數(shù)值、字符串、布爾值），值就保存在變量指向的那個內(nèi)存地址，因此等同于常量。但對于復(fù)合類型的數(shù)據(jù)（主要是對象和數(shù)組），變量指向的內(nèi)存地址，保存的只是一個指針，const只能保證這個指針是固定的，至于它指向的數(shù)據(jù)結(jié)構(gòu)是不是可變的，就完全不能控制了
1.如果解構(gòu)不成功，變量值===undefined
let [a, b, c] = [1, 2, 3]; //模式匹配
2.默認(rèn)值
注意，ES6 內(nèi)部使用嚴(yán)格相等運(yùn)算符（===），判斷一個位置是否有值。所以，如果一個數(shù)組成員不嚴(yán)格等于undefined，默認(rèn)值是不會生效的
let [foo = true] = []; foo // true let [x, y = "b"] = ["a"]; // x="a", y="b" let [x, y = "b"] = ["a", undefined]; // x="a", y="b" let [x = 1] = [undefined]; x // 1 let [x = 1] = [null]; x // null 因為null不嚴(yán)格等于undefined對象解構(gòu)
對象的解構(gòu)與數(shù)組有一個重要的不同。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
三、字符串模板
1.普通模板${}和反斜杠設(shè)置和識別，大括號內(nèi)部可以放入任意的JavaScript表達(dá)式，可以進(jìn)行運(yùn)算，以及引用對象屬性，會保留空格和換行，可嵌套使用
$("#result").append(`
There are ${basket.count} items
in your basket, ${basket.onSale}
are on sale!
`);
2.標(biāo)簽?zāi)０?/b>的一個重要應(yīng)用就是過濾HTML字符串，防止用戶輸入惡意內(nèi)容。
帶標(biāo)簽的字符串模板tag標(biāo)簽實際是一個處理字符串模板的一個函數(shù)，會依次接收到多個參數(shù)，string表示普通字符串，values表示字符串模板（...表示可以匹配多個值）
tag函數(shù)所有參數(shù)的實際值如下：
第一個參數(shù)：["今天 ", " 昨天 ", ""]
第二個參數(shù)： "11"
第三個參數(shù)："22"
let dessert = "11",
drink = "22";
let breakfast = tag`今天
${dessert} 昨天 ${drink} !`;
function tag(strings, ...values) {
// console.log(strings)
// console.log(values)
let result = ""
for (var i = 0; i < values.length; i++) {
result += strings[i]
result += values[i]
}
return result
}
console.log(breakfast) //今天 11 昨天 22
函數(shù)
默認(rèn)參數(shù)
function breakfast (yesterday = "11", today = "22") {
return `${yesterday} ${today}`
}
console.log(breakfast() //11 22
console.log(breakfast("33","44")) //33 44
展開操作符 ...
let fruits = ["apple", "banana"],
foods = ["cake", ...fruits];
console.log(fruits) //["apple", "banana"]
console.log(...fruits) //apple banana 把數(shù)組里面的內(nèi)容展開
console.log(foods) //["cake", apple", "banana"]
剩余操作符 Rest相當(dāng)于...
function breakfast(apple, banana, ...foods) {
console.log(apple, drink, ...foods)
}
breakfast("apple", "banana", "orange", "cake") //apple banana orange cake
解構(gòu)參數(shù)
function breakfast(apple, banana, {location, restaurant} = {}) {
console.log(apple, banana, location, restaurant)
}
breakfast("apple", "banana", {location: "shenzhen", restaurant: "lucha"}) //apple banana shenzhen lucha
函數(shù)名字 name
superBreakfast（函數(shù)聲明）優(yōu)先級高于breakfast（變量）
let breakfast = function superBreakfast (argument){
}
console.log(breakfast.name) //superBreakfast
箭頭函數(shù) 箭頭函數(shù)
let breakfast = (dessert, drink) => { //es6
return dessert + drink;
};
var breakfast = function breakfast(dessert) { //es5
return dessert + drink;
}
function foo() {
setTimeout(function () {
console.log(this === window);
}, 100);
}
foo()//true
//1.this
//setTimeout的參數(shù)是一個箭頭函數(shù)，這個箭頭函數(shù)的定義生效是在foo函數(shù)生成時，
//而它的真正執(zhí)行要等到100毫秒后,箭頭函數(shù)導(dǎo)致this總是指向函數(shù)定義生效時所在的
//對象，這里的this===undefined
function foo() {
setTimeout(() =>{
console.log(this === window);
}, 100);
}
foo() //false
this的動態(tài)切換雖然為js創(chuàng)造了巨大的靈活性，也使編程變得困難和模糊。利用call、apply、bind這三個方法，可以改變this的指向，使它指向我們期望的對象
call、apply、bind原理
call()和apply() 原理他們的作用是可以改變其this的指向，調(diào)用方式略有不同
bind() 原理該方法會創(chuàng)建一個新函數(shù)，當(dāng)這個新函數(shù)被調(diào)用時，bind()第一個參數(shù)將作為它運(yùn)行時的this，之后的序列參數(shù)將會在傳遞的實參數(shù)前傳入作為它的參數(shù)，返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝
this.x = 9;
var module = {
x: 81,
getX: function() {
return this.x;
}
}
module.getX() //81
var retrieveX = module.getX
retrieveX() //9
var boundGetX = retrieveX.bind(module);
boundGetX() //81
對象
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81752.html
摘要：學(xué)習(xí)筆記頂層對象雖然是筆記但是基本是抄了一次大師的文章了頂層對象頂層對象，在瀏覽器環(huán)境指的是對象，在指的是對象。之中，頂層對象的屬性與全局變量是等價的。的寫法模塊的寫法上面代碼將頂層對象放入變量。參考引用頂層對象實戰(zhàn) es6學(xué)習(xí)筆記-頂層對象_v1.0 (雖然是筆記,但是基本是抄了一次ruan大師的文章了) 頂層對象 頂層對象，在瀏覽器環(huán)境指的是window對象，在Node指的是gl...
摘要：本筆記為閱讀阮老師的文章自己的總結(jié)，僅作自用，感謝阮老師的技術(shù)分享。字符串的遍歷器接口新增判斷字符串的包含情況返回值，表示是否找到了字符串。返回值表示參數(shù)字符串是否在原字符串的頭部。 本筆記為閱讀http://es6.ruanyifeng.com/ 阮老師的文章自己的總結(jié)，僅作自用，感謝阮老師的技術(shù)分享。 1.超過uFFFF的字符ES5無法正確顯示，會顯示成前面的uFFFF的碼點符號加...
摘要：最近買了深入理解的書籍來看，為什么學(xué)習(xí)這么久還要買這本書呢主要是看到核心團(tuán)隊成員及的創(chuàng)造者為本書做了序，作為一個粉絲，還是挺看好這本書能給我?guī)硪粋€新的升華，而且本書的作者也非常厲害。 使用ES6開發(fā)已經(jīng)有1年多了，以前看的是阮一峰老師的ES6教程，也看過MDN文檔的ES6語法介紹。 最近買了《深入理解ES6》的書籍來看，為什么學(xué)習(xí)ES6這么久還要買這本書呢？主要是看到Daniel A...
摘要：新搭建的個人博客，本文地址學(xué)習(xí)筆記用重寫在一開始的時候配置中我們就加入了的支持，就是下面的配置，但之前的學(xué)習(xí)筆記都使用的完成，所以專門作一篇筆記，記錄使用完成創(chuàng)建相關(guān)文件修改，增加該入口文件修改，引入該文件做個簡單的測試，看下瀏覽器全部用來 新搭建的個人博客，本文地址：React學(xué)習(xí)筆記3：用es2015（ES6）重寫CommentBox在一開始的時候webpack配置中我們就加入了e...
摘要：彩票項目實戰(zhàn)學(xué)習(xí)記錄一完整走了一遍課程，覺得還不錯。支持正版人人有責(zé)零基礎(chǔ)教學(xué)解析彩票項目下面是項目課程的目錄路線一個項目分為三部分業(yè)務(wù)邏輯，自動構(gòu)建系統(tǒng)，模擬數(shù)據(jù)和真實數(shù)據(jù)接口處理。 彩票項目實戰(zhàn)學(xué)習(xí)記錄（一） 完整走了一遍課程，覺得還不錯。 總結(jié): es6的知識點說得還算清楚，主要是為了了解和使用，不是深究，所以淺嘗即止即可，所以覺得還不錯。 完整還原了項目開發(fā)的代碼設(shè)計和開發(fā)過...
閱讀 2089·2021-11-23 09:51
閱讀 3697·2021-10-20 13:49
閱讀 1706·2021-09-06 15:13
閱讀 1816·2021-09-06 15:02
閱讀 3154·2021-09-02 15:11
閱讀 890·2019-08-29 15:37
閱讀 1732·2019-08-29 13:24
閱讀 2274·2019-08-29 11:28
