前端-JavaScript基础知识

简介

什么是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。

基本语法

变量

变量是对值的引用,JavaScript 的变量名区分大小写,Aa是两个不同的变量。

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的数值。
  • 八进制:有前缀0o0O的数值,或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
  • 十六进制:有前缀0x0X的数值。
  • 二进制:有前缀0b0B的数值。

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基本语法。
  • 数据类型。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,427评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,551评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,747评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,939评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,955评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,737评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,448评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,352评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,834评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,992评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,133评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,815评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,477评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,022评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,147评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,398评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,077评论 2 355

推荐阅读更多精彩内容