JavaScript-0809

goto_w

已于 2022-08-09 17:39:24 修改

阅读量148

点赞数

分类专栏： js基础语法文章标签： javascript 前端开发语言

于 2022-08-09 16:57:50 首次发布

本文链接：https://blog.csdn.net/qq_52696618/article/details/126251367

版权

js基础语法专栏收录该内容

33 篇文章 0 订阅

订阅专栏

复习-0808

1、函数本质
    创建函数：在当前作用域下创建函数名称的同名变量,将函数代码存储到堆区，变量的栈区存储的是堆区的地址
    调用函数：会根据函数名称找（安装作用域寻找）到函数的地址，在调用起来
2、自调用匿名函数
    (function(形参){
        //函数代码
    })(实参)
    自调用匿名函数 只有一次执行机会
3、回调函数
    将函数作用另外一个函数的参数使用
    function fn(c){

        //其他代码
        c(实参)
    }

    fn(function(形参){

    })
4、作用域
    1、作用：限制变量的使用范围
    2、作用域分类
        局部作用域：以函数作为分割，函数体中创建的变量就是局部变量
        全局作用域：函数体外的就是全局变量(相对)。每一个页面中都存在window的作用域
    3、作用域规则
        1、访问规则：会在当前作用域下寻找变量，如果找到了直接使用否则就上级作用域下寻找，如果上级找到了也是直接使用否则继续向上，到window作用域下如果还没有找到 报错
        2、赋值规则：会在当前作用域下寻找变量，如果找到了直接使用否则就上级作用域下寻找，如果上级找到了也是直接使用否则继续向上，到window作用域下如果还没有找到 就在window下创建这个变量并且赋值
5、预解析
    1、预解析：在代码执行之前将代码的顺序进行调整
    2、规则：
        1、将var声明的变量提前 只是提前了变量的创建 赋值是在执行时才会赋值
        2、将声明式的函数提前,将整个函数全部提前
        3、函数体中规则：当调用函数时先进行形参赋值  然后在进行代码预解析
        4、预解析函数与变量名称同名，优先函数(将变量名称设置为函数的值)
6、递归
    1、分析出做什么
    2、分析退出条件
    3、启动递归
7、对象
    1、对象可以用于表示出一个个体的情况 对象下存在多个属性，属性区分名称与值
    2、创建对象
        1、字面量方式  {属性名称:值,....}
        2、new 关键字 

        
        var key = 'name';
        var object = {
            name:'张三'
        }
        object.name;
        object[key]

当天内容

---
typora-root-url: img
---

# 数组基本操作

## 创建数组

```javascript
// 1、使用字面量方式,在字面量的括号中需要分别指定数组中每一个元素
// 数组中每一个元素自带就存在下标对应
var arr = [1,2,3];
// 2、new 创建数组
var arr2 = new Array();
console.log(arr2);
// new 创建数组 需要指定数组元素 可以传递参数 分别指定
var arr3 = new Array('a','b','c');
console.log(arr3);
console.log(typeof arr);//object
```

## 数组操作

```javascript
var arr = [1,2,3];
// 1、获取数组元素  一定要按照数组的下标获取
console.log(arr[1]);
console.log(arr[6]);//undefined 因为不存在下标为6的元素 所以越界
// 2、获取数组元素的个数
console.log(arr.length);//数组个数与最大下标关系 最大下标 = 元素个数-1  
// 3、数组元素的修改
arr[0] = '1';//数组中修改 arr[下标] = 值  没有数据类型的要求
// 4、数组元素的删除
delete arr[1]; //删除后['1', empty, 3] delete删除数组元素时只是将值清空 元素还保留着
// 5、清空数组
arr.length = 0;
console.log(arr);
```

## 数组遍历

```javascript
var arr = ['a', 'b', 'c'];
// 数组遍历 将数组中每一个元素都取出 按照某种规则进行处理
// 1、常规的for循环
for (var i = 0; i < arr.length; i++) {
    // console.log(arr[i]);
}
// 2、 for in语句 是用于遍历对象下的属性
// key是任意设置的名称，在每一次循环时表示对象属性名称(下标)

for(var key in arr){
    console.log(key);//下标
    console.log(arr[key]);
}
// 使用for in 遍历对象
var obj = {
    name:'旺财',
    age:3,
    eat:function(){
        console.log('吃食');
    }
}
for(var a in obj){
    console.log(a);
    console.log(obj[a]);
}
```

# 数组练习

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .goodslist{
            width: 1200px;
            margin: 10px auto;
        }
        .goods{ width: 200px; margin: 0 10px; float: left; border: 1px solid #eee; box-sizing: border-box;}
        .goods img { width: 180px; height: 180px;}
    </style>
</head>
<body>
    <div class="goodslist" id="main">
        <!-- <div class="goods">
            <img src="https://img11.360buyimg.com/n7/jfs/t1/88793/27/24637/179218/62ec84c4E2894f572/5f8b291efff68d03.jpg.avif" alt="">
            <strong>￥5999.00</strong>
            <p>Apple iPhone 13 (A2634) 128GB 星光色</p>
        </div> -->

    </div>
</body>
</html>
<script>
    // 存放的就是所有商品信息
    // 由于需要存储多个商品信息 data为数组，每一个商品信息存在很多的其他信息，所以每个商品需要设置为对象 最终data为数组套对象的格式
    // 自己使用js构建的数据，后期可以使用ajax技术可以将数据取回来就可以实现不一样
    var data = [
        {
            thumb:'https://img10.360buyimg.com/n7/jfs/t1/36355/37/17672/173947/62ec8473Ed67a4429/235255e5d3dfbd19.jpg.avif',
            price:'5999.00',
            title:'Apple iPhone 13 (A2634) 128GB 星光色'
        },
        {
            thumb:'https://img10.360buyimg.com/n7/jfs/t1/132022/23/12216/60913/5f86195bEacd08599/c5dc348d3f943324.jpg.avif',
            price:'4999.00',
            title:'Apple iPhone 12 (A2404)'
        },
        {
            thumb:'https://img10.360buyimg.com/n7/jfs/t1/132022/23/12216/60913/5f86195bEacd08599/c5dc348d3f943324.jpg.avif',
            price:'14999.00',
            title:'Apple iPhone 12 (A2404)'
        },

    ];
    // 根据data的数据中元素个数组装html字符串
    var html = '';
    for(var i =0;i<data.length;i++){
        // 每次循环 data[i]是对象
        var goods = data[i];
        html += '<div class="goods"><img src="'+goods.thumb+'" alt=""><strong>￥'+goods.price+'</strong><p>'+goods.title+'</p></div>'
    }
    // main是dom对象 innerHTML是dom下的使用方式 可以用于完成标签中的内容设置
    main.innerHTML = html;
</script>
```

# 数组嵌套

数组中每一个元素值是什么数据类型是没有约束的。如果元素值还是一个数组，叫做多维数组

```javascript
// 二维数组
// var arr = [
//     1,
//     'string',
//     [5,6,7]
// ];

var arr2 = [
    [1,2,3],
    [4,5,6],
    [7,8,9]
];
// 二维数组获取元素
var a = arr2[1]
console.log(a)
console.log(a[1]);
// 直接获取到二维数组下的元素内容
console.log(arr2[1][1]);


// 二维数组遍历
for(var i = 0;i<arr2.length;i++){
    // console.log(arr2[i]) 每次遍历 第一个维度的元素
    // arr2[i] 还是一个数组
    for(var j = 0;j<arr2[i].length;j++){
        console.log(arr2[i][j]);
    }
}
// 三维数组
var arr3 = [
    [
        [1,2,3],
        [4,5,6]
    ],
    [
        [7,8,9],
        [10,11,2]
    ]
];
// arr3[0][1][1]
```

# 数组常用方法（重点重点）

1、unshift方法

```javascript
// 数组中方法使用形式 都是 数组变量.方法名称(参数)
var arr = [1,2,3];
// 1、unshift方法 用于在数组的头部添加一个或者多个元素 返回数组中元素的个数，可以修改原数组
var length = arr.unshift('a');
console.log(length);
arr.unshift('b','c');
console.log(arr);
```

2、shift方法

```javascript
// 2、shift 数组的头部删除一个元素 返回值是被删除的那个元素 可以修改原数组
arr = ['a','b','c'];
var res = arr.shift()
console.log(res,arr);
```

3、push方法

```javascript
 // 3、push方法  向数组的尾部加入元素 形式与unshift一样
arr = ['a','b','c'];
arr.push('d');
console.log(arr);
```

4、pop方法

```javascript
 // 4、pop方法 从数组的尾部删除一个元素
arr = ['a','b','c'];
arr.pop();
console.log(arr);
//队列：排队按照顺序来 先进先出 如果以数组0号元素为队伍的头部  使用shift push实现
//栈：先进后出。
```

5、splice

```javascript
// splice 添加元素
arr = ['a','b','c'];
// 1表示的序号 指定了添加的位置在b这个元素的左边  0表示要删除0个元素
arr.splice(1,0,'d','f');
console.log(arr);
// splice 删除元素
arr = ['a','b','c'];
// 第一个参数1 表示开始删除的位置  包含该元素  第二个参数指定了删除多少个
arr.splice(1,1);
console.log(arr);
// splice 修改元素
arr = ['a','b','c'];
// 表示 从1号下标开始寻找，删除2个在添加2个
arr.splice(1,2,'e','f');
console.log(arr)
```

6、concat 合并数组

```javascript
var arr2 = [1,2]
var arr3 = [3,4]
var res = arr2.concat(arr3);
console.log(arr2);
console.log(res);
```

7、sort实现排序

```javascript
// 7、sort - 数组的排序  对数组进行排序 返回的是排序的结果，原数组也修改
var arr = [10,8,1,6,9];
var res = arr.sort();
console.log('arr',arr)
console.log('res',res)
// 默认 sort函数 会按照字符串的方式进行大小比较 最后排序，如果需要按照数字进行排序 就需要调用sort函数并且传递参数。并且参数必须是一个函数 并且函数中存在两个形参
arr = [10,8,1,6,9];
arr.sort(function(a,b){
    // a-b  从小到大
    // b-a 从大到小
    // return a - b ;
    return b - a
})
console.log(arr);
```

8、reverse、join

```javascript
// 8、reverse - 数组的反转
arr = ['a','b','c'];
console.log(arr.reverse());
// 9、join - 将数组中的元素使用指定的连接符连接在一起 最终结果为字符串 默认组合符号是英文逗号
arr = ['a','b','c'];
console.log(arr.join());
console.log(arr.join('@'));
```