ES6新语法

文章详细介绍了JavaScriptES6中的let命令,包括其块级作用域、不提前声明和不可重复声明的特性。接着讨论了const常量声明以及其值不可变的规则。此外,还阐述了解构赋值的概念,分别展示了数组和对象解构的用法。最后,提到了字符串的新方法如includes,startsWith,endsWith,repeat,padStart和padEnd,以及字符串模板的使用,使得字符串操作更加便捷。
摘要由CSDN通过智能技术生成

1.let

1.1 let命令的作用域只局限于当前代码

<script>
	{
		let a =10;
		var b = 1;
	}
	console.log(a); // error
	console.log(b);
</script>

1.2 let 声明的变量作用域不会被提前 

console.log(a); // 输出undefined
var a = 10;
console.log(b); // error
let b = 1;

1.3 在相同作用域下,不能声明相同的变量

// 报错
function func(){
	let a= 0;
	var a = 0;
}
// 报错
function func(){
	let a = 1;
	let a = 2;
}
// 报错
function func(arg){
	let arg = 0;
}
// 不报错
function func(arg){
	{
		let arg = 2;
	}
}

1.2 let 声明的变量作用域不会被提前

console.log(a); // 输出undefined
var a = 10;
console.log(b); // error
let b = 1;

1.3 在相同作用域下,不能声明相同的变量

// 报错
function func(){
	let a= 0;
	var a = 0;
}
// 报错
function func(){
	let a = 1;
	let a = 2;
}
// 报错
function func(arg){
	let arg = 0;
}
// 不报错
function func(arg){
	{
		let arg = 2;
	}
}

1.4 for 循环中let的父子作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
<script>
    var btns = document.querySelectorAll('button');
    for(var i=0; i<btns.length; i++){
        btns[i].onclick = function(){
            console.log('这是第'+ i +'个按钮');
        }
    }
</script>
</html>

2、const

const表示声明一个常量。他和let的特点一样,主要区别是常量。

   1. const变量在声明时需要赋值。

   2.声明后变量的指针地址不能变,但是指向的数据结构内容可以改变。对于简单数据类型就是值       不能变。对于对象类型则是指指针不能变。

3、解构

3.1 什么是解构

        解构赋值可以理理解为赋值操作的语法糖,它是针对数组或者对象进⾏行行模式匹配,然后对其中的变量进行赋值。代码书写上⾔简意赅,语义明确,也方便了对象数据的读取操作。

解构不同的数据类型,解构的语法会略有不同。数组解构用的是[],对象解构用的是{}

但是解构的默认值,和别名语法是一样的。

3.2 数组解构

    {
        let a,b,c; // 声明
        [a,b,c] = [1,2,3]; // 解构赋值,数据的解构使用[],
        console.log(a,b,c) // 1 2 3
    }
    {
        let [a,b,c] = [1,2,3]; // 声明并解构赋值
        console.log(a,b,c) // 1 2 3
    }
    {
        let [a,,b] = [1,2,3] // 赋值是按照位置顺序指定的,使用,占位符
        console.log(a,b) // 1 3
    }
    {
        let [a,b=2,c=3,d] = [1,22] // 给b设置一个默认值,默认值会被赋值操作覆盖
        console.log(a,b,c) // 1 22 3
    }
    {
        let [a,...other] = [1,2,3]; // 数组分割
        console.log(a,other) // 1 [2 3]
    }

3.3 对象解构

{
    let a,b;
    ({a,b} = {a:1,b:2}); // 对象解构使用的{}
    console.log(a,b);
}
{
    let {a,b} = {b:2,a:1}; // 对象中赋值的对应关系使用的是键值,和顺序无关
    console.log(a,b);
}
{
    let {a:num1,b:num2} ={a:1,b:2} // 当对象中的键值和变量名称不一致的时候,可以使用别名
    console.log(num1,num2);
}
{
    function func() {
        return {
            schoolname: '学校名称',
            classlist: [{
                    classname: '班级1',
                    count: 10
                },
                {
                    classname: '班级2',
                    count: 11
                }
            ]
        }
    }
    // 解构复杂数据类型
    let {
        schoolname: myschoolname,
        classlist: [{
            classname: myclassname1
        }, {
            classname: myclassname2
        }]
    } = func();
    console.log(myschoolname, myclassname1, myclassname2);
}

4、字符串方法扩展

{
    let str = '123name321';
    console.log(str.includes('name')); // 判断是否包涵name
    console.log(str.startsWith('123')); // 判断是否以123开头
    console.log(str.startsWith('name',3)); // 判断从第4位开始,是否以name开头
    console.log(str.endsWith('321')); // 判断是否以321结尾
    console.log(str.endsWith('name',7)); // 判断第7位以前,是否以name结尾
    console.log(str.repeat(2)); // 重复字符串2次
    console.log(str.padStart(13,'abcd')) // 头部补全,补全到13位
    console.log(str.padEnd(13,'abcd')) // 尾部补全,补全到13位
}

5、字符串模板

      在之前的语法中,在字符串中拼接带变量的字符串会比较麻烦,所以引入了字符串模板。

{
    let name='youyou';
    let age=18;
    let str = `我叫${name},    今年${age}岁`; // 注意空格和回车会原样输出
    console.log(str)
}

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值