js数据操作常见问题（一天一个问题18）(判断数据类型，拷贝，遍历，拼接增删改查,其他)

本文链接：https://blog.csdn.net/hellowXDW/article/details/108538878

1.判断数据类型方法

值类型	引用类型	es6
number string boolean null undefined	array object function	symbol

判断数据类型方法

判断方法
typeof constructor instanceof Object.prototype.toString()

1.1typeof

操作符返回一个字符串，可以用来判断数据所属的基本类型（null除外），但引用类型的判断结果都为object（function除外）

typeof返回会类型
number,string,boolean,undefined,object,function,symbol

number	string	boolean	undefined	object	function	symbol
number,NaN	string	boolean	undefined	null array object new Date() new RegExp()	function	symbol

typeof null array object new Date() new RegExp() //object(引用类型)
typeof null number //number

1.2 instanceof

表达式为：A instanceof B instanceof 运算符用于判断构造函数B的 prototype 属性是否出现在某个实例对象A的原型链上
不能用于区分null和undefined
string,number,boolean字面量如果不是new关键字创建也不能区分

console.log(undefined instanceof undefined);//Undefined is not defined
console.log(null instanceof Null);//Null is not defined
console.log(1 instanceof Number);//false
console.log(‘1’ instanceof String);//false
console.log(true instanceof Boolean);//false
console.log([1] instanceof Array);//true
console.log(function(){} instanceof Function);//true
console.log({name:“tom”} instanceof Object);//true

1.3 constructor

JS对象的constructor是不稳定的。当开发者重写prototype后，原有的constructor会丢失，constructor会默认为Object
undefined和null不能区分

1.4 Object.prototype.toString

最全面
toString是Object原型对象上的一个方法，该方法默认返回其调用者的具体类型。更严格的讲，是 toString运行时this指向的对象类型, 返回的类型格式为[object,xxx]，xxx是具体的数据类型

1.5 Array.isArray()

用于确定传递的值是否是一个 Array
Array.isArray([1, 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray(“foobar”);
// false
Array.isArray(undefined);
// false

2.拷贝数据

对象
JSON.parse(JSON.stringify())//不能拷贝方法，日期，正则表达式
object.assign({},obj1,obj2)//一级是深拷贝，二级浅拷贝
递归拷贝
数组
slice(idx1, idx2);concat(arr1, arr2,…)//slice()和concat()这两个方法，仅适用于对不包含引用对象的一维数组的深拷贝

2.1 JSON.parse(JSON.stringify())

日期类型、方法、正则表达式均没有复制成功

let obj = {
  a:1,
  arr:[1,3,5,7,9],
  c:{
    num:100
  },
  fn:function(){
     console.log(1)
  },
  date:new Date(),
  reg:/\.*/g
}
function clone1(obj){ // 使用JSON.parse(JSON.stringify(obj))
  return JSON.parse(JSON.stringify(obj))
}
let obj1 = clone1(obj);
console.log(obj === obj1); //false 代表复制成功了
obj.c.num = 555;
console.log(obj.c.num,obj1.c.num) // 555,100
console.log(obj1)
//{a: 1,arr: (5) [1, 3, 5, 7, 9],c: {num: 100},date: "2020-09-15T06:22:52.730Z",reg: {}}
//日期类型、方法、正则表达式均没有复制成功

2.2 obj = object.assign(obj1,obj2,obj3)

一级是深拷贝，二级浅拷贝
浅拷贝将obj2，obj3合并到obj1,改变obj1,返回合并后的对象obj

2.3自定义拷贝方法

 function deepClone(obj){
  　　let objClone =  Array.isArray(obj) ? [] : {};
  　　if (obj && typeof obj === 'object') {
  　　　　for(let key in obj){
  　　　　　　if (obj[key] && typeof obj[key] === 'object'){
  　　　　　　　　objClone[key] = deepClone(obj[key]);
  　　　　　　}else{
  　　　　　　　　objClone[key] = obj[key]
  　　　　　　}
 　　　　}
 　　}
 　　return objClone;
 }

2.4 concat(arr1, arr2,…)slice(idx1, idx2)

var arr1 = [{"name":"weifeng"},{"name":"boy"}];//原数组
var arr2 = [].concat(arr1);//拷贝数组
arr1[1].name="girl";
console.log(arr1);// [{"name":"weifeng"},{"name":"girl"}]
console.log(arr2);//[{"name":"weifeng"},{"name":"girl"}]
复制代码
var a1=[["1","2","3"],"2","3"],a2;
a2=a1.slice(0);
a1[0][0]=0; //改变a1第一个元素中的第一个元素
console.log(a2[0][0]);  //影响到了a2

var b1=[["1","2","3"],"2","3"],b2;
b2=b1.slice(0);
b1[0][0]=0; //改变a1第一个元素中的第一个元素
console.log(b2[0][0]);  //影响到了a2

3.遍历数据

for in for of
foreach 不改原数组，没有返回值，不可跳出
map 不改原数组，返回新数组
filter 不改原数组，返回符合条件的新数组
every ----true/false
some ----true/false
reduce ----累加器
keys，values，entries----返回可遍历对象

for in------index

for of------val

foreach------不改变原数组，没有返回值，不能打断

arr.forEach((item,index,array)=>{
    //执行代码
    参数：value数组中的当前项, index当前项的索引, array原始数组；
})

map----不改变原数组，返回一个新数组

arr.map(function(value,index,array){
　　//do something
　　return XXX
})

filter----不改变原数组，返回符合条件的新数组

arr.filter(item => item.done)

every----每一项为true返回true

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
console.log( arr.every( function( item, index, array ){ 
        return item > 3; 
    })); 
false

some----有一项为true返回true

reduce----接收一个函数作为累加器（accumulator）
var total = [0,1,2,3,4].reduce((a, b)=>a + b); //10
reduceRight-----方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加

find----find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined

var stu = [
    {
        name: '张三',
        gender: '男',
        age: 20
    },
    {
        name: '李四',
        gender: '男',
        age: 20
    }
]
function getStu(element){
   return element.name == '李四'
}
stu.find(getStu)
//返回结果为
//{name: "李四", gender: "男", age: 20}

keys，values，entries----它们都返回一个遍历器对象，可以用for…of循环进行遍历
keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"