前端基础3-1——JavaScript
目录
- 什么是JavaScript
- 快速入门
- 引入JavaScript
- 数据类型和基本语法入门
- 1.变量
- 2.number
- 3.字符串
- 4.布尔值
- 5.逻辑运算
- 6.比较运算符
- 7.浮点数
- 8.数组
- 9.对象
- 10.流程控制
- 11.Map和Set集合
- 严格检查模式use strict
- 函数
- 定义函数
- 变量的作用域
- 方法
什么是JavaScript
概述
JavaScript是一门世界上最流行的脚本语言。
一个合格的后端人员,必须精通JavaScript
历史
略
ECMAScript它可以理解为JavaScript的一个标准,最新版本已经到ES6版本。
但是大部分浏览器还只停留在支持ES5代码上。
开发环境与线上环境容易出现版本不一致的情况。
快速入门
引入JavaScript
1.内部标签
<script> //....<script>
2、外部引入
hello.js
aert("hello,world");
test.html
<!--外部引入 注意:script必须成对出现--><script src="hello.js"></script><!--不用显示定义type,也默认就是javaScript--><script type="text/javascript"></script>
数据类型和基本语法入门
注释格式跟java一样
demo:
<!--JavaScript严格区分大小写--><script>// 1. 定义变量 var score = 1 ;//alert(num)// 2. 条件控制if (score > 60 && score < 70){alert("60~70");}else if(score > 70 && score < 80){alert("70~80");}else{alert("other")}</script>
浏览器常用调试功能(F12调出):
1.变量
命名规则:
允许大写、允许$或_符号开头、允许中文变量名
不允许数字开头
var a
2.number
JS不区分小数和整数,Number
123//整数123123.1//浮点数123.11.123e3//科学计数法-99//负数NaN //not a numberInfinity // 表示无限大
3.字符串
正常字符串使用单引号,或者双引号包裹 ‘abc’ “abc”
转义字符
\'\n\t\u4e2d \u##### Unicode字符 \x41 ASCAII字符
多行字符串编写
// ~键
var msg =`helloworld你好呀nihao`
模板字符串
// ~键let name = 'Tom';let age = 3;var msg = `你好,${name}`
字符串长度
str.length
字符串的可变性,不可变
大小写转换
//注意,这里是方法,不是属性了
student.toUpperCase();
student.toLowerCase();
indexof()
返回某字符在字符串所在位置的索引
substring
[)区间为左闭右开
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)
4.布尔值
true,false
5.逻辑运算
&& 两个都为真,结果为真
|| 一个为真,结果为真
! 真即假,假即真
6.比较运算符
= 赋值== 等于(类型不一样,值一样,也会判断为true) 例如1和"1"用==的话为true=== 绝对等于(类型一样,值一样,结果为true)
这是一个JS的缺陷,坚持不要使用 == 比较
注意:
- NaN === NaN,这个与所有的数值都不相等,包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
7.浮点数
console.log((1/3) === (1-2/3)) //false
console.log(1/3)
//0.3333333333333333console.log(1-2/3)
//0.33333333333333337
尽量避免使用浮点数进行运算,存在精度问题!
Math.abs(1/3-(1-2/3))<0.00000001 //true,可以这样判断是否相等,误差<0.000...001足够认为两者相等
8.数组
Java的数组必须是相同类型的对象
而JS中不需要这样
Array可以包含任意的数据类型
//保证代码的可读性,尽量使用[]var arr = [1,2,3,4,5,'hello',null,true];//第二种定义方法new Array(1,2,3,4,5,'hello');
取数组下标:如果越界了,就会报undefined
长度
arr.length
注意:假如给arr.lennth赋值,数组大小就会发生变化~,如果赋值过小,元素就会丢失
indexOf,
通过元素获得下标索引
arr.indexOf(2)
1
字符串的"1"和数字 1 是不同的
slice()
截取Array的一部分,返回的一个新数组,类似于String中substring
push(),pop()尾部
push:压入到尾部
pop:弹出尾部的一个元素
unshift(),shift() 头部
unshift:压入到头部
shift:弹出头部的一个元素
排序sort()
(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]
元素反转reverse()
(3)["A","B","C"]
arr.reverse()
(3)["C","B","A"]
concat()
注意:concat()并没有修改数组,只是会返回一个新的数组
连接符join
打印拼接数组,使用特定的字符串连接
多维数组
数组:存储数据(如何存,如何取,方法都可以自己实现!)
9.对象
若干个键值对
var 对象名 = {属性名:属性值,属性名:属性值,属性名:属性值
}
//定义了一个person对象,它有四个属性
var person = {name:"Tom",age:3,email:"123456798@QQ.com",score:66
}
Js中对象,{…}表示一个对象,建制对描述属性xxx:xxx,多个属性之间用逗号隔开,最后一个属性不加逗号! JavaScript中的所有的键都是字符串,值是任意对象!
取对象值
person.name
//"Tom"person.age
//3
对象赋值
使用一个不存在的对象属性,不会报错! undefined
动态地删减属性,通过delete删除对象的属性
动态地添加,直接给新的属性添加值即可
xxx in xxx判断属性值是否在这个对象中
hasOwnProperty()判断一个属性是否是这个对象自身拥有的
10.流程控制
if判断
while循环
要避免程序死循环
for循环
forEach循环
ES5.1特性
for…in…
for x in obj:x是打出下标来
11.Map和Set集合
Map
Set:无序不重复的集合
遍历Map和Set
通过for…of…遍历(for x of obj:x是打出值来,而for x in obj的x是打出下标来)
严格检查模式use strict
<!--前提:IDEA需要设置支持ES6语法'use strict';严格检查模式,预防JavaScript的随意性导致产生的一些问题'use strict'必须写在JavaScript的第一行!局部变量建议都使用let去定义~--><script>'use strict';//局部变量let i=1;//ES6 let</script>
函数
定义函数
定义方式一
绝对值函数
一旦执行到return代表函数结束,返回结果!
如果没有执行return,函数执行完也会返回结果,结果就是undefined
定义方式二
function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs,通过abs就可以调用函数!
方式一和方式二等价!
调用函数
abs(10)//10
abs(-10) //10
参数问题:javaScript可以传任意个参数,也可以不传递参数~
参数进来是否存在问题?
假设不存在参数,如何规避?
arguments
arguments是一个JS免费赠送的关键字;
代表,传递进来的所有参数,是一个数组!
问题:arguments包含所有的参数,我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~
rest
以前:
ES6引入的新特性,获取除了已经定义的参数之外的所有参数~…
rest参数只能写在最后面,必须用…标识。
变量的作用域
在javascript中,var定义变量实际是有作用于的。
假设在函数体重声明,则在函数体外不可以使用~(闭包)
如果两个函数使用了相同的变量名,只要在函数内部就不冲突
内部函数可以访问外部函数的成员,反之则不行
假设,内部函数变量和外部函数变量,重名!
假设在JavaScript中,函数查找变量从自身函数开始~, 由“内”向“外”查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。
提升变量的作用域
结果:x undefined
说明:js执行引擎,自动提升了y的声明,但是不会提升变量y的赋值;
这个是在javascript建立之初就存在的特性。 养成规范:所有 的变量定义都放在函数的头部,不要乱放,便于代码维护;
全局变量
全局对象window
alert() 这个函数本身也是一个window的变量;
javascript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,就会报错 Refrence
规范
由于我们的所有变量都会绑定到window上,。如果不同的js文件,使用了相同的全局变量,就会产生冲突—>如何减少这样的冲突?
唯一全局变量
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突问题~
jQuery中就是使用的该方法:jQuery.name,简便写法:$()
局部作用域
ES6的let关键字,解决了局部作用域冲突的问题!
let关键字
建议大家都用let去定义局部作用域的变量;
常量
在ES6之前,怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值。
在ES6引入了
常量关键字 const
方法
定义方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
this.代表什么?拆开上main的代码看看
this是无法指向的,是默认指向调用它的那个对象的;
apply
在js中可以控制this指向
this指向了kuangshen,参数为空
前端基础3-1——JavaScript相关推荐
- 前端基础三之JavaScript基础
文章目录 题外话 前言 1. JavaScript基础 1.1 JavaScript介绍 1.2 基础语法 1.2.1 Hello World 1.2.2 注释 1.2.3 变量 1.2.4 数据类型 ...
- 前端基础学习:javascript表达式,你知道为什么3+true=4吗?
原始表达式 原始表达式是最简单的表达式.它是表达式的最小单元. Javascript中的原始表达式有:常量.直接量.关键字.变量. 1.23 //数字直接量 "hello"//字符 ...
- 前端基础03:JavaScript
一.什么是JavaScript 1. 概述 JavaScript是一门世界上最流行的脚本语言. 一个合格的后端人员,必须要精通JavaScript. 2. 历史 https://blog.csdn.n ...
- 前端基础(HTML,CSS,JavaScript,jQuery)
文章目录 `HTML` 基础 `HTML`文件的基本结构 标签 属性 转义字符 元素之间的关系 常用标签 基本 列表 图片 表格 嵌套页面 表单 `form`提交表单的属性: `GET`请求的特点 ` ...
- python自动化(二)前端基础:3.JavaScript基础
一.JavaScript简介 JavaScript是一种脚本语言,可以在浏览器中直接运行.在传统的网站前端中我们一般使用HTML来搭建我们的页面骨架,使用CSS来渲染页面样式.这样页面的静态模式就基本 ...
- 前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,lt;bodygt;中的一些常用标记
前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...
- 前端基础学习——JavaScript之BOM模型与DOM模型
前面还有JavaScript基础介绍,有兴趣的朋友可以前往查看前端基础学习--带你夯实JavaScript基础 目录 一. BOM模型 1.1 BOM模型与DOM模型示意图: 1.2 浏览器窗口中的B ...
- web前端知识集合——javascript基础篇之javascript背景历史和运行环境(一)
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
- WEB前端基础(HTML+CSS+JavaScript)(上)最好看最详细的笔记~
WEB前端基础 当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础 一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
- 【HTML③】JavaScript基础、使用JavaScript制作网页特效、使用前端库及UI框架快速开发
[HTML③]JavaScript基础.使用JavaScript制作网页特效.使用前端库及UI框架快速开发 八.JavaScript基础 1.JavaScript JavaScript简称JS是用于制 ...
最新文章
- Android Studio安卓开发中使用json来作为网络数据传输格式
- Stored Procedure 里的 WITH RECOMPILE 到底是干麻的?
- 通信工程专业的一些小知识点
- CocoaPods学习系列5——错误集锦
- 使用Maven管理Eclipse Java项目
- pandas dataframe随机采样
- linux 权限管理命令chown、chgrp、umask、linux新建文件或目录的默认权限755
- 软件工程小组第六次会议记录
- 2017-2018-1 20155213 20155303 实验二 固件程序设计
- 安装增强功能失败:Could not mount the media/drive C:\Program Files\Oracle\VirtualBox/VBoxGuestAdditions.iso
- 4: Consolidating Datasets ( Challenge: Data Munging Using The Command Line)
- Eclipse/Myeclipse自定义JSP模板
- 萌新卷妹带你逃出算法无名岛第六站
- JVM生态系统2018调查报道
- 如何写好一篇论文——闵老师《论文写作》心得
- CAD调整十字光标的长度
- word保护视图的导致很多人打开异常或者ntko控件加载异常怎么处理
- UG二次开发GRIP修改属性
- 13项目管理--相关方管理
- Eclipse解决SVN版本冲突