Javascript

诞生

布兰登·艾奇 (Brendan Eich) 只用了10天就将这个JavaScript语言设计出来了。Eich后来说这10天他都没怎么休息，听这个话有一丝抱怨在里面，可以想象得到的是，一方面是设计目标与自己的设想不对付，一方面是开发进度要求很高。Eich当时在心情不太好的情况下，难免有完成任务交差的嫌疑。这也埋下了JavaScript语言先天不足的隐患。最后这10天赶货赶出来的JavaScript是一个大杂烩，语法有多个来源。

（1）基本语法：借鉴 C 语言和 Java 语言。

（2）数据结构：借鉴 Java 语言，包括将值分成原始值和对象两大类。

（3）函数的用法：借鉴 Scheme 语言和 Awk 语言，将函数当作第一等公民，并引入闭包。

（4）继承模型：借鉴 Self 语言（Smalltalk 的一种变种）。

（5）正则表达式：借鉴 Perl 语言。

（6）字符串和数组处理：借鉴 Python 语言。

是什么

JavaScript 是一门跨平台、面向对象的动态的

弱类型的轻量级解释型语言。

特点

• 弱类型
• 基于对象-一切皆对象
• 解释型-即时编译型
• 事件驱动
• 单线程/异步

应用场景

• 跨平台：pc/移动端

• 游戏

• h5

• 网页动画效果

• 连接服务器-PostgreSQL

• 桌面端应用

• 开发服务器nodejs

• app

• 操作数据库-

  .....

版本

Es5 \ es6(后面版本泛指)

组成部分

• ECMAScript 基本语法
• BOM 浏览器对象模型
• DOM 文档对象模型

后缀

.js

引入方式

• 嵌入式

  <script></script>
  

  在使用行内 JavaScript代码时，要注意代码中不能出现字符串 </script>。比如，下面的代码会导 致浏览器报错：

  <script>
  function sayHi() {
  console.log("</script>");
  }
  </script>
  

  vscode

  页面渲染

• 外部引入

  <script src="js路径"></script>
  

  上述代码不报错

注释

// 单行注释 ctrl + /

/*
*多行注释
*/

Better Comments 插件

代码注释高亮vscode插件

输入输出工具

ECMAScript，即 ECMA-262定义的语言，并不局限于 Web浏览器。事实上，这门语言没有输入和 输出之类的方法。 Web 浏览器是 ECMAScript 实现可能存在的一种宿主环境。浏览器为ECMAScript提供扩展--DOM操作

方法 ：document.write()在页面中输出内容alert()在页面中弹出

console.log()在控制台输出内容

prompt()输入工具：弹窗输入内容

变量

变量是存放数据的容器

es5：var 声明变量

es6：let 声明变量

const: 声明一次，不可改变

变量命名规则

• 严格区分大小写
• 必须以字母 _ $ 开头，不能以数字开头，中文命名
• 不能用关键字或者保留字
• 命名习惯：首字母大写或驼峰命名
• 命名有意义

关键字

• 关键字

break	do	in	typeof	case	else	instanceof	var	catch	export
new	void	class	extends	return	while	continue	for	switch	yield
debugger	function	this	default	if	throw	delete	import	try

• 未来的保留字

  虽然在语言中没有特定用途，但它们是保留给将来做关键字用的。

• 严格模式下保留

implements	package	public
interface	protected	static
let	private

• 模块代码中保留: await

严格模式是一种不同的 JavaScript 解析和执行模型，一些不规范写法在这种模式下会被处理，对于不安全的活动将抛出错误。

要对 整个脚本启用严格模式，在脚本开头加上这一行：

"use strict";

也可以单独指定一个函数在严格模式下执行，只要把这个预处理指令放到函数体开头即可：

function doSomething() {
"use strict";
// 函数体
}

声明：

• 声明的同时赋值

  var num= 10;
  var name = "张三";
  

• 先声明后赋值

  var num;
  num=10;
  

• 声明多个变量，中间用逗号隔开：

  var a,b,c;
  //
  var a=10,b=20,c=30;
  

数据类型

数据类型分类：

• 初始数据类型：

  undefindes，null，number，string，boolean，Symbol（es6代表独一无二的值）

• 引用数据类型

  object

  {}对象，[]数组，function（）{}函数

检测数据类型

typeof 要检测的数据

数据类型	结果
undefined	undefined
null	object
10	number
“张三”	string
true/flase	boolean
Symbol()	symbol
{}	object
[]	object
function(){}	function

变量的内存划分

js内存分为栈区和堆区

栈区存储初始数据类型（FILO）

堆区存储引用数据类型

初始数据类型更新变量会直接替代变量的值

引用数据类型更新变量会改变引用地址

运算符

• 算术运算符
• 关系(比较)运算符
• 赋值运算符
• 逻辑运算符
• 一元运算符
• 三元运算符
• 特殊运算符

运算符规则

+-*/% ** ++ --

+:运算，字符串拼接

如果可以转换为数字，那么就转换数字

不行，就转换为NaN。

运算规则如下：

• undefined -> NaN
• null-> 0
• true->1
• flase->0
• 除加号以外 "" ->0
• 任意数据类型与字符串相加都属于字符串拼接

var num = 10;
console.log(num++);//10   console (++num); //11
console.log(num--);//10   console (--num); //9

关系运算符

<,>,>=,<=,==,!=,===（全等）,!==(不全等)

比较过程中转不了就是flase

• undefined ->NaN
• NULL->0
• true->1
• flase->0
• true/flase 比较的时候先转换再比较
• 等于判断 null 不进行转换
• 字符串与字符串比较，比较的是对于ASCII码

特殊记忆

null == undefined//true

NaN == NaN //flase

== 和 ===的区别：

==值相等

=== 值相等，类型相等

赋值运算符

= ,+=,*=,-=,**=,/=,%=

+= 和算术运算符类似，+可以用作字符串拼接

var n=10;
n+=10; //相当于n=n+10;
console.log(n); //20

逻辑运算符

&& ,||或, !非

&& 都真为真

||都假为假，一真为真

!：取反，

短路原则：

• && 前假后不执行；
• ||前真后不执行；

三元运算符

特殊运算符

• 逗号，

  var a,b,c;
  

• 括号（）

(10+2)*3
!(null == "" || 100>"a")

流程控制

流程：代码执行顺序。

• 顺序结构：代码从上到下执行
• 选择结构：根据给定的条件有选择执行
• 循环结构：根据给定的条件反复执行

选择结构

• if分支

  • 单路分支

    if(条件表达式){
      // 条件表达式成立执行
    }
    

  • 双路分支

    if(条件表达式){
      // 条件成立执行
    } else {
      // 条件不成立执行
    }
    

  • 多路分支

    if(条件1){
      // 条件1成立执行
    } else if(条件2){
      // 条件1不成立，条件2成立执行
    } else if(条件3){
      // 条件1、条件2不成立，条件3成立执行
    } else {
      // 条件1、条件2、条件3都不成立执行
    }
    

  • 嵌套分支

    if(条件1){
      // 条件1成立执行
      if(条件2){
         // 条件1、条件2都成立
         if(){........}
      } else if(条件3){
          // 条件1、条件3都成立
      } else {
          // 、条件2、条件3都不成立
      }
    } else {
       // 条件1不成立执行
    }
    
    

• switch分支

  switch(需要判断的值){
    case 值1:
       执行内容
       break;
    case 值2:
       执行内容
       break;
    default:
      执行内容
  }
  

  if与switch选择：

  • 如果需要判断条件，选择if
  • 如果判断的是单个值，选择switch

循环结构

• for 循环

  for(初始值;终止条件;步进值){
    // 循环体
  }
  
  // 循环输出0-10
  for(var i=0;i<11;i++){
    console.log(i)
  }
  

  break：终止当前循环

  continue：跳过当前循环

• for...in 循环

  let obj = {
      a: 'a1',
      b: 'b2',
      c: 'c3',
  
  }
  for (const key in obj) {
      console.log(key);
  }
  //=>abc
  
  let str =  'abc'
  for (const key in str) {
      console.log(key);
  }
  //=>123
  

• for...of 循环

  let arr= [2, 4, 6, 8]
  
  for (const el of ) {
      console.log(el);
  }
  //=>2468
   let str =  'abc'
  for (const el of  str) {
      console.log(el);
  }
  //abc
  

• while 循环

  while(条件表达式){
    // 循环体
  }
  
  // 循环输出0-10
  var i=0;
  while(i<11){
    console.log(i);
    i++
  }
  

• do...while 循环

  do{
    // 循环体
  }while(终止条件)
  
  // 0-10
  var i=0;
  do{
    console.log(i);
    i++
  }while(i<11)