10-1.js基础之数组中的api+json
文章目录
- 一.数组的常用方法
- 1.1学习api须知
- 二. 数组中常用方法的API
- 三. 数组的api之迭代api(es5当中增加的):把数组元素逐一的拿出来，不需要写循环
- 四.数组的api之其他api
- 五.JSON
一.数组的常用方法
-
数组是一个复杂数据类型，我们在操作它的时候就不能再想基本数据类型一样操作了
-
比如我们想改变一个数组
// 创建一个数组 var arr = [1, 2, 3] // 我们想把数组变成只有 1 和 2 arr = [1, 2] -
这样肯定是不合理，因为这样不是在改变之前的数组
-
相当于心弄了一个数组给到 arr 这个变量了
-
相当于把 arr 里面存储的地址给换了，也就是把存储空间换掉了，而不是在之前的空间里面修改
-
所以我们就需要借助一些方法，在不改变存储空间的情况下，把存储空间里面的数据改变了
1.1学习api须知
- 链接地址: https://www.jianshu.com/p/7e160067a06c
- 数组去重: https://www.jianshu.com/p/9f07787bf8cb
记忆API的方法
1. 功能(是做什么的 )
2. 参数 （需要什么参数）
3. 返回值(返回值是什么)
4. 是否修改原数组（会不会改变原数据）
5. 根据语法写测试demo:ar arr = [1,2,3,4]; // console.log(arr) 获取数组元素api
二. 数组中常用方法的API
1.indexOf()在数组当中查找元素的位置，如果不存在则返回-1 es5新增
- 功能：返回指定数据所在的索引，没有，-1
- 参数：1要查找的数据，2其实位置，可选
- 返回值：索引或-1
- 是否修改原数据：否
var arr = ["hello",3,4,5,"world"];
arr.indeof(3)//1
2.push 向数组的最后添加一个或者多个值,返回数组的新的长度,需要注意的是添加的元素是被添加到了数组的最后
- 1.功能:在最后的位置新增，
- 2.参数：要增加的数据，可以是多个，
- 3.返回值：数组增加之后的长度，
- 4.是否修改原数组：是
var arr = ["hello",3,4,5,"world"];
var res = arr.push("aaa","bbb")
console.log(res);// ["hello",3,4,5,"world","aaa","bbb"]
3.pop 是用来删除数组末尾的一个元素
- 1.功能：删除最后一位
- 2.参数：无
- 3.返回值：删除的数据
- 4.是否修改原数组：是
var arr = ["hello",3,4,5,"world"];
var res = arr.pop()
console.log(res);//["hello",3,4,5];
4.shift 删除数组的第一个元素，并且返回删除的元素
- 1.功能：删除第一位
- 2.参数：无
- 3.返回值：删除的数据
- 4.是否修改原数组：是
var arr = [1, 2, 3] arr.shift() console.log(arr) // [2, 3]
5.unshift 可以向数组的开头添加一个或者多个元素，并且返回新的长度
var arr = [1, 2, 3]
// 使用 unshift 方法想数组的最前面添加一个元素
arr.unshift(4)
console.log(arr) // [4, 1, 2, 3]
- push() pop() unshift() shift():会改变原数组
- 栈操作模式(后进先出)push() pop() ;队列操作模式(先进先出)push() shift()
三. 数组的api之迭代api(es5当中增加的):把数组元素逐一的拿出来，不需要写循环
- es5新增加的api只有在ie9以上才能使用。用~表示
- callback的三个参数:
- 第一个参数表示正在处理的元素
- 第二个参数表示正在处理的元素的索引值
- 第三个参数表示处理的数组
- forEach()~ 用于调用数组的每个元素，并将元素传递给回调函数
- 功能：遍历数组
- 参数：函数，这个函数自带三个形参，1数据，2索引，3数组自身
- 返回值：undefined
- 是否修改原数据：否
var arr = ['36','89','99']
arr.forEach(function(item){
console.log(item)
})
- map()~ 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
- 功能：1遍历数组，2修改数据
- 参数：函数，这个函数自带三个形参，1数据，2索引，3数组自身
- 返回值：数组，中的数据是：每次遍历到数组中数据时的返回值
- 是否修改原数据：否
区别forEach:他可以把数组里面的每一个值拿出来进行逐一处理,处理后结束
map:处理后新的数组,包含处理结果
var arr2 = [10,11,15,9,7,3,1,20,21,22];
var new_arr = arr2.map(function(item) {
return item % 2;
})
console.log(new_arr);
- reduce()~ 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
- 功能：1遍历数组，2归并
- 参数：
- 1.函数，这个函数自带四个形参，1上一个值，2数据，3索引，4数组自身
- 2.指定默认情况下的上一个值↑；如果没有指定，上一个值，默认找数组的第一个数据
- 返回值：最后一个遍历的返回值
- 是否修改原数据：否
var arr = ["hello",3,4,5,6,"world"];
var res = arr.reduce(function(prev,val,idx,self){
console.log(prev,val,idx,self);
return "返回给了下次执行时的prev";
},"prev的默认值，如果没有，prev找数组的第一个数据")
console.log(res);
案例：利用reduce实现数组中所有数据的累加
var arr = [2,3,4,5,6,7];
var res = arr.reduce(function(prev,val,idx,self){
return prev + val;
})
console.log(res);
- filter()~ 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
- 功能：1遍历数组，2过滤数据
- 参数：函数，这个函数自带三个形参，1数据，2索引，3数组自身
- 返回值：数组，中的数据是：每次遍历到数组中数据时的返回值，为true时的值
- 是否修改原数据：否
var arr = [1,2,3,4,5,6,7,8,9,10];
var info = arr.filter(function(item) {
if(item % 2 === 0) {
return true;
}
})
console.log(info);
console.log(arr);
- every()~ 用于检测数组所有元素是否都符合指定条件（通过函数提供）。
- 功能：1遍历数组，2检测所有数据(必须所有返回true，才是true)
- 参数：函数，这个函数自带三个形参，1数据，2索引，3数组自身
- 返回值：布尔值，遍历数组中数据时，必须所有返回true，才是true，只要有一个false，就是false，停止遍历
- 是否修改原数据：否
var arr = [2,4,6,8,10];
var info = arr.every(function(item){
if(item % 2 === 0) {
return true;
}
})//有一个不满足就为false,全满足为true
console.log(info)
- some()~ 用于检测数组中的元素是否满足指定条件
- 功能：1遍历数组，2检测所有数据(只要有一个返回true，就是true，同时停止遍历)
- 参数：函数，这个函数自带三个形参，1数据，2索引，3数组自身
- 返回值：布尔值，遍历数组中数据时，只要有一个返回true，就是true，同时停止遍历
- 是否修改原数据：否
var arr =['d','x','a','b','c'];
// 判断一下，数组当中长度有没有大于4
var info = arr.some(function(item){
if(item.length > 4) {
return true;
}
})
console.log(info);
console.log(arr);
四.数组的api之其他api
join是把数组里面的每一项内容链接起来，变成一个字符串
- 1.功能：将数组转成字符
- 2.参数：元素将由指定的分隔符分隔。默认分隔符为逗号。
- 3.返回值：转换结果
- 4.是否修改原数组：否
var arr = [1, 2, 3] // 使用 join 链接数组 var str = arr.join('-') console.log(arr) // [1, 2, 3] console.log(str) // 1-2-3 - 注意： join 方法不会改变原始数组，而是返回链接好的字符串
splice是截取数组中的某些内容，按照数组的索引来截取
-
1.功能：删除并替换指定位置的数据
-
2.参数：
- 两个：1起始索引，2个数，不插入数据，只删除
- 两个以上：1起始索引，2个数，删除，并，后面都是要插入的数据
-
3.返回值：删除了的数据
-
4.是否修改原数组：是
var arr = ['a','b','c','d']; // 删除元素 var info = arr.splice(1,1); // 第一个值表示要删除元素的位置，第二个值表示删除元素的个数 var info = arr.splice(1); // 里面只有一个值，则表示从1的位置到最后全部删除 ------------------------------------------------------- // 替换元素 var info = arr.splice(1,1,'zhangsan'); // 第一个参数表示删除的位置，第二个参数表示删除的个数，第三个参数表示插入第一个参数所在位置的值。 ------------------------------------------------------------------ // 插入数据 var info = arr.splice(1,0,'zhangsan','lisi'); var info = arr.splice(1,2,"zhangsan");
slice可从已有的数组中返回选定的元素
- 1.功能：截取并拷贝出子数组
- 2.参数：
- 一个：表示从指定位置开始截取，到结束
- 两个：表示从指定位置到结束位置的前一个 - 3.返回值：截取并拷贝出来的新数组
- 4.是否修改原数组：否
var arr = ['a','b','c','d','e','f','g'];
var v1 = arr.slice(0,2);
console.log(v1);//a,b
//---------------------------------
var v2 = arr.slice(0);
console.log(v2);//全部元素
var v3 = arr.slice(,4);
console.log(v3);//报错
console.log(arr.slice(-1)); //e，f，g 截取倒数第一个
console.log(arr.slice());//全部提出来
console.log(arr.slice(100));//空数组
console.log(arr.slice(-3,-2));//e
console.log(arr.slice(-3,1));//空数组
concat用于连接两个或多个数组拼接。
- 1.功能：将数据合并到新数组并返回
- 2.参数：任何数据，如果是数组的话，会被展开再合并进去
- 3.返回值：合并之后的新数组
- 4.是否修改原数组：否
var arr = [1, 2, 3] // 使用 concat 方法拼接数组 var newArr = arr.concat([4, 5, 6]) console.log(arr) // [1, 2, 3] console.log(newArr) // [1, 2, 3, 4, 5, 6]- 注意： concat 方法不会改变原始数组
reverse是用来反转数组使用的
- 1.功能：颠倒数组中元素的顺序
- 2.参数：无
- 3.返回值：翻转之后的数组，就是修改之后的原数组
- 4.是否修改原数组：是
var arr = [1, 2, 3] // 使用 reverse 方法来反转数组 arr.reverse() console.log(arr) // [3, 2, 1]
sort是用来给数组排序的
- 1.功能：排序；默认排序规则是字符的比较规则，升序
- 2.参数：函数：function(m,n){return n-m;} m-n数值升序，n-m数值降序
- 3.返回值：排序之后的数组
- 4.是否修改原数组：是
var a = [5,1,2,4,3]; var info = a.sort(); // 改变了原数组 console.log(info); console.log(a) //-------------------------------------- var b = [11,9,3,33,22,24,14]; b.sort(function(a,b) { return b - a;//没有加法 //a-b将元素从下到大排列 }); console.log(b) //------------------------------------- var c = ['admin','a','hello,world','bbbb']; c.sort(function(a,b){ return b.length - a.length; }); console.log(c); //-------------------------------------- var d = [6,2,3,4,'admin','aaa','pp']; //没法进行排序 d.sort(function(a,b){ return a.length - b.length; }) console.log(d)
- isArray()~ 判断对象是否为数组
var arr = [];
console.log(Array.isArray('字符串'));fasle
var arr = [];
console.log(Array.isArray(''));true
五.JSON
- JSON:
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于ECMAScript
(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言.易于人阅读和编写同时也易于机器解析和生成，
并有效地提升网络传输效率。
- 写法:
json
{
"name": "zhangsan",
"age": 30,
"where": "haerbin"
}
注意:k值必须写成string形式,必须是双引号
- JSON的APi
JSON.stringify() 将数据转换为json
JSON.parse() 将json数据解析为js对象
- JSON的演示:
var a = {
msg:'你吃饭了吗'
}
var info = JSON.stringify(a)// 将数据转换为json
//如果接到一条JSON数据
var x = JSON.parse(info)//将json数据解析为js对象
后续完善中······