JavaScript 索引关联对象数组增删改查循环
Posted 知其黑、受其白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 索引关联对象数组增删改查循环相关的知识，希望对你有一定的参考价值。
阅读目录
- 索引数组
- 关联数组
- 对象
- JavaScript中数组元素删除
- reverse 将数组反序
- 类数组对象转换成数组
- JavaScript数组常用方法
- es5中新增了5个迭代方法
- 查找数组元素位置
- NaN的相等性判断
- 如何使用unicode编码
索引数组
//1、索引数组
let arr=[1,2,3,4,5];
console.log(arr);
增
let arr=[1,2,3,4,5];
arr.push(10);
arr[11]=33;
console.log(arr);
删
let arr=[1,2,3,4,5];
delete arr[1];
console.log(arr);
改
let arr=[1,2,3,4,5];
arr[2]=99;
console.log(arr);
查
let arr=[1,2,3,4,5];
console.log(arr[0]); // 1
循环
let arr=[1,2,3,4,5];
for(let i=0;i<=arr.length-1;i++)
console.log(i,arr[i]);
关联数组
let arr=[1,2,3,4,5];
arr["name"]="孙悟空";
arr["age"]="18";
增
let arr=[1,2,3,4,5];
arr["name"]="孙悟空";
arr["age"]="18";
arr['a']=33;
console.log(arr);
循环
let arr=[1,2,3,4,5];
arr["name"]="孙悟空";
arr["age"]="18";
arr['a']=33;
for(let i in arr)
console.log(i,arr[i]);
let arr=[1,2,3,4,5];
arr["name"]="孙悟空";
arr["age"]="18";
arr['a']=33;
console.log(arr.length); // 5
let arr=[1,2,3,4,5];
arr["name"]="孙悟空";
arr["age"]="18";
arr['a']=33;
//只能获取索引数组部分
for(let i=0;i<=arr.length-1;i++)
console.log(i,arr[i]);
对象
let obj=name:'孙悟空',age:18;
console.log(obj);
增
let obj=name:'孙悟空',age:18;
obj["aa"]="bb";
console.log(obj);
删
let obj=name:'孙悟空',age:18;
delete obj["name"];
console.log(obj);
改
let obj=name:'孙悟空',age:18;
obj["age"]=9999;
console.log(obj);
查
let obj=name:'孙悟空',age:18;
console.log(obj["age"]); // 18
循环
let obj=name:'孙悟空',age:18;
for(let i in obj)
console.log(i,obj[i]);
javascript中数组元素删除
操作数组的 length 属性可以直接删除元素，用 delete 可以将元素置为 undefined。
在JavaScript中，除了Object之外，Array类型恐怕就是最常用的类型了。
与其他语言的数组有着很大的区别，JavaScript中的Array非常灵活。
今天我就来总结了一下JavaScript中Array删除的方法。
大致的分类可以分为如下几类：
1、length
2、delete
3、栈方法
4、队列方法
5、操作方法
6、迭代方法
7、原型方法
1、length
JavaScript 中 Array 的 length 属性非常有特点一一它不是只读的。
因此，通过设置这个属性可以从数组的末尾移除项或添加新项，请看下面例子：
var colors = ["red", "blue", "grey"]; //创建一个包含3个字符串的数组
colors.length = 2;
console.log(colors[2]); //undefined
console.log(colors);
2、delete 关键字
var arr = [1, 2, 3, 4];
delete arr[0];
console.log(arr); //[undefined, 2, 3, 4]
可以看出来，delete 删除之后数组长度不变，只是被删除元素被置为 undefined 了。
3、栈方法
var colors = ["red", "blue", "grey"];
var item = colors.pop();
console.log(item); //"grey"
console.log(colors.length); //2
可以看出，在调用 Pop 方法时，数组返回最后一项，即 ”grey”，数组的元素也仅剩两项。
4、队列方法
队列数据结构的访问规则是FIFO（先进先出），
队列在列表的末端添加项，从列表的前端移除项，使用 shift 方法，它能够移除数组中的第一个项并返回该项，并且数组的长度减 1。
var colors = ["red", "blue", "grey"];
var item = colors.shift();
console.log(item); //"red"
console.log(colors.length); //2
5、操作方法
splice() 恐怕要算最强大的数组方法了，
他的用法有很多种，在此只介绍删除数组元素的方法。
在删除数组元素的时候，它可以删除任意数量的项，只需要指定2个参数：要删除的第一项的位置和要删除的项数，例如 splice(0, 2) 会删除数组中的前两项。
var colors = ["red", "blue", "grey"];
var item = colors.splice(0, 1);
console.log(item); //"red"
console.log(colors); //["blue", "grey"]
6、迭代方法
所谓的迭代方法就是用循环迭代数组元素发现符合要删除的项则删除，用的最多的地方可能是数组中的元素为对象的时候，根据对象的属性例如ID等等来删除数组元素。
下面介绍两种方法：
第一种用最常见的 ForEach 循环来对比元素找到之后将其删除：
var colors = ["red", "blue", "grey"];
colors.forEach(function(item, index, arr)
if(item == "red")
arr.splice(index, 1);
);
console.log(colors);
第二种我们用循环中的 filter 方法：
var colors = ["red", "blue", "grey"];
colors = colors.filter(function(item)
return item != "red"
);
console.log(colors); //["blue", "grey"]
代码很简单，找出元素不是 ”red” 的项数返回给 colors（其实是得到了一个新的数组），从而达到删除的作用。
7、原型方法
通过在 Array 的原型上添加方法来达到删除的目的：
Array.prototype.remove = function (dx)
if (isNaN(dx) || dx > this.length)
return false;
for (var i = 0, n = 0; i < this.length; i++)
if (this[i] != this[dx])
this[n++] = this[i];
this.length -= 1;
;
var colors = ["red", "blue", "grey"];
colors.remove(1);
console.log(colors); //["red", "grey"]
在此把删除方法添加给了Array 的原型对象，则在此环境中的所有 Array 对象都可以使用该方法。
尽管可以这么做，但是我们不推荐在产品化的程序中来修改原生对象的原型。
道理很简单，如果因某个实现中缺少某个方法，就在原生对象的原型中添加这个方法，那么当在另一个支持该方法的实现中运行代码时，就可能导致命名冲突。
而且这样做可能会意外的导致重写原生方法。
reverse 将数组反序
reverse 方法的作用是将数组反序，不需要参数，返回值是反序的数组，影响原数组，并且返回值指向原数组。
let arr=[1,2,3];
console.log(arr);
let new_arr=arr.reverse();
console.log(arr);
console.log(new_arr);
1 作用：将数组反序
2 参数：不需要参数
3 返回值：反序的数组，指向原数组
4 是否影响原数组：影响
类数组对象转换成数组
slice() 方法可从已有的数组中返回选定的元素
最经典的方法，使用Array的slice方法，此方法如果不传参数的话会返回原数组的一个拷贝，因此可以用此方法转换类数组到数组；
function f1()
console.log(arguments);
//console.log(arguments instanceof Array);
//console.log(arguments instanceof Object);
//console.log([]);
// let arr = Array.prototype.slice.call(arguments);
// console.log(arr);
let arr1 = [].slice.apply(arguments);
console.log(arr1);
f1(1,32,43,4);
Array.from() 类数组转换为数组
是ES6中的方法，用于将类数组转换为数组。
只要有length属性的对象，都可以应用此方法转换成数组。
function f1()
console.log(arguments);
let arr = Array.from(arguments);
console.log(arr);
f1(1,32,43,4);
扩展运算符
function f1()
console.log(arguments);
//1,32,43,4
console.log(...arguments);
let arr = [...arguments];
console.log(arr);
f1(1,32,43,4);
jquery 的 $.makeArray()
jQuery的此方法可以将类数组对象转化为真正的数组
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function f1()
console.log(arguments);
let arr = $.makeArray(arguments);
console.log(arr);
f1(1, 32, 43, 5);
</script>
JavaScript数组常用方法
includes() 判断一个数组是否包含一个指定的值
includes() 方法用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回false。
参数是必带的 valueToFind，和可选的 fromIndex。includes() 方法和 indexOf 方法有点像，不同之处是indexOf方法是返回索引。
作用：
includes() 方法用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回false。
includes 返回布尔值（利于 if 条件判断），indexOf 返回数值。
let arr=[23,43,5,43,2,1,32];
let bool_val=arr.includes(43);
console.log(bool_val); // true
let arr=[23,43,5,43,2,1,32];
let bool_val=arr.includes(43,20);
console.log(bool_val); // false
(function()
console.log([].includes.call(arguments, 'a')); // true
console.log([].includes.call(arguments, 'd')); // false
)('a','b','c');
fill() 固定值填充一个数组
fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。参数有必带参数value，可选参数起始索引和终止索引，返回值是修改后的数组，影响原数组
作用：fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
参数：必带参数value（用来填充数组元素的值）、可选参数start（起始索引）和end（终止索引）
返回值：修改后的数组。
是否修改原数组：影响原数组
let arr=[1,2,3,5,6,7,8];
//let new_arr=arr.fill(4);
//let new_arr=arr.fill(4,0,2);
let new_arr=arr.fill(4,-5,-1);
console.log(arr);
console.log(new_arrjs中的增删改查——数组对象，接口