前面文章所学均是ES5,而ES6就是提升,它提供了新的语法类型,接下来一起来认识一下吧🧐
声明常量,常量不可以重新赋值,不能改变
<script>
const BASE_URL = 'http'
BASE_URL = 'baidu'
</script>
(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>
声明一个变量时,其作用域与函数有关,对其他块定义是没有作用域的(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>
(1)具有块级作用域,没有变量提升,有暂时性死区
(2)未声明就输出时,会报错(即不能在定义前使用)
<script>
console.log(b);
let b =20
</script>
一般除去表达式,变量赋值时,等号的右边可以看作字面量
(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)把数组内的元素,逐一放在变量里
<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>
(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)通俗理解:仅为第一层元素建立新空间,其他层的数值会随新拷贝改值而被改值
(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>
(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)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);
(1)callback:回调函数,返回值为计算结果,并加入新数组
(2)代码例子
//计算map
const newArr1 = newArr.map(function(item){
console.log(item);
return item *2
})
console.log('newArr1',newArr1);
(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);
<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 删除。