数组
概念
- 以按顺序保存数据的数据类型
- 可以保存多个数据
基本使用
-
声明语法
- let 数组名 = [数据1,数据2,数据3, ...... 数据n]
let arr = [1, 2, 3, 4, 5]
- let 数组名 = [数据1,数据2,数据3, ...... 数据n]
-
取值语法
- 数组名[下标]
console.log(arr[0]);
- 数组名[下标]
操作数组
-
增
-
数组.push()
- 添加到数组的末尾
- 返回该数组的新长度
- arr.push(元素1,元素2,元素3,......,元素n)
-
let arr = [1, 2, 3, 4, 5]
// 用变量changdu来承接arr.push()返回的新长度
let changdu = arr.push(6, 7, 8, 9)
console.log(arr);
console.log(changdu);
-
数组.unshift()
- 添加到数组的开头
- 返回该数组的新长度
- arr.unshift(元素1,元素2,元素3,......,元素n)
let arr = ['张三', '李四']
let changdu = arr.unshift('王五')
// 用变量changdu来承接arr.unshift()返回的新长度
console.log(arr);
console.log(changdu);
-
删
-
数组. pop()
- 从数组中删除最后一个元素
- 不带参数
- 返回值是删除的元素
- arr.pop()
-
let arr = ['李狗蛋', '张翠花', '赵铁柱']
// 用变量name承接arr.pop()返回的删除的元素
let name = arr.pop()
console.log(arr);
console.log(name);
-
数组. shift()
- 从数组中删除第一个元素
- 不带参数
- 返回值是删除的元素
- arr.shift()
let arr = ['李狗蛋', '张翠花', '赵铁柱']
// 声明一个变量name用于承接arr.shift()返回的删除的元素
let name = arr.shift()
console.log(arr);
console.log(name);
-
数组. splice()
- 删除指定元素
- arr.splice(操作的下标,删除的个数)
- 如果删除的个数不写则默认从指定的起始位置（操作下标）删除 到最后
let arr = ['李狗蛋', '张翠花', '赵铁柱']
//指明操作下标和删除个数
arr.splice(1, 1)
console.log(arr);
let arr = ['李狗蛋', '张翠花', '赵铁柱']
//删除个数省略不写
arr.splice(1)
console.log(arr);
-
查
-
查询数组
-
数组名[下标]
console.log(arr[0]);
-
-
-
改
-
重新赋值
- 数组[下标] = 新值
-
let arr = ['李狗蛋', '张翠花', '赵铁柱']
arr[1] = '陈凤尧'
console.log(arr);
对象
本质
- JavaScript里的一种数据类型
- 无序的数据集合
特点
- 可以详细的描述描述某个事物
- 无序的数据集合
使用
-
声明语法
-
let 对象名 = {}
-
let obj = {
name: '张三',
age: 18,
sex: '男'
}
-
属性访问
-
点形式
- 对象.属性
obj.name
- 对象.属性
-
[]形式
- 对象['属性']
obj['name']
-
组成
-
属性
- 信息或特征（名词）
- 多个属性之间使用英文 , 分隔
- 属性都是成 对出现的，包括属性名和属性值，它们之间使用英文 : 分隔
- 属性就是依附在对象上的变量（外面是变量，对象内是属性）
- 属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
- 对象属性没有顺序
-
方法
-
功能或行为（动词）
-
方法是由方法名和函数两部分构成，它们之间使用 : 分隔
-
方法是依附在对象中的函数
-
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
-
方法调用
- 对象名.方法名()
obj.sayHi() -
对象方法可传递参数跟函数使用方法基本一致
-
-
语法
- let 对象名 = { 属性: 属性值, 方法: 函数 }
let obj = {
name: '张三',
age: '18',
sex: '男',
sayHi: function() {
console.log('你好呀');
}
}
操作对象
-
增
-
增加属性
- 对象.属性 = 值
- 如果对象中没有设置的属性则会新增一个属性
-
let obj = {
name: '张三',
age: '18',
sex: '男',
sayHi: function() {
console.log('你好呀');
}
}
obj.id = 1107
obj.sayHi()
console.log(obj);
-
增加方法
- 对象.方法 = 匿名函数
- 动态为对象添加方法，语法更加灵活
let obj = {
name: '张三',
age: '18',
sex: '男',
sayHi: function() {
console.log('你好呀');
}
}
// 调用sayHi方法
obj.sayHi()
// 新增eatFoods方法
obj.eatFoods = function(foods) {
console.log(`今天吃了${foods}`);
}
// 调用eatFoods方法
obj.eatFoods('黄焖鸡')
console.log(obj);
-
删
- delete 对象.属性/方法
let obj = {
name: '张三',
age: '18',
sex: '男',
sayHi: function() {
console.log('你好呀');
}
}
// 删除sex属性和sayHi方法
delete obj.sex
delete obj.sayHi
console.log(obj);
-
查
- 直接对象.属性查询即可
let obj = {
name: '张三',
age: '18',
sex: '男',
sayHi: function() {
console.log('你好呀');
}
}
obj.sayHi()
console.log(obj);
console.log(obj.name);
-
改
-
重新赋值
- 对象.属性 = 值
- 如果对象中有对应的属性则会更新属性值
-
let obj = {
name: '张三',
age: '18',
sex: '男',
sayHi: function() {
console.log('你好呀');
}
}
// 打印修改前的obj对象
console.log(obj);
// 将name属性的值'张三'更改为'李四'
obj.name = '李四'
// 打印修改后的obj对象
console.log(obj);
// 打印修改后的obj对象中的name属性的值
console.log(obj.name);
遍历对象
-
for in语句
- for (let key in 对象名 ) {}
let obj = {
name: '张三',
age: '18',
sex: '男',
}
// key 代表属性名 obj为对象名
for (let key in obj) {
// 当前遍历的属性值
console.log(obj[key]);
}
- 一般不用for in语句遍历数组、主要是用来遍历对象
内置对象
-
javaScript内部提供的对象，包含各种属性和方法给开发者使用
-
Math数学对象
-
向上取整
- Math.ceil()
-
let num = Math.ceil(1.1)
console.log(num);
-
向下取整
- Math.floor()
console.log(Math.floor(1.1));
-
求最大值
- Math.max()
console.log(Math.max(1.1, 5, 8, 1.6, 6, 9, 12, 9));
-
求最小值
- Math.min()
console.log(Math.min(1.1, 5, 8, 1.6, 6, 9, 12, 9));
-
求从0 - 1 的随机数(包括0 不包括1)
- Math.random()
console.log(Math.random());
-
n - m的随机数
- Math.floor(Math.random() * (m - n + 1)) + n
函数
介绍
-
function
- 执行特定任务的代码块
-
优点
- 代码复用
基本用法
-
声明函数
- function 函数名(){函数体}
function sayHi() {
document.write(`你好我是张三<br>`)
}
-
调用方式
-
函数名()
sayHi()
-
命名规范
- 和变量命名基本一致
- 尽量小驼峰式命名法
- 前缀应该为动词
- 命名建议：常用动词约定
函数的复用代码和循环重复代码区别
-
循环代码写完即执行，不能很方便控制执行位置
-
函数的复用代码
- 随时调用，随时执行，可重复调用
函数传参
-
好处
- 极大提高函数的灵活性
-
基本使用
-
声明语法
-
function 函数名(参数列表/形参){ 函数体 }
-
参数列表
-
传入数据列表
-
声明这个函数需要传入几个数据
-
多个参数间用逗号隔开
-
形参
- 形式上的参数
- 在这个函数内声明的变量
-
-
-
function getSquare(num) {
console.log(num)
document.write(num * num)
}
-
调用语法
-
函数名(传递的参数列表/实参)
-
实参
- 实际上的参数
- 给（形参）这个变量赋值
-
-
注意
-
开发中尽量保持形参和实参个数一致
-
实参的个数大于形参，那么后续传递的值会被忽略
-
果 实参的个数小于形参，那么形参默认为undefined
getSquare(200)
-
函数返回值
-
目的
- 对执行结果的扩展性更高,可以让其他的程序使用这个结果
- 函数内部不需要 输出结果，而是返回结果
-
基本使用
-
当函数需要返回数据出去时，用return关键字
-
语法
- return 数据
-
注意
-
return能立即结束当前函数
- return 后面的数据不要换行写
-
return后面不接数据或者函数内不写return，函数的返回值是undefined
-
-
作用域
-
作用
- 提高了程序逻辑的局部性
- 增强了程序的可靠性
- 减少命名冲突
-
分类
-
全局作用域（全局有效）
-
作用范围
- 作用于整个script标签内部
- 作用于一个独立的js文件
-
全局变量
- 可在任何区域访问或修改
-
-
局部作用域（局部有效）
-
函数作用域
-
作用范围
- 作用于函数内部的代码
-
局部变量
- 只能在当前函数内部访问或修改
-
-
块级作用域({}内有效)
-
作用范围
-
由{}包括
- for语句等
- if语句
-
-
块级变量
- 只能在块级作用域里访问
- 不能跨块访问
- 不能跨函数访问
-
-
-
注意
- 函数内部或者块级作用域内部的变量没有声明就直接赋值了，该变量会被当成全局变量（强烈不推荐）
- 函数内部的形参可以当成局部变量
-
变量访问原则
-
作用域链
-
根据在内部函数可以访问外部函数变量的机制用链式查找哪些数据能被内部函数访问
-
采取就近原则的方式来查找变量最终的值
-
注意
- 只要是代码，至少有一个作用域
- 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
-
-
匿名函数
-
函数表达式
-
将匿名函数赋值给一个变量，并且通过变量名称进行调用
-
语法
-
声明语法
- let 变量/函数名 (){ 函数体 }
-
调用语法
- 函数名()
-
-
let getSum = function (m,n) {
return m + n
}
let res = getSum(3,4)
console.log(res);
-
立即执行函数
-
(function(){
})();
-
(function () {
let res = 1
console.log(1, '李狗蛋写的');
})();
(function () {
let res = 2
console.log(2, '张翠花写的');
})();
-
作用
- 避免全局变量之间的污染
-
注意
- 无需调用，立即执行，本质已经调用了
- 多个立即执行函数之间用分号隔开
