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我真的初学者中的初学者