数据（string、object、array、function）的方法扩展

数据（string、object、array、function）的方法扩展

1. 字符串的扩展

includes ： 查看字符串是否包含字符串

startsWith ： 查看字符串是否以某个字符或者字符串开头

endsWith ： 查看字符串是否以某个字符或者字符串结尾

repeat ： 重复字符串指定的次数

let str = "abcdefg";
// 查看字符串中是否包含某个字符或者某个字符串
console.log(str.includes('a'));  // true
console.log(str.includes('s'));  // false
console.log(str.includes('d'));  // true
console.log(str.includes('f'));  // true
console.log(str.includes('g'));  // true

// repeat  重复字符串  内置一个查宿  参数是重复的次数
console.log('#'.repeat(50));
console.log('#'.repeat(5));

// 查看字符串是否以某个字符或者字符串开头
console.log(str.startsWith('a'));  // true
console.log(str.startsWith('ab'));  // true
console.log(str.startsWith('abc'));  // true
console.log(str.startsWith('abce'));  // false
console.log(str.startsWith('e'));  // false
console.log('#'.repeat(50));

// 查看字符串是否以某个字符或者字符串结尾
console.log(str.endsWith('g'));  // true
console.log(str.endsWith('hg'));  // false
console.log(str.endsWith('gh'));  // false
console.log(str.endsWith('fg'));  // true

2. 数值的扩展

Number.isFinite ： 判断是否是有限大

Number.MAX_VALUE ： 数字最大值

Number.isInteger ： 判断是否是整数

Number.parseInt ： 将字符串转换为整型

Math.trunc ： 向下取整

// 数字的最大值
// console.log(Number.MAX_VALUE);
// console.log(1.7976931348623157e+308);
// console.log(1.7976931348623157e+309);

// 判断数字是否有限大
// console.log(Number.isFinite(999999999999999999999999999999999999999999999999999999999999999999999));
// console.log(999999999999999999999999999999999999999999999999999999999999999999999);
// console.log(9999**99);
// console.log(Number.isFinite(9999**99));
// console.log(Number.isFinite(1.7976931348623157e+308));
// console.log(Number.isFinite(1.7976931348623157e+309));
// console.log(Number.isFinite(Infinity));

// 判断数字是否是整数
// console.log(Number.isInteger(12.3));  // false
// console.log(Number.isInteger(12.0));  // true
// console.log(Number.isInteger(12.));  // true
// console.log(Number.isInteger(12));  // true
// console.log(Number.isInteger('12'));  // false

// 强制转化为整形
// console.log(Number.parseInt('12.3'));  // 12
// console.log(Number.parseInt('12.3a4'));  // 12
// console.log(Number.parseInt('1a2.3a4'));  // 1
// console.log(Number.parseInt('1a23a4'));  // 1
// console.log(Number.parseInt('a123a4'));  // NaN
// console.log(Number.parseFloat('12.3a4'));  // 12.3
// console.log(Number.parseFloat('12.a3a4'));  // 12
// console.log(Number.parseFloat('1a2.3a4'));  // 1
// console.log(Number.parseFloat('a12.3a4'));  // NaN

// 向下取整
console.log(Math.floor(12.9));
console.log(Math.trunc(12.1));
console.log(Math.trunc(12.4));
console.log(Math.trunc(12.5));
console.log(Math.trunc(12.9));
console.log(Math.trunc(12.9999999999999999));
console.log(12.9899999999999999);
console.log(0.1+0.2);

3. 对象的扩展

Object.is ： 判断v1,v2数据是否完全相等

Object.assign ： 将源对象source的属性复制到新的目标target对象上

Object.keys : 将对象中的键全部取出组成一个数组

Object.values : 将对象中的值全部取出组成一个数组

// is  ： 判断两个对象是否相等
// let arr1 = [11,22,33];
// let arr2 = [11,22,33];
// console.log(arr1==arr2);
// let result = Object.is(arr1,arr2);
// console.log(result);
// let str1 = '123';
// let str2 = '123';
// console.log(str1 == str2);
// let result1 = Object.is(str1,str2);
// console.log(result1);

// assign  :  将一个对象中的属性赋给另一个对象
// let obj = {
//     name : 'Tom',
//     age : 18,
//     sex : '男',
//     eat : ()=>{
//         console.log(456);
//     }
// };
// let newObj = {
//     username : 'admin',
//     password : '123',
//     say : ()=>{
//         console.log(123);
//     }
// };
// console.log(obj);
// console.log(newObj);
// 使用assign方法将obj的属性赋给newObj
// 内置两个参数  第一个参数是接受属性的   第二个参数是赋值的
// Object.assign(newObj,obj);
// console.log(newObj);

// newObj.eat()
// newObj.say()
// console.log(newObj.name);



// Object.keys  将对象中的键全部取出组成一个数组
let obj = {
    name : 'Tom',
    age : 18,
    sex : '男',
    eat : ()=>{
        console.log(456);
    }
};

let keys = Object.keys(obj);
console.log(keys);

// Object.values  将对象中的值全部取出组成一个数组
let values = Object.values(obj);
console.log(values);

4. 数组的扩展

Array.of ： 将一系列的值转换为数组

Array.from ： 将伪数组对象或者可遍历的对象 转换成真数组

find ： 找出第一个满足条件的元素

findIndex ： 找出第一个满足条件元素的索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
</html>
<script>
// of方法  将一组数据组成一个数组
// 内置参数若干  返回值是一个数组
// let arr = Array.of(11,22,33);
// console.log(arr);

// from方法   将伪数组转化成真数组
// let oBtns = document.getElementsByTagName('button');
// console.log(Object.prototype.toString.call(oBtns));
// // oBtns.forEach(element => {
// //     console.log(element);
// // });
// let arr = Array.from(oBtns);
// console.log(Object.prototype.toString.call(arr));
// arr.forEach(element => {
//     console.log(element);
// });

// find方法  ：  返回第一个为真的数组元素
// let arr = [1,7,3,0,1,0,7,9,2,0,1];
// let result = arr.filter(element=>{
//     return element%13 == 0;
// })
// console.log(result);
// filter 返回的是整个数组中所有为真的元素  组成一个数组  即使没有为真的元素  那么也会返回一个空数组
// 总之  返回值必须是一个数组

let arr = [1,7,3,0,1,0,7,9,2,0,1,'a','aa','aaa'];
let result = arr.find(element=>{
    // return element % 3 == 0
    // return element % 5 == 2
    // return element.length == 2;
    return element.length == 5;
});
console.log(result);
// find方法   返回的是数组中第一个为真的元素  返回值是一个数组元素  数据类型不确定
// 但是如果说没有符合条件的元素  那么返回undefined
// find的效率会高于filter


// findIndex  返回数组中第一个为真的元素的下标
let resultIndex = arr.findIndex(element=>{
    return element % 7 == 2;
})
console.log(resultIndex);
</script>

5. 函数的扩展

​ bind ： 绑定函数

​ 其实他是和构造函数有关联 我们使用的是构造函数

​ 将构造函数绑定到对象中

<script>
// 定义一个构造函数
function Person(name,age){
    this.name = name;
    this.age = age;
}

let obj = {};

// 绑定的bind方法内置若干参数  第一个参数是绑定的对象
// 第二个参数开始都是构造函数的参数
// 返回值本身也是一个函数   所以说需要在后面再加上一个括号
Person.bind(obj,'Tom',18)();

console.log(obj);
</script>

6. 深度克隆 （重点）

浅拷贝

​ 只拷贝栈空间的地址 不拷贝堆空间的内存

​ 一个变量会影响另一个

<script>
// 定义一个对象
let obj = {
    name : 'Tom',
    age : 18,
    sex : '男'
};

// 定义一个数组
let arr = [11,33,55,99];

// 浅拷贝
let newObj = obj;
obj.school = '吉林大学';
console.log(newObj);
newObj.address = '吉林长春';
console.log(obj);

let newArr = arr;
arr.push(88);
console.log(newArr);
newArr.push(66);
console.log(arr);

let str = '123';
let str1 = str;
str += 'Tom';
console.log(str);
console.log(str1);

</script>

深拷贝

​ 1.使用assign进行深拷贝 但是常规操作可以 但是追加对象中的数组元素的时候 还是会收到影响

<script>
// let obj = {name:'Tom',age:18,sex:'男'};
let obj = {
    name : 'Tom',
    age : 18,
    sex : '男',
    arr : [11,33,55]
}
// 使用assign进行拷贝
let newObj = {};
Object.assign(newObj,obj);

obj.school = '吉林大学';
console.log(obj);
console.log(newObj);

// 追加数组元素的时候  会影响到原对象
obj.arr.push(88);
console.log(obj);
console.log(newObj);

obj.say = ()=>{
    console.log(123);
}
console.log(obj);
console.log(newObj);

</script>

​ 2.使用JSON进行深拷贝 如果说对象中存在方法 那么方法是拷贝不过去的

<script>
let obj = {
    name : 'Tom',
    age : 18,
    sex : '男',
    say : ()=>{
        console.log(123);
    }
};

let newObj = JSON.parse(JSON.stringify(obj));
console.log(obj);
console.log(newObj);

obj.school = '吉林大学';
console.log(obj);
console.log(newObj);
</script>

​ 3.剩余参数拷贝 ： 在二维数组中还是有影响

let arr = [11,33,55,[66,88]];
let newArr = [...arr];
console.log(arr);
console.log(newArr);

arr.push(99);
console.log(arr);
console.log(newArr);

arr[3].push(1234);
console.log(arr);
console.log(newArr);

我们还是使用自己的方式进行深拷贝

​ 我们可以先定义一个空的数组或者是对象 然后将原对象或者原数组中的键下标取出来作为新对象或者数组的键下标

​ 将原对象或者数组中的值取出 作为新对象或者数组的对应值

​ 原理

let arr = [11,33,55,99];
let obj = {
    name : 'Tom',
    age : 18,
    sex : '男'
}
let newArr = [];
for (let key in arr){
    // console.log('键是' + key + '值是' + arr[key]);
    newArr[key] = arr[key];
}
console.log(newArr);
console.log(arr);

let newObj = {};
for (let key in obj){
    // console.log('键是' + key + '值是' + arr[key]);
    newObj[key] = obj[key];
}
console.log(obj);
console.log(newObj);

深拷贝案例

<script>
let arr = [11,33,{name:'Tom'},55,99];
let obj = {
    name : 'Tom',
    age : 18,
    sex : '男',
    arr : [11,22,33]
}

// 定义深拷贝的程序
function deepCopy(object){
    let result;
    if (Object.prototype.toString.call(object) == '[object Array]'){
        result = [];
    }else if (Object.prototype.toString.call(object) == '[object Object]'){
        result = {};
    }else{
        return false;
    }
    // 遍历数组或者是对象  取出他们的键  作为新数组对象的键  取出他们的值  作为新数组对象的值
    for (let key in object){
        if (typeof object[key] == 'object'){
            result[key] = deepCopy(object[key]);
        }else{
            result[key] = object[key];
        }
    }
    return result;
}
let newArr = deepCopy(arr);   // [object Array]
// let newObj = deepCopy(obj);   // [object Object]
// console.log(newObj);
console.log(newArr);

arr[2].age = 18;
console.log(arr);
console.log(newArr);
</script>