深入解析JavaScript对象与数组操作及其预解析机制-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46534711/article/details/124165456

复杂数据类型（地址数据类型 / 引用数据类型）

预解析

在所有代码执行之前，对代码进行通读并解释；

解析了 var 关键字

会把 var 关键字声明的变量进行提前说明，但是不进行赋值

// 预解析 var 关键字步骤;
var a = 10;
// 第一步：定义了一个变量 a ；
// 第二不：将 10 赋值给变量 a ;

解析了声明式函数

会把函数名进行提前声明，并且赋值为一个函数

预解析的无节操

在代码中，不管 if 条件是否为 true ，if 语句代码里面的内容依旧会进行预解析
在函数体内，return 后面的代码虽然不执行，但是会进行预解析

预解析中的重名问题

当使用 var 定义变量和声明式函数重名的时候，以函数为主
只限于在预解析阶段，以函数为准

对象

对象数据类型 object 是 js 中的一种数据类型，是一个复杂数据类型；

创建对象

自变量方式创建对象

var obj = { 键值对, ... };

内置构造函数创建对象

var obj2 = new Object();

对象的基本操作

点语法

// 准备一个空对象
var obj = {};
// 增
obj.name = 'jack';
obj.age = 18;
obj.gender = '男';
// 删
delete obj.name;
// 改(建唯一，修改值即实现改)
obj.gender = '女';
// 查
console.log(obj.age);

数组关联语法

// 准备一个空对象
var obj = {};
// 语法
obj['name'] = 'jack';
obj['age'] = 18;
obj['gender'] = '男';
// 操作同点语法

对象内两种语法的区别

对于名字的操作

符合命名规范的键名，两种语法都可以
纯数字只能使用数组关联语法
带有特殊符号的，只能使用数组关联语法

和变量相关的操作

点语法，不管如何，都不能和变量产生联系，始终访问对象内的某一个准确键名
数组关联语法，[ ] 内为字符串时，准确访问该建名
[ ] 内为变量时，会把变量解析成字符串，再准确访问该键名

对象的遍历

for in 循环

对象内有多少个成员，执行多少次
对象名[键名]就是对象中每一个成员的值

<body>
    <script>
        var obj = {
            name: 'jack',
            age: 18,
            gender: '男'
        }
        // 遍历对象
        for (var k in obj) {
            console.log(k)
        }
        // 结果
        // name
        // age
        // gender
    </script>
</body>

数据类型的存储

复杂数据类型和基本数据类型在存储上是有区别的，存储的内存空间又分为栈内存和堆内存；栈内存是按序排列，堆内存是无序排列；

基本数据类型

直接存储在栈内存中
赋值的时候，是直接值的赋值
改变一个变量，另一个变量不会发生变化

复杂数据类型（地址数据类型 / 引用数据类型）

把数据存储在堆内存中
把地址赋值给栈内存的变量里
赋值的时候，是把变量内存储的地址进行赋值
赋值以后，两个变量操作同一个存储空间

数组数据类型

数组是数据的组合，是一个复杂数据类型Array，里面的数据有序排列，按索引排序，从0开始，依次+1；

数组的创建

字面量方式创建数组

var arr = [];
console.log(arr）；

内置构造函数创建数组

// 创建一个新数组
var arr = new Array();
console.log(arr)
// 创建一个长度为10的数组
var arr1 = new Array(10);
// 创建一个带数据的数组
var arr2 = new Array(10, 20, 30);

数组的操作

数组的 length 属性

比原先长，用 empty 补齐
比原先短，从后面开始删除数据
和原先一样，相当于没有设置

// length 的获取
var arr = new Array();
// length 的设置
arr.length;

数组的索引属性

有索引，相当于修改该索引位置的数据
没有索引，值为 length 时，相当于在数组后面追加数据
值大于 length 时，添加该索引，并用 empty 填充之间的索引

var arr = [100, 200, 300];
// 按索引获取数据
console.log(arr[1]);
// 按索引设置
arr[2] = 'hello';

遍历数组

var arr = [ 100, 200, 300, 400, 500 ];
for (var i = 0; i <= arr.length; i++) {
    console.log(arr[i]);
}

数组的常用方法1（会改变原始数组）

push( ) 添加

var arr = [100, 200, 300];
// 在数组末尾添加一个数据
arr.push(400);
// 返回值：数组最新的长度

pop( ) 删除

var arr = [100, 200, 300];
// 删除数组的最后一个数据
arr.pop();
// 返回值：被删除的数据

unshift( ) 添加

var arr = [100, 200, 300];
// 在数组的最前面插入一个数据
arr.unshift(400);
// 返回值：数组的最新长度

shift( ) 删除

var arr = [100, 200, 300];
// 删除数组最前面的一个数据
arr.shift();
// 返回值：被删除的数据

reverse( ) 倒序

var arr = ['hello','world'];
arr.reverse();
// 返回值：['world', 'hello']

sort( ) 排序

var arr = [10， 20，3，13];
// 数据按位排序
arr.sort();
// => [10, 13, 20, 3]

// 把所有数据进行升序排列
arr.sort(function (a, b) { return a - b });
// 把所有数据进行降序排列
arr.sort(function (a, b) { return b - a });

splice( ) 截取

var arr = [100, 200, 300, 400];
// 从索引1开始，截取两个数据
arr.splice(1, 2);
// => [100, 400]
// 返回值：[200, 300]

// 从索引1开始，删除两个，从索引1开始，插入 500，600，700
arr.splice(1, 2, 500, 600, 700)
// => [100, 500, 600, 700, 400]
// 返回值：[200, 300]

数组常用方法2（不会改变原始数组）

concat( ) 拼接

语法：数组 . concat ( 数据, 数组, ... )
作用：进行数组拼接
返回值：拼接好的数组

join( ) 连接

语法：数组 . join ( '连接符' )
作用：使用连接符把数组内的每一项连接成为一个字符串
返回值：连接好的字符串

slice( ) 截取

语法：数组 . slice ( 开始索引, 结束索引 )
开始索引不写，从头开始截取，结束索引不写，截取到末尾
特点：包前不包后
作用：截取数组，从数组没复制一些内容出来
返回值：一个新的数组
可以填写负整数，表示倒数

indexOf( ) 检索数据

语法：数组 . indexOf ( 数据, 开始索引 )
作用：从开始索引向后检查该数组中是否有该数据
返回值：如果检索到了该数据，那么就是该数据第一次出现的索引；如果没有，则时 -1

lastIndexOf( ) 检索数据

语法：数组 . lastIndexOf ( 数据, 开始索引 )
开始索引选填，默认是 length
作用：从开始索引向前检索该数组中是否有该数据
返回值：如果有，就是第一次出现的索引位置，如果没有，那么就是 -1

数组常用方法3（不会改变原始数组）

forEach( ) 遍历

var arr = [100, 200, 300, 400];
// 有多少个成员，执行多少次
arr.forEach(function (item, index, arr) {
    console.log(item);
    console.log(index);
    console.log(arr);
})
// => 100 200 300 400 
// => 0 1 2 3
// => [100, 200, 300, 400]

map( ) 映射

var arr = [100, 200, 300, 400, 500];
// 开始映射
var res = arr.map(function () {
    // 以 return 的形式书写映射条件
    return item * 10
})
// => res = [1000, 2000, 3000, 4000, 5000]

filter( ) 过滤

var arr = [100, 200, 300, 400]
// 对 arr 进行过滤
var res = arr.filter(function (item) {
    // 以 return 的形式书写过滤条件
    return item > 300
})
// => res = [400]

every( ) 判断全部

var arr = [100, 200, 300, 400]
var res = arr.every(function (item) {
    // 以 return 形式书写判断条件
    return item < 400
})
// 有一个不满足条件，返回 false
// => res = false

some( ) 判断个别

var arr = [100, 200, 300]
var res = arr.some(function (item) {
    return item > 200
})
// 有一个满足，就返回 true
// => res = true

find( ) 查找

var arr = [100, 200, 301, 400, 500]
var res = arr.find(function (item) {
    return item % 2 === 1
})
// => res = 301
// 查找符合条件的数据
// 一般用于查找复杂数据类型

reduce( ) 叠加

var arr = [100, 200, 300, 400]
var res = arr.reduce(function (prev, item, index, arr) {
    return prev + item
}, 0)
// => res = 0+100+200+300+400
// prev 是初始值，初始为值 0

数组塌陷

方案一：不让数组塌陷，倒着循环数组

// 不让数组塌陷
var arr = [1, 2, 3, 4]
console.log('删除之前：', arr)
for (var i = arr.length - 1; i >= 0; i--) {
    arr.splice(i, 1)
}
console.log('删除之后：', arr)

方案二：数组塌陷，循环变量一起塌陷

// 数组塌陷，循环控制变量跟着一起塌陷
var arr = [1, 2, 3, 4]
console.log('删除之前：', arr)
for (var i = 0; i < arr.length; i++) {
    arr.splice(i, 1)
    i--
}
console.log('删除之后；', arr)

数组去重

方案一

// 先排序，然后循环遍历数组，当前和下一个一样，删除
var arr = [1, 2, 3, 4, 3, 2, 1, 2, 3, 2, 1, 2, 3, 4, 5]
console.log('原始数组：', arr)
arr.sort(function (a, b) {return a - b})
console.log('排序之后：', arr)
for (var i = 0; i < arr.length; i++) {
    if (arr[i] === arr[i + 1]) {
        arr.splice(i, 1)
        // 为了解决数组塌陷
        i--
    }
}
console.log('去重之后：', arr)

方案二

// 准备一个新数组，把数据挨个添加进去，如果有，就不添加，没有，就添加
var arr = [1, 2, 3, 4, 3, 2, 1, 2, 3, 2, 1, 2, 3, 4, 5]
console.log('原始数组：', arr)
var newArr = []
for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i])
    }
}
console.log('去重之后：', newArr)

方案三

// 循环遍历数组，每个数据判断其后是否还有相同内容，如果有，删除，没有，继续下一个数据
var arr = [1, 2, 3, 4, 3, 2, 1, 2, 3, 2, 1, 2, 3, 4, 5]
console.log('原始数组：', arr)
for (var i = 0; i < arr.length; i++) {
    var index = arr.indexOf(arr[i], i + 1)
    if (index !== -1) {
        arr.splice(index, 1)
        i--
    }
}
console.log('去重之后：', arr)

方案四

// 方案三思路一致，使用 while
var arr = [1, 2, 3, 4, 3, 2, 1, 2, 3, 2, 1, 2, 3, 4, 5]
console.log('原始数组：', arr)
for (var i = 0; i < arr.length; i++) {
    var index = arr.indexOf(arr[i], i + 1)
    while (index !== -1) {
        arr.splice(index, 1)
        index = arr.indexOf(arr[i], i + 1)
    }
}
console.log('去重之后：', arr)

方案五

// 利用对象数据类型，key 不重名
var arr = [1, 2, 3, 4, 3, 2, 1, 2, 3, 2, 1, 2, 3, 4, 5]
console.log('原始数组：', arr)
var obj = []
for (var i = 0; i < arr.length; i++) {
    var item = arr[i]
    obj[item] = '随便'
}
var newArr = []
for (var k in obj) {
    // 字符串转换为数值
    newArr.push(k - 0)
}
console.log('去重之后：', newArr)

方案六

// 借助数据类型 Set，数据类型不接受重复数据
var arr = [1, 2, 3, 4, 3, 2, 1, 2, 3, 2, 1, 2, 3, 4, 5]
console.log('原始数组：', arr)
// 转换成 Set 数据类型，自动去重
var s = new Set(arr)
console.log(s)
// 把 Set 数据类型还原成数组
var res = Array.from(s)
console.log('去重之后：', res)