Js 笔记 预解析 作用域链 利用字面量创建对象 遍历对象 构造函数创建对象 数组转字符串 全局变量 作用域链

101 阅读3分钟

//JavaScript 作用域 :就是代码名字(变量)在某个范围内起作用和效果 // 提高程序可靠性 减少命名冲突

    // 全局变量  函数外部定义的变量
    // 局部变量 函数内部声明的变量

    // 如果在函数内部没有声明 直接赋值的变量也属于全局变量
    // 函数形参 也可以看作局部变量
    
    //区别  全局变量只有浏览器 关闭时才会销毁,比较占内存
    //局部变量  当程序执行完毕 就会销毁,比较节约内存资源

    // Js 在 es6 中新增了块级作用域 其余没有
    // 块级作用域 {}  例如 if {} for {}

    // 只要有代码就会有作用域  
    
    // 作用域链
    // 根据在内部函数可以访问外部函数变量的这种机制  
    // 用链式查找决定哪些数据可以被内部函数访问 , 就称作作用域链

    var num = 10;
    function fn() {
        var num = 20;
        function fm() {
            console.log(num);
        }
        fm();
    }
    fn();

    // 预解析
    // Js引擎  运行代码时分两步: 预解析  代码执行
    
    // 预解析  js 引擎 会把 js 里面所有的var 还有 function 提升到当前作用域的最前面
    // 再执行代码 按照书写顺序从上到下执行
    
    // 预解析  分为  变量提升 和 函数提升
    // 变量提升 把所有变量提升到作用域最前面 不提升赋值操作
    // 函数提升 把所有函数声明提升到当前作用域的最前面 不调用函数
    
    // 集体声明变量需用逗号隔开 如 var a = 9 , b = 9 ,c = 9 
    // var a = b = c = 9 可看作  var a = 9 b = 9 c = 9

    // 对象是一个具体的事物
    // 在JavaScript中 对象是一组无序的相关属性和方法的集合
    // 属性是事物的特征 (常用名词)
    // 方法是事物的行为 (常用动词)

    // 利用字面量创建对象

    var obj = {
        uname: '张三疯',
        age:18,
        sex:'男',
        sayHi:function() {
            console.log('hi~');
        }
    }
    // (1) 里面的属性或者方法我们采取键值对的形式  键 属性名 : 值 属性值
    // (2) 多个属性或者方法中间用逗号隔开的
    // (3) 冒号后面跟的是一个匿名函数
    // 2.使用对象
    // (1)调用对象的属性 采取 对象名.属性名
    console.log(obj.uname);

    console.log(obj['age']);

    // 利用new Object() 创建对象;
    var obj = new Object();
    obj.uname = '张三丰'
    obj.age = 18;
    obj.sex = '男'
    obj.sayHi = function () {
        console.log(obj.uname);
        console.log(obj['sex']);
    }
    obj.sayHi();

    // 利用构造函数创建对象
    // 构造函数就是把对象里面一些相同属性和方法抽象出来封装到函数里面
    // function 构造函数名() {
    //     this.属性 = 值;
    //     this.方法 = function() {
    //     }
    // }
    function Star(uname, age, sex) {
        this.name = uname
        this.age = age
        this.sex = sex
        this.sing = function (sang) {
        console.log(sang);
    }

    }
    var ldh = new Star('刘德华',18,'男')
    console.log(ldh.name);
    console.log(ldh[('sex')]);
    ldh.sing('好的');
    
    function People(uname,age,sex) {
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.attact = function (met) {
            console.log(met);
        }
    }
    var hy  = new People('后裔',18,'男') 
    console.log(hy.name);
    console.log(hy.age);
    console.log(hy.sex);
    hy.attact('远程')

    // 遍历对象  for...in对象
    for (var k in obj) {
        console.log(obj[k]);
    }


    生成一个新对象
    function Cpt(uname, uweight, ucolor, ubrand, utype) {
        this.name = uname;
        this.weight = uweight;
        this.color = ucolor;
        this.brand = ubrand;
        this.type = utype;
        this.sing = function(act,game) {
            console.log(act,game);
        }
    }
    var cpt = new Cpt('黑色','2kg','牛排','2080ti');
    console.log(cpt);
      


    // 给每个对象附加一个新属性
    // 常规方法
    let arr = [
        {a:1,b:2},
        {a:3,b:4},
        {a:5,b:6},
        {a:7,b:8},
    ];
    for(let i = 0; i < arr.length; i++) {
        arr[i].c = 9
    };
    console.log(arr);

    // 数组转字符串
    // 3种  toString() 转化后类型 string 默认用 “,” 隔开
    // toLocaleString() 转化后类型 string 数组转化为本地约定的字符串  默认用“,” 隔开
    // join() 转化后类型 string 数组元素连接起来以构建一个字符串 可随意设定分隔符
    
    // for in / map / Foreach 三种遍历
      var kvArray = [{key: 1, value: 10},
                     {key: 2, vaule: 20},
                     {key: 3, value: 30}];

      var reformattedArray = kvArray.map(function(obj) {
        var rObj = {};
        rObj[obj.key] = obj.value;
        return rObj;
      }) ;
      console.log(rObj);
    
    //  forEach 实例
    let allEven = true;
    const numbers = [22,32,42,10];
    numbers.forEach(function (number) {
        if (number % 2 == 1) {
            allEven = false;
        }
    });
    document.write(allEven);
    console.log(allEven);