ES6相关

最新推荐文章于 2024-03-04 17:10:23 发布

happy sun

最新推荐文章于 2024-03-04 17:10:23 发布

阅读量55

点赞数

分类专栏： js知识点文章标签： js相关

本文链接：https://blog.csdn.net/qq_44309406/article/details/100747768

版权

js知识点专栏收录该内容

17 篇文章 0 订阅

订阅专栏

let声明变量

1，不能重复声明  报错
let a=10;
let a=20; //报错
2，不存在预解析  不存在声明提前
console.log(b);  //报错
let b = 20;
3，增加块级作用域  {}
{
	let c=20;
	console.log(c);  //20
}
console.log(c);//报错

const 声明常量

1，声明的时候就必须赋值 
	const A;  //报错
	A=10;
2，一旦赋值之后 值不能改变
	const A = 10;
	A = 20; //报错
注意：常量名字 一般大写（全部大写），区别于变量

箭头函数

es6 新增的一种函数的简写形式

注意：只是函数的表达式（函数的值）

function fn(a,b){
    return a+b;
}
alert(fn(2,3)); */

/*  var fn = (a,b)=>a+b;
alert(fn(2,3)); */

1， 函数 无参数  需要加() 占位

let fn = ()=>alert(1);
fn(); 

2， 函数只有一个参数  参数可以加括号也可以不加
 let fn = a=>alert(a);
 fn(3);
 let fn = (a)=>alert(a);
 fn(3); 


3， 函数有多个参数 一定 要加括号

let fn = (a,b)=>alert(a+b);
fn(3,4);


4，如果箭头函数不换行  如果不换行。，默认return 那一行代码

let fn = (a,b)=>a+b;
alert(fn(3,4)); 
5， 如果函数有多行代码  这个时候不会自动return，如果需要有返回值，需要你手动return 且需要{}包裹多行代码

let fn = (a,b)=>{
    console.log(a);
    console.log(b);
    return a+b;
}
console.log(fn(3,4));

6，箭头函数中的this关键字
箭头函数没有this指向，this取决于他所在的上下文（环境）
 console.log(this);  //window
let fn = ()=>console.log(this); //window
fn();

document.onclick = function(){
    let fn = ()=>{
        console.log(this); //document
    }
    fn();
}

函数参数默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <script>
       /*  function fn(a){
            // a=a||10;
            a = a==undefined?10:a;
            alert(a);
        }
        fn(0); */

      /*   function fn(a=10){
            alert(a);
        }
        fn();
        fn(2); */
        // 箭头函数也支持

        var fn = (a=10)=>alert(a);
        fn();
        fn(2);
    </script>

</body>
</html>

解构赋值声明变量

解析结构然后赋值

1，数组的结构赋值

//数组的解构赋值  按照先后顺序来的
 var arr=[2,3];
 // var [a,b] = [2,3];
 var [a,b] = arr;
 alert(a); 2
 alert(b); 3
 // 如何交换两个变量的值
 var a=10;
 var b=20;
 [a,b]=[b,a];
 alert(a);
 alert(b);

2，对象的解构赋值

 // 对象的解构赋值  是按照  属性名 key 跟顺序无关
var {a,b}={a:10,b:20};
alert(a); 10
alert(b); 20

var {a,b}={b:20,a:10};
alert(a);10
alert(b);20

模板字符串

es新增 `` 表示字符串
1，字符串是可以换行的  默认" ''是不能换行的
2，在``字符串中可以是 ${变量}，这个js会解析成变量，而不是字符串，不需要拼接可以直接在字符串中写变量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <script>
        /*
        模板字符串解决问题：字符串拼接
        ${变量} 写在字符串中，js不会解析成字符串，当做变量来解析
        这个时候 字符串的 引号 要变成   ``
        `` 中的字符串是可以换行的
        默认的 "" ''不可以换行
        */ 
        var name = 'conner.li';
        alert("我的名字是"+name+"很高兴认识大家");

        alert( `我的名字是${name}很高兴认识大家`); 

        var str = "\
            <div>\
                <p>我是p标签</p>\
            </div>\
        ";
        document.body.innerHTML = str; 
        
        var str = `
            <div>
                <p>我是p标签</p>
            </div>
        `;
        document.body.innerHTML=str;
    </script>

</body>
</html>

展开运算符 …

功能：可以将某些特定数据类型展开如数组、字符串、对象

happy sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6相关

let声明变量1，不能重复声明报错let a=10;let a=20; //报错2，不存在预解析不存在声明提前console.log(b); //报错let b = 20;3，增加块级作用域 {}{ let c=20; console.log(c); //20}console.log(c);//报错const 声明常量1，声明的时候就必须赋值 c...
复制链接

扫一扫