JavaScript基础
JavaScript简介
- 发展
- 99年发布了第3版:普及度最高的版本,包含了核心的内容
- 09发布的第5版:ES5 目前使用度最高的版本。
- 15年出来的第6版:ECMAScript2015 ,简称ES6,后续每年都有一个版本发行。
- 教学主要以ES5为基础,ES6为扩展。
- 兼容性
- ES5,兼容绝大多数浏览器 IE9+
- ES6,针对2015年之后的浏览器。IE全系不支持。edge是12才完美支持,较低版本只支持部分。
JavaScript 组成(面试题常问)
- ECMA只是负责了JavaScript的核心语言,关于浏览器部分是不负责的。即单纯是ECMAscript是不能再浏览器中使用的。
- 一个完整的JavaScript由以下部分组成:(重要)
- ECMAscript:JavaScript核心。
- JavaScript BOM :浏览器对象,负责与浏览器窗口本身的交互部分。浏览器专属
- JavaScript DOM :负责与页面标签交互的部分。浏览器专属
- 其中BOM和DOM是由浏览器厂家负责的,所有不同厂家会有兼容性问题。
JavaScript的运行环境
- 浏览器
- JavaScript 是需要依附HTML页面进行执行
- node.js
- 单独的一个JavaScript运行环境,可以单独运行JavaScript代码
浏览器中使用JavaScript
有两种方式
- 内部的js:在页面中直接添加js代码
- 语法
-
<script> //js代码 </script>
- 外部的js:从外部引入js文件
- 语法
-
<script src="相对链接"></script>
输入与输出
JS输出
-
js中的输出有3中:
- document.write()
- console.log() ———使用最多
- alert()
-
代码
<body>
<div>111</div>
<script>
document.write('<h1>输出到页面</h1>')
document.write('<h1>输出到页面2</h1>')
</script>
<div>2222</div>
</body>
<script>
console.log('hello World')
</script>
<script>
alert('你好,欢迎学习js')
</script>
JavaScript输入
- 概念:可以将用户通过键盘输入的信息保存到程序中。可以用输出语句输出到页面上
- 语法
prompt('请输入您的姓名')
document.write(prompt('请输入您的姓名'))
变量
程序中数据如果需要多次使用,每次都需要重新书写,比较繁琐。
-
概念:一个可以保存数据的容器。每个容器(变量)里的数据都可以重复的被使用
-
使用
- 先定义变量,声明变量使用var
- 通过变量名来保存数据。
- 语法
var name //声明变量
name = prompt('请输入您的姓名') //变量赋值
document.write('你好,我叫' + name) //使用变量
document.write( name + '是前端讲师') //使用变量
- 变量名规范
- 变量名只能包含字母,数字,_,$
- 不能以数字开头,不能包含空格和其他特殊符号
- 不能使用JavaScript的关键字命名
- 尽量见词达意。
- 驼峰命名法
- 大驼峰
- 所有单词首字母大写,其他字母小写
- 小驼峰
- 第一个单词小写,其他单词首字母大写
- 大驼峰
- 使用变量,变量修改
var name //声明变量
name = prompt('请输入您的姓名') //变量赋值 = 在此为赋值运算符 将右边的数据 赋值给 左边(变量)
document.write('你好,我叫' + name) //使用变量
name = '张三' // 再次赋值 会覆盖前面的值
document.write( name + '是前端学生') //使用变量
数据类型
程序中的数据类型
基础数据类型 (考试必考,面试题)
- Number:表示数字,比如 1,2,3,0.6,-666
- String:表示字符串,用双引号,或者单引号包围起来的,例如:“123”,“你好,我叫王继东”
- Boolean:布尔类型,用于表示对错的。
- true:正确,真
- false:错误,假
- undefined:特殊值,表示未定义。
- 声明一个变量,但是不给他赋值,那么他的默认值就是 undefined
- 注意区分什么是未定义变量,什么是未声明变量
- 未声明变量:变量没有声明就直接使用。那么会报错
- 未定义变量:变量声明了,但没有赋值,默认值就是 undefined。
- null :特殊值。表示对象的状态为空,一般用于对象数据处理,表示当前对象没有数据。
- Symbol:表示唯一值,ES6新增的数据类型。每个Symbol数据会表示一个唯一值,多用于表示对象属性的唯一。
- BigInt:超大数,是ES10新增的数据类型,表示大于
-2^31到 2^31-1
的整数,可以表示任意大的整数,常用来表示科学计数。
var number = 10 //整数
var str = '你好,字符串' //字符串
var b = true //布尔类型
// 下列作为了解
var data = undefined; //未定义
var _null = null //空
var symbol = new Symbol() //唯一值
var bigInt = BigInt(10) //超大数
- Object :表示对象。对象是一个复合型的数据,一个对象可以有多个键值对来保存数据。
- 语法
var obj = {} //Object 类型
var obj2 = {
name:'张三',
age:20,
b:true
}
console.log(obj2.age);
console.log(obj2.name);
console.log(obj2.b);
查看基本数据类型方法
- typeof
- 语法
console.log(typeof 12);
console.log(typeof '12');
console.log(typeof false);
console.log(typeof undefined);
console.log(typeof null); //object
console.log(typeof Symbol());
console.log(typeof {}); //object
为什么typeof null 得到的是 Object 而不是null 面试题
因为JavaScript 中不同对象在底层都表示为二进制,而JavaScript中会把二进制前三位都为0的判断成object类型。而null的二进制表示全是0,自然前三位也是0。
数据类型之间的转换
数据之间得转换分为两种
- 强制转换(显示转换)
- 自动转换(隐式转换)
我们手动的调用一些方法,实现数据类型转换
转数字:Number(),parseInt()转整数,parseFloat()转小数
转换字符串: String(),toString()
转换布尔值:Boolean()
- 转换为假 false的数据 : 空字符串 数字0 null undefined
-
转数字
可以使用运算符
- 0
(减零)
var str = '123' - 0
console.log(typeof str); //就是数字类型啦
-
转字符串
直接加一个空字符串
+''
var num = 10 + '' console.log(typeof num);
-
转布尔类型
直接取反再取反
!!
var str2 = 'wf'
console.log( typeof !!str2);
...........................................................................................................................................
JavaScript基础02
运算符
-
+
- 如果两边都是数字类型的数据,就进行加法运算
- 如果一边是字符串,那么久进行字符串拼接
-
-
- 无论减号两边是数字还是字符串都进行减法运算,因为减法可以进行隐式数据转换
-
*
:乘法 -
/
:除法 -
%
:取余,取模
var num = prompt('请输入一个数字')
console.log(num % 2);
-
=
:对变量进行赋值,将等号右边的数据赋值给左边的变量
var a //声明变量
a = 10 // 赋值操作
var a = 10 //声明并赋值
-
+=
:在变量原来的基础上加上指定的数据,并把结果赋值给变量
var num = 0
num+=10 //num = num + 10 = 0 + 10
console.log(num);
var num2 = 0
num2 + 10 //只有运算 并没有重新给num2赋值 所以num2 任然等于 0
console.log(num2); //0
-
-=
num -= 10
num = num - 10
-
*=
-
/=
-
%=
用于判断数据之间的关系的运算符,得到一个布尔类型的结果
面试题:== 与 === 有什么区别
-
==
:用于判断左右两个数据是否相等,不考虑数据类型,只考虑数据值
console.log( 1 == 2); //false
console.log( 2 == 2); //true
console.log( 2 == "2"); //true
console.log( 'abc' == "abc"); //true
-
===
:绝对等于,判断两个数据是否全等,即判断数据值也判断数据类型。
console.log(1 === 2); //false
console.log( 2 === 2); //true
console.log( 2 === '2'); //false
console.log( 'abc' === 'abc'); //true
-
!=
:判断两个数据是否不相等,不考虑数据类型。
console.log(2 != 2); //false
console.log(2 != "2"); //false
console.log( 1 != '2'); //true
console.log( "abc" != 'abc'); //false
-
>
console.log('2' > '1'); //true
-
<
-
>=
-
<=
数组
概念
- 数组是多个数据的仓库,一个数组中可以保存并管理多个数据。
- 官方:数组是一堆有序的数据集合,数组中每个数据都有自己专属的编号
下标
,用来快速的查找数组中某个数据。
定义数组
-
语法
var arr = new Array() //实例化的方式创建数组
var arr2 = [] //字面量的形式
-
基本使用
-
数组长度
length
- 指的就是数组中有几个数据
-
arr.length
- arr2.length = 10 表示设置数组长度为10 如果数组长度不够则后面补空数据,如果数据超出则删除多余数据
-
下标
-
概念:本质上是一个数字,从0开始计算,每个数据都对应了一个下标,下标绝对了该数据在数组中的位置,同时我们可以使用下标操作对应的数据。
-
查询数据
-
arr[下标] arr[1]
-
修改数据
-
arr2[1] = '晚上好'
-
增加数据(不怎么使用,使用数组api进行增加)
-
arr2[arr2.length] = ‘数据’
-
删除数据(不怎么使用,使用数组api操作)
-
arr2.length -= 1
-
遍历
-
var arr = ['a','b','c'] for(var i = 0;i<arr.length;i++){ console.log(arr[i]); }
-
-
扩展
++
: 在自身的基础上+1 并赋值
var num = 10
//++ 放变量前面 和后面的问题
// 放前面:表示 先计算赋值 后输出
//放后面:表示 先输出 后赋值运算
console.log(++num); //11
console.log(num); //11
console.log(num++); //11
console.log(num); //12
--
: 在自身的基础上 -1 并赋值
++和 --情况类似
循环
- 概念:循环结构指的是可以重复执行指定的代码的语法结构
分类
- for(最常见)
- while
- do….while
1.for(){}循环
var i=0 初始化
i<1 结束条件
i++ 代码执行完成后执行的操作
for (var i = 0; i > -3; i--) {
//执行代码
console.log('你好');
console.log(i);
}
- 循环变量初始化语句:循环之前,循环变量初始化赋值,判断是否满足条件,执行{}内的代码,继续执行循环变量++或—
执行流程
2.while(){}循环
语法
//初始化变量
let i = 0
//条件 如果为真 则继续执行{}内代码 如果为假 则结束
while (i < 10) {
console.log(i);
//控制条件 如果不加 则成为死循环
i++
}
如果 while中的条件满足 则会执行{}内的代码,执行完成后继续判断是否满足条件,一直到不满足条件结束循环。
案例:for 和 while数组遍历
var arr = ['a', 'b', 'c', 'd', 'e']
for(var i = 0;i<arr.length;i++){
console.log(arr[i]);
}
for (var i = arr.length-1;i>=0;i--){
console.log(arr[i]);
}
var i = 0
while(i<arr.length){
console.log(arr[i]);
i++
}
var i = arr.length - 1
while (i >= 0) {
console.log(arr[i]);
i--
}
3.do{}while()
语法
var i = 0
do {
console.log(i);
i++
} while (i < 10)
无论是否满足条件都会先执行一次{}中的执行语句,再进行判断是否满足条件。
分支结构
1.if(){}结构
-
概念:if是分支结构中的一种,可以根据某个条件真假来判断是否执行{}中的代码
-
语法
-
if(条件){ 执行语句 }
-
if(){}else{}
-
var arr = [1,2,3,4,5,6] for(var i = 0;i<arr.length;i++){ if(arr[i] % 2 == 0){ console.log(arr[i]+ ':是偶数'); }else{ console.log(arr[i]+ ':是奇数'); } }
-
if( ){ }else if(){ }
-
var num = prompt('请输入星期几的数字 1-7') if(num == 1){ console.log('星期一'); }else if(num == 2){ console.log('星期二'); }else if(num == 3){ console.log('星期三'); }else if(num == 4){ console.log('星期四'); }else if(num == 5){ console.log('星期五'); }else if(num == 6){ console.log('星期六'); }else if(num == 7){ console.log('星期天'); }else{ console.log('输入有误 ,请输入1-7'); }
switch结构
- 当有
固定的分支情况
时,switch结构更加简单 - 语法
-
switch (数据) { case 条件: 执行语句 break; case 条件2: 执行语句 break; default: //以上条件都不满足执行 执行语句 } let num = prompt('请输入1-7') switch (num) { case "1": console.log('汉族'); break; case "2": console.log('星期二'); break; case "3": console.log('星期三'); break; case "4": console.log('星期四'); break; case "5": console.log('星期五'); break; case "6": console.log('星期六'); break; case "7": console.log('星期天'); break; default: console.log('输入有误'); }
- break :用于结束整个switch结构
- switch和if结构的区别
- 他们都是分支结构,而 switch更适合固定分支结构的情况,if适合任何情况。
break & continue
1.break
-
可以用于 switch 和循环结构,是控制结构中的关键字
-
关键字指的是程序中特有含义的单词或者字母,比如 var let const for break等
-
作用:
- 在switch中代表结束整个switch结构
- 在循环中表示结束该循环
-
for(var i = 0 ;i < 10; i++){ console.log(i); if(i == 5){ break; } }
2.continue
- 用于循环结构中
- 作用:跳出当前循环,继续进行下一次循环。
for(var i = 0 ;i < 10; i++){
if(i %2 == 1){
continue;
}
console.log(i);
}
.....................................................................................................................................
逻辑运算符
- 用于关系表达式之间的连接词
1.&&
表示并且的意思,符号前后条件都要满足才为真 ,否则为假【全真则真,一假则假】
2.||
表示或者的意思,只要满足两边一个条件即为真,全部不满足则为假【一真则真,全假则假】
3. !
代表否则,非,,不是的意思,对结果取反操作。
二维数组
二维数组定义方式
var arr = [
[1,2,3],
['a','b','c']
]
var arr1 = [1,2,3]
var arr2 = ['a','b','c']
var arr3 = [arr1,arr2]
var users = new Array(
new Array('admin','123456'),
new Array('admin1','111')
)
console.log(users);
操作和普通数组相同,都是通过下标操作数据
var arr = [1, 2, 3, 4, 'a', 'b', 'c']
arr[1] = 'acd'
console.log(arr);
var arr2 = [[1, 2, 3], ['a', 'b', 'c'], { name: '张三', age: 20 },
{ name: '李四', age: 25 } ]
console.log(arr2[0]); //[1,2,3]
console.log(arr2[0][1]); //2
console.log(arr2[1][2]); //c
console.log(arr2[2]); //{name:'张三',age:20}
console.log(arr2[2].name); //张三
arr2[2].name = '王五'
arr2[1][1] = 'accc'
arr2[arr2.length] = { name: '赵六' }
arr2.length = 2
console.log(arr2);
数组API
API:指的就是编程语言已经写好的代码,开发人员可以直接使用,能够解决一些问题。
数组常用API
方法 | 说明 | 是否改变数组 | 返回值 |
---|---|---|---|
push() | 向数组末尾添加一批数据 | 是 | 数组的长度 |
pop() | 删除数组末尾最后一个数据 | 是 | 被删除的数据 |
unshift() | 向数组开头添加一批数据 | 是 | 数组长度 |
shift() | 删除数组开头的一个数据 | 是 | 被删除的数据 |
splice() | 删除或添加数据 | 是 | 被删除的数据形成的数组 |
有4个参数:
第一个参数:起始下标(下标)
第二个参数:删除的个数
第三个参数及以后:添加的数据
var arr = ['a','b','c','d','e']
//添加功能 第一个参数 起始位置 第二个参数:删除的个数 0 表示不删除 ,
// 第三个参数及后面的参数表示需要添加到该位置的数据
var delArr = arr.splice(2,0,'张三','李四','王五')
console.log(delArr);
console.log(arr);
//删除功能 : 第一个参数 从哪个元素开始删(该元素的下标) 第二个参数:删除多少个元素
var delArr = arr.splice(2,2)
console.log(delArr);
console.log(arr);
- 运行结果
//替换
var delArr = arr.splice(2,1,'赵六')
console.log(delArr);
console.log(arr);
//往数组最后加元素可以多个
var length = arr.push('d','e','f')
console.log(arr);
console.log(length);
//删除数组最后一个元素
var item = arr.pop()
console.log(arr);
console.log(item);
- 运行结果
//数组前面添加多个元素
var length = arr.unshift('x','y','z')
console.log(arr);
console.log(length);
//删除数组前面的一个元素
var item = arr.shift()
console.log(arr);
console.log(item);
方法 | 说明 | 是否改变原数组 | 返回值 |
---|---|---|---|
join() | 能够将数组里面的数据拼接成为字符串 | 否 | 字符串 |
var arr = [1,2,3,4]
var str =arr.join('你好') // 1你好2你好3你好4
var str =arr.join('-') // 1-2-3-4
var str =arr.join('/') // 1/2/3/4
var str =arr.join() // 1,2,3,4
console.log(arr);
console.log(str);
方法 | 说明 | 是否改变原数组 | 返回值 |
---|---|---|---|
indexOf() | 查找某个数据在数组中第一个出现的下标 | 否 | 下标,没有则返回-1 |
lastIndexOf() | 查找某个数据在数组中最后一个出现的下标 | 否 | 下标,没有则返回 -1 |
includes() | 查找某个数据是否在数组中 | 否 | 有则返回true 没有返回false |
var arr = [1,2,3,3,2,1]
console.log(arr.indexOf(3)); //2
console.log(arr.lastIndexOf(3)); //3
console.log(arr.includes(3));//true
其他API
方法 | 说明 | 是否改变原数组 | 返回值 |
---|---|---|---|
concat() | 多个数组进行合并 | 否 | 合并后的数组 |
slice() | 截取数组中的一部分 | 否 | 截取的新数组 |
var arr = [1,2,3,3,2,1]
//第一个参数 开始下标,第二个参数 结束下标(如果不传则截取到最后)
var arr2 = arr.slice(3,5) //(2) [3, 2]
var arr3 = arr.slice(3) // (3)[3, 2, 1]
console.log(arr2);
console.log(arr3);
函数
其实数组的API就是函数
1.函数基础
- 概念:函数本身是一段代码的容器,一个函数里包含了一大段代码,可以在页面中多次调用来执行相同的操作。
- 作用:重复使用的代码,我们封装到函数中,直接调用函数即可,减少了代码量。
- 语法:
//声明函数
function 函数名(){
//执行的代码
}
//调用函数
函数名()
//函数声明式
function show(){
console.log('你好')
}
//函数表达式
var show = function(){
}
-
注意:
-
每调用一次函数,函数里的代码就会执行一次
-
var num = 0 function show(){ num ++ console.log(num) } show() //1 show() //2 show() //3
-
- 定义函数时,函数声明式会整体提升,函数表达式是变量提升(在声明之前可以调用,函数表达式在定义函数之前不能调用,只能定义后调用)
函数的参数
每次函数定义好以后,里面的代码在执行的时候,如果我们需要根据情况不同,得到不同的结果,那么我们就会传入不同的参数。
在某个函数调用时,通过()传入的具体数据,我们称为实参。
函数名(实际的参数)
show('你好')
本质上就是一个变量,在函数定义时写在括号中(),该变量会在函数中自动创建,用于代替实际传入的数据。
function show(形式参数变量名){
//代码体
}
在函数调用时,我们会把实际的参数通过实参传递给函数,函数中以形参接受,在函数中就可以通过形参来处理传入的数据。
function show(name){
var hello = '你好我叫'+ name
var mon = '早上好'+name
console.log(hello);
console.log(mon);
}
show('李四')
show('张三')
函数的返回值
-
通过函数传递不同的参数,我们可以在函数内部得到不同的结果,但是这个结果无法在函数外部使用,就必须将结果返回到函数调用的地方。
-
语法
-
function fn(salary){ salary *= 0.8 salary = (salary-5000)*0.9 + 5000 return salary } var wang = fn(10000) var zansan = fn(20000) console.log(wang); //7700 console.log(zansan); //14900
arguments
- 背景:当一个函数传入的实际参数不确定时,可以使用arguments来解决
- 概念:arguments是JavaScript在函数调用时创建的一个
类数组对象
,里面包含了函数在调用时传入的所有实际参数,也有 length表示个数 -
function push() { console.log(arguments); } push('a','b','c')
案例:模仿数组api push
var arr = [1, 2, 3]
function push() {
console.log(arguments);
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
arr[arr.length] = arguments[i]
}
return arr.length
}
var length = push('a', 'b', 'c')
console.log(arr);
console.log(length);
初识作用域
- 概念:指的就是某个变量或函数生效范围。
- 分类
- 全局作用域:
- 在所有函数以外声明的函数或者变量。
- 函数作用域:
- 在函数内部声明的变量或者函数。
- 全局作用域:
//全局变量
var a = 10
//全局函数
function add(){
//局部变量 只能作用在函数add中使用
var b = 1
console.log('a:',a);
console.log('b:',b);
console.log('b + a:',b + a);
//局部函数
function fn(){
console.log('fn打印b:',b); //fn函数在 add函数内 b的作用范围也是在add以内 所以可以使用
console.log('fn打印a:',a); //a是全局变量 所有地方都可以使用
}
fn() //fn是 add函数的 所以可以在 add函数中调用 fn
}
add()
fn() //报错 fn函数属于 add函数中 外面不能使用
console.log(b); //报错 变量b属于函数add 外面不能使用
.......................................................................
箭头函数
- 概念:是ES6 新增用于快速定义函数的语法,用于辅助函数定义,比普通函数更加简洁
- 语法
1.普通函数
function 函数名(){
}
var 变量名 = function(){
}
2.箭头函数
var 变量名 = (形参) =>{
函数代码
}
函数调用与普通函数一样。
箭头函数简写
var show2 = str =>{
console.log(str);
}
show2('一个参数可以省略括号')
show2('没有参数必须有括号')
函数表达式定义的函数 需要先定义 后面才能使用
当箭头函数主体代码只有一句return 语句时,可以省略{ return }
var add = num => num + 1
// var add = (num) => { return num + 1 }
console.log(add(1));
console.log(add(5));
预告:箭头函数没有this
原生对象
对象的概念
- 原生对象是JavaScript中专门用于描述符合型数据的数据类型(就是对象)
- 符合型数据本身是一个整体,该数据可以包含很多基本数据类型。(万物皆对象)
1.电脑
{
nam:'华为',
price:5000,
cpu:'i7'
}
2.女朋友
{
name:'晓红',
sex:'女',
age:18,
height:170,
weight:100
}
对象的创建
- 语法
1.创建实例的方式
var 变量名 = new Object()
2.字面量形式(最常用)
var 变量名 = {}
创建带数据的对象
var student = {
name:'张三',
age:20,
sex:'男'
}
注意:
- 属性名,与属性值:又称为键值对,属性名就是
键
,属性值就是值
- 对象的属性名是字符串类型或者symbol 类型。
- 对象的属性值可以是任意类型。
var obj = {
0:1,
show:function(name){
console.log('hello,'+name);
}
}
console.log(obj[0]);
obj.show('张三')
如果说你访问的属性不存在时,返回值为 undefined
修改添加一个属性
对象变量名 . 属性名 = 属性值 //修改属性
对象变量名 . 新的属性名 = 属性值 //添加属性
对象的遍历
- for。。。in。。。循环遍历对象
- 语法
var obj = {
name:'张三',
age:19,
sex:'男',
hello:function(){
console.log('hello');
}
}
for(var key in obj){
console.log("key值:",key);
console.log("obj[key]值:",obj[key]);
}
对象中的this
var obj = {
name:'张三',
age:19,
sex:'男',
hello:function(){
console.log('你好,'+ this.name);
}
}
obj.name = '李四'
obj.hello()
对象嵌套
var obj = {
name:'张三',
age:19,
sex:'男',
hello:function(){
console.log('hello ,'+ this.name);
},
arr:['打游戏','看书','写字'],
teacher:{
name:'李四',
sex:'男'
}
}
console.log(obj["teacher"].name);
console.log(obj.arr[1]);