ES6篇（上）
原创
前面文章所学均是ES5，而ES6就是提升，它提供了新的语法类型，接下来一起来认识一下吧🧐
一、const
1、概念
声明常量，常量不可以重新赋值，不能改变
<script>
const BASE_URL = 'http'
BASE_URL = 'baidu'
</script>
2、特点
（1）当被修饰的表示符不会再次被赋值时，就可以用const保证数据的安全性
（2）不可以重复声明，否则会报错
<script>
const BASE_URL = 'http'
const BASE_URL = 'www'
</script>
（3）常量是指向对象不能再次被修改，但是对象内部属性是可以修改的（即数组、对象的元素是例外，其元素是可以被改变的）
<script>
const arr = [1,2,3]
arr[3]=4
console.log(arr);
const userInfo = {
name:'张三',
}
userInfo.name='李四'
console.log(userInfo);
</script>
二、let和var
1、var
声明一个变量时，其作用域与函数有关，对其他块定义是没有作用域的（eg：if、for等沒有作用域），但是它有变量提升
<script>
console.log(a);//var变量提升
var a =10
</script>
（1）例子：拿点击取下标为例子，发现无论点击哪个下标都是3，这是错误的
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var list = document.querySelectorAll('li')
for (var i = 0; i < list.length; i++) {
list[i].onclick = function () {
console.log(i);
}
}
</script>
</body>
（2）结合上篇文章，可以通过闭包解决这个问题
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var list = document.querySelectorAll('li')
for (var i = 0; i < list.length; i++) {
(function (i) {
list[i].onclick = function () {
console.log(i);
}
})(i)//()()通过立即执行函数把i传入点击事件
}
</script>
</body>
（3）但是编程工程繁琐，所以我们可以采用let提升变量作用域
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var list = document.querySelectorAll('li')
for (let i = 0; i < list.length; i++) {
list[i].onclick = function () {
console.log(i);
}
}
</script>
</body>
2、let
（1）具有块级作用域，没有变量提升，有暂时性死区
（2）未声明就输出时，会报错（即不能在定义前使用）
<script>
console.log(b);
let b =20
</script>
三、增强写法
1、字面量（如何表达这个值）
一般除去表达式，变量赋值时，等号的右边可以看作字面量
2、对象字面量的增强写法
（1）增强写法：键和值的命名一致
（2）变量增强
<script>
let name ='张三'
const userInfo ={
//原始方法，键:值
name:name,
//变量增强法
name,
}
console.log(userInfo);
</script>（3）方法增强
<script>
let name ='张三'
const userInfo ={
//原始方法
run:function(){
console.log('运行');
},
//增强方法
run(){
console.log('运行');
}
}
userInfo.run()
</script>四、解构赋值
1、概念
允许使用类似的数组或对象字面量语法给变量赋值（比较抽象看看下面的分点分析🧐）
2、数组解构
（1）把数组内的元素，逐一放在变量里
<script>
const arr = ['aa','bb','cc']
//原始方法
// let a = arr[0]
// let b = arr[1]
// let c = arr[2]
// console.log(a,b,c);
//for循环法
for(var i = 0;i<arr.length;i++){
let text = 'text' + i
text = arr[i]
console.log('text'+i,text);
}
//解构法
let[a,b,c] = arr
console.log(a,b,c);
</script>
（2）预留位置
<script>
const arr = ['aa','bb','cc']
let[,,c] = arr
console.log(c);
</script>（3）后两位单独变成一个数组
<script>
const arr = ['aa','bb','cc']
let[a,...newArr] = arr;
console.log(a,newArr);
</script>
（4）建立新数组，并且修改数组（在后续处理数据时，将常用到🧐）
①原始方法
<script>
const arr = ['aa','bb','cc']
//原始方法
const arr1 = arr
console.log('arr',arr);
console.log('arr1',arr1);
arr1[2]='dd'
console.log('arr1',arr1);
console.log('arr',arr);
</script>
②解构法
<script>
const arr = ['aa', 'bb', 'cc']
//解构法
//...扩展运算符,开辟新空间
const arr2 = [...arr]
console.log('arr', arr);
console.log('arr1', arr2);
arr2[2] = 'dd'
console.log('arr2', arr2);
console.log('arr', arr);
</script>
（5）数组合并
①原始方法：内置对象法
<script>
//原始方法
const arrA = [1,2,3]
const arrB = [4,5,6]
const arrC = arrA.concat(arrB)
console.log(arrC);
</script>②解构数组法
<script>
//解构法
const arrA = [1,2,3]
const arrB = [4,5,6]
const arrC = [...arrA,...arrB]
console.log(arrC);
</script>
（6）两值交换位置
①原始方法：引入第三个变量temp
<script>
//原始方法
let x = 10;
let y = 20;
let temp;
temp = y;
y = x;
x = temp;
console.log(x,y);
</script>②解构法
<script>
//解构法
let x = 10;
let y = 20;
[x,y]=[y,x]
console.log(x,y);
</script>
3、对象解构
（1）数据逐一放到对应的属性变量中
<script>
const user ={
name:'张三',
age:18,
}
let {name,age} = user
console.log(name,age);
</script>（2）建立一个新对象，并且赋值、修改（可以直接在赋值时修改）
<script>
const user = {
name:'张三',
age:18,
}
const userInfo = {...user,sex:'女',age:20}
console.log(userInfo);
userInfo.name='申小兮'
console.log(userInfo);
console.log(user);
</script>
（3）设置默认值（通过增强写法给对象不存在的属性增加默认值）
①对象没有设置vvv属性时，vvv的默认值就是123
<script>
const user = {
name:'张三',
age:18,
}
const {vvv='123'} = user
console.log(vvv);
</script>②对象有设置vvv属性时，vvv的默认值属性对应的值555
<script>
const user = {
name:'张三',
age:18,
vvv:'555'
}
const {vvv='123'} = user
console.log(vvv);
</script>五、深浅拷贝
1、浅拷贝
（1）通俗理解：仅为第一层元素建立新空间，其他层的数值会随新拷贝改值而被改值
（2）借前面所认识的解构法，对比深拷贝与浅拷贝
①解构法
<script>
const user = {
id:1,
name:'张三',
msg:{
age:18,
},
}
let a ={}
//解构法
a = {...user}
a.name='申小兮' //成功
a.msg.age=20 //失败
console.log('a',a);
console.log('user',user);
</script>
②浅拷贝
<script>
const user = {
id:1,
name:'张三',
msg:{
age:18,
},
}
let a ={}
// 浅拷贝
Object.assign(a,user)
a.name='申小兮' //成功
a.msg.age=20 //失败
console.log('a',a);
console.log('user',user);
</script>
2、深拷贝
（1）通俗理解：将所有元素，每一层完全建立一个新空间
（2）还是上面拷贝user对象的例子，深拷贝会是什么情况呢🧐
<script>
const user = {
id:1,
name:'张三',
msg:{
age:18,
},
}
let copy ={}
// 深拷贝
copy = JSON.parse(JSON.stringify(user))
copy.msg.age=20
console.log('copy',copy);
console.log('user',user);
</script>
（3）解析：copy = JSON.parse(JSON.stringify(obj));
先将对象变成字符串，然后再变回对象，来使新对象指向一个全新的空间
六、高阶函数
1、filter(callback)：过滤
（1）callback：回调函数，返回布尔值
①true：返回本次数据，存入新的数组
②false：过滤该数据，不返回（直接丢掉）
（2）代码例子
const arr = [19,45,85,23,67];
//过滤filter
const newArr = arr.filter(function(item){
console.log(item);
return item > 30
})
console.log('newArr',newArr);2、map(callback)：计算（给值做统一的某操作）
（1）callback：回调函数，返回值为计算结果，并加入新数组
（2）代码例子
//计算map
const newArr1 = newArr.map(function(item){
console.log(item);
return item *2
})
console.log('newArr1',newArr1);3、reduce(callback(prevalue,item),value)：统计
（1）callback(prevalue,item)：回调函数，返回计算结果
①prevalue：上一次遍历的返回值
②item：当前遍历的值
（2）value：初始值【就像工资的底薪】
（3）代码例子
//统计reduce
const total = newArr1.reduce(function(pre,item){
console.log(pre,item);
return pre+item
},0)
console.log(total);
4、三合一写法
<script>
const arr = [19, 45, 85, 23, 67];
const totalData = arr.filter(function (item) {
return item > 30;
}).map(function (item) {
return item * 2;
}).reduce(function (pre, item) {
return pre + item
}, 0)
console.log(totalData);
</script>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
