1 概述
1.1JavaScript的介绍
- 前身是LiveScript+JavaScript
- 基于浏览器的脚本语言
- 基于对象，面向对象的一个编程语言
1.2 EcmaScript
- EcmaScript就是把LiveScript和JavaScript做了合并的一种规范
- 我们现在使用的就是EcmaScript5
1.3 特点
- 简单、易学、易用；
- 跨平台；IE、Navigator
- 符合ECMA（欧洲计算机制造协会）标准，可移植；
- 事件驱动式的脚本程序设计思想；
- 动态、交互式的操作方式。
1.4 用途
- 交互式操作；
- 表单验证；
- 网页特效；
- Web游戏
- 服务器脚本开发等。
1.5 编写工具
- vscode、webstorm
1.6 执行平台
- 浏览器
注意：Java与JavaScript没有关系
- java是面向对象的语音(编译型)(强类型)
- JavaScript是面向对象和基于对象的语言(解释型)(弱类型)
2 JavaScript的引入方式
2.1 网页内部编写js代码
- 方便编写,不能达到复用效果
- 后期的维护变得复杂了
- 所以生产环境不建议这么来玩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的编写</title>
<!--在网页内部编写js代码-->
<script type="text/javascript">
alert("hello")
</script>
</head>
<body>
</body>
</html>
2.2 外部引入
<script src="base.js"></script>
- 引入外部的js
一定要是script双标签 - 在script双标签中绝对不能写js代码
- script不能互相嵌套
3 语法格式
- JavaScript区分大小写
- JavaScript脚本程序须嵌入在HTML文件中；
- JavaScript脚本程序中不能包含HTML标记代码
- 每行写一条脚本语句,如果一行一条语句则可以省略末尾的分号,如果一行写了两条语句,则需要添加分号;
3.1 js的核心
javascript = ecmascript(js的基础语法)+dom(文档对象模型)+bom(浏览器对象模型)
3.2 数据类型
- 数值(Number)
- 布尔(Boolean)
- 字符串值(String)
- 空值(Null)
- 未定义(undefined)
3.3 变量
3.3.1 什么是变量
变量就是用来在内存中存储数据的;
3.3.2 如何定义变量
var 变量名称 = 值;
3.4 标识符
- 标识符就是给变量 方法 函数 类 对象命名的
- 数字 字母 下划线 $组成
- 不能以数字开头
- 标识符一定要做到
见名知意
3.5 命名法
| 命名法 | 示例 | 常用的地方 |
|---|---|---|
| 帕斯卡命名方法(大驼峰命名法) | UserName | 类 |
| 骆驼命名法(小驼峰命名法) | userName | 对象,变量,方法,函数 |
| 前缀命名法 | mUserName | 对象,变量,方法,函数 |
| 程序猿命名法(下划线命名法) | user_name | 对象,变量,方法,函数 |
- 在同一个项目中,尽量选择其中的两种使用
- 一般建议选择
大驼峰命名法+小驼峰命名法 = 驼峰命名法
4 表达式
- 表达式就是由数字、运算符、括号组成的;
- 表达式是能求得具体的结果的;
10: 是表达式,是数值表达式
"hello": 是表达式,是字符串表达式
a+b:是表达式 值表达式
a+b>30: 是表达式 值表达式 布尔值表达式 布尔表达式
var a=10(不是表达式); a=20(是赋值表达式);
var a = 20;不是表达式,(变量的定义不是表达式)
var c = a + b;不是表达式,(变量的定义不是表达式)
5 运算符
- 优先级：()>!>数学>关系>逻辑>赋值
- ps:当无法确定优先级的时候可以用括号来控制。
5.1 数学运算符
+ - * /
5.2 关系运算符
- == 只判断值不判断类型
- ===判断值以及类型
> < >= <= == === !=
5.3 逻辑运算符
&&:两个表达式都为true时结果才是true
||:只要有一个为true则结果就为true
!: 取反
5.4 位运算符(了解)
& | ! ^ >> >>>
5.5赋值运算符
= += -= *= /= %=
5.6 三元运算符(三目运算符)
布尔表达式?"表达式1":"表达式2";
判断布尔表达式是否成,如果成立,则返回表达式1,否则返回表达式2
5.7 自增 自减
6 流程控制
6.1 判断
if…
if(布尔表达式){
代码块
}
so:判断布尔表达式是否成立,如果成立则执行代码块
if…else…
if(布尔表达式){
代码块1
}else{
代码块2
}
so:判断布尔表达式是否成立,如果成立则执行代码快1,否则执行代码快2
if…else if…else
if(布尔表达式1){
代码块1
}else if(布尔表达式2){
代码块2
}else{
代码块3
}
so: 上面的代码块只会执行一个;
6.2 循环
while循环
while(布尔表达式){
代码块
}
dowhile循环
do{
代码块
}while(布尔表达式);
for循环
for(变量的定义;循环条件;改变循环条件的表达式){
代码块;
}
6.3 分支switch
switch (值){
case 值1:
代码块1;
break;
case 值2:
代码块2;
break;
case 值3:
代码块3;
break;
default:
代码块4;
break;
}
7 函数
7.1 定义
- 函数： 对功能的封装
- 四要素：函数名 形参列表 函数体 返回值
function 函数名称(形参列表){
函数体
}
7.2函数的调用:
函数名称(实参)
8 变量的作用域
- 全局变量: 在全局定义的变量称为全局变量,可以在任意的地方使用
- 局部变量: 在代码块中定义的变量,只能在其定义的作用域使用
<script>
var a = 10; /*全局变量*/
console.log("-----", a);
function func1() {
var name = "admin";
}
func1();
console.log("+++++",name); /*局部变量全局不能使用*/
</script>
<script>
console.log(a); /*使用上面script中定义的全局变量*/
</script>
9 数组
- 可以存储多个数据元素的集合
9.1 数组的创建
var ages = new Array(10, 20, 30, 40); /*定义数组时直接初始化*/
console.log(ages);
var ages1 = new Array(3); /*传递一个参数代表的是数组的长度*/
console.log(ages1);
var ages2 = []; /*数组的定义,定义一个空数组,建议使用这种方式*/
console.log(ages2);
9.2 修改数组中的元素
var ages = [];
ages[2] = 20;
ages[2] = 10; /*使用下标修改数组元素*/
9.3 数组的遍历
- for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for循环进行数组遍历</title>
</head>
<body>
<script>
// 定义数组
var ages = [10,30,40,20,60];
var len = ages.length;
for(var i = 0; i < len; i++){
console.log(ages[i]);
}
</script>
</body>
</html>
- while
<script>
// 定义数组
var ages = [10,30,40,20,60];
var len = ages.length;
var temp = 0;
while(temp < len){
console.log(ages[temp]);
temp++;
}
</script>
- for in
var ages = [10,30,40,20,60];
// for in 里边的i是全局变量
for(var i in ages){
console.log(i);
console.log(ages[i]);
}
console.log(i);
- foreach
ages.forEach(ages=> {
console.log(ages);
}
)
9.4 数组实现映射
var mapData = [];
mapData["name"] = "admin";
mapData["age"] = 20;
mapData[0] = 100;
//数组的遍历 不能使用普通的for循环和while进行遍历
for(var i in mapData){
console.log(mapData[i]);
}
9.5 二维数组
<script>
var data = [[1,2,3],[4,5,6]];
// 二维数组的遍历
for(var i in data){
for(var j in data[i]){
console.log(data[i][j]);
}
}
</script>
- 注意：二维数组还解决不了的问题需要重新思考，不敢在增加维度了
9.6 数组实现栈
- push：尾部追加
- pop：尾部移除
- shift：头部移除
- unshift：头部追加
<script>
var data = [];
data.push(10,20,30);// push尾部追加
data.push(40);
console.log(data);
data.pop();// pop尾部移除
console.log(data);
</script>
9.7 数组实现队列
<script>
var data = [];
data.push(10,20,30);// push尾部追加
data.push(40);
console.log(data);
data.shift();// shift头部移除
console.log(data);
</script>
10 自定义对象
var name = "admin";
//对象的定义
var obj = {
name,
age: 20,
sex: '男'
};
//给对象动态的添加属性
obj.address = "陕西省西安市"
//对象属性的访问
console.log(obj.address);
11 函数
11.1 函数的定义及使用
function 函数名(形参列表){
函数体;
}
<script>
function func1(){
console.log("func1...");
}
func1();
</script>
11.2 匿名函数
-
函数是可以没有函数名称的;
-
把没有函数名称的函数称为 “匿名函数”
-
js中的函数也是
对象 -
匿名函数一定要先定义再使用
//匿名函数
var func2 = function () {
console.log("匿名函数");
}
//匿名函数的调用
func2();
- 函数也可以作为对象的属性
var obj = {
name: "admin",
age: 20,
//对象的属性也可以是函数对象
say: function () {
console.log(this.name + "::" + this.age);
}
}
//对象属性的调用
obj.say();
12 字符串的操作
var str = "hello xzy";
//截取指定位置的字符
console.log(str.charAt(1));
//字符串的拼接(原来的str这个字符串是不会发生变化的)
var str1 = str + "java大数据"
//判断是否以指定的字符结尾 返回boolean类型
console.log(str.endsWith("1xzy"));
//判断是否以指定的字符串开头
str.startsWith("he");
//字符串的长度
console.log(str.length);
//去掉字符串首尾的空格
console.log(str.trim().length);
//指定字符在字符串中首次出现的位置
console.log(str.indexOf("l"));
//指定字符在字符串中最后一次出现的位置
console.log(str.lastIndexOf("l"));
//字符串的截取
console.log(str.substr(2, 2));
//转换为小写
console.log(str.toLowerCase());
//转换为大写
console.log(str.toUpperCase());
//字符串的替换
console.log(str.replace("h", "rr"));
13 正则表达式
就是用来进行字符串的匹配;
13.1 正则对象的创建
1) var regexp= new RegExp("表达式");
2) var regexp = /表达式/;
13.2 正则表达式的范围表示
[]: 表示范围
[a-z]: a到z之间的所有字母
[3-9]: 3-9之间的所有数字
13.3 通配符的表示
\d: 匹配所有的数字
\D: 所有的非数字
\s: 所有的空白字符
\S: 所有的非空白字符
\w: 所有的字母 数字 下划线
\W:所有 非(字母 数字 下划线的)
.: 代表任意字符
13.4 正则表达式的量词
{m}: 匹配具体的m个数
{m,n}: 匹配最少m个最多n个
{m,}: 至少匹配m个
*: ===>{0,}
+:===>{1,}
?:===>{0,1}
13.5 正则表达式开始和结尾
^: 表示字符串的开始
$: 表示字符串的结尾
13.6 子表达式
(): 子表达式
13.7 正则表达式的计算
| :或
13.8 正则表达式的转义符号
\
13.9 匹配qq邮箱或者163邮箱
手机号@qq/163.com
var str = "13991813302@qq.com";
var regexp = /^1[3-9]\d{9}@((qq)|(163))\.com$/
let ret = regexp.test(str);
console.log(ret);
14. js中的闭包(了解)
- 外部函数内部定义了一个内部函数
- 外部函数的返回值是内部函数对象
- 内部函数中使用了外部函数的参数
符合以上三个条件函数就是闭包函数;
//外部函数
function outter(a, b) {
//内部函数
function inner() {
console.log("a+b=" + (a + b));
}
//外部函数的返回值是"内部函数对象"
return inner;
}
//调用外部函数,返回内部函数对象
var innerFunc = outter(10, 20)
//调用内部函数
innerFunc();
15. 柯里化(了解)
在以上的闭包函数中,调用起来很麻烦,我们可以这样来调用
outter(10,20)();
16. 函数对象作为函数的参数
//相当于我写好了一个接口
function calculate(a, b, optFuc) {
return optFuc(a, b)
}
//相当于实现
var ret = calculate(10, 20, function (i, j) {
return i + j;
})
console.log(ret);
17. EcmaScript6中新增的内容
17.1 变量及其常量的定义
let a = 10;//定义变量a
const b="hello";//定义常量
17.2 es6中新增了箭头函数
let func = (形参列表) => {函数体}
- 定义箭头函数其
定义的返回值是一个函数对象func - 调用箭头函数,函数的返回值函数体中的最后一行语句的结果
- 函数体中只有一行语句 {} 可以省略
- 函数的形参只有一个参数,那么函数形参的 () 可以省略
箭头函数中的this指的不是其调用的对象,而是其定义的顶层对象;
普通的匿名函数中的this指的是定义的对象
17.3 es6中的模块化编程
在原生的js并没有模块化编程,但是随着前端的项目越来越复杂,而且团队之间需要很好的写作,原生的src引入其他脚本的方式显得不是很OK,那咋办?有一些大牛就提出来了一些模块化的规范,这些规范中被大家广泛接受的有两个, commonjs和es6两种模块化的规范;
大家现在还无法使用下面的这些语法,先把语法记下来
普通方式暴露接口:
export {变量名称} //普通方式暴露变量可以暴露多个变量出去
默认暴露方式:
export default {变量名称} //默认的暴露变量全局只能暴露一个出去
导入变量的方式:
import {变量名称,...} from "路径" //导入普通方式暴露的变量
默认的导入变量的方式:
import 随便写一个名称 from "路径" //导入default暴露的变量
17.4 扩展表达式
- 扩展运算符可以进行字符串转数组，对象的复制，数组的合并
let array1 = [1,2,3,4,5];
let array2 = [6,7,8];
let array3 = array1.concat(array2); // es5中的，兼容性好
// 可以写成let array3 = [...array1...array2]; // 兼容性不强
console.log(array3);
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
