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]);
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
