JS8.19 ES6部分语法,解构赋值
一.解构赋值
解构赋值的含义:按照某种数据的解构,解析赋值(少了一个取值的步骤,更简洁)
我们通过代码来看:
var {name1} = {name1: "karen"}
console.log(name1)//karen
这段代码块的作用跟下面这段是一样的:
var obj={name1:"karen"}
console.log(obj.name1)//但是这里需要通过obj.name这个点语法取值
我们再来看一些复杂的解构赋值:
var arr={a:[10,203,0]}
var {a:[b]}=arr//①
//var b=arr.a[0] ①的步骤其实就是这一步
console.log(b)//这里打印10
var arr=[{age:"18"}]
var [{age}]=arr
console.log(age)//两种打印方法结果一致
console.log(arr[0].age)//使用点语法时代码更麻烦一些
{age,name="karen"}是数据的模型 并不是对象,所以{}内用的是=来给name一个初始值而不是用:
let {age,name="karen"}={age:19,name:"jack"}
//obj.age
console.log(age,name)
//我们再来了解...的使用方法
var {a,...b}={a:100,name:"karen",age:18};//这里...b代表把后面这个对象中的后面所有key,value都给了b
console.log(a,b)//所以这里打印100,{name:"karen",age:18}
var arr=[100,200,300]
var arr2=[...arr]//这里是深克隆,相当于arr2新开辟了一个空间存放arr2的数据
console.log(arr,arr2,arr==arr2)//所以arr和arr2值虽然相等,但地址并不同,false
var obj={name:"karen",age:19};
var obj2={}
Object.keys(obj).forEach(function(el) {
obj2[el]=obj[el]
}) //这里是通过keys方法输入值为obj再通过调用forEach遍历得到的obj对象里的元素赋值给obj2,效果和...一样
//var obj2={...obj} 两种方法效果一致,但都为深克隆,所以false
console.log(obj,obj2,obj===obj2){name:"karen",age:19},{name:"karen",age:19},false
当使用解构赋值时,key值不能重复,所以我们需要用块级作用域来避免这个问题:
var arr=[{name:"karen",age:"18",its:[{name:"css",age:59},{name:"js",age:99}] } ]
let[{name,age,its}]=arr
{
let[{name,age}]=its
console.log(name)//这里使用块级作用域给its的name进行结构赋值,就不会访问到外部的name,所以能够成功.css
}
console.log(name)//karen
当使用函数参数来达到目的时的使用方法:
function fn(name,age) {
console.log(name,age)
}
var obj={name:"karen",age:19};
fn(obj.name,obj.age)//这里把obj.name和obj.age的value值当作实参传入到函数中
function fn(obj) {
console.log(obj.name,obj.age)
}
var obj={name:"karen",age:19};
fn(obj)
var obj={name:"karen"};
function fn({name,age=100}) { //这里给age给了默认值,当没有age的值时则为100
console.log(name,age)
}
fn(obj)
二.let,const的使用
再es5中我们学到了var作为声明关键字的使用方法,我们再来看看es6中的let和const的使用方法和使用场景:
- let在使用时会产生块级作用域,类似于函数中的局部作用域,同为内部可以访问外部,外部不能访问内部.并且在使用let时,它不会帮你提前声明变量,如果在let声明之前就使用后来声明的变量,程序会报错.
我们记住let的三个特点:
1.不能先使用在声明
2.不能重复声明
3.有块级作用域
代码解析:
1
console.log(a)//这里会报错,let不同于var 不会帮你提前声明a
let a=20;
let b=30
console.log(b)// 这里则可以正常打印
console.log(a)
2
{
let a=20
var b=30
}
console.log(b)//因为用var声明的b 不形成块级作用域,所以打印30
console.log(a)//使用了let 所以报错
3
for (let i = 0; i < arr.length; i++) {
arr[i].onclick1 = function() {
console.log(i)
console.log(arr[i].name)
}
}
arr[0].onclick1()//这里使用了let来声明i,就不会让i在外部访问时出现错误,效果和闭包一致
for (var i = 0; i < arr.length; i++) {
(function(index) {
arr[index].onclick1 = function() {
console.log(index)
console.log(arr[index].name)
}
})(i)//使用闭包来避免i在外部取值时被污染
}
- const的使用
const也会产生块级作用域,当在全局使用const时,const声明的变量在全局都不可更改,在一个{}中使用时,则const所在的块级作用域所声明的变量不可更改
代码:
const a=20;
a=100;
console.log(a)//仍为20
var flag=true
if(flag){
var a=20
const b=30
}
console.log(a)//20
console.log(b)//报错,const声明的b 仅在块级作用域中能够访问,外部不能访问
三.Map的使用
map本身是一个容器,通过set和get来添加和读取数据
var arr = [100, 20]
var m1 = new Map()//使用Map()方法创建一个容器来存放数据
m1.set(arr, 999)//(key,value)通过.set来给m1添加数据
console.log(m1.get(arr))//通过.get来读取m1中arr所存放的value值,999
m1.set({},"hello")//这里需要注意使用{}这种形式添加数据时,因为没有名字,当后面读取{}时会新建一个{}而不是读取这里的{}
var re=m1.get({})
console.log(re)//所以这里打印undefined
m1.set("name","karen")
console.log(m1.get("name"))
我们再来回顾一下…的用法:
...xx xx是已知的容器名字:把容器中数据取出来: var arr=[1,2,2,1,3];var arr2=[...arr]
...xx xx是自己取的名字 在解构赋值中把容器中剩余数据取出来,给剩余数据去个xx的名字
let {name,...xx}={name:"karen",age:18,rank:580};
function log(num1,...arg) {
console.log(num1,arg)
}
log(100,200,300,400)
四.字符串部分方法
我们直接通过代码来看把:
var str="hello"
var re=str.includes("o")//检测字符串中是否包含o
var re=str.startsWith("heq")//是否以heq开头
var re=str.endsWith("lo")//是否以lo结尾
console.log(re)//返回值为布尔值,true或者false
var re=str.repeat(10)//字符串重复10次
console.log(re)
var str1="6480950"
var re=str1.padStart(11,"0991")//拼接字符串(拼接后总共1位,要拼接的字符串)
console.log(re)//099106480950