JS基础

简介

1995年Brendan Eich完成了Javascript设计，网景公司一开始将其命名为LiveScript，后来与Sun公司合作后改名Javascript。

Javascript是运行在客户端的脚本语言。脚本语言不需要编译，运行过程中由JS解释器(JS引擎)逐行解释并执行。

目前Javascript也可以基于nodejs技术进行服务器端编程。

JS的作用：表单动态验证、网页特效、服务端开发(nodejs)、桌面应用程序(Electron)、App(Cordova)、控制硬件-物联网(Ruff)、游戏开发(cocos2d-js)

HTML : 用于描述网页的结构。

CSS： 用于设置网页的样式。

JS：用于控制网页的行为。

浏览器由 渲染引擎 和 JS 引擎 组成。

渲染引擎(内核)：用来解析HTML和CSS。

JS引擎：读取JS代码，对其处理后执行。

JS组成：JS语法(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)

ECMAScript:是由EMCA(原欧洲计算机制造商协会)进行标准化的一门编程语言，它规定了编程语法和基础的核心知识，是所有浏览器厂商共同遵守的一套语法工业标准。Javascript(网景)和JScript(微软)都是ECMAScript的扩展与实现。

DOM：W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面的各种元素进行操作。

BOM: 通过BOM可以操作浏览器窗口。

 书写位置

<input type="button" value="点我"  onclick="alert('hello')" /> 

<script>
  // 内嵌式
  alert('你好');
script>

<script src="my.js">script>

// my.js代码如下
alert('外部js文件路径');

注释

// 单行注释
/*
   多行注释
*/

 输入输出语句

 alert('浏览器弹出警告框');
 console.log('控制台打印输出信息');
 console.dir(对象);  // 打印对象，更好的查看里面的属性和方法
 prompt('浏览器弹出输入框');

变量

变量：程序在内存中申请一块用来存放数据的空间。

// 声明
var  age;
// 赋值
age = 10;
// 变量初始化 ：  声明 + 赋值
var name = 'Tab';
// 使用
console.log(age);
// 修改
name = 'TabPHP';
// 声明多个变量
var year,month,day;

 变量的特殊情况

只声明，不赋值，直接输出为 undefined

不声明，不赋值，直接输出会 报错

不声明，只赋值， 直接输出 相应的值

 命名规范

 由字母、下划线、数字、美元符号组成

 不能以数字开头

 不能是关键字或保留字

 严格区分大小写

 数据类型

 不同的数据在内存中所占的存储空间是不同的。

JS是弱类型语言(动态语言)，无需提前声明数据类型，程序运行过程中会自动确定。

 简单数据类型 : Number、String、Boolean、Undefined、Null

 复杂数据类型 : Object

 数字类型 Number : 整数和小数(浮点数)。浮点数的最高精度是17位小数，不要使用浮点数来进行运算。其中整数还可以分二进制、八进制(0开头)、十进制、十六进制(0x开头)。最大值 Number.MAX_VALUE 最小值 Number.MIN_VALUE、无穷大 Infinity 无穷小 -Infinity  非数字  NaN  判断是否为非数字  isNaN()  

 字符串 String  :  双引号 或 单引号 ，由于HTML属性推荐使用双引号，所以JS字符串推荐使用单引号 。字符串转义符都是以 \ 开头 。 字符串长度使用 length属性查看 。字符串拼接 +  数值相加，字符相连。

布尔类型 Boolean :  true、false 。 

 Undefined ： 声明了变量未赋值时，变量默认值为 undefined 。 

 Null : 空值

  获取变量数据类型  typeof  变量名; 

  字面量 : 在源代码中的一个固定值。

  数据类型转换 :  

    转字符串：   变量.toString()   、  String(变量) 、 变量  + 任意字符串

    转数值：   parseInt(string) 、 parseFloat(string)  、 Number(变量)  、 隐式转换( - 、 *  、 /)

    转布尔： Boolean(变量)  , 代表空、否定的值(''   0  NaN  null undefined)会被转换为 false ， 其他值会被转换为 true

 标识符  开发人员为变量、属性、函数、参数取的名字。

 关键字  JS本身已经使用的名字

 保留字  其实是预留的关键字，即现在虽然不是关键字，但是未来可能会成为关键字。

 运算符(操作符)

算术运算符  +  -   *  /   %    

递增、递减运算符  ++  --  让变量值自增1或自减1，分前置和后置

比较运算符  <  >  >=  <=  ==  !=  ===(全等，数据类型与值都要相等)  !==   返回值是布尔类型

逻辑运算符  &&  ||  !   对布尔值进行运算，返回值也是布尔类型。逻辑中断：当前一个表达式可以确定结果时，后面的表达式不再进行运算。

赋值运算符  =  +=  -=  *=   /=  %=   将右边的值赋值给左边的变量

优先级： 小括号 > 一元运算符 > 算术运算符  > 关系运算符  >  相等运算符  > 逻辑运算符  >  赋值运算符  >  逗号运算符

表达式  由数字、运算符、变量等组成的式子，最终都会有一个结果，这个结果就是返回值

流程控制

顺序结构 : 代码从上往下依次执行  

分支结构 ： 根据不同的条件选择性的执行。

　　if(条件表达式){}else if{}else{} 

       条件表达式 ?  表达式1 :  表达式2 ;

       switch(表达式){case 值:  执行语句; break; default: 表达式不满足时执行的表达式;}

循环结构 : 根据不同的条件重复执行某些代码。循环要设置终止条件以避免出现死循环的情况。

　　for(初始化变量;条件表达式;操作表达式){循环体}     

// 九九乘法表，外层循环控制行，内层循环控制列
        var str = '';
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                str += (j + 'x' + i + '=' + j * i + '\t');
            }
            str += '\n';
        }
        console.log(str);

　　

　　while(条件表达式){循环体}

　　do{循环体}while(条件表达式)

　　continue 立即跳出本次循环，继续执行下一次循环

　　 break  退出整个循环

断点调试：在程序某一行设置断点，程序运行这一行时就会停住，然后就可以一步一步往下调试，调试过程中可以看到各个变量的当前值。浏览器 > F12 > source > 设置断点后要重新刷新页面。

数组 可以将一组相关的数据存放在一起，方便访问和获取 。数组中的每个数据称为数组元素。元素可以是任何类型，元素之间用逗号分隔。

创建数组：  var 数组名 = new Array();   或      var 数组名 = [];

获取数组元素:   数组名[下标]   ,  下标由0开始

获取数组长度：数组名.length

遍历数组： 将数组中的每个元素从头到尾访问一次。

var arr = [1,2,3];
for(var i=0;i){
  console.log(arr[i]);  
}

新增数组元素： 1、增加数组长度，新增的元素默认值为undefined  2、追加数组元素，例： 数组名[新下标] = 值;  // 如果下标已存在，则是替换

冒泡排序   

从小到大排序：相邻两个元素比较，若左边的值大于右边的值，则两者交换位置。

从大到小排序：相邻两个元素比较，若左边的值小于右边的值，则两者交换位置。

        var arr = [1, 2, 3, 4, 5];
        for (var i = 0; i < arr.length - 1; i++) {
            for (var j = 0; j < arr.length - i; j++) {
                if (arr[j] < arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }

 函数  将一个或多个功能封装到函数中，对外提供一个简单的函数接口，可提高代码的复用率

// 声明函数1
function 函数名 (形参列表) { //函数体  或 return 返回值; }     

// return后面的语句将不会再执行，如果返回值是用逗号隔开的值列表，那么只有最后一个值会被返回。如果函数没有返回值，则默认返回undefined
// arguments是函数内置的一个对象，存储着传递到函数中的所有实参，存储方式为伪数组形式，可以通过arguments.length获取长度，arguments[下标]获取相应的实参，但不具备数组的push,pop等方法

// 调用函数1
函数名(实参列表);

// 函数声明2 将匿名函数赋值给一个变量
var 变量名  = function(形参列表){ // 函数体}

// 调用函数2
变量名(实参列表);

 作用域 

全局作用域 ： 整个script标签  或  一个单独的js文件。  在些作用域的声明变量称为全局变量。浏览器关闭时才会销毁，比较占内存。

局部作用域:     函数内。在此作用域的声明变量称为局部变量。如果在此作用域未声明而直接使用的变量，属于全局变量。函数运行结束后销毁，比较节省空间。

块级作用域 {}   es6新增

作用域链： 内部函数访问外部函数的变量，采用的是链式查找（一层一层往上查找）的方式来决定取哪个值。

预解析

JS解析运行JS代码时分两个步骤：预解析 、 代码执行。

预解析： JS解析器会将JS里所有var和function提升到当前作用域的最前面。分为 变量预解析(变量提升)和函数预解析(函数提升)

　　变量提升：把所有变量声明提升到当前作用域最前面，不提升赋值操作。

　　函数提升：把所有的函数声明提升到当前作用域最前面，不调用函数。

代码执行：按照代码书写顺序从上往下执行。

对象

对象：是一组无序的相关属性(事物的特征)和方法(事物的行为)的集合。是一个具体的事物。

创建对象： 

　　var 对象名 = {属性名:值 ，方法名: function(){} }; // 字面量方式     

　　var 对象名=new Object(); // 创建一个空对象  

　　构造函数：主要用来初始化对象，将对象里面的一些相同属性和方法抽象出来封装到函数里面。构造函数名首字母大写。主要泛指某类事物。

　　 function 构造函数名(形参列表) {this.属性名 = 值;  this.方法名 = function(){} }   // this 指向当前对象

　　 var  对象名 = new 构造函数名(实参列表);

使用对象： 对象名.属性名  或 对象名['属性名']  或  对象名.方法名()

遍历对象属性： for (var key in obj) {}  // k变量接收的是属性名  obj[k]  对应属性的值

JS中对象分为3类：自定义对象、内置对象、浏览器对象

内置对象

JS语言自带的对象,这些对象给开发者提供一些常用的功能(属性与方法)。

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。它的所有属性与方法都是静态的。

　　Math.PI  Math.floor()  Math.ceil()  Math.round()  Math.abs()  Math.max  Math.min()   Math.random()

　　两个数之间的随机整数(包含这两个数):  Math.floor(Math.random() * (max - min + 1) + min);

Date  用于处理日期与时间，基于1970年1月1日(世界标准时间)起的毫秒数。 

　　new Date();   new Date('2020-10-10 12:00:00')  

　　dateObj.getFullYear()  dateObj.getMonth()  dateObj.getDate()  dateObj.getDay()   dateObj.getHours()   dateObj.getHours()  dateObj.getMinutes()  dateObj.getSeconds()

　　dateObj.valueOf()  dateObj.getTime()   +new Date()    Date.now() // h5新增

Array 数组内置对象

　　new Array()     

       数组元素添加与删除 arrObj.push()   arrObj.unshift()    arrObj.pop()   arrObj.shift()   

       数组反转与排序  arrObj.reverse()  arrObj.sort()  

　　数组元素位置查询  arrObj.indexOf()   arrObj.lastIndexOf()  

　　转字符串  arrObj.toString()    arrObj.join(分隔符)

　　arrObj.concat()    arrObj.slice()   arrObj.splice()    

　　检测是否为数组  arr instanceOf Araay   或  Array.isArray()   // h5新增方法    

String 字符串内置对象

　　字符串的值是不可变的，平时看到的修改字符串，其实是新开辟的一块内存空间将入新的字符串，再将原字符串的地址指向新开辟的内存空间。

　　查找字符在字符串中的位置 strObj.indexOf()    strObj.lastIndexOf()   

　　根据位置返回字符   strObj.charAt()  strObj.charCodeAt()   str[index]  //  h5新增

 　　字符串操作  strObj.concat()  strObj.substr()   strObj.slice()   strObj.substring()  strObj.replace()   strObj.split()   strObj.toUpperCase()  strObj.toLowerCase()  

简单数据类型(值类型)与复杂数据类型(引用类型)

基本包装类型：就是将简单的数据类型包装成了复杂的数据类型。String、Number、Boolean

堆空间：存储复杂数据类型，一般由程序员分配与释放内存空间，若程序员不释放，由垃圾回收机制回收。

栈空间：存放简单数据类型，由操作系统自动分配和释放内存空间。