ES6变量、解构、对象、数组、函数学习

变量

ES6中用let 声明变量，let有如下特点：
1.变量声明不会被提升，即在变量声明之前无法使用该变量

console.log(name);//ReferenceError:Cannot access 'name' before initialization
let name='zhangsan';
// console.log(name);//zhangsan

2. 具有局部作用域，即let声明的变量只能在对应代码块中使用

let name='zhangsan';
{
   
    let name1='lisi'
    console.log('内部:',name1,name);//内部: lisi zhangsan
}
console.log('外部:',name);//外部: zhangsan

for (var i = 1; i < 10; i++) {
   
   console.log(i);  
}
console.log('for循环外部',i);
//要想让外部拿到内部的,就使用var;不想拿到内部的就用let

3. 不允许重复声明。

const b=1;
const b=true;
//SyntaxError: Identifier 'b' has already been declared

常量

const声明常量，具有与let相同的特性，此外还有：
4.const声明的变量在声明的时候就需要赋值，并且只能赋值一次，不能修改

const c;//SyntaxError: Missing initializer in const declaration
const c=0;//在此声明后就不许改变了
c++ //不允许重新赋值 TypeError: Assignment to constant variable.

解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，解构的本质属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。

数组解构

等号左边的变量放到中括号内部，匹配右侧数组中的元素

不完全解构

let[a,b,c]=[1,[2,3],4]
console.log(a,b,c);//1 [ 2, 3 ] 4
//将b解构出来↓
let[a,[b],c]=[1,[2,3],4]
console.log(a,b,c);//1 2 4 将b解构出来

// 数组的不完全解构
let [a,b]=[1,2,3]
console.log(a,b);//1 2

集合解构

拓展运算符 … 用在 = 左边有聚合的作用,生成新的对象或者数组;用在=右边,有拆分\剥离的作用

let [a,...b]=[1,2,3]
console.log(a,b);//1 [ 2, 3 ] 剩余未匹配的元素重新封装成一个数组

默认值解构

let[a,b,c=10]=[1,2,3]//c拿不到值时就使用默认值10
console.log(a,b,c);//123

//数组解构设置默认值(默认值也可以为一个函数)
function myFun(){
   
    console.log('函数');
    return 100;
}
let [a,b,c=myFun()]=[1,2]
console.log(a,b,c);//1 2 100

对象解构

等号左边的变量放到大括号内部，匹配右侧数组中的元素。对象的属性没有次序，变量必须与属性同名，才能取到正确的值

let {
   name:uesrname,age:userage}={
   name:'张三',age:12}
console.log(uesrname,userage);//张三 12

//对象的简写形式(省略key值,保留value对应的值)
let {
   name,age}={
   name:'张三',age:12}
console.log(name,age);//张三 12

如果变量名和属性名不一致，需要重命名

let {
   foo:baz}={
   foo:"hello",bar:"world"};
console.log(baz);//hello

嵌套解构

let obj={
   p:['Hello',{
   y:'World'}]};
let {
   p:[a,{
   y:b}]}=obj