二——01Day：对象的索引理解，对象上的this指向，对象转换为字符串，函数的预解析，arguments.callee的用法，

Posted 2022-07-20 勇敢*牛牛

键值对，一个键对应一个值
键必须是字符型或 symbol 型，如果不是则隐式转换为字符串
键不能重复，如果重复则会覆盖

var s = "b-1";
var obj = 
    a: 1,
    //用于非纯数字或字母
    ["b"]: 2, //相当于 b : 2，但是可以放入变量
    [s]: 3,
    "a-1": 4, //不能使用变量
;

任何对象转换为字符串都会转换为[object Object]

var o = a: 1; //[object Object] ，任何对象转换为字符串都会转换为[object Object]
var o1 = a : 2;
var obj3 = ;
obj[o] = 10;
console.log(obj[o1]); //10，o1 被转换为了 [objec Object]

var obj4 = a: 1;
var arr = ["a"];
console.log(obj4[arr]); //1，数组中只有一个元素，被转换为 "a"

使用 for in 时，key 自动转换为字符串，并可以打印除所有除索引外的其他属性
此种遍历时，会跳过空元素，不会打印
forEach 遍历时会跳过空元素

var arr = [1, 2, 3, 4];
arr.a = 1;
//不可遍历不可枚举属性
for(var key in arr)
    console.log(key, arr[key]);

this指向

var a = 10;
var obj6 = 
    a: 1,
    b: this.a, //10，属性上的 this，指向当前对象外上下文环境中的 this
    c: function()
        console.log(this.a); //谁调用这个方法，this 指向谁
    


obj6.c(); //1

null 用来在垃圾回收时，可以将不使用的引用类型回收掉

var obj7 = a: 1, b: 2;
console.log(obj7); //10,2（其实已经修改了）
obj7.a = 10;

将对象转换为字符串

//将对象转换为字符串
var obj8 = a: 1, b: 2;
console.log(JSON.stringify(obj8));
var str = JSON.stringify(obj8)
console.log(JSON.parse(str));

纯函数，函数体本身是抽象的、独立的，不会对函数外的变量或者其他内容有影响

function fn(a, b)
    a++;
    b++;
    //局部变量，当函数执行完毕后会被释放
    return a + b;


var s = fn(3, 5);
console.log(s); //10

非纯函数

var a = 1, b = 2;
function fn1()
    a++;
    b++;
    return a + b;

声明式预解析，预赋值

var a = 1;
function a()
    console.log(a);

a(); // a is not a function

var a;
function a()
	  onsole.log(a);

a(); //函数本身

console.log(a); //undefined，函数在代码块中预解析
var a = 1;

    console.log(a); //函数本身，在块开始时预解析、预赋值
    a = 2;
    function a()

    

console.log(a); //2

var a = 1;
   if(a === 2)
       function a()
           console.log("aa");
       
   
   a(); //a is not a function

var a;
if(a === undefined)
    function a()
        console.log("aa");
    

a(); //aa

var a = 1;

    a = 2;
    function a()

    
    a = 3;
    function a()

    
    a = 4;
    function a()

    
    a = 5;
    console.log(a); //5

console.log(a); //4
/*
同名函数在块内预解析、预赋值的同时将同名函数上的
同名变量挤出快外，在块语句结束后赋值
*/

地址的引用

function fn(o)
    o.a = 10;
    //o = a: 10;
    //若写成这样，输出为1


var obj = a: 1;
fn(obj);
console.log(obj); //10

this指向

function fn(f)
     arguments[0](); //this 指向 arguments
     f(); //this 指向 window
 
 function fn1()
     console.log("aa");
     console.log(this);
 
 fn(fn1); //aa

回调循环

var a = 1;
function fn1(f)
    a++;
    console.log(a); //2, 3, 4, 5, 6, 7, 8, 9, 10
    f(fn1);

function fn2(f)
    if(a < 10) f(fn2);

fn1(fn2);

不需要全局变量，解耦（不使用全局变量，使用纯函数）

function fn1(f, a)
    if(!a) a = 1;
    a++;
    console.log(a); //2, 3, 4, 5, 6, 7, 8, 9, 10
    f(fn1, a);


function fn2(f, a)
    if(a < 10) f(fn2, a);


fn1(fn2);

防止内存泄漏

console.log("aa");
var ids = setTimeout(fn, 1000);
console.log("cc");

function fn()
    clearTimeout(ids); //防止内存泄露
    console.log("bb");

arguments.callee的用法

argument为函数内部对象，包含传入函数的所有参数，arguments.callee代表函数名，多用于递归调用，防止函数执行与函数名紧紧耦合的现象，对于没有函数名的匿名函数也非常起作用。举例如下：

function showRed(fn1, fn2)
    var f = arguments.callee; //函数本身
    //arguments.callee 执行该函数的上下文执行环境，指向调用他的对象
    setTimeout(function()
        console.log("红灯");
        fn1(fn2, f);
    , 2000);   


function showYellow(fn1, fn2)
    var f = arguments.callee;
    setTimeout(function()
        console.log("黄灯");
        fn1(fn2, f);
    , 1000);
    


function showGreen(fn1, fn2)
    var f = arguments.callee;
    setTimeout(function()
        console.log("绿灯");
        fn1(fn2, f);
    , 3000);


showRed(showYellow, showGreen);

while, 递归 深度遍历

var a = 1;

function fn()
    a++;
    console.log(a); //1, 2, 3, 4, 5, 6, 7, 8, 9, 10
    if(a < 10) fn();
    console.log(a); //此时输出 10 个 10

//尾递归，递归后面没有代码
fn();

function fn(a, sum)
    if(a >= 100) return sum
    if(!sum) sum = 0;
    if(!a) a = 0;
    a++;
    sum += a;
    return fn(a, sum);

fn();//5050

function fn(a, sum)
    if(a >= 100) return sum
    if(!sum) sum = 0;
    if(!a) a = 0;
    a++;
    sum += a;
    return arguments.callee(a, sum);

console.log(fn());

深度遍历

//深度遍历
function fn(obj)
    for(var key in obj)
        if(typeof obj[key] === 'object' && obj[key] !== null)
            fn(obj[key]);
         else 
            console.log(key, obj[key]);
        
    


var o = 
    a: 1,
    b: 
        c: 2,
        d: 
            e: 3,
            f: 4
        
    


fn(o);
var keys = Object.keys(o); //获取对象所有的 key 组成的数组
var values = Object.values(o); //获取对象的 key 对应的值组成的数组

数据转换

除字符串以外的任何类型，与数值相加，都会转换为数值类型
字符串与任何类型相加，其他类型都会转为字符串
使用引用类型与数值相加时，引用类型自动转换为字符串

var a = 3;
var b = ;
console.log(a + b); //3[object Object]

var c = [1];
console.log(a + c); //31

引用类型在隐式转换类型时，都会转换为 NaN，但是数组是特殊的，优先转换为字符串，然后再转换为数值，所有引用类型转换布尔值为 true

var d = true;
console.log(a - d); //2

var e = ;
console.log(a - e); //NaN

var f = [1];
console.log(a - f); //2
console.log([3] - [2]); //1
console.log([3] + [2]); //32

//二维数组依旧先转换为字符串，后转换为数值
console.log([[3]] - 1); //2

//等号赋值返回赋值结果
var a = 1;
if(a = 2)
    a++;

console.log(a); //3

单运算符

相与

 console.log(3 & 4); //0
 console.log(0xAAFF & 0xFF); 
 //任何数与 0xFF 相与，得到的是不大于 255 的数值；0xFF = 255

或运算

 console.log(3 | 4); //7

 console.log(1231 | 0xFF); 
 //任何数与 0xFF 进行或运算，得到的是不小于 255 的值，小于 255 的值都会等于 255

异或

console.log(3 ^ 4); //7
/*
1 ^ 1 = 0
0 ^ 0 = 0
1 ^ 0 = 1
0 ^ 1 = 1
相同为 0，不同为 1
*/

//可用于加密
console.log(16256 ^ 12345); //4025
console.log(4025 ^ 12345); //16256

console.log(~3); // +1 取负，-4

取反

console.log(~3); // +1 取负，-4
var arr = [1, 2, 3];
if(~arr.indexOf(3))
    console.log("查找到了");

//取整，非运算符不运算小数
console.log(~~3.6); //3，向下取整
//将隐式转换为 NaN 的值转换为 0 
console.log(~~"a"); //0

var a = 1;
console.log(a += 3 ? 1 : 2); //2
console.log(3 ? 1 : 2);
//三目运算符优先级高于 += 运算符，先计算三目运算符
console.log(a += 0 ? 1 : 2); //4

console.log([] == false); //true， [] 为 false
console.log([1] == 1); //true， [1] 转换为字符 1
console.log([0] == false); //true，[0] 转换为字符 0
console.log([] == []); //false，两个空数组地址不一样
console.log([] == ![]); //true，引用类型转换为布尔值为 true，![] 为 false

跳转

var i = 1;
aa: //label
while(i++ <= 100)
    var j = 2;
    while(j < i)
        if(i % j === 0) continue aa; // break 和 continue 可以跳转到外层 label 中
        j++;
    
    console.log(i);