[JavaScript知识库] javascript day1

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> javascript day1 -> 正文阅读

[JavaScript知识库]javascript day1

通常所说的Javascript是应用在浏览器中，一般包括ECMAScript、DOM、BOM。 ECMAScript为标准，DOM为浏览器提供的js操作html/css的Js api，BOM为浏览器提供的js操作浏览器的Js api。而Javascript如果应用在nodejs中，则通常用于服务器端编程，可以进行io操作,网络操作等。
特点
客户端代码，在客户机上执行
1.JavaScript特殊的地方在于它也可以作为服务器端代码执行，但是需要搭建Node环境。node hello.js
2.在浏览器上运行
解释性语言
从上往下顺序解析执行
1.系统环境：
Linux 操作系统的环境*
Windows
2.编辑器
vi、vim*
vscode/sumlime
3.运行环境
旧：JavaScript不能独立运行+网页+console/fireBug
nodejs*
4.调试：
火狐：firebug
console.log()/弹框alert
报错信息、通篇看一遍，断点、二分查找
2. js组成

ECMAScrpt 【js标准】（兼容器100%） (类似于CoreJava，制定了基础的语法)
注释 // 、/**/
变量
操作符
流程控制语句
数组
对象
函数
正则表达式
…
所有的JS解释器都可以兼容ECMAScript
【lodash】 ECMAScript库
DOM：Document Object Model文档对象模型
js操作html的api
是针对XML但经过扩展用于HTML的应用程序编程接口。DOM将整个页面映射成一个多节点结构。
var dom=document.getElementsByTagName(“input”);
var dom=document.getElementById(“input_name”);
dom.οnclick=function(){}
js语言：基础语法、基础库、扩展库（jQuery DOM库）
BOM：Browser Object Model 浏览器对象模型
js操作浏览器的api
开发人员可以使用BOM控制浏览器显示的页面以外的部分。弹出新浏览器窗口；移动，缩放，关闭浏览器的功能；提供浏览器详细信息的navigator对象;提供浏览器所加载页面的详细信息的location对象；提供用户显示器分辨率详细信息的screen对象；对cookies的支持；支持XMLHttpRequest,IE中的ActiveXObject自定义对象
alert()/prompt()/confirm()
setInterval(),setTimeout()
XMLHttpRequest
Ajax
这里需要注意的是，只有ECMAScript是标准，也就是在绝大多数浏览器以及js解析器（node）中运行效果相同，但是DOM与BOM是各大浏览器厂商自己提供的API，在使用上大同小异，但是也可能会出现少许不兼容的情况

js解释器：
1）浏览器厂商：Firefox（js标准）、IE(js)、Google(js)
兼容性:
JavaScript的三个组成部分，在当前五个主要浏览器（IE,Firefox,Chrom,Safari,Opera）中得到了不同程度支持，其中，所有浏览器对ECMAScript3支持大体都还不错，对ECMAScript支持程度越来越高，但对DOM的支持彼此相差较多，对已经正式纳入HTML5标准的BOM来说，尽管各浏览器都实现了某些总所周知的共同特性，但其他特性还因浏览器而异。
2）nodejs【网络编程(http模块)/数据库操作(mysql)/IO文件(file)】
http://nodejs.cn 可以安装linux window macos unix
特征：可以运行在客户端、服务器端，解释性语言，弱类型语言，从上到下顺序执行。
浏览器开发使用:
*.html <script></script> *.html *.js <script src></script>

本地双击html文件打开的  file://
 /var/www/html/xiangmu   http://

node的使用：ES5,ES6,VUE/Reat
repl环境去运行js代码(Read-Eval-Print-Loop)的可交互式运行环境
node –v 输出版本号
node hello.js 执行js代码
node hello 执行同名js代码
node
>.help
>.save xx.js
>.load hello.js
>.editor
>var a=10;
>a //node环境特有的查看变量的结果，不是js的语法
>console.log(a);

学习方式
环境： ubuntu16.04 / 阿里云
软件： nodejs、vi(spf13)、git
使用sudoer用户登录
在家目录中编写测试代码

js特点
1) 解释型语言
js -> nodejs(js解释器)
2) 弱类型语言
变量的数据类型取决于值的数据类型
var a ;
a = 2; // a的数据类型为number
a = true; // a的数据类型为boolean
3) 顺序解释执行
4) 既可以作为前端脚本语言，也可以作为后端语言，取决于应用平台（浏览器/操作系统）和使用的框架（dom、jquery/http、mysql、file）

在网页中使用JavaScript
内部JavaScript
编写好HTML，在<head>标签体中添加<script>元素，然后将JS代码填写进来即可。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title
<style type="text/css">
body{
margin:0;
padding:0;
}
</style>
<script  type="text/javascript">
var str="hello world";
console.log(str);
</script>
</head>
<body>
</body>
</html>

在网页中使用JavaScript
外部JavaScript
单独新建一个后缀名为.js的JS文件，编写好HTML文件，在<head>标签体内添加<script>元素，使用script标签的src属性将将JS文件导入进来。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title
<style type="text/css">
body{
margin:0;
padding:0;
}
</style>
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>

注释
与绝大多数语言类似，JavaScript也需要注释来说明其代码含义，或者用来进行代码调试，注释后的代码会被浏览器忽略不被执行。
单行注释
// I am a comment
多行注释
/*
I am also
a comment
*/

通过<script>元素，有如下几个属性
type : 可看做是language的替代属性，表示编写代码使用的脚本语言的内容类型，MIME这个属性非必须，默认是text/javascript
src : 表示包含要执行代码的外部文件

   async  ：立刻下载脚本，但应妨碍页面中其他操作（只针对外部脚本文件）
   charset : 指定src属性指定的代码的字符集，大多数浏览器会忽略这个值。
   defer  : 表示脚本可以延迟到文档全部被解析和显示之后再执行（只针对外部脚本文件）
   language: 已废弃

【注意事项】
1.不要在<script>标签中再填写其他js代码，否则将会忽略
2.src 可以跨域访问。例如：http://cdn.code.baidu.com/ 百度静态资源公共库
3.标签位置<head>标签中：等到全部的js代码都被下载，解释和执行完成后才能开始呈现页面的内容。可将代码引用放到<body>元素放到内容后面。
4.延迟脚本 defer=“defer”，延迟至浏览器遇到</html>标签后再执行。如果有多个延迟脚本，并不会按照顺序执行。最好包含一个延迟脚本，并且将其放在页面最底部，该属性适用于外部引用的js
当浏览器不支持脚本或者浏览器支持脚本，脚本被禁用，可以让页面平稳的退化

<noscript>
  本页面需要浏览器支持（启用）javascript	
</noscrpt>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第一个js</title>
	<script type="text/javascript">        
      //单行注释
      /*
        多行注释
        语句的结束：分号 、回车
        */
        /*
        var b="nihan
        nnn"+"sssss"
        +"dddd";
        */
      console.log('hello world');
      console.log(`你在电脑前看这段文字，
写文字的人在百度等你。
N年前你来到了这个世界，
N年后你想改变世界。

期待你脚踏祥云，
与百度一起改变世界。`)
      alert("弹框");
      document.write("hello 我是输出到页面上的");
	</script>
	<script type="text/javascript" src="./js/first.js" charset="GBK" defer>
        console.log("测试引入外部文件的script标签是否还会执行标签内部代码:不会被执行");
	</script>
</head>
<body>
	<h1>你好！</h1>
	<noscript>
        不好意思，您该更新浏览器了。。
	</noscript>
	<!--网络速度、执行顺序原因，js习惯在这里去引入：body的last-child-->
	<script type="text/javascript">
        //BOM：弹框有三种：警告框、会话框、确认框
        // 警告框
        alert("弹框");
        // 会话框
        var str = prompt("我是输入框，请输入你的年龄");
        console.log(str);//开发者使用的，生产环境：需要注释或者删除
        console.log(typeof str);
        // 确认框
        var bool = confirm("你确定吗？");
        console.log(bool);
        console.log(typeof bool);
     </script>
</body>
</html>

// ./js/first.js
alert(“外部文件”);
/console.log(“控制台输出-外部文件”);/
var b=100;
//b //不是ES语法，是node提供的快捷操作
console.log(b)
3.关键字与保留字
关键字:(在JS中有特殊功能)
break do try typeof
case else new var
catch finally return void
continue for switch while
debugger this function with
default if throw instanceof
delete in

保留字：(将来可能成为关键字)
abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger double implements protected
volatile import public

区分大小写
typeof 关键字， typeOf 非关键字
标识符
指变量，函数，属性的名字或者函数的参数。标识符是按照以下规则组合起来的一或多个字符：
1.字母，数字，下划线， $组成 2 . 只能以字母，下划线，$ 开头。
3.不能将关键字作为标识符。命名采用驼峰式命名
语句
每个语句以分号结尾，如果省略分号，由解析器确定语句的结尾，即分号可以省略，但是我们要求每个语句的末尾都应该有分号，

4.变量
变量是一个值的容器，该容器的值可以随时改变。ECMAScript的变量是弱类型（松散类型），可以用来保存任何类型的数据。定义变量时使用var关键字。
变量的使用：
声明 var message;
初始化 message = “hello”
声明并初始化 var message = “hello”;
定义多个变量 var message= “hello”,found=false, age = 29;
变量名的命名规则：
变量名由字母，数字，下划线以及$组成。
不要使用下划线或者数字作为变量名的开头
变量名应该具有一定的意义，使用小驼峰命名规则 var userAgeTotal = “”;
不要使用关键字或是保留字

?变量的使用
变量的使用一般用经过声明，初始化，使用三个步骤
// 变量声明
var a ;
// 变量初始化
a = 3;
// 变量调用
console.log(a);
?js是弱类型的语言
弱类型语言具有如下特点：
?变量的数据类型在初始化的时候
?变量的数据类型可以随时发生改变
?类型细分不明显
?Java 是强类型语言
1)变量的数据类型在声明的时候确定
2)变量的数据类型一定确定不能更改
? var
var用于声明一个变量，在es6中，可以通过let声明一个变量，通过const声明一个常量
?1. 变量可以重复声明
var a =b=c= 3;
var d=10,e=20,f,g;
//弱类型语言，变量容器可以混合使用
var a = “hello world” ;//变量的重复赋值（相同的数据类型、不同的数据类型）
function a(){}
?变量声明会被提升 (函数的声明也会)
//console.log(b);//报错
console.log(a);//不会报错
var a = 3;
//等价于：
var a;//在所有代码执行之前，js解释器会将js中所有的var声明的变量提升。
console.log(a);
a=3;
?var声明的变量的作用域
function foo(){
if(true){
var a = 3;
console.log(“inner”,a);//inner 3
}
console.log(“outer”,a);//inner 3 //没有块级作用域
}
foo();
console.log(a);//error! 函数作用域：局部作用域
//如果在函数中定义变量没有加var，该变量为全局变量
function test(){
message = “hello”;
}
test();
alert(message); //可以访问
//用var操作符定义的变量将成为定义该变量的作用域中的局部变量,例如：文件内的全作用域
// 分析
var a = 1;
function b() {
a = 10;
return;
}
b();
console.log(a);//10
//系统的全局作用域
// 分析
x = 1;//window.x global.x
console.log(x); //1
function y() {
console.log(x); //undefined
console.log(this.x);//1
　　var x = 2;
console.log(x); //2
}
y();
console.log(x);//1
//函数作用域：局部作用域
// 分析
var a = 1;
function b() {
a = 10;
return;
//a函数声明，提前变量a，将a认为是函数b作用域的变量，具有局部效果
function a(){}
}
b();
console.log(a);
5.数据类型
Java–不讲
编译型语言
java -> .class -> jvm（java解释器）
强类型语言
变量的数据类型取决于声明的数据类型
int a ;
a = 3;
a = 8;
无符号整数char
有符号整数byte short int long
有符号小数float double
布尔类型boolean
强类型语言：
整数：char,byte,short,int,long
浮点：float,double
布尔：boolean
类类型：Object
Null
弱类型语言JavaScript：
变量用var去声明，根据赋值决定数据类型
字符串：”aaa”,’aaa’,’a’,”a”，‘{“name:zs”,”age”:12}’
数字：10,11.1,0x11,12e7
布尔：true,false
null表示空对象
undefined:表示未定义
undefined extends null undefinded==null结果为true
对象 var dog = { name : ‘Spot’, breed : ‘Dalmatian’ };
数组var arr = [1,2,3,4];
函数
正则表达式
…

?基本数据类型
Undefined
未定义类型 undefined
var a ; var a = undefined;
Null
空引用数据类型 null
var a = null;
Boolean
布尔类型，取值为 true/false，通常用于条件判断
var a = false;
Number
数字类型。整数/浮点数
String
字符串类型，需要使用单引号或者双引号括起来
var a =‘true’; var a=‘1’;
var a =‘hello’;

?Number
Number
数字有很多类型，按照数字精度可以分为整数(int),单精度(float),双精度(double )，按照数字的表示方法可以分为二进制(Binary)，八进制(Octal)，十进制(decimal system)，十六进制(Hexadecimal)。但是在JS中，所有的数字统一使用Number来表示。
表示方法
整数：
十进制 55 由0~9组成
八进制 070 首位为0，其他位有0~7组成
十六进制 0x11 首位为0x，其他位为0_9，AF
浮点数：
所谓浮点数值，就是该数值中必须包含一个小数点，并且小数点后必须至少有一位数字。浮点数值的最高精度是17位小数
普通浮点数 3.1415926
科学计数法 3.125e7 即31250000
非数值：
该数值表示一个本来要返回数值的操作数未返回数据的情况
var a = 10/ “a”; // a为NaN
非数值检测：
判断参数是否“不是数值”，当参数para不是数值的时候返回true
isNaN(NaN); // true
数值范围：
由于内存的限制，ECMAScript不能保存世界上所有的数值。ECMAScript能表示的最小数值保存在Number.MIN_VALUE中，能表示的最大的数值保存在Number.MAX_VALUE中。如果某次计算的结果超过了JavaScript数值范围，将会返回Infinity(正无极)或者-Infinity(负无极)
var a = 9/0; // Infinity
Number.MIN_VALUE 5e-324
Number.MAX_VALUE 1.7976931348623157e+308
数值范围检测：
使用 isFinite()函数可以判断参数是否在最大值和最小值之间，如果在，返回true
Var a = isFinite(9/0); // false

//number类型数值类型取值：整数，单精度，双精度，十进制，二进制，八进制，十六进制，科学计数法
var v1 = 3;
var v1 = 3.;
console.log(v1);//3
console.log(typeof v1);//‘number’

var v2 = (0.110+0.210)/10;
console.log(v2);//0.3
console.log(typeof v2);//‘number’

var v3 = 10/‘a’;
console.log(v3);//NaN
console.log(typeof v3);//‘number’

// finite 有穷
// infinity 无穷rue
// -infinity–[有穷]–+inf
//如果某次计算返回了正的或者负的Infinity,那么该值无法继续参与下一次计算。可以使用isFinite(para)函数判断para 是否在最大数最小数之间
var v4 = -1.79e+309;
console.log(v4);//-Infinity
console.log(typeof v4);//‘number’

var v5 = 0.5e+325;
console.log(v5);//Infinity
console.log(typeof v5);//‘number’
console.log(isFinite(v5));//true

// 八进制
//首位为0,其他位为（0~7 如果字面值超出了范围，前导0将会被忽略）
//070 （表示 7*8一次方 = 56）
//079 （超过了范围，表示79）
var v6 = 010;
console.log(v6);//8
console.log(typeof v6);//‘number’
// 十六进制
var v7 = 0x10;
console.log(v7);//16
console.log(typeof v7);//‘number’

//任何涉及到NaN的操作都会返回NaN; NaN与任何值都不相等，包括NaN本身。
// isNaN() NaN not a number
// var v8 = 10/‘c’;
// isNaN是会自动将参数转换为number类型再判断。如果是NaN就返回true，如果不是NaN就返回false
var v8 = “10”;
console.log(isNaN(v8));//false
//Number的范围
console.log(Number.MIN_VALUE);
console.log(Number.MAX_VALUE);
?String
该类型表示由零个或者多个16位Unicode字符组成的字符序列，即字符串。字符串可以由双引号或者单引号表示
字符字面量，转义字符
\n 换行 \t 制表 \b 退格
\r 回车 \ 斜杠 ’ 单引号
" 双引号
字符长度
通过length属性获取字符长度
该类型表示由零个或者多个16位Unicode字符组成的字符序列，即字符串。字符串可以由双引号或者单引号表示
var a = “hello world”
var a = ‘hello world’
var a = <ul> <li>terry</li> <li>larry</li> <li>tom</li> </ul>;
var json = ‘{“name”:“terry”,“age”:12}’ //json字符串
var str = ‘“湘南”’;
console.log(str);
console.log(str.length);
var s4=‘a\r\n\t\t\tb’;
var s5=‘a’b’;
var s6=“a’b”;
var s7=‘a"b’;
var s7=‘a"b’;
?Boolean
var a = true;
var a = false;
var b=null==undefined;
Null
该类型的取值只有一个，即null。null可以表示一个空对象的指针。
var a = null;
使用场景
如果一个变量准备将来保存对象，可以将该变量初始化null而不是其他，这样可以通过检查null值就可以知道相应的变量是否已经保存了一个对象的引用。
if(car !=null ){ //car对象执行某些操作}
Undefined
该类型只有一个值undefined。对未声明和未初始化的变量执行typeof操作符都返回undefined。
var a;
console.log(a); // undefined
console.log(typeof a); // undefined
null vs undefined
实际上 undefined 派生自null值。undefined == null 结果为 true，null与undefined用途不同，null可以用来表示一个空对象，但是没有必要把一个变量的值显式设置为undefined。

?Null
【使用情景】
如果一个变量准备将来保存对象，可以将该变量初始化null而不是其他，这样可以通过检查null值就可以知道相应的变量是否已经保存了一个对象的引用。
var a = null;
if(car !=null ){
//car对象执行某些操作
}
?Undefined
var a;
console.log(a,typeof a);//undefined ‘undefined’
var a = undefined;
console.log(a,typeof a);//undefined ‘undefined’
undefined 与null关系：
undefined继承null，所有undefined == null结果为true,但是null表示空对象，undefined表示未定义
null与undefined用途不同，null可以用来表示一个空对象，但是没有必要把一个变量的值显式设置为undefined
//null vs undefined
console.log(undefined == null); //true //undefined派生自null
console.log(undefined === null);//false
if(null == undefined){console.log(‘相等的’)}
if(null === undefined){console.log(‘完全相等’)}
?引用数据类型
引用数据类型
在JS中除了以上基本数据类型，其他所有类型都可以归结为引用数据类型。
对象Object
对象是模拟现实生活的对象，对象由键值对组成，通过使用大括号将所有键值对括起来。
var dog = { name : ‘Spot’, breed : ‘Dalmatian’ };
数组Array
数组是一个特殊的对象，包含了多个值，值与值之间使用逗号分隔开，所有的值通过中括号括起来。
var myNameArray = [‘Chris’, ‘Bob’, ‘Jim’];
var myNumberArray = [10,15,40];
函数Function
函数是代码执行单元，用于实现某些特殊的功能。
function add(a,b){
return a + b;
}
内存图：
变量都维护在栈区，基本数据类型的值保存在栈区，而引用数据类型的引用地址保存在栈区，值保存在堆区
变量的引用地址保存在栈区，真正的值保存在堆区，除了基本数据类型之外的所有其他数据类型被称为引用数据类型
var a = {name:“terry”,age:12}
var a = [18812344321,15912344321];
var a = function(){}
var a = /[abc]def/i
//对象内有数组，访问对象内的属性值
var obj = {
tsp:123,
db:55,
time:‘2020-03-24 14:20:30’,
test:[‘设备一’,‘设备11’]
};
?深拷贝与浅拷贝
主要针对于引用数据类型参数说的，浅拷贝表示仅拷贝引用地址，深拷贝表示对于对象的克隆

var a = {name:“terry”,age:12}
// 浅拷贝【地址拷贝】
var b = a;
b.age++;
console.log(a.age);
/*
// 深拷贝【克隆】

json 对象 ->json -> 对象
Object.assign({},a)
lodash
*/
var a = 3;
var b = a;
b++;
console.log(a);

5.类型判断
在实际开发中，我们经常要判断一个变量的数据类型。
?typeof
使用typeof判断数据类型
返回该变量名所指向数据的类型
语法： typeof 变量名
返回值如下：
“undefined” 未定义
“boolean” 布尔类型
“string” 字符串
“number” 数值
“object” 对象或者null或者数组
“function” 函数

通过typeof可以判断一个变量的类型
var a = 3;
typeof a; // number
if((typeof a) == “string”){}
if(a == “null”){}
if(a == null){}
?isNaN
判断是否是不是一个数字
var a = 10/‘a’;
isNaN(a); //true
?isFinite
判断是否是一个有效值
var a = 10/0 ;
isFinite(a) // false
?深拷贝浅拷贝（拓展）
var a = {name:“terry”,age:12}
// 浅拷贝【地址拷贝】
var b = a;
b.age++;
console.log(a.age);