【无标题】

最新推荐文章于 2024-04-16 22:09:53 发布

服了都

最新推荐文章于 2024-04-16 22:09:53 发布

阅读量113

点赞数 1

文章标签： javascript java 开发语言

本文链接：https://blog.youkuaiyun.com/qaz521000/article/details/126512836

版权

ES6

浅拷贝与深拷贝

栈内存和堆内存

栈内存：简单数据类型 string，number，boolean，null，undefined
堆内存：复杂数据类型 object，array....

注意：

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。
深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

1.直接赋值

//直接赋值   
let arr1 = ["北京", "上海", "广州",["白云区","黄埔区"]]
let arr2 = arr1;
let arr2 = []



arr2[0] = "beijing"
console.log("arr2", arr2)
console.log("arr1", arr1)

2.浅拷贝

let arr1 = ["北京", "上海", "广州",["白云区","黄埔区"]]
let arr2 = arr1;

//浅复制   
for (var k in arr1) {
    arr2[k] = arr1[k]
}
arr2[0] = "beijing"
arr2[3][0]="baiyunqu"

// console.log("arr2", arr2)
// console.log("arr1", arr1)

3.深拷贝

for (k in arr1) {

    if (arr1[k] instanceof Array) {
        //数组
        arr2[k] = []
        for (var m in arr1[k]) {
            arr2[k][m] = arr1[k][m]
        }

    } else if (arr1[k] instanceof Object) {
        //对象
        arr2[k] = {}
        for (n in arr1[k]) {
            arr2[k][n] = arr1[k][n]
        }
    } else {
        //字符串
        arr2[k] = arr1[k]
    }
}

// arr2[3][0] = "baiyunqu"
// console.log("arr2", arr2)
// console.log("arr1", arr1)

arr2[4].uname = "zhangsan"
console.log("arr2", arr2)
console.log("arr1", arr1)

4.利用递归实现深拷贝

let arr1 = [
    "北京",
    "上海",
    "广州",
    ["白云区", "黄埔区"],
    { uname: "张三", age: 21, school: { name: "积云教育", address: "海淀" } }
]


let arr2 = []

/***
     * arr2  新数据
     * arr1  旧数据
     * **/
function deepCopy(arr2, arr1) {
    for (k in arr1) {
        if (arr1[k] instanceof Array) {
            //数组
            arr2[k] = []

            // for (var m in arr1[k]) {
            //   arr2[k][m] = arr1[k][m]
            // }
            deepCopy(arr2[k], arr1[k])

        } else if (arr1[k] instanceof Object) {
            //对象
            arr2[k] = {}

            // for (n in arr1[k]) {
            //   arr2[k][n] = arr1[k][n]
            // }
            deepCopy(arr2[k], arr1[k])

        } else {
            //字符串
            arr2[k] = arr1[k]
        }
    }
}

deepCopy(arr2, arr1)

// arr2[4].uname = "zhangsan"
arr2[4].school.name = "jiyunjiaoyu"
console.log("arr2", arr2)
console.log("arr1", arr1)

闭包

闭包就是 能够读取其他函数内部变量的函数

1.浏览器source使用

/*闭包就是:能够读取其他函数内部变量的函数** */
function outer() {
    var num = 100;

    function inner() {
        num = 10
    }
    inner()
}

outer()

2.案例

列表点击案例

<body>
  <ul>
    <li>八戒</li>
    <li>悟空</li>
    <li>唐僧</li>
    <li>沙僧</li>
  </ul>
</body>

<script>
  var list = document.querySelectorAll("li")
  /*利用闭包，实现列表内容的点击获取*/
  for (var i = 0; i < list.length; i++) {

    (function (i) {

      list[i].onclick = function () {
        console.log(list[i].innerHTML)
      }

    })(i)

  }
  </script>

打车

   /**
     * 打车
     * 起步价： 13元   (3公里以内13元)
     * 行驶：   5元/公里
     * 拥堵：   15元
     * **/

    var car = (function () {
      var total = 0;
      var start = 13;

      return {
        price: function (n) {
          if (n <= 3) {
            total = start
          } else {
            total = start + (n - 3) * 5
          }
          return total
        },
        //是否拥堵
        block: function (flag) {

          return flag ? total += 15 : total
          // if (flag) {
          //   total += 15
          // }
          // return total;
        }
      }
    })()

    var result = car.price(5)
    // console.log(result)
    result = car.block(true)
    console.log(result)

var，const，let关键字

暂时性死区

使用ES6的变量声明方法(let, const, class…)声明的变量，不可在声明前使用访问，否则会进行显式报错。ES6变量声明前的代码区域，称为 “暂时性死区”

TDZ
```
let x=1;
let foo=function(){
    
    //暂时性死区
	console.log(x)
	let x=2;
}
foo()
```

const定义的常量，如果是复杂数据类型（比如数组或对象），是可以修改数值的。

常量的内存地址是不变的

模板字符串

let username="张三"
let str=`${username}欢迎你`

解构赋值

对象解构

起别名

//对象解构赋值
var obj = { uname: "张三", age: 21, sex: "男" }
// var uname = obj.uname;
// var age = obj.age;
// var sex = obj.sex

//给变量起别名，用冒号
//以前的变量名自动失效
 var { uname: xxx, age: yyy, sex } = obj

扩展运算符的使用

var obj = { uname: "张三", age: 21, sex: "男" }
//扩展运算符的使用
 var { uname, ...age } = obj
// console.log(uname, age)

// console.log(uname, age)      
// console.log(xxx, yyy, sex)
// console.log(uname, age, sex)

多层解构

//对象解构：多层解构
 var obj = {
  uname: "张三",
   age: 21,
   shcool: {
     name: "积云教育",
     address: "海淀"
   }
 }

 let { uname, age,shcool ,shcool: { name, address } } = obj

在函数中的运用

//形参里面的大括号，不是对象，是解构赋值
function demo({ uname, age }) {
    console.log(uname, age)
}

demo({ uname: "张三", age: 21 })

数组解构

var arr = ["北京", "上海", "广州", "深圳"]
// var a = arr[0]
// var b = arr[1]
// var c = arr[2]
// var d = arr[3]

//顺序要对应准确
// var [xxx, yyy, c, d] = arr;

//扩展运算符的使用
var [a, b, ...c] = arr
console.log(a, b, c)

对象解构和数组解构的区别

ES6版本由来

let定义变量

练习

ES6数组方法

1.将数组中数字的每一项相加求和

let arr = [1,5,89,5]

2.要求将数组中的0项去掉，将不为0的值存入一个新的数组，生成新的数组

let arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0]

3.数组去重

let arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5]

4.数组中求最大值

let  arr = [1,5,56,6,1,1,21,45,4]

5.数组中求最小值

let  arr = [1,5,56,6,1,1,21,45,4]

6.数组从小到大排序

let  arr = [1,5,56,6,1,1,21,45,4]

8.二维数组转化一维数组

  var arr=[9,[1,2],7,[2,3],1,[3,4],[4,5]];
  
  
  // [9, 1, 2, 7, 2, 3, 1, 3, 4, 4, 5]

ES6对象方法

commonJS

Amd

Cmd

Object.assign ()

通过复制一个或多个对象来创建一个新的对象。

 var obj1 = { uname: "张三", age: 12 }
    var obj2 = { school: "积云教育", address: "海淀" }

    //合并对象
    // var result = Object.assign(obj1, obj2)
    // console.log(result)

    // console.log(obj1)