ES6 - let ,const ,解构赋值 ,字符串的扩展

一、声明变量 （块级作用域）

1.let :

1) 没有预编译，不存在变量提升，

在代码块内，只要let定义变量，在之前使用，都会报错。

2) 同一个作用域，不能重复定义变量

3) for循环：里面是父级作用域

　  4）let,const定义的全局变量不属于window

2.const:常量，不可以修改。特性和let相同

1)定义完变量，必须有值，不能后赋值，不能修改

2)对象是引用，地址不变就可以。Object.freeze(对象) 不可以修改对象

// ================let===============

// 1.没有预编译，不存在变量提升
let a=123;
function fn(){
    console.log(a);  //TDZ开始  暂时性死区
    let a=5;//TDZ结束
}
fn();//error: a is not defined

//2. 同一个作用域，不能重复定义变量
let b=12;
let b=1234;
console.log(b);//error:Identifier 'b' has already been declared


//3. for循环：里面是父子级作用域

for(let i=0;i<3;i++){//()里面是父作用域
    let i='asd';//子作用域
    console.log(i);//asd asd asd
}

let arr=[];
for(let i=0; i<10;i++){
    arr[i]=function(){
        console.log(i);
    }
}
arr[5]();//5 

// 利用闭包解决
let arr=[];
for(var i=0; i<10;i++){
    (function(j){
        arr[j]=function(){
            console.log(j);
        }
    }(i))
}
arr[5]();//5  

// ================const===============

//1. 定义完变量，必须有值，不能后赋值，不能修改
const a;
a=123;
console.log(a);// Missing initializer in const declaration

//2.对象是引用,地址不变就可以,可以修改
const arr1=['sas','wer'];
arr1.push('asd');
console.log(arr1); //["sas", "wer", "asd"]

//3.Object.freeze(对象)  不可以修改
const arr=['apple','orange'];
Object.freeze(arr);
arr.push('banana');
console.log(arr); //error:Cannot add property 2, object is not extensible

 

二、解构赋值

注意：左右两边，结构格式保持一致

解构：可以起别名，赋给默认值

// 起别名
let obj={
    name:'weq',
    age:12,
}
let {name,age:ag}=obj;//ag 为age 的别名
console.log(name,ag);//weq 12

// 赋值 ，null需要特殊处理
let [a,b,c='无']=[1,2];//[1,2,undefined]->1 2 "无"  [1,2,null]->1 2 null
console.log(a,b,c); //1 2 "无"

let [a,b,c='无']=[1,2,null];
if(c==null) c='无';
console.log(a,b,c); //1 2 "无"

// 先定义在用变量，需要加(),否则会报错{}会被解析为块级作用域
let a;
({a}={a:'ads'});
console.log(a);//ads


// 交换两个数的位置
let a=12;
let b=34;
[a,b]=[b,a];
console.log(a,b);//34 12


// 函数传参
 function show({a,b='无'}={}){
     console.log(a,b);
 }
show({a:1});//1 "无"

// 函数返回值
function getPos(){
    return {
        width:10,
        height:20
    }
}
let {width,height}=getPos();
console.log(width,height);//10,20

 

三、字符串的扩展

字符串模板(``)

1.优点:可以随意换行

2.${变量名称}

字符串新增方法

1.字符串查找

str.includes(查找的内容)，返回true或false

str.indexOf(查找的内容)，返回索引，没有返回-1

2.检测字符串开头，结尾内容 返回true或false

str.startsWith(检测的内容)，检测开头

str.endsWith(检测的内容)，检测结尾

3.字符串重复拼接

str.repeat(拼接的次数); 返回拼接后的字符串

4.填充字符串,返回填充后的字符串

str.padStart(整个字符串长度，填充内容) 向前填充

str.padEnd(整个字符串长度，填充内容) 向后填充

 

// `` ${...}
let name='liu';
let age=12;
let str=`名字是${name}，年龄${age}岁`;
console.log(str);//名字是liu，年龄12岁

//字符串查找

let str='apple orange asd';
console.log(str.includes('orange'));//true

// 字符串是否以谁开头,检测地址

let str='http://www.baidu.com';
console.log(str.startsWith('http'));//true

// 字符串是否以谁结尾，检测图片png

let str='asd.png';
console.log(str.endsWith('png'));//true


// 字符串重复拼接

let str='haode';
console.log(str.repeat(100));


//填充字符串

let str='asd';
let padstr='123';
console.log(str.padStart(str.length+padstr.length,padstr));//123asd
console.log(str.padEnd(str.length+padstr.length,padstr));//asd123