JS_ECMAScript6_const newobj = new obj.constructor-CSDN博客

本文链接：https://blog.csdn.net/ysj94s7/article/details/123194029

01-ES6介绍
   ES历史发展
       ES3 以前用
ES4 搁置
ES5 4.1 es4提出了一部分更新
ES6 4.0
           <script>
// ES3 以前用
// ES4 搁置
// ES5 4.1 es4提出了一部分更新
// ES6 4.0

// var fn = function () { } // ES3
// var fun = () => { } // ES6
</script>

02-变量
ES6
let
- 变量
- 没有预解析
- 不允许重复定义
- 块级作用域
<script>
// var a = 100
// console.log(a) // 100

// console.log(a) // undefined
// var a = 100

// ES6
// let
// - 变量
// - 没有预解析
// - 不允许重复定义
// - 块级作用域

// let a = 200
// console.log(a) // 200

// console.log(a) // 报错
// let a = 200

// let n = 10
// let n = 20
// console.log(n) // 报错

// for (var i = 0; i < 3; i++) { }
// console.log(i) // 3

for (let i = 0; i < 3; i++) { }
console.log(i) // 报错
</script>

03-块级作用域
   注意：块作用域不要用var 完全没有意义
       例子
           <body>
<ul class="uLlist">
<li></li>
<li></li>
<li></li>
</ul>
<ol class="oLlist">
<li></li>
<li></li>
<li></li>
</ol>
<script>
// 块作用域不要用var 完全没有意义
{
let oList = document.querySelector('.uLlist')
console.log(oList)
}
{
let oList = document.querySelector('.oLlist')
console.log(oList)
}

// console.log(oList) // 报错
</script>
</body>

04-循环事件问题
例子
<body>
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
<script>
let aBtn = document.querySelectorAll('input')

// aBtn.forEach(function (ele, index) {
// ele.addEventListener('click', function () {
// alert(index)
// })
// })

// {
// var i = 0; i++
// var i = 1; i++
// var i = 2; i++
// var i = 3
// }

// {
// let i = 0
// }
// {
// let i = 1
// }
// {
// let i = 2
// }

// for (let i = 0; i < aBtn.length; i++) {
// aBtn[i].onclick = function () {
// alert(i)
// }
// }

// for (var i = 0; i < aBtn.length; i++) {
// aBtn[i].setAttribute('index', i)
// aBtn[i].onclick = function () {
// console.log(this.getAttribute('index'))
// }
// }

// for (var i = 0; i < aBtn.length; i++) {
// aBtn[i].index = i
// aBtn[i].onclick = function () {
// console.log(this.index)
// }
// }
</script>
</body>

05-常量
   常量
- const
- 没有预解析
- 不允许重复定义
- 块级作用域
- 定义不能修改（怎么才能修改？复杂数据类型可以更改属性名和值）
       例子
           <script>
// 常量
// - const
// - 没有预解析
// - 不允许重复定义
// - 块级作用域
// - 定义不能修改（怎么才能修改？复杂数据类型可以更改属性名和值）

// const a = 12
// console.log(a)

// const a = 12
// a = 100 // 不样修改
// console.log(a)

// const obj = {
// name: 'Jack',
// age: 18
// }
// obj.age = 20 // 随意添加修改
// console.log(obj)

// const obj = {
// name: 'Jack',
// age: 18
// }
// obj = {} // 报错不能更改指针
// console.log(obj)
</script>

06-模板字符串
   ES3写法
       每个+'内容'
           <body>
<ul></ul>

var str = '哈哈哈哈'
// ES3
// oUl.innerHTML += '<dl class="cate_detail_item cate_detail_item1">'
// + '<dt class="cate_detail_tit" clstag="h|keycount|head|category_01c01">'
// + '<a href="//list.jd.com/list.html?cat=737,794,798" class="cate_detail_tit_lk"'
// + 'target="_blank">电视<i class="iconfont cate_detail_tit_arrow"></i>'
// + '</a>'
// + '</dt>'
// + '<dd class="cate_detail_con" clstag="h|keycount|head|category_01d01"><a'
// + 'class="cate_detail_con_lk" target="_blank">65英寸</a><a'
// + 'href="//list.jd.com/list.html?cat=737,17394,17395" class="cate_detail_con_lk"'
// + 'target="_blank">电视配件</a>'
// + '</dd>'
// + '</dl>'
</script>
</body>
   ES6写法
       `全部内容`
           <body>
<ul></ul>

var str = '哈哈哈哈'
//ES6
oUl.innerHTML += `<div class="cate_part clearfix" id="cate_item1" data-id="a" style=""><div class="cate_part_col1"><div class="cate_channel"><a href="//jiadian.jd.com/" class="cate_channel_lk" clstag="h|keycount|head|category_01b01" target="_blank">${str}<i class="iconfont cate_channel_arrow"></i></a></div>`
</script>
</body>

07-解构赋值
   解构赋值
- 复杂数据类型数组和对象
       例子
           <body>
<script>
// var a = 12
// var b = 5

// // a = 5 b = 12
// var c = a
// a = b
// b = c
// console.log(a, b)

// 解构赋值
// - 复杂数据类型数组和对象

// const obj = {
// name: 'Jack',
// age: 18
// }
// console.log(obj.name)
// console.log(obj.age)
// let { name, age } = obj
// console.log(name)
// console.log(age)

var a = 12
var b = 5
// const arr = [b, a]
// var [a, b] = arr

var [a, b] = [b, a]

console.log(a, b)
</script>
</body>

08-箭头函数
   写法
       ES6
- 箭头函数
const fun = () => {
console.log('fun 函数')
}
fun()
           例子
               <body>
<script>
// const fn = function () { }

// ES6
// - 箭头函数
// const fun = () => {
// console.log('fun 函数')
// }
// fun()

// 没有arguments
// const fn = (...arg) => {
// // console.log(arguments) // 报错
// console.log(arg) // 数组
// }
// fn(12, 5, 7, 99)

// 没有this,this指向上一层函数，没有函数window
// const fn = () => {
// console.log(this)
// }
// fn()
// document.onclick = function () {
// console.log(this) // document
// const fn = () => {
// console.log(this) // document
// }
// fn()
// }
</script>
</body>
特点
1.没有arguments 2.没有this,this指向上一层函数，没有函数window

08-箭头函数2
   window
- this -> window
- forEach 定时器普通函数
       例子
           <body>
<input type="button" value="0">
<input type="button" value="1">
<input type="button" value="2">
<script>
const aBtn = document.querySelectorAll('input')

// window
// - this -> window
// - forEach 定时器普通函数

aBtn.forEach(function (ele) {
ele.onclick = function () {
// console.log(this.value)

// setTimeout(function () {
// console.log(this)
// console.log(this.value)
// }, 1000)
setTimeout(() => {
console.log(this)
console.log(this.value)
}, 1000)
}
})
</script>
</body>

08-箭头函数3
   箭头函数简写
       例子
           <body>
<script>
// const fn = (a) => {
// console.log(a + 5)
// }
// fn(12)

// const fn = a => {
// console.log(a + 5)
// }
// fn(12)

// const fn = a => {
// return a + 5
// }
// let n = fn(12)
// console.log(n)

const fn = a => a + 5
let n = fn(12)
console.log(n)
</script>
</body>

09-浅拷贝
   解决: 引用问题
- 复杂数据类型地址相同就会产生引用问题
       例子
           <body>
<script>
// 引用问题
// - 复杂数据类型地址相同就会产生引用问题
// var arr = [12, 5, 7, 99]

// // 引用问题
// var arr2 = arr
// // 解决引用
// var arr2 = arr.slice()
// arr2.push(1000)

// console.log(arr, arr2)

// const obj = {
// name: 'jack',
// age: 18
// }
// // const obj2 = obj
// const obj2 = {}
// for (let attr in obj) {
// // console.log(attr)
// // console.log(obj[attr])
// obj2[attr] = obj[attr]
// }
// obj2.job = 'web'
// console.log(obj, obj2)

// 浅拷贝
const arr = [12, 5, 7]
const newArr = [...arr]
newArr.push(100)
console.log(arr, newArr)

const obj = { name: 'jack', age: 18 }
const newObj = { ...obj }
newObj.job = 'web'
console.log(obj, newObj)
</script>
</body>

09-深拷贝
   Array：slice()、concat()、Array.from()、… 操作符：只能实现一维数组的深拷贝
   Object：Object.assign()、… 操作符：只能实现一维对象的深拷贝
   JSON.parse(JSON.stringify(obj))：可实现多维对象的深拷贝，但会忽略 undefined 、任意的函数、Symbol 值
       浅拷贝
const obj2 = { ...obj }
深拷贝
- JSON.stringify 序列化
- JSON.parse 反序列化
           注意：进行JSON.stringify()序列化的过程中，undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时），由上面可知，JS 提供的自有方法并不能彻底解决Array、Object的深拷贝问题，因此我们应该自己实现。
               例子
                   <body>
<script>
const obj = {
name: '张三',
age: 18,
info: {
id: 9527
}
}
// 浅拷贝
// const obj2 = { ...obj }
// 深拷贝
// - JSON.stringify 序列化
// - JSON.parse 反序列化
const obj2 = JSON.parse(JSON.stringify(obj))
obj2.name = '李四'
obj2.info.id = 9528

console.log(obj, obj2)
</script>
</body>
通用版
var obj1 = {
name: "张三",
age: 20,
birthday: {
year: 1997,
month: 12,
day: 5
},
speak: function () {
console.log("我是" + this.name);
}
};

var obj2 = deepClone(obj1);

// 当修改obj2的属性和方法的时候，obj1相应的属性和方法不会改变
obj2.name = "李四";
console.log(obj1);
console.log(obj2);

/**
* 深拷贝通用方法
* @param obj 需要拷贝的对象
* @param has
* @returns {any|RegExp|Date}
*/
function deepClone(obj, has = new WeakMap()) {
// 类型检查
if (obj == null) return obj;
if (obj instanceof Date) return obj;
if (obj instanceof RegExp) return obj;
if (!(typeof obj == "object")) return obj;

// 构造对象
const newObj = new obj.constructor;

// 防止自引用导致的死循环
if (has.get(obj)) return has.get(obj);
has.set(obj, newObj);

// 循环遍历属性及方法
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = deepClone(obj[key]);
}
}

// 返回对象
return newObj;
}

10-数据类型
基本：number string boolean null undefined
复杂：object array function date

es6新增
- 基本： Symbol
- 复杂： Set Map
例子
<body>
<script>
// 基本：number string boolean null undefined
// 复杂：object array function date

// es6新增
// - 基本： Symbol
// - 复杂： Set Map

// console.log(Symbol('abc'))

// console.log(new Set([12, 5, 7, 99, 103, 12]))

// let m = new Map()

// m.set('abc', 123)
// m.set([12, 5, 7], '哈哈哈')

// console.log(m)