JS的ES6扩展

1.字符串扩展

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

2.数值扩展

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

3.数组扩展

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

4.对象的扩展

1. Object.is(v1, v2):判断2个数据是否完全相等
2. Object.assign(target, source1, source2..):将源对象的属性复制到目标对象上
3. 直接操作 __proto__ 属性
  let obj2 = {};
  obj2.__proto__ = obj1;

5.深度克隆

• 数据类型：

  • 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型
    • 基本数据类型：存储的是该对象的实际数据
  • 对象数据类型：存储的是该对象在栈中引用，真实的数据存放在堆内存里

• 复制数据：基本数据类型直接复制

• 克隆数据：对象/数组

• 常用的拷贝技术：

  • arr.concat(): 数组浅拷贝

  • arr.slice(): 数组浅拷贝

  • JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据

  • 对象/数组的深浅拷贝

例子：

数组的浅拷贝：

 let arr = [1,2,[5,6],3,4];  //嵌套数组
 let arr1 = arr.concat([]); //不会改变现有的arr和[]数组，仅仅将返回被连接数组的一个副本
 console.log(...arr1); // 1 2 [5, 6] 3 4

 arr1[2][0] = 100;
 console.log(...arr1); //1 2 [100, 6] 3 4
 console.log(...arr);  //1 2 [100, 6] 3 4  内部值被修改为浅克隆

 let arr2 = arr.slice(2);  //不会改变现有的arr数组，只是返回一个子数组
 console.log(...arr2);  //[100, 6] 3 4

 arr2[0][1] = 101;
 console.log(...arr2); //[100, 101] 3 4
 console.log(...arr);  //1 2 [100, 101] 3 4   内部值被修改为浅克隆

对象浅拷贝：

 let obj = {
   name: 'wzh',
   age: 25,
   friend:{
     name1:"pppp",
     name2:"qqqq"
   }
 }

 let obj1 = obj;
 obj1.name = "123";
 console.log(obj1); //Object {name: "123", age: 25, friend: Object}
 console.log(obj);  //Object {name: "123", age: 25, friend: Object} 修改源数据为浅拷贝

 let obj2 = {};
 Object.assign(obj2,obj);

 obj2.name = "qwe";
 obj2.friend.name1 = "ttttt";
 console.log(obj2);
 console.log(obj); //内部friend.name1被改变，浅拷贝

对象和数组深克隆：

 // 获得变量类型
 function getType(target){
   return Object.prototype.toString.call(target).slice(8,-1);
 }

 // 深克隆函数
 function cloneUtil(target){
   let result;

   if(getType(target) === 'Object'){
     result = {};
   }else if(getType(target) === 'Array'){
     result = [];
   }else{
     return target;
   }

   // 防止内部还有对象或数组
   for (let i in target) {

     // 获得value
     let item = target[i];

     if(getType(item) === 'Object' || getType(item) === 'Array'){
       result[i] = cloneUtil(item)
     }else{
       result[i] = item;
     }
   }

   return result;
 }

 let obj = {
   name: 'wzh',
   age: 25,
   friend:{
     name1:"pppp",
     name2:"qqqq"
   }
 }

 let obj2 = cloneUtil(obj);
 obj2.friend.name1 = "xxxxxx";
 console.log(obj2);
 console.log(obj);  //没有修改为深克隆

6.Set和Map容器

• Set容器 : 无序不可重复的多个value的集合体

  • 方法：Set(),Set(array),add(value),delete(value),has(value),clear(),size
• Map容器 : 无序的 key不重复的多个key-value的集合体
  • 方法：Map(),Map(array),set(key,value),get(key),delete(key),has(key),clear(),size

例子：使用set将数组去重

 let uniqArr = target => [...new Set(target)];

 let arr = [2,1,2,4,6,1,3,3,7];
 let arr1 = uniqArr(arr);

 console.log(...arr); //2 1 2 4 6 1 3 3 7
 console.log(...arr1); //2 1 4 6 3 7

7.for in和for of遍历

• for in：遍历数组下标或对象的key

• for of：遍历数组值或有iterator接口的容器，不能遍历不同Object对象

 let arr = [9,8,7,6,5,4,3];
 let obj = {
   name:"wzh",
   age:25
 }

 for (let i in arr) {
   console.log(i);  //返回数组下标
 }

 for (let i in obj) {
   console.log(i); //返回对象的key
   console.log(obj[i]); //返回对象value
 }

 for (let i of arr) {
   console.log(i); //返回数组value
 }

 //对具有iterator的接口的容器可以遍历，不能对普通对象遍历
 let set = new Set(arr);
 for (let i of set) {
   console.log(i); //返回set的value

 }