Es6新特性(一)

最新推荐文章于 2024-06-12 11:13:48 发布

xiaoDream-

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量246

点赞数

分类专栏： JavaScript 文章标签：前端 javascript visual studio code

本文链接：https://blog.csdn.net/qq_41392076/article/details/124233085

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

(一) let 命令和const命令

知识点:

let的用法类似于var，用于变量的声明
使用let就会产生块级作用域, let命令只在块级作用域内(也就是大括号内)有效
let在同一作用域内只能声明一次, 不能重复声明
let和const不存在变量提升

1. let命令

// 用let声明变量

<script>
   let username = '张三';
   let age = 100; 
</script>

// 用let声明的变量有块级作用域

// es5没有块级作用域
{
    var i = 0;
}
console.log('i',i);


// es6有块级作用域
{
    // 用let声明的变量, 只在括号内有效
    let j = 1;
    console.log('{}',j);
}
 // 用let声明的变量,在括号外无效, 所以报错
console.log('j',j);

2. const命令

用来声明常量
不能被重新赋值
若是对象, 可以修改属性, 但不能重新赋值

const PI = 3.141592653519383447;
// PI = 100;  // 会报错,因为常量不能被重新赋值

const obj = {
    username: 'zs',
    age:18
}
//obj = {};  // 会报错,不可以重新赋值
// 用const声明的对象可以修改属性
obj.username = 'lisi';
console.log(obj);

3.不能重复声明

var username = 'zs';
var username = 'lisi';

let age = 20;
// 报错 Identifier 'age' has already been declared
let age = 30;

4. let和const声明不会提前

console.log(username); // es5:变量提前,值为undefined
console.log(age); // es6:变量声明不会提前, 所以报错
var username = "zs";  
let age = 20;

5.var、let、const 区别

var 关键字的特点：
        变量（预解析）提升，可以在声明的前面使用   
        同一作用域内可以多次声明同一个变量（即便这种方式不建议这样去写）                        能让它形成作用域的只有函数  
let:声明变量的关键字   
        没有变量提升，只能在声明之后使用   
        同一作用域内只能声明一次   
        你声明的变量的作用域仅限于最近的花括号内（ {} ）     
const:只能用来声明常量，该常量一旦声明其值就不能改变( 与let的唯一区别 )
        没有变量提升，只能在声明之后使用  
        同一作用域内只能声明一次  
        你声明的变量的作用域仅限于最近的花括号内（ {} ）
        用const声明的变量,不允许重新赋值,引用数据类型可以添加或修改属性

(二) 变量的解构赋值

知识点:

解构: 结构分解, 从一个整体的变量里分解出一部分来使用
数组解构
对象解构
函数参数解构和默认值

<script>  
//数组解构
let arr = ['a','b','c'];
// 对arr进行结构
let [x,y,z] = arr;
console.log(x);
console.log(y);
console.log(z);

//对象解构
let obj = {
    age: 100,
    username:'张三',
    addr: '长沙'
} 
// 对象结构,对象是无序的,所以顺序无所谓
let {username,age,addr} = obj;
console.log(username);
</script>

// 2.在函数中使用解构
// 自动结构: let {name,age} = obj;
function say({name,age}) {
    console.log(name);
    console.log(age);
} 
let obj = {
    name: 'zs',
    age:18
} 
say(obj);

// 3.默认值(1)
function say(obj) {
  console.log(obj.name);
}
let obj = {
  name: "zs",
  age: 18,
};
// say(obj); // 正常操作
say(); // 因为没有传对象,所以obj的值为undefined, console.log(obj.name) 就相当于console.log(undefined.name); 会报错

// 对象设置默认值,obj默认为{} 
function say(obj={}) { 
  console.log(obj.name);
}
let obj = {
  name: "zs",
  age: 18,
}; 
say();

// 4.对象属性设置默认值(2)
function say({name='帅锅',age=100}) { 
  console.log(name);
  console.log(age);
}
let obj = {
  name: "zs",
  age: 18,
}; 
say({}); // 必须传入{}, 如果不传,函数参数无法解构,会报错

// 5.对象和属性都设置默认值
function say({name='帅锅',age=18}={}) { 
  console.log(name);
  console.log(age);
}
let obj = {
  name: "zs",
  age: 18,
}; 
say();

(三) 模板字符串

<!DOCTYPE html>
<html lang="en"> 
<body> 
    <script>
        let username = '帅锅';
        let age = 100;
        // let  str = '他叫'+username+',他老了';
        let str = `他叫${username},他${age}了`;

        let htmlStr = `<ul>
                            <li>${username}</li>
                            <li>${age}</li> 
                        </ul>`;
 		console.log(htmlStr);
    </script>
</body>
</html>

xiaoDream-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Es6新特性(一)

(一) let 命令和const命令知识点: let的用法类似于var，用于变量的声明使用let就会产生块级作用域, let命令只在块级作用域内(也就是大括号内)有效 let在同一作用域内只能声明一次, 不能重复声明 let和const不存在变量提升 1. let命令// 用let声明变量<script> let username = '张三'; let age = 100; </script>// 用let..
复制链接

扫一扫