关于前端:前端JavaScript基础知识

简介

什么是 JavaScript？

JavaScript ( JS ) 是一种具备 函数优先 的轻量级，解释型或即时编译型的编程语言。

函数优先：编程语言中的函数能够被当作参数传递给其余函数，能够作为另一个函数的返回值，还能够被赋值给一个变量。

解释型 ：对标 编译型 语言，编译型需事后将源码编成两头码，再由解释器解释运行。解释型不须要事后编译，在程序在运行时才由解释器翻译运行。

JavaScript 的规范是 ECMAScript 截至 2012 年，所有的 古代浏览器 都残缺的反对 ECMAScript 5.1，旧版本的浏览器至多反对 ECMAScript 3 规范。

咱们所熟知的 ES6 是在 2015 年 6 月 17 日，由 ECMA 国内组织公布的 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015。

https://developer.mozilla.org…

应用场景

互联网的衰亡，JavaScript 的应用范畴曾经超出了浏览器。

1. 浏览器平台。HTML5 的呈现，浏览器自身的性能越来越强，JavaScript 因而得以调用许多零碎性能，如操作本地文件、操作图片、调用摄像头和麦克风，能够开发更多富客户端产品。
2. 服务端利用。node 的呈现使得 JavaScript 能够用于开发服务器端利用，也使得 JavaScript 成为一门能够同时开发前后端的语言。
3. 挪动利用。js 也正在成为手机利用的开发语言，比方：React Native 我的项目则是将 JavaScript 写的组件，编译成原生组件。
4. 桌面利用。JavaScript 甚至能够开发桌面利用，比方 electronjs。
5. 数据库操作。在一些 Nosql 数据都是反对 JavaScript 作为操作语言，像 mongodb。

根本语法

变量

变量是对值的援用，JavaScript 的变量名辨别大小写，A和 a 是两个不同的变量。

var total; // 未赋值的变量是 undefined，它是个非凡的值，示意无定义。total = 1;
var a,b; // 一个 var 后能够申明多个变量。

变量晋升

你可能很奇怪，执行上面代码没有报错。因为 JavaScript 引擎工作形式是先解析代码，获取所有被申明的变量，换句话说就是所有的变量的申明语句，都被晋升到代码的头部。

console.log(a);
var a = 1;

变量规定

• 第一个字符任意 Unicode 字母（包含英文字母和其余语言的字母），以及美元符号（$）和下划线（_）
• 第二个字符及前面的字符，除了 Unicode 字母、美元符号和下划线，还能够用数字0-9。

另外中文也能够申明变量，上面保留字除外

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

语句

JavaScript 程序的执行单位行，个别状况一行就是一条语句，如果一行要写多个语句咱们应用 ; 示意语句完结。

var total = 1 + 1; // 申明了一个变量 total，而后将 1 + 1 的运算后果赋值给它。

正文

// 这是单行正文

/*
 这是
 多行
 正文
*/

区块

JavaScript 应用大括号将多条语句包裹起来示意一个区块，留神 var 申明的变量不形成独自的作用域，这里区别于 java。

{var a = 1;}
a // 1

条件语句

// if 构造
if (m === 1){ // 往往由一个条件表达式产生的
    console.log('ok')
}
// 或者
if (bool) console.log('ok');

// if/else 构造
if (m === 1){语句;}else{语句;} 

// if/else if.../else 构造 m==1 m==2 其它
if (m === 1) {} else if(m === 2){}else {}

switch 构造

switch (m) {
  case 1:
    // ...
    break;
  case 2:
    // ...
    break;
  default:
    // ...
}

留神区别 == 与 ===

应用 == 比拟两个变量时，会产生隐式类型转换，例如，主动将字符串类型转换为数字类型。

为了防止隐式转换带来的问题，咱们都是用 === 进行严格进行比拟。

三元运算符

三元运算符也能够用于逻辑判断。

(条件) ? 表达式 1 : 表达式 2 

循环语句

var i = 0;
while (i < 100) {console.log('i 以后为：' + i);
  i = i + 1;
}
// 区别下面，它至多会执行一次
var i = 0;
do {console.log('i 以后为：' + i);
} while (i < 100);

for 循环语句

• 初始化表达式：确定循环变量的初始值，只在循环开始时执行一次。
• 条件表达式：每轮循环开始时，都要执行这个条件表达式，只有值为真，才持续进行循环。
• 递增表达式：每轮循环的最初一个操作，通常用来递增循环变量。

for (初始化表达式; 条件; 递增表达式) {语句}

break 和 continue

break语句用于跳出代码块或循环，continue是完结以后循环，跳到下一次。

数据类型

null 和 undefined

● 变量没有初始化：undefined。

● 变量不可用：null。

数值

整数和浮点数，JavaScript 外部，所有数字都是以 64 位浮点数模式贮存，即便整数也是如此。

1 === 1.0 // true

数值精度：依据国际标准 IEEE 754，JavaScript 浮点数的 64 个二进制位，从最右边开始，是这样组成的。

• 第 1 位：符号位，0示意负数，1示意正数
• 第 2 位到第 12 位（共 11 位）：指数局部
• 第 13 位到第 64 位（共 52 位）：小数局部（即有效数字）

数值范畴：64 位浮点数的指数局部的长度是 11 个二进制位，意味着指数局部的最大值是 2047（2 的 11 次方减 1）超出的范畴不能示意。

数值进制：

• 十进制：没有前导 0 的数值。
• 八进制：有前缀 0o 或0O的数值，或者有前导 0、且只用到 0 - 7 的八个阿拉伯数字的数值。
• 十六进制：有前缀 0x 或0X的数值。
• 二进制：有前缀 0b 或0B的数值。

NaN

NaN是 JavaScript 的非凡值，示意“非数字”（Not a Number），次要呈现在将字符串解析成数字出错的场合。

字符串

由单双引号包裹在一起的字符，就是字符串。

单引号字符串的外部，能够应用双引号。双引号字符串的外部，能够应用单引号。

'abc' "abc" "'a'" // 字符串

// 字符串换行
var str = 'String \
String \
String';

本义符：

• \0：null（\u0000）
• \b：后退键（\u0008）
• \f：换页符（\u000C）
• \n：换行符（\u000A）
• \r：回车键（\u000D）
• \t：制表符（\u0009）
• \v：垂直制表符（\u000B）
• \'：单引号（\u0027）
• \"：双引号（\u0022）
• \\：反斜杠（\u005C）

字符集：javaScript 应用 Unicode 字符集。JavaScript 引擎外部，所有字符都用 Unicode 示意。

对象

var obj = { // 对象申明
  a: '1',
  b: '2'
};

// 对象属性读取
obj.a 
obj['a']

// 删除对象属性
delete obj.a

// 判断属性是否存在
'a' in obj 

// 对象遍历
for (var i in obj) {console.log('键名：', i);
  console.log('键值：', obj[i]);
}

函数

function 关键字申明。

function foo(s) {console.log(s);
}
// 表达式模式
var foo = function(s) {console.log(s);
};

Function 构造函数

var add = new Function(
  'x',
  'y',
  'return x + y'
);

// 等同于
function add(x, y) {return x + y;}

函数名晋升：JavaScript 引擎将函数名视同变量名，所以采纳 function 命令申明函数时，整个函数会像变量申明一样，被晋升到代码头部。

foo();
function foo() {console('ok')}

JavaScript 函数知识点还是蛮多的，前面针对函数这一块独自整顿。

数组

数组属于一种非凡的对象。

typeof [1, 2, 3] // "object"

length：JavaScript 应用一个 32 位整数，保留数组的元素个数。这意味着，数组成员最多只有 4294967295 个（2^32 – 1）个，也就是说 length 属性的最大值就是 4294967295。

数组遍历

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

小结

本文要点回顾，欢送留言交换。

• JavaScript 介绍。
• JavaScript 根本语法。
• 数据类型。