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

false：并不是说==false，就是!=true

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
所以谁真谁假？
假的!=true，他可能!=false，但是因为!=true，所以走了false的分支
undefined,null，
输出false,if

假的还有的!=true,==false，走了false的分支
0，’’

总结

==不能说明什么，因为做了类型转化
做条件判断的时候一定要注意他走那条路与他
==false
还是
==true真的无关
这地方真的吐血

文档

==原理
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详解

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的区别
第二个博客我还没验证正确与否，不懂写的对不对好不好

最后

整理就是为了看，经常看，多记录感悟。这些是我不懂或者踩过坑记录一下，毕竟对于javascript我真的初学者中的初学者