JavaScript 再看十分钟，直接干完！

小藤神
129 阅读4分钟

一、数组

1.基本认识

数组：(Array) 是一个可以保存多个数据的容器，属于引用数据类型
作用: 在单个变量名下存储多个数据

注意：
数组是按顺序保存（有序），所以每个数据都有自己的编号
编号从 0 开始，数据的编号经常称为 索引或下标
数组可以存储任意类型的数据

image.png

  • 重点：我们可以使用for循环来遍历数组，遍历数组也是for循环重要的使用场景
  • 例：

<script>
let arr = ['迪丽热巴', '古力娜扎', '佟丽丫丫', '玛尔扎哈']
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
</script>

2.操作数组

  • 数组本质是数据集合, 操作数据无非就是 增 删 改 查 语法

image.png

  • 查询：数组[索引] 如果查不到则返回 undefined
  • 修改：数组[索引] = 新值 如果下标不存在，则是新增一个数组元素，并修改了数组长度（尽量避免）

image.png

  • 新增数据 ：push()和 unshift() 会修改原数组

image.png

  • 删除数据 ：pop()和 shift() 会修改原数组

image.png

  • 数组.splice() 方法 可以添加也可以删除数组元素

  • 数组.splice(start,deleteCount, item1, item2...)

  • start 起始位置:指定修改的开始位置（从0计数）

  • deleteCount 删除个数:表示要移除的数组元素的个数。可选的，如果省略则默认从指定的起始位置删除到最后

  • item1, item2...： 新增的元素

  • 数组排序sort：数组. sort() 方法可以排序 ，会修改原数组

image.png

  • 倒序排列：arr.reverse()

二、函数

1.基本认识

  • 函数是一个可以被重复使用的代码块
function export55(){
   for (let i = 1; i <= 5; i++) {
    // 里层先打印一行5个小星星  for
     for (let j = 1; j <= 5; j++) {
      document.write('★')
    }
    document.write('<br>') // 等着一行5个小星星打印完毕再换行
  }
}
export55() // 打印第1次小星星
export55() // 打印第2次小星星

image.png

  • tips：可以给形参设置默认值

2.逻辑中断

  • 逻辑中断： 存在于逻辑运算符 && 和 || 中，左边如果满足一定条件会中断代码执行，也称为逻辑短路
  • false && anything // 逻辑与左边false则中断，如果左边为true，则返回右边代码的值
  • true || anything // 逻辑或左边true则中断，如果左边为false，则返回右边代码的值

3.函数返回值 return

image.png

image.png

  • tips：要根据需求，来设定需不需要返回值

4.作用域 scope

image.png

  • 变量访问原则：在能够访问到的情况下先局部，局部没有再找全局，总结： 就近原则

image.png

5.匿名函数

image.png

匿名函数：没有名字的函数,无法直接使用，如果想要执行匿名函数，有3种方式：① 函数表达式 ② 自执行函数 ③ 当做实参传给另外一个函数的形参

6.函数表达式

  • 将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式
// 声明
let fn = function() { 
   console.log('函数表达式')
}
// 调用
fn()

7.立即执行函数（自执行函数） ：避免全局变量之间的污染

  • **注意：**多个立即执行函数要用 ; 隔开否则会报错
(function(){ xxx  })();
(function(){xxxx}());

三、对象

1.基本认识

  • 对象（Object） ：JavaScript里的一种数据类型（引用类型），也是用于存储数据的

image.png

  • 可以用来详细的描述某个事物，是用键值对形式存储语义更明了
  • 对象数据是无序的，数组有序的

image.png

image.png

  • 对象-方法

image.png

2.操作对象

image.png

image.png

  • 查找属性的另外写法
<script>
  // 查询属性的另外写法  对象['属性'] 这个属性必须加引号
  let pig = {
    'pig-name': '佩奇',
    age: 4
  }
// console.log(pig.pig - name)  // NaN
console.log(pig['pig-name']) // 佩奇
console.log(pig['age']) // 4    === pig.age 
</script>

3.遍历对象

  • for 遍历对象的问题：
  • 对象没有长度length，而且是无序的
  • 所以我们要利用 for in 遍历对象，使用for遍历不了对象
  • 例(for in)：
<script>
  // 遍历对象
  let pig = {
    sex: '女',
    age: 4,
    uname: '佩奇',
    weight: 12.6,

  }

for (let key in pig) {
  console.log(key)  // key 是属性  
  console.log(pig[key]) // 对象[变量] 是值
}

注意：数组遍历用传统for， for in 主要用来遍历对象

4.内置对象

内置对象： JavaScript内部提供的对象，包含各种属性和方法给开发者调用

我们之前用过哪些内置对象？

  1. document.write()
  2. console.log()

除了 console、document 内置对象外，JavaScritp 还有其它的内置的对象

  • Math 对象是JavaScript提供的一个“数学”对象

image.png

  • 例（如何生成0-10的随机整数呢？）：
Math.floor(Math.random() * (10 + 1))

四、数据存储

JS 数据类型整体分为两大类：

  1. 基本数据类型（简单数据类型）
  2. 引用数据类型（复杂数据类型）

image.png

内存中堆栈空间分配区别

  • 栈: 优点访问速度快，基本数据类型存放到栈里面

  • 堆: 优点存储容量大，引用数据类型存放到堆里面

image.png

基本数据类型-栈

基本数据类型:

变量的数据直接存放在栈空间中

优点：访问速度快

image.png

复杂数据类型-堆

引用类型（复杂数据类型）：如 Object、Array、Function等

引用类型变量 的地址存放在栈中，真正数据存放在堆空间中

优点：堆空间容量大

image.png

变量声明

image.png

avatar
文章
阅读
粉丝