JavaScript ( JS ) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。
前言
在前端的学习之中必定要学习前端三剑客——HTML、CSS、JAVASCRIPT。简单来说,JavaScript为前端页面添加了与客户的交互性,使静态页面变为动态。Js不仅作为开发Web 页面的脚本语言而出名的,但是它也被用到了很多非浏览器中 。那么,在学习Javascript时,我们会学到什么,最终得到什么,请一探究竟吧!
一、JavaScript 是什么?
JavaScript简称JS,它是弱类型语言,它是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。也是是一种基于原型编程的(在不定义class的情况下创建一个 object)、多范式的动态脚本语言,并且支持面向对象、命令式和声明式风格。Js可由vi和vim*、vscode、sublime编辑,可独立网页由node.js(运行在服务端的 JavaScript。是一个基于 Chrome JavaScript 运行时建立的一个平台,node.js是可以大量发挥js高级标准,ES6语法一般在node.js中可以完全运行 )运行。
Js由ECMAScript(描述该语言的语法和基本对象 )、DOM(文档对象模型 ,描述处理网页内容的方法和接口 ) 以及 BOM(浏览器对象模型 ,描述与浏览器进行交互的方法和接口 )组成。
二、JS
1.特点
- 解释型语言(node.js是js的解释器)
- 弱类型语言(变量的数据类型取决于值的数据类型,变量的类型在变量初始化时确定,其类型可以随时改变,类型细分不明显)
- 顺序解释执行
- 既可以作为前端脚本语言,也可以作为后端语言,这取决于所应用平台(浏览器或者操作系统)以及取决于其使用的框架(dom、jQuery/http、mysql、file)
2.引入
在编写前端页面需要用到JavaScript时,有3种方法加入JvaScript。
- 内部在头部head里加入<script>标签,在标签内部写入js内容。
- 内部在body底部加入<script>标签,在标签内部写入js内容。
- 外部编写js文件,然后再头部head里使用<script>标签,在script标签里的地址属性填入所建的外部js文件的所在地址,将其引入。
而在head中和在body中使用js的区别:
在head部分中的js会在被调用的时候才执行,在body部分中的JavaScript会在页面加载的时候被执行。
浏览器解析html是从上到下的。如果把JavaScript放在head里的话,则先被解析,但这时候body还没有解析,所以会返回空值。一般都会绑定一个监听,当全部的html文档解析完之后再执行代码。
一般习惯将JavaScript放在body的最后面,类似last-child。
3.关键字与保留字
关键字 | 保留字 |
break do try typeof case else new var catch finally return void continue for switch while debugger this function with default if throw instanceof delete in | abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger double implements protected volatile import public |
和Java相同的是,在JS里也可以使用一些转义字符,如:\n 换行; \t 制表 ;\b 退格 ;\r 回车; \ 斜杠; \' 单引号; \" 双引号。
4.变量
ECMAScript的变量是弱类型(松散类型),可以用来保存任何类型的数据。定义变量时使用var关键字,使用变量一般由声明后、初始化,最后才能使用。
变量名的命名规则:
- 可由字母,数字,下划线,$组成
- 开头不能为下划线或数字
- 应具有一定的意义(可使用驼峰命名法)
- 不要使用关键字和保留字
var a;//声明
a='Hello JS!';//初始化
console.log(a)//使用(打印)
变量的声明:
可用var关键字来声明一个变量,还可以用let和const来声明。
var声明的变量可以重复声明,其声明的变量可以变量提升,其声明的变量不存在块级作用域;而let和const声明的变量不可以重复声明,其声明的变量不可以变量提升,其声明的变量存在块级作用域。
5.数据类型
JS的数据类型有可大致分为两种:基本数据类型和引用数据类型。
基本数据类型:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。
null与undefined
undefined继承null,所以undefined == null结果为true,但是null表示空对象,undefined表示未定义;null与undefined用途不同,null可以用来表示一个空对象,但是没有必要把一个变量的值显式设置为undefined。
== 与 ===
== 为等同的意思,比较的两边类型不同时,先进行类型转换使比较两边类型相同,而后再比较,如值相同即可为真;
=== 为恒等的意思,比较两边类型不同时,不进行类型转换,直接比较,因为类型不同结果直接为假。使用===时,只有比较两边的类型与值都相同,结果才为真。
基本数据类型和引用数据类型在内存中的存储方式:
基本数据类型:变量和值都保存在栈区,值与值之间相互独立存在,修改一个值不会影响其他的变量 ;
var a = 888;//初始化a,在栈中存入变量a与a的值888
b = a;//把a的值888直接赋值给b,此时栈中存入变量b和他的赋值888
a = 'Hello';//把栈中的变量a的值改变,对变量b与其值没有影响
console.log("a="+a,"b="+b);//打印a与b的值
引用数据类型:引用地址保存在栈区,值保存在堆区,当栈存放引用类型时,值为对象的地址,如两对象指向的地址相同,当修改一个对象的值(地址)时,另一个对象的值会发生变化。
var obj1 = {
age:12 //给obj1赋值,此时对象obj1存入栈中,其值存入堆区在obj1所指地址里
}
var obj2 = obj1;//将对象obj1的值赋值给对象obj2,
//此时obj2存入栈区,其指向与obj1相同地址,此时obj2的值为age:12
obj1.age = 8;//修改了对象obj1的值,其所指地址里的值也发生变化,而obj2的值也受到了影响
console.log("obj1:"+obj1.age);//打印obj1.age的值
console.log("obj2:"+obj2.age);//打印obj2.age的值
此为浅拷贝而出现的结果,如需要obj2的值不因obj1值的改变而改变,那么可以在obj2拷贝obj1的值(obj1赋值给obj2)时使用深拷贝。
浅拷贝的定义简单来说就是复制对象不彻底,如原对象修改或复制后的对象修改,都会影响到另一个对象;而深拷贝则没有这种影响。
想要解决浅拷贝的问题使之使用深拷贝,简单来说有几种方法:
-
通过json对象实现深拷贝(JSON.stringify,JSON.parse)
-
使对象结构赋值(利用扩展运算符)
-
Object.assign()拷贝(利用对象合并,返回一个新对象)
-
lodash函数库实现深拷贝
-
递归的方式实现深拷贝
-
........
如利用扩展运算符,使对象解构赋值,从而解决浅拷贝问题(以上面那个例子为例):
此时obj2的值没有受到影响,没有因obj1的改变而改变。