JavaScript学习笔记

概念

脚本语言：一行一行的翻译成机器语言，并一行一行的执行；而不是全部编译执行；

作用

表单动态校验、网页特效、服务端开发Node.js、桌面程序Electron、App（Cordova）、控制硬件-物联网（Ruff）、游戏开发（cocos2d-js）

执行

浏览器分成两部分：渲染引擎、JS引擎

渲染引擎：用来解析HTML和CSS，俗称内核，比如Chrome的blink；

JS引擎：也称为JS解释器，用来读取网页中的JS代码，对其处理后运行；

解释型语言（脚本语言）：翻译一句，执行一句；

浏览器本身并不会执行JS代码，而是通过内部JS引擎（解释器）来执行JS代码；

JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行；

组成

JS的组成：

ECMAScript（定义JavaScript的语法）：

DOM（Document Object Model文档对象模型）：是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小位置颜色等）；

BOM（Browser Object Model浏览器对象模型）：提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出对话框、控制浏览器跳转、获取分辨率等；

位置

JS的3种书写位置：

1.行内（写在开始标签内部）；

2.内嵌（HTML文件内部）最常用；写JS代码

3.外部（单独的JS文件）双标签；JS代码量比较大的情况，不会破坏HTML的结构化页面，把大段JS放到HTML页面之外；引用外部JS问价你的script标签中间不可以写代码；

注释

单行 注释 //，VSCode中，快捷键Ctrl+/

多行注释 /**/，VSCode中，默认快捷键shift+alt+a，建议修改为Ctrl+Shift+/

输入输出

alert(msg)浏览器弹出警示框

console.log(msg)浏览器控制台打印输出信息

prompt(info)浏览器弹出输入框，用户可以输入

变量

var age;console.log(age);只声明，不赋值；输出：undefined;

console(age);不声明，不赋值，直接使用；输出：报错；

age=10;console.log(age);不声明，直接赋值；输出：10

命名规范

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

区分大小写；不能数字开头；不能关键字；

驼峰命名规范；变量名有意义；

不能使用var name；

var $name;是合法的；

var 18age;var &sex; var the world;var theworld;都是错误的或者不符合规范的；

数据类型

根据=右边的值类型，进行类型推断；

变量的数据类型是可以变化的；var x=10;x=’hello’;

简单数据类型

lNumber 数字型，包含整形、浮点型；八进制（0开头）十六进制（0x开头）；

lBoolean 布尔类型true、false，等价于1/0；

lstring字符串，”张三”

lUndefined声明了，而未赋值的；

lNull空值；

Number.MAX_VALUE最大值（10的308次方）;

Number.MIN_VALUE最小值（10的-324次方）;

NaN表示非数字类型Not a Number；

Infinity无穷大，-Infinity负无穷大；

isNaN（）判定一个变量是否为【非数字】类型；

字符串必须加引号，单引号或者双引号；

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号；（外双内单，外单内双）

转义字符：\n,\\,\’,\”,\*,\t,\b空格（相当于&nbsp）；

转义字符必须放到引号里面（单引号双引号均可）；

“我是一个’高富帅’的\n程序员”

length获取字符串长度；

字符串拼接，用加号+，如果其中一个是字符串，另外一个就会自动转换为字符串类型，然后再进行拼接；

‘hello’+18;’hello’+18+’world’;’12’+12;

true当1，false当0；true+2就是3，false+2就是2；

Null+1还是1，这里Null相当于0；Undefined+1是NaN；

typeof null结果是object；

类型转换

toString（）转换为字符串；String（）转换为字符串；

字符串拼接时非字符串类型自动转换为字符串；

转换为数字类型parseInt（str）；parseFloat(str)；Number(str)；

隐式转换为数字：-*/运算符；

转为Boolean类型：Boolean（）；

能转换为false的：’’空字符串,0,NaN,null,undefined，其他都转换为true；

编译：一次性编译，全部编译完成后执行；

解释：解释一句，执行一句；

运算符

分类：算术、递增递减、比较、逻辑、赋值；

+-*/%浮点数的计算精度不如整数；

++前置，先返回，后自增；后置：先自增，后返回；–同理；

比较运算符：,=,

==判等号，会自动进行类型转换；

!=不等，会自动进行类型转换；

===全等，要求类型和值都相同；

！==不全等，类型和值有一个不同，就是不全等；

18==‘18’ true ; 18===’18’false;

逻辑运算符：&& || !

短路运算：如果左边的值能够确定表达式的值，就不再向右计算了；

赋值运算符：+=，-=，/=，%=，

语句

if(){}else if(){} else if(){} else{};三元a>b?a:b;seconds<10?’0’+seconds:seconds;

switch(expression){case 1:语句1;break;case 2:语句2;break;default:语句3;}

for(var i=0;i<10;i++){} while(){} do{}while() 后面都不用加分号；；

var arr=new Array();var arr=[];var arr=[1,’hello’,true];

数组里面的各个元素数据类型可以不同；

数组的长度可以改变，可以向数组中添加新的元素；

添加数据arr[1]=1;arr[4]=6;如果索引已经存在，就覆盖原值，否则添加新数据；

不要给数组名赋值，会覆盖掉所有数组数据；arr=’hello’;

函数

function f(){} function f2(p1,p2){} function(){return 666;}

function getMax(a,b){return a>b?a:b;} return只能返回一个值；

function fn(){console.log(arguments);console.log(arguments.length);}

全局作用域：整个script标签或者一个单独的js文件；

局部作用域：函数内部；

ES6中有第三种作用域：块级作用域，就是大括号{}范围内；

预解析

函数调用可以放在函数定义之前；

JS引擎运行分为2步：预解析，代码执行；

预解析会把JS里面所有var和function提升到当前作用域的最前面；

对象

{}大括号，对象字面量；[]中括号，数组字面量，()小括号，提升优先级运算符；

创建对象3种方式：字面量{}，new Object，构造函数；

var obj={name=’Cat’,age=22,sayHi:function(){console.log(“hello”);}}

多个属性和方法之间用逗号，隔开；

属性和函数都是用键值对语法格式：age:18；

obj.name;obj[“name”];obj.sayHi();

var obj=new Object();

obj.uname=’Tom’;

obj.age=22;

obj.sayHi=function(){console.log(‘hello’);

构造函数名首字母要大写；

构造函数不需要return语句；

调用构造函数，必须要用new关键字；

function Star(uname,age,sex){

this.name=uname;

this.age=age;

this.sex=sex;

this.sing=function(song){console.log(song);}

}

var ldh=new Star(‘刘德华’,18,’男’);ldh.sing(‘冰雨’);

new的执行过程：

1.在内存中创建一个新的空对象；

2.让this指向这个对象；

3.执行构造函数里面的代码，给这个新对象添加属性和方法；

4.返回这个新对象（所以构造里面不需要return）；

遍历对象成员：

for(var k in obj)

{console.log obj.k;//输出属性名

console.log(obj[k]);//输出属性值

}

内置对象

JS对象分类3种：自定义对象，内置对象，浏览器对象；

内置对象有：Math对象，日期对象，数组对象，字符串对象；

查阅文档：https://developer.mozilla.org

如何学习一个方法：功能，参数，返回值，测试；

Math.PI;Math.max(1,2,3);Math.random();Math.floor();

Math.random() 函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1）;

var date=new Date();

获取总的毫秒数（时间戳）从1970年1月1日起：

date.valueOf();date.getTime();

var date=+new Date();date;Date.now();

arr isinstanceof Array、Array.isArray(arr);判定变量是不是数组；

arr.push(3);添加元素；

arr.pop();删除数组最后一个元素；返回值是删除的元素；

arr.shift();删除数组第一个元素；返回值是删除的元素；

arr.reverse()翻转数组；

arr.sort(function(a,b){return a-b;})升序排序数组;

arr.sort(function(a,b){return b-a;})降序排序数组;

arr.indexOf();arr.lastIndexOf();获取元素索引；

arr.toString();arr.join(‘-’);数组转字符串；

包装类型：将基本类型包装成复杂类型；

var str=’hello’;=>var temp=new String(‘hello’);var str=temp;

3个包装类型（引用类型）：StringNumber、Boolean；

str.indexOf(“h”,3);str.charAt(3);

concat(str1,str2,str3,,,,);sbustr(start,length);slice(start,end);substring(start,end);

str.replace(‘a’,’b’);str.split(‘,’);