前端开发-----学习记录

目录

一、将字符串String 转化为 数组 Array.from() 不会去重

二、页面的级滚动

三、排序 sort() 函数

 ① 对数字排序

  ②对字符串排序

四、倒叙：reverse()  将当前的数组进行倒叙 

五、$set()  的是使用

---

一、将字符串String 转化为 数组 Array.from() 不会去重

let str = '123445'
console.log(Array.from(str))

// 结果： ['1', '2', '3', '4', '4', '5']

结合 Set() 去重 Set 是集合 元素不能重复，即在Set集合不会出现相同的元素

let a = [1,2,2,3,5,2];
let arr = new Set(a);        
console.log(arr)                   // Set(4) {1, 2, 3, 5}
console.log(Array.from(arr))       //  [1, 2, 3, 5]


// 或者
let a = [1,2,2,3,5,2];
let arr = new Set(a);
console.log([...arr])        //  [1, 2, 3, 5]
console.log(Array.from(arr))  //  [1, 2, 3, 5]

二、页面点击滚动

大盒子.scrollTo({
  top:
     小盒子.offsetTop - 大盒子.offsetTop,
  behavior: "smooth",
});

三、排序 sort() 函数

 ① 对数字排序

sort() 若默认无参数则按编码顺序排序

在负数里面，值越小，编码值越大:

let a = [1,2,3,-5,-9,-1,0];
console.log(a.sort());     // [-1, -5, -9, 0, 1, 2, 3]

函数是根据数字第一个数字大小进行排序的:

let a = [101,201,25,23,-45,-59,-61,70];
console.log(a.sort());     // [-45, -59, -61, 101, 201, 23, 25, 70]

升序排序：

let arr = [101,201,-25,23,-45,59,61,70];
console.log(arr.sort((a,b)=>{return a-b}))  // [-45, -25, 23, 59, 61, 70, 101, 201]

降序排序：

let arr =  [101,201,-25,23,-45,59,61,70];
console.log(arr.sort((a,b)=>{return b-a}));    //[201, 101, 70, 61, 59, 23, -25, -45]

  ②对字符串排序

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

console.log(arr.sort());//Adrew,George,James,John,Martin,Thomas

 对于字符串排序可以直接这样写，因为是直接根据编码顺序来的

四、倒叙：reverse()  将当前的数组进行倒叙 

let a = 'i am developer';
let b = a.split(" ");        // ["i", "am", "developer"]
console.log(b.reverse());    // ["developer", "am", "i"]

五、$set()  的是使用

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。

this.$set(this.data, "key", value)      在 data() 里面的对象重新 加属性的时候，需要使用到 $set()

mounted () {
    this.$set(this.student,"age", 24)
}

六、赋值与拷贝问题

【基本数据类型】的值是不可变的，互不影响；【引用类型】相互影响，实则是地址的引用

//  一、 基本数据类型  String、Number、Boolean、null、undefined
var a = 10; 
var b = a;

a ++ ;
console.log(a); // 11
console.log(b); // 10

//  二、 引用数据类型  Object、Array、Function 在栈内存中存放变量以及指向堆内存中存储位置的指针
        // 赋值
        var a = [1,2,3];
        a[1] = 5;
        console.log(a[1]);  // 5

        // 比较   引用类型的比较实则是引用（指针）的比较，也就是看其引用是否指向同一个对象
        var a = { tt: 1 };
        var b = { tt: 1 };
        console.log(a === b);   // false 
        console.log(a == b);   // false
        //     它们在内存中的位置是不一样的，指向的不是同一个对象，所以不相等

引用类型的赋值相对而言，不是简单的值的传递，而是引用的传递，可以理解为传址。也就是说引用类型的赋值其实就是对象保存在栈内存中地址的赋值，这样就可以将两个变量都指向一个对象，此时两者之间的操作相互之间都是有影响的。

//  例 1
var a = {}; // a保存了一个空对象的实例
var b = a;  // a和b都指向了这个空对象

a.name = 'jozo';
console.log(a.name); // 'jozo'
console.log(b.name); // 'jozo'

b.age = 22;
console.log(b.age);// 22
console.log(a.age);// 22
console.log(a == b);// true


//  例 2
let a = [1,2,3];
let b = a;
b[1] = 5;
console.log(a==b);    //   true
console.log(a);       //  [1, 5, 3]
console.log(b);       //  [1, 5, 3]

深拷贝与浅拷贝

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。深拷贝是在改变新的数组（对象）的时候，不改变原数组（对象）

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存（分支）。浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。
如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。

利用Object.assign()  第一层的数据为基本数据类型（互不影响）   子对象会相互影响

let obj = {
    a:1,
    b:2,
    c:3,
    d:{e:1,f:2,p:3}
};
let obj2 = Object.assign({},obj);
obj2.b=8;
obj.d.p = 0;
console.log(obj);    // {a: 1, b: 2, c: 3, d: {e: 1, f: 2, p: 0} }
console.log(obj2)    //  {a: 1, b: 8, c: 3, d: {e: 1, f: 2, p: 0} }

深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象，原对象不受影响，是“值”而不是“引用”（不是分支）。

拷贝第一层级的对象属性或数组元素
递归拷贝所有层级的对象属性和数组元素
深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。

JSON.parse(JSON.stringify())   深拷贝