ES6基础知识点

咖啡，巫师与猫

于 2022-07-07 06:33:43 发布

阅读量287

点赞数

分类专栏：前端开发基础知识学习笔记文章标签： es6 javascript 前端

本文链接：https://blog.youkuaiyun.com/zysp158/article/details/125631535

版权

前端开发基础知识学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文是ES6入门笔记，介绍了ES6中的变量和常量声明，如let和const的特点；还讲解了解构赋值、模板字符串、数组扩展函数、形参默认值、rest参数、箭头函数以及定义对象的简洁方式等内容，为学习ES6提供基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6入门笔记

ES6中的变量和常量

ES6新增了两个关键词用来声明变量和常量
声明变量使用let关键词
声明常量使用const关键词
let:
let :用于声明变量，代替var 关键词
特点︰有块级作用域;不存在变量提升﹔暂时性死区
块级作用域在es6中才有，一对大括号就是一个块级作用域
在大括号中使用let声明的变量出了大括号就无效了
在循环、分支结构中使用let声明的变量也就会无效
变量提升：console.log(num);
var num = 10;
—> var num;
console.log(num);
num = 10;
浏览器会在解析的时候把变量的声明提前
暂时性死区：
let声明的变量会被绑定在块级作用域内，不再受外部的影响，会专门开辟一个内存
在循环的时候使用let会好些
const:
const用于声明常量
特点:有块级作用域;声明常量时必须赋值，且赋值后不能修改

解构赋值

解构赋值就是将数组或者对象中的单元分别取出并保存在单独的变量中
对象解构：

// 结构案例:
const {name, age, gender} = {id: 1, name: "王小明" ,age: 8};
console.log(name);//王小明
console.log(age);// 8
console.log(gender);// undefined
// 别名
const {name: username, age} = {id: 1, name: "王小明",age: 8};
console.log(username);//王小明
console.log(age);// 8
// 注意:使用了别名之后，原名就不能使用了
// 数组解构
const [ , name, age] =[1, "王小明", 8];
console.log(name); //王小明
console.log(age); //8
// 注意:变量名可以随意设置
const [n1, n2,...n] =["蛮子"，"易","赵信"，"盖伦","皇子"];
// ...︰扩展运算符
// 扩展运算符可以把值用数组的形式保存起来
console.log(n1); // 蛮子
console.log(n2); //易
console.log(n); // ["赵信"，"盖伦","皇子"]

模板字符串

-使用反引号声明的字符串就是模板字符串
let str = `Hello World.`
两个优点:
字符串可以换行(方便声明标签结构)
$:方便解析变量或者函数

<!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>
    <h1> 模板字符串案例 </h1>
    <p>这是一个p标签的内容</p>
    <div>这是一个div标签的内容</div>
    <script>
        const{name, age, gender} = {name: "王小明", age: 11, gender: "男"};
        let str1 = `<tr>
            <td>${name}</td>
            <td>${age}</td>
            <td>${gender}</td>
            </tr>`;
            var divDom = document.createElement("div");
            divDom.innerHTML = str1;
            var bnode1 = document.querySelector("body");
            var pnode1 = document.querySelector("p");
            bnode1.insertBefore(divDom, pnode1);
    </script>
</body>
</html>

数组扩展函数

includes:判断─个数组中是否包含另一个值
find: 返回满足条件的第一个单元值
findIndex:返回满足条件的第一个值的索引

const arr = ['aa', 10, 'abc', 100, '123'];

arr.includes(100);    //true, arr中包含100
arr.includes('100');  //false, arr中不包含100字符串

const arr = ['aaa', 20, 100, 'bbb', 200];
// item: 每次循环得到的当前单元的值     （同forEach）
// index: 每次循环得到的当前单元的索引   （同forEach）
let result = arr.find(function (item, index) {
    if (item > 50) {
        return item;
    }
})
console.log(result);   //100

const arr = ['aaa', 20, 100, 'bbb', 200];
let result = arr.findIndex(function (item, index) {
    if (item > 50) {
        return item;
    }
});
console.log(result);  //2

形参默认值

声明函数时给形参设置默认值
function add (a = 10, b = 20){
return a + b;
}
add();//不传入实参，则使用默认值，结果为30
add(5,3);/传入实参，则使用实参，结果为8

rest参数

es6之前，调用函数时可以传入不定数量的参数（可变参数)，函数体内使用arguments 获取多个参数
es6开始，取消了arguments，使用扩展运算符来接收参数
function show (…args){
console.log(args);
}
show(2，‘美牙’，30,‘女’)
args以数组形式保存了show中所有的参数

箭头函数

箭头函数的用法和普通函数用法几一致
去掉function关键词，()和{}之间增加一个=>
function show () {} //普通函数
let show = () =>{} //箭头函数
function() {} //声明匿名函数
()=>{} //匿名箭头函数
箭头函数不能作为构造函数
箭头函数没有arguments，要使用可变参数可以使用rest方式
箭头函数没有this对象，在箭头函数中的this指的函数外层的对象
如果函数体只有一句并且设置了返回值，则不需要使用大括号，不需要return
如果函数中只有一个参数，则不需要写小括号