ES6学习记录（三）

十六、字符串方法的扩展

includes(str) : 判断是否包含指定的字符串
startsWith(str) : 判断是否以指定字符串开头
endsWith(str) : 判断是否以指定字符串结尾
repeat(count) : 重复指定次数

    let str = 'abcdefg';
    console.log(str.includes('a'));//true
    console.log(str.includes('h'));//false

    //startsWith(str) : 判断是否以指定字符串开头
    console.log(str.startsWith('a'));//true
    console.log(str.startsWith('d'));//false
    
    //endsWith(str) : 判断是否以指定字符串结尾
    console.log(str.endsWith('g'));//true
    console.log(str.endsWith('d'));//false
    
    //repeat(count) : 重复指定次数a
    console.log(str.repeat(5));//abcdefgabcdefgabcdefgabcdefgabcdefg

十七、数值方法的拓展

二进制与八进制数值表示法: 二进制用0b, 八进制用0o
Number.isFinite(i) : 判断是否是有限大的数
Number.isNaN(i) : 判断是否是NaN
Number.isInteger(i) : 判断是否是整数
Number.parseInt(str) : 将字符串转换为对应的数值
Math.trunc(i) : 直接去除小数部分

    console.log(0b1010);//10
    console.log(0o56);//46
    
    //Number.isFinite(i) : 判断是否是有限大的数
    console.log(Number.isFinite(NaN));//false
    console.log(Number.isFinite(5));//true
    
    //Number.isNaN(i) : 判断是否是NaN
    console.log(Number.isNaN(NaN));//true
    console.log(Number.isNaN(5));//falsse

    //Number.isInteger(i) : 判断是否是整数
    console.log(Number.isInteger(5.23));//false
    console.log(Number.isInteger(5.0));//true  这也属于整数
    console.log(Number.isInteger(5));//true

    //Number.parseInt(str) : 将字符串转换为对应的数值
    console.log(Number.parseInt('123abc'));//123
    console.log(Number.parseInt('a123abc'));//NaN

    // Math.trunc(i) : 直接去除小数部分
    console.log(Math.trunc(13.123));//13

十八、数组方法的拓展

Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
Array.of(v1, v2, v3) : 将一系列值转换成数组
find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标

    //Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
    let btns = document.getElementsByTagName('button');//伪数组
    console.log(btns.length);//3
    Array.from(btns).forEach(function (item, index) {
        console.log(item, index);
    });

    //Array.of(v1, v2, v3) : 将一系列值转换成数组
    let arr = Array.of(1, 'abc', true);
    console.log(arr);

    //find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
    let arr1 = [1,3,5,2,6,7,3];
    let result = arr1.find(function (item, index) {
        return item >3 
    });
    let result2  = arr1.find((item)=>{
          return item > 6     //表达式要返回正确的值
    })
    console.log(result);//5


    //findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
    let result1 = arr1.findIndex(function (item, index) {
        return item >3
    });
    console.log(result1);//2

十九、对象方法的扩展

Object.is(v1, v2)：判断2个数据是否完全相等
Object.assign(target, source1, source2…)：将源对象的属性复制到目标对象上
直接操作 proto 属性：（隐式原型）

    console.log(Object.is('abc', 'abc'));//true
    
    console.log(NaN == NaN);//false NaN与任何的数都不相等
     console.log(0 == -0);//true
     
     //这两个属于特殊情况，底层在实现的时候用了字符串进行比较
    console.log(Object.is(NaN, NaN));//true  
    console.log(Object.is(0, -0));//false

    //Object.assign(target, source1, source2..)
    let obj = {name : 'kobe', age : 39, c: {d: 2}};
    let obj2 = {name : 'jignisgniasjfdi', sex: "test", c: {d: 2}}; 
    let obj1 = {};
    Object.assign(obj1, obj,obj2);
    console.log(obj1, obj1.name);//结果如图所示，注意属性的覆盖

    //直接操作 __proto__ 属性
    let obj3 = {name : 'anverson', age : 41};
    let obj4 = {};
    obj4.__proto__ = obj3;
    console.log(obj4, obj4.name, obj4.age);//可以调用原型上面的属性和方法

在这里插入图片描述

二十、set 和 map 的常用方法

1、set：无序不可重复的多个value的集合体

Set() ：通个过new Set（）生成set 对象
Set(array) ：通过数组生成set对象
add(value)
delete(value)
has(value)
clear()
size
2、 Map容器 : 无序的 key不重复的多个key-value的集合体
Map()：通过new Map() 生成map对象
Map(array)：通过数组生成map对象
set(key, value)
get(key)
delete(key)
has(key)
clear()
size

    let set = new Set([1,2,3,4,3,2,1,6]);
    console.log(set);
    set.add('abc');
    console.log(set, set.size);//会将重复的自动删除
    //delete(value)
    set.delete(2);
    console.log(set);
    //has(value)
    console.log(set.has(2));//false
    console.log(set.has(1));//true
    //clear()
    set.clear();
    console.log(set);



    let map = new Map([['abc', 12],[25, 'age']]);//注意是二维数组，数组里面如果出现超过两个，自动去除，就要前两个
    console.log(map);
    map.set('男', '性别');
    console.log(map);
    console.log(map.get(25));//age
    //delete(key)
    map.delete('男');
    console.log(map);
    console.log(map.has('男'));//false
    console.log(map.has('abc'));//true
    map.clear();
    console.log(map);

二十一、for…of…使用总结

for(let value of target) { }：循环遍历

遍历数组
遍历Set：可以用来对数组进行去重。
遍历Map
遍历字符串
遍历伪数组

二十二、深度克隆

数据类型：
数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型。基本数据类型存储的是该对象的实际数据，对象数据类型存储的是该对象在栈中引用，真实的数据存放在堆内存里。
克隆数据的区别：
1、基础数据的复制是可以直接复制的，因为存放的就是实际的数据。
2、对象直接复制时，复制的是对象在栈内存中的引用
常用的拷贝：
1、直接复制，属于浅拷贝
2、Object.assign() 浅拷贝
3、Array.prototype.concat() 浅拷贝
4、Array.prototype.slice() 浅拷贝
5、JSON.parse(JSON.stringify())深拷贝

参考老师的自定义深度克隆方法。
主要：
1、Object.prototype.toString.call()可以判断是对象还是数组
2、for ..in..数组是下标，对象是key，都可以用obj[item]来调用

//获取类型
function getType(target){
	return Object.prototype.toString.call(target).slice(8,-1)  
}
//返回结果
function getClone(target){
	let type = this.getType(target);
	let result;
	if(type==='Object'){  //为了每次递归时数据不用覆盖
		result={}
	}else if(type==='Array'){
		result=[]
	}else{
		return target;
	}
	
  for(let i in target){
  	if(this.getType(target[i])==='Object'||this.getType(target[i])==='Array'){
  		result[i]=this.getClone(target[i])  //进行递归
  	}else{
  		result[i]=target[i]
  	}
  }
  return result;
}


let a={
	x:1,
	y:2,
	z:[232,232434]
}
b=this.getClone(a)
b.x=4748;
b.z[0]=989999999
console.log(b,b.z)