前端-JavaScript基础知识

作者：编程码农

来源：SegmentFault 思否社区

简介

什么是JavaScript？

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

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

解释型：对标编译型语言，编译型需预先将源码编成中间码，再由解释器解释运行。解释型不需要预先编译，在程序在运行时才由解释器翻译运行。

JavaScript 的标准是ECMAScript截至 2012 年，所有的现代浏览器都完整的支持 ECMAScript 5.1，旧版本的浏览器至少支持 ECMAScript 3 标准。

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

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_Resources

使用场景

互联网的兴起，JavaScript的使用范围已经超出了浏览器。

1. 浏览器平台。HTML5的出现，浏览器本身的功能越来越强，JavaScript 因此得以调用许多系统功能，如操作本地文件、操作图片、调用摄像头和麦克风，可以开发更多富客户端产品。

2. 服务端应用。node的出现使得 JavaScript 可以用于开发服务器端应用，也使得JavaScript成为一门可以同时开发前后端的语言。

3. 移动应用。js也正在成为手机应用的开发语言，比如：React Native 项目则是将 JavaScript 写的组件，编译成原生组件。

4. 桌面应用。JavaScript甚至可以开发桌面应用，比如electronjs。

5. 数据库操作。在一些Nosql数据都是支持JavaScript作为操作语言，像mongodb。

基本语法

变量

var total; // 未赋值的变量是 undefined，它是个特殊的值，表示无定义。
total = 1;
var a,b; // 一个var后可以声明多个变量。

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。

语句

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

// 这是单行注释

/*
 这是
 多行
 注释
*/

{
  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 (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 (初始化表达式; 条件; 递增表达式) {
  语句
}

数据类型

• 变量没有初始化：undefined。

• 变量不可用：null。

1 === 1.0 // true

• 第1位：符号位，0表示正数，1表示负数

• 第2位到第12位（共11位）：指数部分

• 第13位到第64位（共52位）：小数部分（即有效数字）

• 十进制：没有前导0的数值。

• 八进制：有前缀0o或0O的数值，或者有前导0、且只用到0-7的八个阿拉伯数字的数值。

• 十六进制：有前缀0x或0X的数值。

• 二进制：有前缀0b或0B的数值。

'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）

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 foo(s) {
  console.log(s);
}
// 表达式形式
var foo = function(s) {
  console.log(s);
};

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

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

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

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

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

小结

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