js的组成

ECMAScript(ES) : 负责翻译,为js的核心,解释器。

DOM (Document Object Model 文档对象模型):赋予js操作HTML的能力,document。

BOM (Browser Object Modal 浏览器对象模型):赋予js操作浏览器的能力,window,不兼容不建议使用。

变量类型

5种基本类型:unll,undefined,boolean,number,string
       1种复杂类型:object
       5种引用类型:Array,Object,Function,Date,RegExp
       3种基本包装类型:Boolean,Number,String
       2种单体内置对象:Global,Math
       undefined:没有定义的变量,var声明没有初始化的变量

typeof 可查看变量类型,一个变量应只存一个类型的数据。

var a = 12;
// console.info(typeof a);        numbera = 'dwefeyui';
// console.info(typeof a);        stringa = true;
// console.info(typeof a);        booleana = function(){console.info('frgctgy');
};
// console.info(typeof a)         functiona = document;
// console.info(typeof a);        objectvar b;
// console.info(typeof b);        undefined
// 1.真的未定义
// 2.虽然定义但是没有给东西

显式类型转换(强制类型转换)

parseInt() 可将字符串转换为数字(整数),parseFloat()可将字符串转换为数字(小数);

var a = 'abc', b = '20.5632';
    // console.info(parseInt(a));      NaN    
    // console.info(parseInt(b));      20
 
    var a = '3.5'; 
    console.info(parseFloat(a));       //3.5

isNaN() 判断该元素是否为NaN,NaN表示(Not a Numer),两个NaN之间不相等;

隐式类型转换

双等 ==  先转换类型,再进行比较;(值相等,等式成立)

三等===   不转换类型,直接比较;(值和类型必须相等,等式成立)

var a = 5;
        var b = '5';
 
        // console.info(a==b);      true
       //  console.info(a===b);     //false

减法也可做隐式类型转换,但加法不行。

var a = '12';
        var b = '5';
 
        // console.info(a+b);    //125
        // console.info(a-b);       //7

变量作用域

局部变量:只能在定义他的函数里面使用;

全局变量:在任何地方都能用;

闭包:子函数可以使用父函数的局部变量。

匈牙利命名法:类型前缀(仅给变量取名时需要),首字母大写

运算符

+加、-减、*乘、/除,%求模(余数)。(隔行变色,秒转时间)

赋值

=、+=、-=、*=、/=、%=。(i+=1等效于i=i+1)

逻辑

&&并且、||或者、!否;运算优先级:括号;

程序流程控制

判断:if、switch、?:三元目()运算符

switch (变量) {
          case 值1:
            语句1 ;
              break;
        case 值2:
            语句2;
              break;
          default:
              语句n;
              break;
      };
 
      条件?语句1:语句2;

循环:for、while;跳出:break(中断整个循环)、continue(中断本次循环);

真和假

真(true):非0数字、非空字符串、非空对象

假(false):数字0、空字符串、null(空对象)、undefined

JSON

和数组的区别:数组用 [ ],下标为数字,有length,故循环时采用0 - length这种方法;

JSON用 { },下标为字符串,没有length,故循环时用for in这种方法;

var json = {
            a:12,
            b:5,
            c:'afy'
        };
        var arr = [12,5,'add'];
 
        //json.a++         //可像变量一样操作
        console.info(json.a); 
       
       for(var i = 0;i<arr.length;i++){

console.info('第' + i + '个东西' + json[i]);
       }     
     for(var i in json){
                console.info('第' + i + '个东西' + json[i]);
      }

JS深入

函数返回值

将函数返到函数外面,为函数的执行结果,可做运算,一个函数应该只返回一种值。

function show(a,b){
            return a + b;
        }
 
        console.info(show(3,5));

函数传参

arguments [ ] (可变参,不定参):参数个数可变,为一个数组。

css中传两个参数为获取样式,三个参数为设置样式,一般给参数取名,增加可读性。

function css (obj,name,value){
            if(arguments.length == 2){      //获取
                 return obj.style[name];    
                 //obj==arguments[0],以此类推
            }else{
                obj.style[name] = value;
            } 
        }
 
        window.onload = function(){
            var oDiv = document.getElementById('div1');
 
            // alert(css(oDiv,'width'));
            css(oDiv,'background','green');
        }
getComputedStyle () 用于获取非行间样式(FireFox、Chrome、Safari)、

currenStyle ()   也可(IE、Opera),style用于获取行间样式。兼容性问题通常用if else处理

<style>
        #div1{
            width: 200px;
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            console.log(getComputedStyle(oDiv, false).width)
           }
         </script>

函数封装

将需要多次用到的函数进行封装方便调用。

function getStyle(obj,name){               //封装
            if(obj,currentStyle){
                return obj.currentStyle[name];
            }else{
                return obj.getComputedStyle(obj, false)[name];
            }
        }
 
        window.onload = function(){
            var oDiv = document.getElementById('div1');
 
            alert(getStyle(oDiv,'width'));
        }

上述getStyle()只能用于取单一的样式,如:width,height;无法取出border等含有多个元素的样式,

需写成border-color等样式。

数组基础

有两种写法,一般采用第一个

var a = [1,2,3];
    var a = new Array(1,2,3);

属性:length,可以用于获取数组长度,也可设置,一个数组中应该只存一种数据类型。

添加,删除元素:push(),从尾部添加;unshift(),从头部添加;pop(),从尾部删除;shift(),从头部删除;

删除 splice(起点,长度);插入/替换 splice(起点,长度,元素)。

var arr = [1,2,3,4,5,6];
    // arr.splice(2,3);
 
    arr.splice(2,0,'a','b'); 
    console.info(arr);
   数组连接:concatt ( ); 分隔符:join ( ) ;

var a = [1,2,3];
        var b = [4,5,6];
        console.info(a.concat(b));
 
    var arr = [1,2,3,4,5,6];
    console.info(arr.join('--'));

数组排序:sort ( ) ,但通常将数组当做字符串来比较,导致排序数字时乱序。

var arr = [465,255,30,66,5,67];
    arr.sort(function(n1,n2){     //比较函数    
             return n1-n2;
        });
   consoel.info(arr);


想要整理更多的碎片知识,扫码关注下面的公众号,让我们在哪里接着唠!

js基础知识总结(一)相关推荐

  1. JS基础知识学习(一)

    JS基础知识 前端开发常用的浏览器 谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核 欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...

  2. (七)JS基础知识四(搞定异步)【三座大山之三,必考!!!】

    JS基础知识四(异步) 提问 单线程 应用场景 callback hell和promise 提问 同步和异步的区别是什么 手写用Promise加载一张图片 前端使用的异步的场景有哪些 单线程 JS是单 ...

  3. (六)JS基础知识三(走进作用域和闭包)【三座大山之二,不会闭包,基本不会通过】

    JS基础知识三(作用域和闭包) 提问 作用域 自由变量 闭包 this 提问 this的不同应用场景,如何取值 手写bind函数 实际开发中闭包的应用场景,举例说明 创建10个a标签,点击的时候弹出对 ...

  4. (五)JS基础知识二(通过图理解原型和原型链)【三座大山之一,必考!!!】

    JS基础知识二(原型和原型链) 提问 class 继承 类型判断(instanceof) 原型 原型关系 基于原型的执行规则 原型链 说明 提问 如何准确判断一个变量是不是数组 class的原型本质 ...

  5. (四)JS基础知识一(深入分析变量类型和计算)【不会变量,别说你会JS】

    JS基础知识一(变量类型和计算) 提问 变量类型 值类型 vs 引用类型 (堆栈模型) 值类型 引用类型 typeof 运算符 深拷贝 变量计算 字符串拼接 == if语句和逻辑运算 if语句 逻辑判 ...

  6. Js基础知识梳理系列

    小序:总是感觉自己的技术一直在原地踏步,想学习一些新的技术,但学起来很吃力,而且总是没有什么实际的收获,似乎进入了所谓的"瓶颈期".问了一些前辈是否也遇到过同样的问题,他们给我的解 ...

  7. 了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化

    js基础知识中的作用域和闭包 一.作用域 1.作用域.自由变量简介 (1)作用域定义 (2)作用域实例演示 (3)自由变量定义 (4)自由变量实例演示 2.作用域链简介 (1)作用域链定义 (2)作用 ...

  8. js基础知识学习(二)

    JS基础知识 JavaScript 数据类型转换 把其它数据类型转换为number类型 isNaN .Number.parseInt.parseFloat 在进行加减乘除数学运算的时候 true-&g ...

  9. 前端学习笔记(js基础知识)

    前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型 常见的HTML事件 DOM 冒泡与捕获 流程控制语句 for..in 计时器 let,var,const的区别 ...

  10. php插入js教程,JavaScript_JavaScript入门教程(2) JS基础知识,在什么地方插入 JavaScript  Ja - phpStudy...

    JavaScript入门教程(2) JS基础知识 在什么地方插入 JavaScript JavaScript 可以出现在 HTML 的任意地方.使用标记,你可以在 HTML 文档的任意地方插入 Jav ...

最新文章

  1. 机器学习算法集锦:从贝叶斯到深度学习及各自优缺点
  2. 美媒看衰马斯克超级高铁:纽约到华盛顿挖隧道要挖100年
  3. python不支持_不支持的操作:不可写的python
  4. SAP Spartacus 如何使用 cypress 进行端到端自动化测试
  5. javascript --- 防抖与节流
  6. Delphi 7下最小化到系统托盘
  7. 微课|玩转Python轻松过二级(3.3节):字典使用要点
  8. Linux VFS的主要的数据结构
  9. 人到中年,发现新领导比自己年轻
  10. 蓝桥杯 ALGO-65 算法训练 比赛安排
  11. AJAX Wrapper for .NET
  12. 翻书插件:bookblock.js
  13. Logistics人口模型
  14. jeecg框架表格合计解决方案
  15. 【Unity游戏开发】不接SDK也能在游戏内拉起加QQ群操作?
  16. 惜时间_惜时间的作文
  17. Bundle Adjustment简述
  18. python支付程序源码_Python提取支付宝和微信支付二维码的示例代码
  19. 小程序实现滚动加载(懒加载)
  20. HTML5plus 移动 App开发入门

热门文章

  1. 联合信息抽取2021-2022年CCF A B类论文总结
  2. ad9516-4时钟芯片配置注意事项
  3. 几款免费的数据恢复软件测试
  4. Alfred数据室也有读者群啦!
  5. 在VMware虚拟机上安装统信UOS系统
  6. vsftpd+SSL+FileZilla Client
  7. windows下批处理删除文件夹、删除文件、if exist用法
  8. python ctypes教程_python ctypes是什么
  9. 浅析Statement和PreparedStatement的区别
  10. freeradius mysql 认证_freeradius+mysql 的验证问题