前端之 JavaScript 基础

JavaScript 概述

ECMAScript 和 JavaScript的关系

1996年11月，JavaScript 的创造者 Netscape(网景) 公司，决定将 JavaScript 提交给国际标准化组织 ECMA ，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

ECMAScript的历史

年份名称描述
1997ECMAScript 1第一个版本
1998ECMAScript 2版本变更
1999ECMAScript 3添加正则表达式
添加try/catch
 ECMAScript 4没有发布
2009ECMAScript 5添加”strict mode”严格模式
添加JSON支持
2011ECMAScript 5.1版本变更
2015ECMAScript 6添加类和模块
2016ECMAScript 7增加指数运算符（**）
增加Array.prototype.includes

注：ES6就是指ECMAScript 6。

尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

  • 核心（ECMAScript） 
  • 文档对象模型（DOM） Document object model (整合js，css，html)
  • 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。

  • JavaScript 是脚本语言
  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
  • JavaScript 很容易学习。

JavaScript语言规范

JavaScript引入方式

Script标签内写代码

<script>// 在这里写你的JS代码
</script>

引入额外的JS文件

<script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
        <script>可以定义多个。

<script src="myscript.js"></script>

注释（注释是代码之母）- 和 java 注释基本一样

// 这是单行注释/*这是多行注释
*/

结束符

JavaScript中的语句要以分号（;）为结束符。

JavaScript语言基础

变量声明

  • JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
  • 声明变量使用 var 变量名; 的格式来进行声明
  • 变量名是区分大小写的。
  • 推荐使用驼峰式命名规则。
  • 保留字不能用做变量名。
var name = "lp";
var age = 18;

ES6新增了 let 命令，用于声明变量。其用法类似于 var，但是所声明的变量只在 let 命令所在的代码块内有效。例如：for 循环的计数器就很适合使用 let 命令。

for (let i=0;i<arr.length;i++){...}

ES6新增 const 用来声明常量。一旦声明，其值就不能改变。

const PI = 3.1415;
PI // 3.1415
PI = 3 // TypeError: "PI" is read-only

保留字列表：

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

运算符

算数运算符

+ - * / % ++ --

比较运算符

> >= < <= != == === !==

注意：

1 == “1”  // true
1 === "1"  // false

逻辑运算符

&& || !

赋值运算符

= += -= *= /=

流程控制

if-else

var a = 10;
if (a > 5) {console.log("yes");
} else {console.log("no");
}

if-else if-else

var a = 10;
if (a > 5) {console.log("a > 5");
} else if (a < 5) {console.log("a < 5");
} else {console.log("a = 5");
}

switch

var day = new Date().getDay();
switch (day) {case 0:console.log("Sunday");break;case 1:console.log("Monday");break;default:console.log("...")
}

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

for

for (var i=0;i<10;i++) {console.log(i);
}

while

var i = 0;
while (i < 10) {console.log(i);i++;
}

三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b

函数

函数定义

JavaScript 中的函数和 Python 中的非常类似，只是定义方式有点区别。

// 普通函数定义
function f1() {console.log("Hello world!");
}// 带参数的函数
function f2(a, b) {console.log(arguments);  // 内置的arguments对象console.log(arguments.length);console.log(a, b);
}// 带返回值的函数
function sum(a, b){return a + b;
}
sum(1, 2);  // 调用函数// 匿名函数方式
var sum = function(a, b){return a + b;
}
sum(1, 2);// 立即执行函数
(function(a, b){return a + b;
})(1, 2);

补充：ES6中允许使用“箭头”（=>）定义函数。

var f = v => v;
// 等同于
var f = function(v){return v;
}

如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：

var f = () => 5;
// 等同于
var f = function(){return 5};var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){return num1 + num2;
}

函数中的arguments参数

function add(a,b){console.log(a+b);console.log(arguments.length)
}add(1,2)

注意：函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

函数的全局变量和局部变量

局部变量：在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

  • JavaScript变量的生命期从它们被声明的时间开始。
  • 局部变量会在函数运行以后被删除。
  • 全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

几个例子：

// 1.
var city = "BeiJing";
function f() {var city = "ShangHai";function inner(){var city = "ShenZhen";console.log(city);}inner();
}f();  //输出结果是？ShenZhen// 2.
var city = "BeiJing";
function Bar() {console.log(city);
}
function f() {var city = "ShangHai";return Bar;
}
var ret = f();
ret();  // 打印结果是？BeiJing// 3.闭包
var city = "BeiJing";
function f(){var city = "ShangHai";function inner(){console.log(city);}return inner;
}
var ret = f();
ret();

词法分析（尝试理解）

JavaScript中在调用函数的那一瞬间，会先进行词法分析。

词法分析的过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

  1. 函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
  2. 函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
  3. 函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

函数内部无论是使用参数还是使用局部变量都到AO上找。看两个例子：

var age = 18;
function foo(){console.log(age);var age = 22;console.log(age);
}
foo();  // 问：执行foo()之后的结果是？undefined 和 22// 第二题：
var age = 18;
function foo(){console.log(age);var age = 22;console.log(age);function age(){console.log("呵呵");}console.log(age);
}
foo();  // 执行后的结果是？
ƒ age(){console.log("呵呵");} 和 22 和22
词法分析过程：
1、分析参数，有一个参数，形成一个 AO.age=undefine;
2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};最终，AO上的属性只有一个age，并且值为一个函数声明执行过程：
注意：执行过程中所有的值都是从AO对象上去寻找1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 22
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/454009.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

TCPMP0.72RC1的编译与移植以及自己另外做UI完整方法

TCPMP0.72RC1的编译与移植以及自己另外做UI完整方法

我叫张挺&#xff0c;虽然开博&#xff0c;除了转了一篇黄色文章以外&#xff0c;技术文章从来没有写&#xff0c;所以呢&#xff0c;感到很不好意思&#xff01;于是决定还写一篇在网上也留点痕迹。我这里主要是介绍TCPMP的移植以及如何把这个鸟鸟整到自己的界面中来&#xff…
阅读更多...
svga文件如何查看_电脑隐藏文件？如何查看隐藏文件 方法简单易学

svga文件如何查看_电脑隐藏文件？如何查看隐藏文件 方法简单易学

大家好&#xff0c;我是小白一键重装软件的客服。如何查看隐藏文件呢&#xff1f;有时候不小心把文件夹勾选隐藏后文件就消失了&#xff0c;到底是怎么回事呢&#xff1f;其实这个是电脑上面一些设置开启了文件隐藏的功能哦&#xff0c;那么下面小白系统带你了解下如何查看隐藏…
阅读更多...
jquery 的animate 的transform

jquery 的animate 的transform

$(function(){ var t 1000; $("#id").animate( {borderSpacing:180}, //180 指旋转度数 { step: function(now,fix){ $(this).css(-webkit-transform,rotate(nowdeg)); $(this).css(-ms-transform,rotate(nowdeg)); $(this).css(-moz-transform,rotate(nowdeg)); $(…
阅读更多...
前端之 BOM 和 DOM

前端之 BOM 和 DOM

前言 到目前为止&#xff0c;我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法&#xff0c;并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互&#xff0c;我们需要继续学习BOM和DOM相关知识。 JavaScript分为 ECMAScript&…
阅读更多...
如何给FLV文件加字幕

如何给FLV文件加字幕

如何给FLV文件加字幕关键字&#xff1a;FFMPEG　AVS　字幕 本文只是收集工作中的一点经验和积累&#xff0c;如果你能从本文中得到收获&#xff0c;或者得到启发。那将是我最开心的事情。 本文面向的读者是对FFMPEG以及AVS有一定基础的&#xff0c;对电脑有一定基础的&#xff…
阅读更多...
化工图纸中LISP_必备干货丨石油化工安装工程质量与成本控制研究

化工图纸中LISP_必备干货丨石油化工安装工程质量与成本控制研究

对于整个石油化工工程来说&#xff0c;石油化工的安装工程在其中是最重要并且最核心的一个环节&#xff0c;其对石油化工工程的质量有着决定性的作用。从客观的角度来说&#xff0c;如果石油化工安装工程在实际的施工过程中出现任何的问题&#xff0c;就会威胁到周边人群的生命…
阅读更多...
[原创]windows server 2012 AD架构 试验 系列 – 15解决AD复制冲突

[原创]windows server 2012 AD架构 试验 系列 – 15解决AD复制冲突

[原创]windows server 2012 AD架构 试验 系列 – 15解决AD复制冲突 这节我详细说下 ADDS使用stamp来作为解决冲突的依据 Stamp由三块组成 Version, time stamp , source DC GUID (发生对象修改行为的源DC的GUID) 一般来说冲突分为几下情况: 1-属性冲突 你可以用repadmin来查看版…
阅读更多...
Python全局变量和局部变量

Python全局变量和局部变量

全局变量和局部变量 定义在函数内部的变量拥有一个局部作用域&#xff0c;定义在函数外的拥有全局作用域。 　　局部变量只能在其被声明的函数内部访问&#xff0c;而全局变量可以在整个程序范围内访问。调用函数时&#xff0c;所有在函数内声明的变量名称都将被加入到作用域中…
阅读更多...
前端之 jQuery 入门

前端之 jQuery 入门

jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互&#xff0c;能够极大地简化JavaScript编程。它的宗旨就是&#xff1a;“Write less, do more.“ jQuery的优势 一款轻…
阅读更多...
python剑指offer替换空格_迷人的算法-剑指offer面试题5：替换空格

python剑指offer替换空格_迷人的算法-剑指offer面试题5：替换空格

题目&#xff1a;请实现一个函数&#xff0c;把字符串中的每个空格替换成"%20"。例如&#xff0c;输入"We are happy."&#xff0c;则输出"We%20are%20happy."。此题看似简单&#xff0c;实则坑还是比较多的。替换字符的长度有变化&#xff0c;由…
阅读更多...
音频视频解决方案：GStreamer/ffmpeg/ffdshow/directshow/vfw

音频视频解决方案：GStreamer/ffmpeg/ffdshow/directshow/vfw

音频视频编程相关&#xff1a;GStreamer/ffmpeg/directshow/vfw linux和window下几种流行的音频视频编程框架作一个总结&#xff0c;防止自己迷惘&#xff0c;免于晕头转向。 一、GStreamer GStreamer is a library that allows the construction of graphs of media-handlin…
阅读更多...
Linux 将进程放入后台执行，解决网络，ssh断开导致进程结束（nohup, setsid, , disown）...

Linux 将进程放入后台执行，解决网络，ssh断开导致进程结束（nohup, setsid, , disown）...

Linux 将进程放入后台执行&#xff0c;解决网络&#xff0c;ssh断开导致进程结束&#xff08;nohup, setsid, &, disown&#xff09; 1、nohup 命令 我们知道&#xff0c;当用户注销&#xff08;logout&#xff09;或者网络断开时&#xff0c;终端会收到 HUP&#xff08;…
阅读更多...
bzoj1927

bzoj1927

1927: [Sdoi2010]星际竞速Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 2556 Solved: 1580[Submit][Status][Discuss] Description 10年一度的银河系赛车大赛又要开始了。作为全银河最盛大的活动之一&#xff0c;夺得这个项目的冠军无疑是很多人的梦想&#xff0c;来自杰…
阅读更多...
python until怎么用_python基础之从认识python到python的使用

python until怎么用_python基础之从认识python到python的使用

python的历史&#xff1a;python的创始人是吉多范罗苏姆(Guido van Rossum)&#xff0c;人称“龟叔”&#xff0c;1989年圣诞节期间&#xff0c;Guido开始写Python语言的编译器。他希望这个叫做Python的语言能符合他的理想&#xff1a;创造一种C和shell之间&#xff0c;功能全面…
阅读更多...
前端之同源策略 Jsonp 与 CORS

前端之同源策略 Jsonp 与 CORS

同源策略 同源策略&#xff08;Same origin policy&#xff09;是一种约定&#xff0c;它是浏览器最核心也最基本的安全功能&#xff0c;如果缺少了同源策略&#xff0c;则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的&#xff0c;浏览器只是针对同…
阅读更多...
vue新手入门——vue-cli搭建

vue新手入门——vue-cli搭建

首先说明&#xff0c;以下内容vue官网都有文档&#xff0c;如果觉得麻烦啰嗦&#xff0c;请移步至 安装-vue.js 。 准备工作&#xff1a; 1.下载并安装node环境&#xff0c;一般情况下安装好node之后&#xff0c;npm也会安装好。具体安装的话&#xff0c;百度大概能帮得上忙。 …
阅读更多...
如何看懂源代码–(分析源代码方法)

如何看懂源代码–(分析源代码方法)

我们在写程式时&#xff0c;有不少时间都是在看别人的代码。例如看小组的代码&#xff0c;看小组整合的守则&#xff0c;若一开始没规划怎么看&#xff0c; 就会“噜看噜苦&#xff08;台语&#xff09; ” 不管是参考也好&#xff0c;从开源抓下来研究也好&#xff0c;为了了解…
阅读更多...
linux关于安装

linux关于安装

一&#xff0e;安装gcc gcc cloog-ppl ppl(libppl.so.7/libppl_c.so.2) cpp mpfr(libmpfr.so.1) gcc-c libstdc-devel mpfr-2.4.1-6.el6.i686.rpm和ppl-0.10.2-11.el6.i686.rpm 快捷键rz sz&#xff1a; rz、sz命令没找到&#xff1f; 安装lrzsz即可&#xff1a; shell># y…
阅读更多...
python cmath模块_cmath模块-PYTHON

python cmath模块_cmath模块-PYTHON

这是一个float型的常数>>> cmath.e2.718281828459045>>> type(cmath.e)文档>>> import cmath>>> help(cmath)Help on module cmath:NAMEcmathFILE/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/lib-dynload/cm…
阅读更多...
Python 第三方模块之 pdfkit

Python 第三方模块之 pdfkit

pdfkit&#xff0c;把 HTMLCSS 格式的文件转换成 PDF 格式文档的一个工具。 其实&#xff0c;pdfkit 是 html 转成 pdf 工具包 wkhtmltopdf 的 Python 封装。所以&#xff0c;首先安装 wkhtmltopdf 。 一般情况下&#xff0c;wkhtmltopdf需要手动安装&#xff0c;网站是 https…
阅读更多...
最新文章

Copyright @ 2022~2023