Javascript工作中學習到的

JS中數組字符串索引和數值索引

首先明確JS中數組的length=最大索引+1，工作發現數組索引居然還能字符串，找到了一篇寫的特別好的文章記錄一下
JS中數組字符串索引和數值索引研究

總結

1. Javascript的數組其實不像PHP或者其他一些語言一樣擁有真正的字符串下標，當我們試圖爲一個js數組添加字符串下標的時候，其實就相當於爲該數組對象添加了一個屬性，屬性名稱就是我們所謂的“字符串下標”。由於爲數組對象添加屬性不會影響到同爲該對象屬性的length的值，因此length將始終爲零。同樣地，.pop()和.shift()等作用於數組元素的方法也不能夠作用於這些對象屬性。因此，如果要使用的是一個完全由“字符串下標”組成的數組，那還是將其聲明爲一個Object類型的對象要更好一些。
2. Javascript數組下標值的範圍爲0到2的32次方。對於任意給定的數字下標值，如果不在此範圍內，js會將它轉換爲一個字符串，並將該下標對應的值作爲該數組對象的一個屬性值而不是數組元素，例如array[-1] = “yes” 其實就相當於給array對象添加了一個名爲-1的屬性，屬性值爲yes。
   如果該下標值在合法範圍內，則無論該下標值是數字還是數字字符串，都一律會被轉化爲數字使用，即 array[“100”] = 0 和 array[100] = 0 執行的是相同的操作。同理也會影響長度。隱式類型轉換

let h=[];
h['100']=1;
console.log(h);
console.log(h.length);
console.log(h['100']);
console.log(h[100]);

JS裏的undefined

這個真的很繞口

console.log(Boolean(undefined));
console.log(Boolean(null));
console.log(undefined==false);
console.log(null==false);

就很無語，你轉換成Boolean是false,你==判斷不就是轉換同一類型再比較值嗎，怎麼就！=了？？？

但是爲什麼這樣我是沒整明白

undefined與null

undefined==null
undefined!==null(一個type undefined,一個type object)

undefined,null與false,true

console.log(undefined!=true);
console.log(undefined!=false);
console.log(undefined!==true);
console.log(undefined!==false);
console.log(null!=false);
console.log(null!=true);
console.log(null!==false);
console.log(null!==true);

!==完全可以理解
但是注意，==的情況下，也就是隻比較值的情況下！！！
這兩個!=false,!=true。總之就是自己，顏色不一樣的煙火。

總結

一篇講js裏相等的非常好的博客
js談相等

一般不要使用相等操作符，全等操作符很容易理解

所以做條件判斷的時候js的真假？

true:非空，非0

‘0’ true

const str='0';
console.log('0'==false);
if(str){
  console.log("if");
}
else{
  console.log("else");
}

特別繞口，數值轉換值相等，但是他！！！條件判斷的時候真
記住條件判斷要非0非空就真，所以null，undefined都會轉false那個分支，但這不代表nullfalse,undefinedfalse，只是他們!=true
我好蠢呀，條件判斷的本質：將（）內statement轉化成bool值，Boolean(xxx)
我管什麼undefined,null這些是什麼？
首先慎用==，很奇怪,用全相等
然後轉成Boolean，undefined,null,0就是false;'0’是true，秀

console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(0));
console.log(Boolean(new Object());
console.log(Boolean('0'));

false

const str=null;
console.log(null==false);
if(str){
  console.log("if");
}
else{
  console.log("else");
}

輸出false,else

const str=undefined;
console.log(undefined==false);
if(str){
  console.log("if");
}
else{
  console.log("else");
}

輸出false,else
所以誰真誰假？

undefined,null，
輸出false,if

總結

1. ==不能說明什麼，因爲做了類型轉化,而且很奇怪的判斷邏輯
   所以用三個=
2. 最重要的條件判斷是把（）裏轉換成Boolean，由布爾值決定走哪個分支，別想複雜

文檔

==原理
stackoverflow針對null!=true也!=false的討論
js文檔談相等

一些方法

Object.keys()

借鑑博客：Object.keys()
返回數組，裏面元素通通字符串

• Object:返回屬性名，字符串形式

var data={a:1,b:2,c:9,d:4,e:5};
    console.log(Object.keys(data));//["a", "b", "c", "d", "e"]
});

• 字符串:返回索引

var str = 'ab1234';
console.log(Object.keys(obj));  //["0","1","2","3","4","5"]

• 數組：返回索引

var arr = ["a", "b", "c"];
    console.log(Object.keys(arr)); // console: ["0", "1", "2"]

• 函數：同Object

function Pasta(name, age, gender) {
      this.name = name;
      this.age = age;
      this.gender = gender;
      this.toString = function () {
            return (this.name + ", " + this.age + ", " + this.gender);
    }
}

console.log(Object.keys(Pasta)); //console: []

var spaghetti = new Pasta("Tom", 20, "male");
console.log(Object.keys(spaghetti)); //console: ["name", "age", "gender", "toString"]

Object.values()

返回Object可枚舉屬性值的數組，與for…in順序一樣（唯一區別：for…in循環還枚舉了原型鏈中的屬性）
與Object.keys()有那種對應的感覺

可不可枚舉，本身可以認爲，屬性也是object，所以屬性這個object有一個屬性，可不可枚舉enumerable

const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// Array-like object
const arrayLikeObj1 = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(arrayLikeObj1 )); // ['a', 'b', 'c']

// Array-like object with random key ordering
// When using numeric keys, the values are returned in the keys' numerical order
const arrayLikeObj2 = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(arrayLikeObj2 )); // ['b', 'c', 'a']

// getFoo is property which isn't enumerable
const my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 'bar';
console.log(Object.values(my_obj)); // ['bar']

// non-object argument will be coerced to an object
console.log(Object.values('foo')); // ['f', 'o', 'o']

注意這個順序，和string的特殊性

• 屬性名爲數值的屬性，是按照數值大小，從小到大遍歷的
• 對可枚舉屬性的理解，這個可以改，一般有默認
• 字符串會先轉成一個類似數組的對象，字符串的每個字符，就是該對象的一個屬性。因此，Object.values返回每個屬性的鍵值，就是各個字符組成的一個數組

一篇寫的非常清楚的博客Object.keys,values,entries詳解
這三個對map比較常用。

Object.create()

找到了一篇寫的非常清楚的文章，多看看這個就可以了Object.create(…)

Object.freeze()

凍結一個對象。不能被修改，不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結一個對象後該對象的原型也不能被修改。freeze() 返回和傳入的參數相同的對象。
Object.freeze()文檔

Object屬性

去拿一個Object沒有的屬性，得到undefined，老規矩了，記清楚

JS裏的setter,getter

setter

在 javascript 中，如果試着改變一個屬性的值，那麼對應的 setter 將被執行。setter 經常和 getter 連用以創建一個僞屬性。不可能在具有真實值的屬性上同時擁有一個 setter 器。
更詳細：setter文檔

getter

僞屬性

const obj = {
  log: ['example','test'],
  get latest() {
    if (this.log.length == 0) return undefined;
    return this.log[this.log.length - 1];
  }
}
console.log(obj.latest); // "test".

注意，嘗試爲latest分配一個值不會改變它。

詳細：getter文檔

const {id, title, optionName, options, isCustomized} = this.props;

解構賦值
解構賦值語法是一種 Javascript 表達式。通過解構賦值, 可以將屬性/值從對象/數組中取出,賦值給其他變量

更細緻講解：
javascript的文檔
stackoverflow回答這個問題

Javascript中的this，超級重要

this文檔

Map和Object的區別

Map文檔
Map和Object的區別
第二個博客我還沒驗證正確與否，不懂寫的對不對好不好

四個for循環

PR中不斷改進，要寫出優美的代碼，對js裏的for循環應該術業有專攻
參考非常好的blog：
js中for-in和for-of
js四種for循環
js數組遍歷方法的對比

總結：

標準for循環
for-in：術業有專攻，專門用來遍歷對象的屬性
forEach:對數組每個有效值執行一次callback函數
for-of：
遍歷範圍：數組，類數組對象（eg:DOM nodelist），字符串，Map,set
不支持普通對象
與keys().entries(),values()結合

其他循環方法

js數組循環
map：不改變原數組，返回新數組
reduce:js之reduce的最全用法
filter:不改變原數組，返回新數組，只要true的
every:檢測，全true則true，有一個false返回false 必須全對
some:檢測，全false則false,有一個true立即返回true 有一些對就好

【object Object]

js輸出內容爲[object,Object]
toString()的原理
當被object調用？
見到+出現？自覺調用toString()
都能在這個blog找到答案

最後

整理就是爲了看，經常看，多記錄感悟。這些是我不懂或者踩過坑記錄一下，畢竟對於javascript我真的初學者中的初學者