Javascript工作中学习到的

大纲

    • JS中数组字符串索引和数值索引
      • 总结
    • JS里的undefined
      • undefined与null
      • undefined,null与false,true
      • 总结
      • 所以做条件判断的时候js的真假?
        • true:非空,非0
      • false:并不是说==false,就是!=true
      • 总结
      • 文档
    • 一些方法
      • Object.keys()
      • Object.values()
      • Object.create()
      • Object.freeze()
      • Object属性
      • JS里的setter,getter
        • setter
        • getter
    • const {id, title, optionName, options, isCustomized} = this.props;
    • Javascript中的this,超级重要
    • Map和Object的区别
    • 最后

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);

null,undefined,false
Javascript工作中学习到的_第1张图片
就很无语,你转换成Boolean是false,你==判断不就是转换同一类型再比较值吗,怎么就!=了???
Javascript工作中学习到的_第2张图片
但是为什么这样我是没整明白

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谈相等
Javascript工作中学习到的_第3张图片
一般不要使用相等操作符,全等操作符很容易理解

所以做条件判断的时候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我真的初学者中的初学者

你可能感兴趣的:(前端学习笔记,恰工位少年)