10-1.js基础之数组中的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的三个参数:
  • 第一个参数表示正在处理的元素
  • 第二个参数表示正在处理的元素的索引值
  • 第三个参数表示处理的数组

1. forEach()~ 用于调用数组的每个元素，并将元素传递给回调函数

• 功能：遍历数组
• 参数：函数，这个函数自带三个形参，1数据，2索引，3数组自身
• 返回值：undefined
• 是否修改原数据：否

		var arr = ['36','89','99']
		arr.forEach(function(item){
			console.log(item)
		})

2. 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);

3. 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);

4. 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);

5. 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)

6. 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

1. 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 方法不会改变原始数组，而是返回链接好的字符串

2. 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");
  

3. 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));//空数组

4. 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 方法不会改变原始数组

5. reverse 是用来反转数组使用的

• 1.功能：颠倒数组中元素的顺序
• 2.参数：无
• 3.返回值：翻转之后的数组，就是修改之后的原数组
• 4.是否修改原数组：是

  var arr = [1, 2, 3]
  // 使用 reverse 方法来反转数组
  arr.reverse()
  console.log(arr) // [3, 2, 1]
  

6. 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)
  

7. isArray()~ 判断对象是否为数组

	var arr = [];
	console.log(Array.isArray('字符串'));fasle
	var arr = [];
	console.log(Array.isArray(''));true

五.JSON

1. JSON:

		JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于ECMAScript
		(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
		简洁和清晰的层次结构使得JSON成为理想的数据交换语言.易于人阅读和编写同时也易于机器解析和生成，
		并有效地提升网络传输效率。

2. 写法:

		json
		{
			"name": "zhangsan",
			"age": 30,
			"where": "haerbin"
		}
		注意:k值必须写成string形式,必须是双引号

3. JSON的APi

		JSON.stringify()   将数据转换为json
		JSON.parse()       将json数据解析为js对象

4. JSON的演示:

    	var a = {
    		msg:'你吃饭了吗'
    	}
    	var info = JSON.stringify(a)// 将数据转换为json
    	//如果接到一条JSON数据
    	var x = JSON.parse(info)//将json数据解析为js对象

后续完善中······