2019年9月1日 星期日 今日学习内容
1.localStorage的用法
作用: 用于本地存儲,以鍵值對的形式存起來的。
首先我想問一下localStorage是一個什么東西?
其實localStorage是一個對象。
上面我們為localStorage設置了一個name的鍵值。
平時我們用localStorage.getItem(‘name’)得到設置的值。如果我們用
會不會得到呢?
其實是可以得到的,原因是localStorage是一個對象。
2.box-sizing: border-box||border-content||inherit;
下面有個示例
請問紅色盒子的實際寬度和高度是多少?(答案可以執行下面的例子就可以看到)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>box-sizing</title> <style>.box{width: 200px;height: 200px;background: red;border: 20px solid #ccc;padding: 20px;box-sizing: border-box;} </style> </head> <body><div id='root' class='box'></div><script>//box-sizing: border-box || content-box;//border-box width+padding+border//border-content width</script> </body> </html>實際的寬度和高度分別為:160px;
剛才上面提到box-sizing:inherit;繼承父盒子的box-sizing,下面有個例子可以看看:
這里又讓我想到了標準盒模型和怪異盒模型。
- 標準盒模型 width=content+padding+border+margin
- 怪異盒模型 width=width+margin (width包括:content+padding+border)
3.函數表達式
定義函數的方式有兩種:
函數聲明的語法是這樣的:
function functionName(arg0,arg1,arg2){//函數體 }關于函數聲明的一個最重要的特征就是函數聲明提升,意思是在執行代碼之前會先讀取函數聲明。這就意味著可以把函數聲明放在函數調用的后面。
test(); function test(){}第二種創建函數的方式是使用函數表達式。函數表達式有幾種不同的語法形式。下面是最常見的一種形式。
var functionName = function(arg0,arg1,arg2){//函數體 }函數聲明和函數表達式最重要的區別就是:前者可以函數聲明提升,后者不會。
理解函數提升的關鍵,就是理解函數聲明與函數表達式之間的區別。
下面有一個題目考的就是函數聲明和函數表達式的區別。
返回的結果是8,函數聲明提升,因此會返回相應的結果。如果是下面的例子呢?會有什么不同
console.log(foo()); function foo(){return bar();function bar(){return 8}var bar = function(){ return 5}var bar = ()=>6;var bar = (function(){return 7})() }結果是一樣的。
再變一下,看有沒有什么不同之處。
返回的結果是:
VM646:7 Uncaught TypeError: bar is not a function因為var bar = (function(){return 7})()已經執行完了相當于
var bar = 7;因此才會有 bar is not a function
總結
以上是生活随笔為你收集整理的2019年9月1日 星期日 今日学习内容的全部內容,希望文章能夠幫你解決所遇到的問題。