JavaScript 基础
一、数据类型
字符串
定义
用 ' ' / " "包起来的内容,就称为字符串
字符串的对象方法
var str = "hello"
1. concat() // 字符串的拼接 (数组中也有改方法，且用法相同，处理的数据类型不同)
var str1 = " word"
str.concat(str1)
// 返回拼接后的字符串
2. replace() // 替换匹配内容
str.replace("h","1")
// 返回替换后的新字符串 || 无匹配项，返回原字符串
3. toLocalUpCase() & toLocalLowerCase() // 原字符串转大小写
str.toLocaleUpperCase()
// 返回转大写后的新字符串
str.toLocaleLowerCase()
// 返回转小写后的新字符串
4. charAt(下标数) // 获取对应参数下标的字符 （伪数组特性）
str.charAt() // 不传默认返回（第一位）
str.charAt(4)
// 返回下标数对应的字符 || 默认返回第一位 || 无匹配下标返回空字符串
5. charCodeAt(下标数) // 获取对应参数下标的ascall码
str.charCodeAt(3)
// 返回下标数对应的ascll码 || 默认返回第一位的ascll码 || 无匹配下标返回NaN
6. indexOf('e') // 获取对应字符的下标
str.indexOf('e')
// 返回对应字符在字符串中的下标 || 不存在则返回-1
// 应用： 判断字符 是否存在
7. split(",") // 按参数对字符串进行切割后，转为数组
str.split(",")
// 返回按匹配参数切割后的元素组成的数组 || 无匹配项直接整体作为单个元素返回数组 || ""空字符串切割按单个字符作为元素返回数组
// 作为开头和结尾，会单独形成一个""空字符串元素
数值
定义
可以用来做算术运算的数字
布尔值
定义
true / false
undefined
定义
null
定义
数组
定义
用来存储数据的集合
声明方式
1、
var arr = new Array()
2、
var arr = new Array(1,2,4,5,68)
3、
var arr = [1,4,5,6,"a"]
检测数组的方法
1、
Array.isArray([1,3,5,6])
2、关键字
[1,3,5,5] instanceof Array
3、
Object.prototype.toString.call([1,3,5,5])
数组的长度
[1,3,45,6].length
特殊：
动态改变
arr[arr.length] = 4 //相当于下面的语句
arr.push(4)
案例
1、数组去重
2、冒泡排序
3、斐波那契数列
数组的对象方法
var arr = [1,4,6,72,634,4]
1. push() // 末尾添加一个元素
var res = arr.push(6) // [1,4,6,72,634,4,6]
// 返回新数组的 长度
2. pop() // 末尾删除一个元素
arr.pop() // [1,4,6,72,634,4]
// 返回被删除的 元素
3. unshift() // 最开始的位置添加一个元素
arr.unshift(3)
// 返回新数组的 长度
4. shift() // 从开始位置删除一个元素
arr.shift()
// 返回被删除的元素
5. concat() // 数组的拼接
var arr2 = [4,5,6]
arr.concat(arr2)
// 返回两个数组拼接后的 新数组
6. join() // 通过参数将数组中的元素拼接成字符串
arr.join('-')
// 返回用-链接各个元素的字符串
7. reverse() // 数组的反转
arr.reverse()
// 返回将元素反转后的数组
8. slice(开始位置，结束位置) // 截取数组
arr.slice(1,3) // 结束位置取不到值
// 返回截取后的数组
9. splice(开始位置，取几个，替换值1，替换值2) // 删除/替换（可多个）/插入
arr.splice(3,2,5,6,7) // 替换：从下标3开始， 取2位， 将5,6,7三个元素添加进去
arr.splice(3,0,5) // 插入：参数2，取0，代表不删除， 将5，插入到第3位
arr.splice(1,3) // 删除：从下标1开始， 取3个
// 返回值为被截取的元素
10. sort() // 排序
function mode(a,b){
return a - b // 从小到大
}
arr.sort(mode)
function mode(a,b){
return b - a // 从大到小
}
arr.sort(mode)
// 返回排序后的数组
函数
定义
就是把一些重复性的功能,打包起来,然后哪里需要使用,就调用
调用
// 定义一个函数
function fun(msg){
console.log("请重复调用我,我叫"+msg)
}
// 调用
fun("乌龟")
函数实例化
// 实例化: 将功能实现的代码
// 函数实例化: 将功能实现的代码封装起来,重复使用
function add(num1,num2){
return num1 + num2
}
let res = add(3,4) //7
函数的检测
1. instanceof
let arr = [];
let res = arr instanceof Array //true
2. Object.prototype.toString.call()
let arr = [];
let res = Object.prototype.toString.call(arr) //true
函数的返回值
//1. 函数 没有return 返回 undefined
function getNum(num){
//2. return 后面如果没有接语句,返回 undefined
return num
//3. return 下面的代码不会执行
}
let res = getNum(5) //5
匿名函数
function(){
console.log("我是一个没有名字的函数")
}
// 那要调用匿名函数怎么办?
// 用两个括号 ()() => (函数)()
(function(){
console.log("我是一个没有名字的函数")
})()
// 匿名函数的调用,也是自执行函数
函数内部调用函数
function fun1(num){
return num
}
function fun2(num){
fun1(num)
return num
}
var res = fun2(5) // res == 5
arguments
1. 作为实参的伪数组
function sum(a,b,c){
console.log(arguments) //伪数组: 有下标,有长度,没方法
}
var num1 = 10,num2 = 20,num3 = 30;
sum(num1,num2,num3); // arguments的长度为3 元素分别是 10,20,30
sum(num1,num2,num3); // 长度为2 元素分别是 10,20,undefined
2.用来实现函数的重载
// 重载: 用相同的函数名,完成功能相似的方法 在c/c++ 中是用来处理值类型不同,但功能相同的方法
function sum(a,b,c){
if(arguments.length == 2){
return a + b
}else{
return a + b + c
}
}
sum(1,2) // 3
sum(1,2,3) // 6
作用域切割 & 作用域链
!!! 只有函数可以切割作用域
<script>
// 全局作用域
// 全局变量
var num = 2
var test = 4
function (){
// 局部作用域
// 局部变量
var num = 3
var personal = 5
// 作用域链规则 : 当前作用域内未定义,会到更高层去找
console.log(test) // 4; 可以拿到全局的变量
time = 3
}
console.log(personal) // 报错,拿不到局部的变量
console.log(time) // 3; 不规则声明,即没有var, 局部变量会提升为全局变量,可以拿到,打印3
</script>
函数参数问题
// 简单数据类型, 形参 无法影响 实参
function fn(a){
a = 1
}
var a = 2
fn(a)
console.log(a) //2; 简单数据类型,为值引用; 形参的修改不用影响实参
// 复杂数据类型, 可以通过形参, 修改内部元素
function fn(a){
a[2] = 7
a = 3
console.log(a) // 3,会改变形参a, 为3
}
var a = [1,2,4]
fn(a)
console.log(a) // [1,2,7]; 复杂数据类型,为地址引用; 可以被修改内部元素, 但是不会被重新赋值
对象
定义
万物皆对象
创建
var pingguo = new Object()
添加 属性和方法
// 点语法
pingguo.name = "pingguo";
pingguo.price = 12
pingguo.go = function(){
console.log('我会从树上掉下来')
}
获取 属性和方法
// 点语法
pingguo.name // "pingguo"
pingguo.price // 12
pingguo.go() // 控制台打印输出： '我会从树上掉下来'
this
// 谁调用， this 就指向谁
function getName(){
console.log("我的名字叫"+this.name+"我的年龄是"+this.age)
}
var pig = new Object()
pig.name = "page"
pig.age = 3
pig.produce = getName
pig.produce() //我的名字叫page我的年龄是3
工厂模式创建对象
function getName(){
console.log("我的名字叫"+this.name+"我的年龄是"+this.age)
}
function create(name,age){
var obj = new Object()
obj.name = name
obj.age = age
obj.produce = getName
return obj
}
var pig = create("page",12)
console.log(pig.name) // page
console.log(pig.age) // 12
pig.produce() // 我的名字叫page我的年龄是12
new 关键字创建
//使用new关键字,自定义构造函数
//new 到底做了什么事情
//1.先自己创建一个空的对象
//2.把this指向这个对象
//3.把参数赋值给这个对象
//4.将这个对象返回出去
function getStu(name,age) {
this.name = name;
this.age = age;
this.sayHi = function () {
console.log(this.name+this.age);
};
//为什么没有return,原因是new已经帮我们做了这件事情
}
var pig = new getStu('pig',14)
/**
var pig = new getStu('pig',14) 该表达式执行过程如下
理解性，翻译：
var new = new Object()
new.name = name
new.age = age
new.sayHi = function () {
console.log(new.name+new.age);
};
return new
*/
//1. 创建一个新对象
//2. 将所有的this都替换成了这个新对象
//3. 将参数赋值给新对象
//4. 将新对象返回回去
对象的检测
Object.prototype.toString.call(被检测的对象) // 返回值: 会返回类型 [object Object]
var pig = new Object()
Object.prototype.toString.call(pig) // [object Object]
对象的声明方式
1. 内置构造函数声明法
var pig = new Object()
2. 工厂模式
function create(name,age){
var obj = new Object()
obj.name = name
obj.age = age
return oj
}
var pig = create("page",12)
3. new关键字
function create(name,age){
obj.name = name
obj.age = age
}
var pig = new create("page",12)
4. 内置构造函数中，直接初始化
var ll = new Object(
{
name:"蕾蕾",
age:80,
sayHi:function () {
console.log(this.name);
}
}
)
5. 字面量法
var man = {
name:"梁朝伟",
age:17,
sayHi:function () {
console.log("你好啊,要不要,做我男朋友啊");
}
}
操作对象属性的方法
1. 点语法
pig.name = "PGone"
pig.age = 34
2. 利用 关键字
pig[name] = "xiaozhuzhu"
pig[age] = 12
遍历对象的方法
for (var key in Obj) {
// 对象中每个键值对的打印
console.log(key) // 打印键
console.log(obj.key) // 打印值
console.log(key +"："+ obj.key) // 打印键值对
}
变量中可以有对象
//一个对象中,拥有另外一个对象:一个人,拥有一只狗
var xy = {
name:"熊熊",
age:46,
sayHi:function () {
console.log("大家好");
},
dog:{
name:"狗子",
age:8,
color:"绿毛",
shout:function () {
console.log("喵喵喵");
}
}
}
删除对象的属性
var xy = {
name:"熊熊",
age:46,
sayHi:function () {
console.log("大家好");
},
}
delete xy.name
数据类型的检测
typeof(被检测的数据)
二、变量
变量声明
var num
变量赋值
num = 2
变量初始化（声明 & 赋值）
var num = 2
三、算术运算符
- 的两种情况
字符串 + 连接符
拼接字符串
数字 + 运算符
计算数值
- 求差
- 求积
/ 求商
% 求模（取余数）
算术表达式
用算术运算符连接的式子
var num = 3 + 4
算术优先级
先算 乘除求模，再算 加减，有 小括号先算小括号
四、关系运算符 & 关系表达式
关系运算符
< > == === >= <=
关系表达式
关系表达式，是有结果的
var res = a > b
== 与 !=
常用作 if 判断，注意与 = 区分
== 与 ===
== 判断内容
var a = "1"
var num = 1
a == num // true
=== 判断内容 & 判断类型
var a = "1"
var num = 1
a !== num // true
五、逻辑运算符
逻辑运算符
逻辑与 and &&
逻辑或 or ||
逻辑非 not !
逻辑表达式
a && b 有假便是假 找假
a || b 有真便是真 找真
!a 取反
!b 取反
逻辑运算符的优先级
！ > && > ||
短路运算
先进行逻辑运算，结果为真 => 赋值
结果为假 => undefined
var res1 = a && b 有假便是假 a不管是真假，都会判断b 逻辑：假 => undefined 过滤a
var res1 = a || b 有便是真 a为真赋值a，a为假判断b 逻辑：假 => undefined 兼容
六、赋值运算符
+= -= *= /= %= 一种简写方法
num += b 相当于 num = num + b
七、Math对象方法
次方 pow
Math.pow(2,3) 2的3次方
四舍五入
Math.round(54.1) 54
Math.round(29.7) 30
注意与 random 随机数区分！
求绝对值
Math.abs(-49) 49
多个数的最大值与最小值
Math.max(13,12,99,0,8 ) 99
Math.min(13,12,99,0,8) 0
天花板函数
Math.ceil(24.26) 25 向上取整
地板函数
Math.floor(203.8) 203 向下取整
随机数
Math.random() 随机生成0-1之间的数
Math.floor(Math.random()) 随机生成0-100的数
八、自增 / 自减
相同点： 都是 +1
区别：
num++ 先参与运算，再自己+1
++num 自己先+1，再参与运算
九、逗号表达式
（表达式1，表达式2，表达式3.....） 结果永远为最后一个表达式的结果
！注意，前面的表达式都是会执行的
var num1 = 10, num2 = 20;
var res = (++num1,num2++,num1 + num2);
console.log(res); // 32
十、三元表达式
var res = （判断？真的值：假的值）
var res = 5>3 ? "火腿" ： 45
十一、数据类型转换
转换方式
显示转换 & 隐式转换
转字符串
str.toString()
var num = 13
var numStr = num.toString()
numStr == "13" //true
String(str)
var num = null
var numStr = String(null)
numStr === "null" //true
转数值
Number(str)
var str = "25"
var num = Number(str)
num === 25 //true
+str
var str = "25"
var num = +str
num === 25 //true
str*1
var str = "25"
var num = str * 1
num === 25 //true
转布尔值
Boolean(str)
var str = "25"
var bool = Boolean(str)
bool === true //true
!str
var str = "25"
var bool = !!"25"
bool === true //true
十二、表达式
最后能得出值的式子
可以放在任何需要值的地方
一元表达式
a = 3
二元表达式
a + b
三元表达式
a ? b : c
十三、语句
可以看作是一种行为
声明语句：
var a
赋值语句：
a = 4
判断语句：
if
循环语句：
for
注释语句：
//
十四、程序的三种基本结构
顺序结构
由上到下执行代码（浏览器默认）
分支结构
根据不同情况做事情
if语句
if(){}else{}
if(){事件1}else if{事件2}else{事件3}
三元表达式
a？ b : c
判断a => true/fasle
true: b
false: c
switch语句
switch (expression) {//表达式得值
case "小"： //值匹配判断
执行代码
case "大"：
执行代码
default: //否则执行
执行代码
break //结束循环（必须有）
}
循环结构
重复做同一件事情
for(var i = 1; i < 10; i++){
循环体
continue // 退出当次
break // 退出整个循环
}
while(判断语句){
循环体
}
do{
先执行一次
}while(判断语句，是否继续执行)
退出循环
break:
破坏,完全退出,不再执行循环内容
continue:
延续,退出当次,继续执行后续的循环
浙公网安备 33010602011771号