js基础知识及底层运行原理1

思考：为啥我们写完的代码会{HTML / CSS/JS}最后会在浏览器中呈现出页面和效果

@1 浏览器内核 & 浏览器大战

+Trident [IE 浏览器 6-11]

+ Gecko [ 火狐浏览器]

+ Webkit   [Safari/ 谷歌浏览器]

+....

@ 页面渲染遵循的规范

+ w3c [html5 /css3]

+ ECMAScript  [javascript]

+1997.06    ECMA-262

+ 1999.12   ES3

+2011.06     ES5

+2 bianliang015.06     ES6 (更名为ES2015)

+......

ECMAscript 规范中我们需要掌握的内容

@ 变量   & 数据类型   & 命名规范

+ 数据类型 

    + 原始值类型【基本数据类型】：number 、string、boolean、null、udefined、symbol 、bigint

     + 对象类型【引用数据类型】

         + 标准普通对象

          + 标准特殊对象【数组 正则 日期  错误......】

           + 非标准特殊对象  Number  / String / Boolean / Symbol / Bigint ....基于构造函数【或者object】创造出来的原始值对象类型的格式信息，类属于对象类型

            + 可调用/执行对象【实现了call方法】function

         +变量

            +传统方案：var 、function

             +es6新方案 ： let const  class  import

         + 命名规范 【官方规范 & 约定俗称的规范】

              + 基于“数字、 字母 、下划线 、$  ”命名

              +使用驼峰命名法

               +命名需要具备语义化

               + 数字不能作为开头

               + 不能使用关键字和保留字

                +.....

@2 操作语句

         + 判断语句：if/else   if/else if /三元运算符、switch /case

         + 循环语句： for、 while 、for、 in，for 、of

............

//我们写好的代码可以在：浏览器，webview  、Node  【webpack】等环境中运行

//浏览器之所以能够运行我们编写的代码，是因为有一套属于自己的渲染引擎【浏览器内核】

//变量：起一个名字用来，用来存储值，操作值

//值【数据类型】：常量，具体的东西，实实在在的东西

  var num = 12;
  console.log(num);

/ /=========number 

JS中最大安全数字【16位】

Number.MAX_SAFE_INTEGER
Math.pow(2,53)-1

  let n = ?;
  if(n== NAN) {
  //这个条件永远不会成立的，所以不要这样判断是否为有效数字
   console.log('n不是有效数字');
    }

//isNAN(【value】)：验证这个值是不是有效数字的命题是否成立，如果真的不是有效数字，则返回true，反之是false

//+  isNAN('12PX') 如果检测的值不是number类型的，首先需要转换成数字类型[隐士转换：Number]

if(isNAN(n)) {

console.log（'n不是有效数字'）；

} 

//在js中但凡用 单引号 双引号 反引号 包起来的都是字符串

//``是ES6新提供的模板字符串，好处数方便字符串拼接

//=========null 空对象指针{没有}    undefined 未定义{没有}

//null 已知的没有，一般都是先手动赋值为null，后期再给赋予其他值

//undefined 未知的没有，一般都是浏览器默认赋予的空

var num ;
    console.log(num); //undefined
    var test = null;
    test = 10;

//sybmol() 创建一个唯一值

  console.log(Symbol() == Symbol()); //false
        console.log(Symbol('aa') == Symbol('aa')); //false
        let n = Symbol('AA');
        let m = n;
        console.log(n == m); //true

//=======对象：把描述同一件事物特征的属性和方法放在一起，实现分组和分类的作用，避免相互冲突

// + 零到多组  键值对（属性名 和属性值）组成的

// + 属性名是不能冲突的，而且属性名的类型是字符串和Symbol ，属性值可以是任何类型的

 [var obj = {
            //'name'
            name: '波子',
            //'age'
            age: '18',
            //0会被默认转化为'0' 作为属性名，
            0: 100,
            1: true,
            //Symbol():100 这种写法不对会报语法错误 Uncaught SyntaxError: Unexpected token ':'
            //想要设置Symbol类型的属性名，直接写会报语法错误，需要拿[]包起来
            [Symbol()]: 100,
        };
        var name = '1';
        console.log(obj['name']);//波子
        console.log(obj[name]);//true  obj['1']获取name变量存储的那个值，所对应的成员属性值 true
        
        //‘name’  代表属性名
        //var name = ‘1’ 这个变量name 正好表示的是属性名为1的属性值  obj中的属性名1其实是字符串‘1’ 所以obj[name]是true   
        // name 变量 代表的是‘1’  obj[name]找的是obj中属性名为‘1的属性值’

// 操作这些成员   键值对

   + 对象.属性名 {不适用于看上去像数字的属性名} 

    +对象[属性名]

  console.log(obj.name);
       console.log(obj['name']);
      // console.log(obj.0); // 这么写会报错 
       console.log(obj['0']);
       console.log(obj[0]);//浏览器会默认把它转换为字符串'0'
       console.log(obj[Symbol()]); //undefined 我们此处是创建了一个新的唯一值，不是获取之前那个唯一的属性，如果对象中没有这个成员，而我们去获取了，结果不会报错，但是值是undefined

 

var n = 12;
        if (n > 10) {
            console.log('hahah');
        } else {
            console.log('heihei');
        }

        //三元运算符：是对if/else判断的转化

        //条件？成立干啥：不成立干啥  

  //var n = 12;
        //n >= 10 ? console.log('hahah') : console.log('heihei')
        // 如果某一个处理是不存在的，可以用null 和undefined /void 0{undefined}等站位
        //(n >= 10 && n< 20) ? console.log('haha') :null
        var n = 10;
        if(n == 10) {
            n+=2; //n = n+ 2
            n*= 3 //n = n+3
        }
        //如果某个处理需要做多件事，我们基于（）包起来，每一个事用逗号分隔
        n == 10? (n += 2,n*=3):null;