索引数组

//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,4console.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')); // trueconsole.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_arr);

find() 返回数组中满足提供的测试函数的第一个元素的值

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。参数是回调函数

作用：find() 方法返回数组中满足提供的测试函数的第一个元素的值。

参数：回调函数（回调函数参数必带element（当前元素）、可选index（当前元素下标）、可选array（当前数组））

返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

let arr=[12,32,43,2,4,11,55,12];
let val=arr.find(function (ele,index) {return ele > 32;
});
console.log(val); // 43

findIndex() 返回数组中满足提供的测试函数的第一个元素的索引

作用：findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。

参数：回调函数（回调函数参数必带 element（当前元素）、可选 index（当前元素下标）、可选array（当前数组））

返回值：数组中通过提供测试函数的第一个元素的索引。否则，返回 -1

let arr=[12,32,43,2,4,11,55,12];let val=arr.findIndex(function (ele,index) {return ele>32;
});console.log(val); // 2

Array.of() 将一组值转变为数组，参数是要转换成数组的值，返回值是新的数组实例

作用：将一组值转变为数组
参数：要转换成数组的值，elementN
返回值：新的数组实例

let arr=Array.of(1,3,'123',true);
console.log(arr); // [1, 3, "123", true]

Array.from() 类数组转换为数组

Array.from() 方法的作用是将类数组或可迭代对象转换为数组，比如 String、Map、伪数组等，必带的参数是 arrayLike（想要转换成数组的伪数组对象或可迭代对象），Array.from()方法的返回值是新的数组实例，不影响原结构。

作用：将类数组或可迭代对象转换为数组
参数：必带的 arrayLike（想要转换成数组的伪数组对象或可迭代对象）
返回值：新的数组实例
是否影响原结构：不影响

1、从 String 生成数组

let arr1=Array.from('foo');
console.log(arr1);// [ "f", "o", "o" ]

2、从 Set 生成数组

const set = new Set(['foo', 'bar', 'baz', 'foo']);
let arr2=Array.from(set);
console.log(arr2);// [ "foo", "bar", "baz" ]

3、从 Map 生成数组

const map = new Map([[1, 2], [2, 4], [4, 8]]);
console.log(map);// {1 => 2, 2 => 4, 4 => 8}let arr3=Array.from(map);
console.log(arr3);// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
console.log(mapper);// {"1" => "a", "2" => "b"}let arr4=Array.from(mapper.values());
console.log(arr4);// ['a', 'b'];

let arr5=Array.from(mapper.keys());
console.log(arr5);// ['1', '2'];

从类数组对象（arguments）生成数组

function f() {console.log(arguments);console.log(Array.from(arguments)); // [ 1, 2, 3 ]
}console.log(Array);
console.log(Array.from);
console.log(Array.prototype);
console.log([]);f(1, 2, 3);

reduce 为数组中的每一个元素依次执行回调函数

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：

初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）initialValue （作为第一次调用 callback 的第一个参数。）

var arr = [1, 2, 3, 4];var sum = arr.reduce(function(prev, cur, index, arr) {console.log(prev, cur, index);return prev + cur;
})console.log(arr, sum);

var  arr = [1, 2, 3, 4];var sum = arr.reduce(function(prev, cur, index, arr) {console.log(prev, cur, index);return prev + cur;
}，0) //注意这里设置了初始值console.log(arr, sum);

打印结果：

0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

这个例子 index 是从 0 开始的，第一次的 prev 的值是我们设置的初始值 0，数组长度是 4，reduce 函数循环 4 次。

结论：如果没有提供 initialValue，reduce 会从索引 1 的地方开始执行 callback 方法，跳过第一个索引。

如果提供 initialValue，从索引0开始。

注意：如果这个数组为空，运用 reduce 是什么情况 ？

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {console.log(prev, cur, index);return prev + cur;
})
//报错，"TypeError: Reduce of empty array with no initial value"

但是要是我们设置了初始值就不会报错，如下：

var  arr = [];var sum = arr.reduce(function(prev, cur, index, arr) {console.log(prev, cur, index);return prev + cur;
}，0)console.log(arr, sum); // [] 0

reduce 的简单用法

当然最简单的就是我们常用的数组求和，求乘积了。

var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)console.log( sum ); //求和，10
console.log( mul ); //求乘积，24

计算数组中每个元素出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];let nameNum = names.reduce((pre,cur)=>{if(cur in pre){pre[cur]++}else{pre[cur] = 1 }return pre
},{})console.log(nameNum); // {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

数组去重

let arr = [1,2,3,4,4,1]let newArr = arr.reduce((pre,cur)=>{if(!pre.includes(cur)){return pre.concat(cur)}else{return pre}
},[])console.log(newArr);// [1, 2, 3, 4]

将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]let newArr = arr.reduce((pre,cur)=>{return pre.concat(cur)
},[])console.log(newArr); // [0, 1, 2, 3, 4, 5]

将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]const newArr = function(arr){return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur) ? newArr(cur) : cur),[])
}console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

对象里的属性求和

var result = [{subject: 'math',score: 10},{subject: 'chinese',score: 20},{subject: 'english',score: 30}
];var sum = result.reduce(function(prev, cur) {return cur.score + prev;
}, 0);console.log(sum) //60

es5中新增了5个迭代方法

forEach() 遍历数组

作用：遍历数组
参数：回到函数，arr.forEach(callback(currentValue [, index [, array]]))
返回值：无（undefined）
是否影响原数组：不影响

let arr=[5,54,12,4,1,23,111];
arr.forEach(function (value,index,array) {console.log(value);console.log(index);console.log(array);
});

forEach() 方法遍历 非连续数组

let arr=[];arr[1]='a';arr[5]='g';arr[10]='h';arr.forEach(function (value,index) {console.log(index);console.log(value);});

map 方法遍历加工数组

let arr=[5,54,12,4,1,23,111];
let new_arr=arr.map(function (value,index,array) {// console.log(value);// console.log(index);// console.log(array);return value+1000;
});console.log(arr);
console.log(new_arr);

filter 方法遍历过滤数组

let arr=[5,54,12,4,1,23,111];
let new_arr=arr.filter(function (value,index,array) {return value>10;
});console.log(arr);
console.log(new_arr);

some 方法检测数组中是否有元素（some）满足条件

let arr=[5,54,12,4,1,23,111];
let bool_val=arr.some(function (value,index,array) {return value>10;
});console.log(arr);
console.log(bool_val);

every 方法检测数组中是否所有（every）元素满足条件

let arr=[5,54,12,4,1,23,111];
let bool_val=arr.every(function (value,index,array) {//return value>10;return value<1000;
});console.log(arr);
console.log(bool_val);

splice 修改数组，既删除，又添加

作用：从数组中删除元素、插入元素、或者同时完成这两种操作.

参数：
必带参数start​（指定修改的开始位置，可负数），可选参数 deleteCount，可选参数 item1, item2,…（表示要添加的元素）

返回值：被删除的元素组成的数组
是否影响原数组：肯定影响

let arr=[1,2,3,4,5];
let delete_arr=arr.splice(1,2,7,8);//在第1号位置删除两个，然后添加7和8console.log(delete_arr);// [2, 3]
console.log(arr);// [1, 7, 8, 4, 5]

1、splice从数组中删除元素

let arr=[1,2,3,4,5];
let delete_arr=arr.splice(1,2);//从1号位置删2个console.log(delete_arr);// [2, 3]
console.log(arr);// [1, 4, 5]

start 为负数，负数表示从倒数的第几个开始

let arr=[1,2,3,4,5];
let delete_arr=arr.splice(-3,2);//从1号位置删2个console.log(delete_arr);// [3, 4]
console.log(arr);// [1, 2, 5]let arr=[1,2,3,4,5];
let delete_arr=arr.splice(-2,0,7,8);//在倒数第二个位置添加7和8console.log(delete_arr);// []
console.log(arr);// [1, 2, 3, 7, 8, 4, 5]

splice向数组中添加元素

let arr=[1,2,3,4,5];
let delete_arr=arr.splice(0,0,7,8);//在第 0 号位置添加7和 8console.log(delete_arr);// []
console.log(arr);// [7, 8, 1, 2, 3, 4, 5]

删除数据的个数和添加数组的个数不一样

let arr=[1,2,3,4,5];
let delete_arr=arr.splice(1,1,7,8,9);//在第1号位置删除1个，然后添加7和8和9console.log(delete_arr);// [2]
console.log(arr);// [1, 7, 8, 9, 3, 4, 5]

concat 将值或者数组拼接成新数组

concat 方法的作用是将值或者数组拼接成新数组，参数是0到n个值或数组，返回值是合并好的新数组，并且不会影响原数组。

作用：将值或者数组拼接成新数组
参数：值或者数组（0个到n个）
返回值：返回合并好的新数组
是否影响原数组：不会改变原数组

1、concat 拼接数组或者值

let arr1=[1,2,3];
let val1=6;
let arr2=[7,8,9];
let val2=11;//参数为值形式
let new_arr1=arr1.concat(val1);
console.log(new_arr1);

let arr1=[1,2,3];
let val1=6;
let arr2=[7,8,9];
let val2=11;// //参数为数组形式
let new_arr2=arr1.concat(arr2);
console.log(new_arr2);

let arr1=[1,2,3];
let val1=6;
let arr2=[7,8,9];
let val2=11;let new_arr3=arr1.concat(val1,arr2,val2);
console.log(new_arr3);

2、concat 做数组的深度拷贝

浅度拷贝：
复制一层对象的属性，并不包括对象里面的为引用类型的数据，当改变拷贝的对象里面的引用类型时，源对象也会改变。

深度拷贝：
重新开辟一个内存空间，需要递归拷贝对象里的引用，直到子属性都为基本类型。两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

浅拷贝

let arr1=[1,2,3];
let arr2=arr1; //浅拷贝
arr2.unshift(4,5,6);console.log(arr2);
console.log(arr1);

深拷贝

let arr1=[1,2,3];
let arr2=arr1.concat();//深拷贝
arr2.unshift(4,5,6);console.log(arr2);
console.log(arr1);

concat 做深度拷贝的不足

当数组内部的值是引用类型例如 Array、Object 时，还是浅拷贝。

let arr1=[1,2,3,{name:'悟空',age:13}];
let arr2=arr1.concat();//深拷贝
arr2.push(4,5,6);console.log(arr2);
console.log(arr1);arr2[3]['name']='悟净';
console.log(arr2);
console.log(arr1);

join 将一个数组（或一个类数组对象）的所有元素连接成一个字符串

join 方法的作用是将一个数组（或一个类数组对象）的所有元素连接成一个字符串，参数是分割字符，返回值是连接号的字符串，不影响原数组。

作用：将一个数组（或一个类数组对象）的所有元素连接成一个字符串
参数：连接数值的分割参数，如果参数为空则是用,（逗号）连接
返回值：连接好的字符串
是否影响原数组：不影响

let arr=[1,2,3];
let arr_str=arr.join("-");
console.log(arr_str);

let arr=[1,2,3];
let arr_str=arr.join();console.log(arr);
console.log(arr_str);
console.log(typeof arr_str);

let arr=[1,2,3];//短线
let arr_str=arr.join("-");
console.log(arr_str);

let arr=[1,2,3];//空字符串
let arr_str=arr.join("");
console.log(arr_str);

连接类数组对象

function f(a, b, c) {var s = Array.prototype.join.call(arguments);console.log(s); // '1,a,true'console.log(typeof s);
}
f(1, 'a', true);

const 声明常量的本质

1、const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。

2、但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const 只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const foo = {};// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

上面代码中，常量 foo 储存的是一个地址，这个地址指向一个对象。

不可变的只是这个地址，即不能把 foo 指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

下面是另一个例子。

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

上面代码中，常量 a 是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。

如果真的想将对象冻结，应该使用 Object.freeze 方法。

const foo = Object.freeze({});// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

上面代码中，常量 foo 指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。

除了将对象本身冻结，对象的属性也应该冻结。

下面是一个将对象彻底冻结的函数。

var constantize = (obj) => {Object.freeze(obj);Object.keys(obj).forEach( (key, i) => {if ( typeof obj[key] === 'object' ) {constantize( obj[key] );}});
};

JSON.stringify() 和 JSON.parse()

JSON.stringify() 的作用是将 JavaScript 对象转换为 JSON 字符串，而 JSON.parse() 可以将JSON字符串转为一个对象。

localStorage/sessionStorage 默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用 json.stringify() 将对象转为字符串，而在取缓存时，只需配合 json.parse() 转回对象即可。

let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
typeof JSON.stringify(arr);//stringlet string = '[1,2,3]';
console.log(JSON.parse(string))//[1,2,3]
console.log(typeof JSON.parse(string))//object

在使用 JSON.parse() 需要注意一点，由于此方法是将JSON字符串转换成对象，所以你的字符串必须符合JSON格式，即键值都必须使用双引号包裹：

let a = '["1","2"]';
let b = "['1','2']";
console.log(JSON.parse(a));// Array [1,2]
console.log(JSON.parse(b));// 报错

上面例子中变量b就无法转换，因为格式不符合。

1、判断数组是否包含某对象，或者判断对象是否相等

//判断数组是否包含某对象
let data = [{name:'echo'},{name:'听风是风'},{name:'天子笑'},],val = {name:'天子笑'};JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true//判断两数组/对象是否相等
let a = [1,2,3],b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true

2、localStorage/sessionStorage可以存储对象

localStorage/sessionStorage 默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用 json.stringify() 将对象转为字符串，而在取缓存时，只需配合 json.parse() 转回对象即可。

//存
function setLocalStorage(key,val){window.localStorage.setItem(key,JSON.stringify(val));
};setLocalStorage('demo',[1,55,3]);

//取
function getLocalStorage(key){let val = JSON.parse(window.localStorage.getItem(key));return val;
};let  a = getLocalStorage('demo');//[1,2,3]

数组遍历的练习

var arr=[{name:'贾宝玉',score:58},{name:'林黛玉',score:98},{name:'薛宝钗',score:90},{name:'贾环',score:45},{name:'贾政',score:88},{name:'袭人',score:59}
];function getPeople(arr) {var new_arr=[];//操作：将arr数组中得分不及格的对象提取出来，添加到new_arr数组中//1、遍历arr数组//i 是indexfor (var i=0;i<arr.length;i++){//2、将得分不及格的对象找出来if(arr[i].score<60){//3、将这个对象添加到new_arr数组中new_arr.push(arr[i]);}}return new_arr;
}console.log(getPeople(arr));

var arr=['猪八戒','白骨精','嫦娥','孙悟空','小白龙'];
//console.log(arr[0]);//用循环来实现数组的遍历
for(var i=0;i<arr.length;i++){console.log(arr[i]);
}

var arr=[[1,2,3],[4,5,6]];
arr[2]=[7,8,9];console.log(arr);
console.log(arr[0]);
console.log(arr[0][1]);
console.log(arr[1][0]);

对象的小实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象的小实例</title>
</head>
<body>
<!--
大雄，学号001，性别男，语文成绩30分，数学成绩30分
静香，学号002，性别女，语文成绩90分，数学成绩90分
哆啦A梦，学号003，性别男，语文成绩100分，数学成绩80分
...表示上述结构，并求出谁的语文成绩最好
-->
<script>var daXiong={name:'大雄',gender:'男',number:'001',score:{chinese:30,math:30}};var jingXiang={name:'静香',gender:'女',number:'002',score:{chinese:90,math:90}};var aMeng={name:'哆啦A梦',gender:'男',number:'003',score:{chinese:100,math:80}};if(daXiong.score.chinese>=jingXiang.score.chinese){//说明大雄的语文成绩比较好，就让大雄和哆啦A梦比if(daXiong.score.chinese>=aMeng.score.chinese){console.log(daXiong);}else{console.log(aMeng);}}else{//说明静香的语文成绩比较好，就让静香和哆啦A梦比if(jingXiang.score.chinese>=aMeng.score.chinese){console.log(jingXiang);}else{console.log(aMeng);}}
</script>
</body>
</html>

对象 json 写法

var zhubajie={'name':'猪八戒',age:999,pet:{name:'哮天犬',age:18}
};
console.log(zhubajie);

for 杨辉三角

for(var i=0;i<5;i++){//内层循环是控制每一行*号的个数for(var j=0;j<i+1;j++){document.write('*');}document.write('<br>');// document.write('*****<br>');
}

查找数组元素位置

indexOf() 方法的作用是在数组中找到给定元素最开始出现的位置，
lastIndexOf() 方法是找到给定元素最后出现的位置，
参数有必带的 searchElement（要查找的元素），
可选的fromIndex（要查找的位置），返回值是找到的索引位置，没找到就返回 -1。

indexOf() 方法查找元素在数组中出现的第一个位置

作用：在数组中找到一个给定元素的第一个索引
参数：必选参数searchElement（要查找的元素），可选参数fromIndex（要查找的位置）
返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
是否影响原数组：不影响

let arr=[2,4,5,7,6,4,3];
let index=arr.indexOf(4);
console.log(index);//1

指定第二个参数 fromIndex（开始查找的位置）

let arr=[2,4,5,7,6,4,3];
let index=arr.indexOf(4,2);
console.log(index);//5

indexOf() 方法找出指定元素出现的所有位置

var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);while (idx != -1) {indices.push(idx);idx = array.indexOf(element, idx + 1);
}console.log(indices);
// [0, 2, 4]

lastIndexOf() 方法找到指定元素在数组中的最后一个的索引

let arr=[2,4,5,7,6,4,3];
let index=arr.lastIndexOf(4);
console.log(index);//5

NaN的相等性判断

NaN和任何数都不相等，包括他本身，如果想判断一个数是否为NaN，可以用 isNaN() 函数。

/*
* NaN和任何数都不相等，包括它本身
* isNaN()函数专门用来判断一个数是不是NaN
*/
var a=NaN;
var b=NaN;
var ans=a==b;console.log('ans='+ans);
console.log(isNaN(a));
console.log(isNaN(b));
console.log(isNaN('hello'));
console.log(+'hello');

如何使用unicode编码

在js中用 \u 四位编码使用，在html中用 &# 编码; 使用。

\u四位编码：
比如 console.log("\u2620");&#编码;
这里的编码需要的是10进制：比如 <h1 style="font-size: 200px;">☠</h1>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>如何使用unicode编码</title><script>console.log('\u4EFA');console.log('\u2665');</script>
</head>
<body>
<!--
在js 中使用unicode编码
console.log('\u4EFA');在html中使用unicode编码
必须是10进制，
<span >♥</span>-->
<span style="font-size: 100px;">仺</span>
<span style="font-size: 100px;">♥</span></body>
</html>

JavaScript 索引、关联、对象数组增删改查循环相关推荐

1. javascript基础学习_数组增删改查......_ZHOU125disorder_

   数组的增删改查...... 1. new Array() (增) 定义一个空格数组之后在把元素添加到数组里面 var arr = new Array() arr[0]="卡卡西"; ...

2. JavaScript之元素对象的“增删改查”

   文章目录 一.增加元素 二.删除元素 三.更改元素 四.元素查找 五.练习代码 一.增加元素 先创建一个空标签对象: var ele=document.createElement("p&qu ...

3. JavaScript学习（四十八）—原型对象的增删改查

   JavaScript学习(四十八)-原型对象的增删改查 一.构造方法与原型对象的图解 二.型对象的增删改查 (一).什么是原型 每个函数都会有一个属性--prototype属性,这个属性都会有一个对象 ...

4. 分布式搜索elasticsearch 索引文档的增删改查 入门

   分布式搜索elasticsearch 索引文档的增删改查 入门 1.RESTful接口使用方法 为了方便直观我们使用Head插件提供的接口进行演示,实际上内部调用的RESTful接口. RESTful ...

5. Django中数据对象的增删改查常用方法,自定义管理器类,过滤器及F和Q对象等知识点总结

   Django对象的增删改查 我们为了对django对象的增删改查进行总结,先在model.py文件中创建类便于举例 定义学生: class Students(models.Model):sname=m ...

6. YUDBModel【绿色插件】-对象序列化、反序列化、对象一键增删改查

   2019独角兽企业重金招聘Python工程师标准>>> 一.YUDBModel 介绍 架构: 使用runtime和Sqlite实现NSObject扩展类YUDBModel,直接实现( ...

7. 微信小程序数组增删改查

   第一次接触微信小程序,不管接触什么新东西,个人觉得只要写好数组的增删改查,就会了解大部分东西了(个人爱好),新手写的东西,代码可能会很胖. 大概就是这么样子,本文只是记录自己摸索微信小程序的过程,可能 ...

8. 微信小程序——数组对象的增删改查

   微信小程序--数组对象的增.删.改.查 1.模拟数据的初始化定义 data: {type_name: '项目分类',name_name: '项目名称',type_sId: "",n ...

9. linux数组操作 增删改查,linuxea:go数组与数组增删改查(19)

   复合数据类型是集合类,并且可以存储多个单值. 在golang中存储的数组是相同的数据类型,并且长度也是其中的一个属性.在go中,数组的长度一旦定义,就不可变.如果声明了长度的变量,只能赋值相同的长度的 ...

10. ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

最新文章

1. RDKit | 基于RDKit的肽和核酸序列转换分子Mol对象
2. 黄仁勋评价股东孙正义
3. agv系统介绍_AGV地面控制系统介绍
4. 【西安石油大学主办|IEEE CPS出版】2020智能控制、测量与信号处理国际学术会议诚邀您投稿参会！...
5. android iot代码设计,一个简单好用的Android Tab 设计与实现
6. 他面前有一个人，有一把刀
7. 用DIV+Css+Jquery 实现的旧版微信飞机大战。
8. 云画质助手iApp源码
9. IDEA 代码格式化插件Save Actions示范
10. 斗鱼直播云原生实践之注册中心篇
11. sonarqube增加阿里p3c规则扫描
12. Google Earth导入GPS设备NMEA文本数据
13. 天宝AMD 300U物理机安装黑群晖处理内存不足的问题
14. 短视频选题的方法脚本结构撰写
15. 解决：SpringBoot使用@Value读取application.properties中文乱码
16. Servlet报错500的问题
17. 清华学姐熬了一个月肝出这份32W字Linux知识手册，在 Github标星31K+
18. 使用selenium抓取华尔街见闻和新浪财经数据
19. 006_HTML布局任务与答案第一期（四川师范大学JavaWeb）
20. 《计算机网络》——文件传输协议FTP、简单邮件传送协议SMTP、邮局协议POP3、网际报文存取协议IMAP、万维网和HTTP协议、超文本传输协议HTTP

热门文章

1. 查看计算机启动项命令,启动项指令命令有哪些?教你设置电脑Windows开机启动项命令...
2. linux 中压缩文件夹命令行,Linux下压缩文件夹命令使用
3. vue项目改图标_vue 项目全局修改element-ui的样式
4. 竞业限制是什么意思？
5. java opts配置_JAVA_OPTS设置参数
6. std::binary_serach, std::upper_bound以及std::lower_bound
7. access如何保存小数点后_你知道PDF文件旋转页面后如何保存吗？
8. 微信小商店设置服务器,微信小商店绑定运营者微信号步骤流程
9. python分位数回归模型_从线性模型到决策树再到深度学习的分位数回归
10. 私有化部署的知识文档系统，不再担心文档数据泄漏