ES6简明笔记

最新推荐文章于 2022-08-03 21:02:39 发布

Noria 107

最新推荐文章于 2022-08-03 21:02:39 发布

阅读量608

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 ES6 笔记文章标签： es6 ES6笔记

本文链接：https://blog.youkuaiyun.com/Noria107/article/details/109071363

笔记同时被 3 个专栏收录

15 篇文章

订阅专栏

前端

10 篇文章

订阅专栏

ES6

5 篇文章

订阅专栏

本文介绍了ES6中的let和const声明变量的特性，包括块级作用域和常量不可修改。此外，还讲解了变量解构赋值、模板字符串、简化对象写法、箭头函数、参数默认值、rest参数和扩展运算符等。深入理解了这些核心概念后，可以更好地进行现代JavaScript开发。

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

一、let和const

（一）let

let声明变量，应该注意一下几点：

变量不能重复声明，否则报错
与var不同，let声明的变量属于块级作用域
不存在变量提升
不影响作用域链

（二）const

const定义常量，应该注意一下几点：

const定义常量一定要赋初始值
常量一般使用大写（潜规则）
常量的值不能修改
块级作用域
对于数组和对象的元素修改，不算做对常量的修改，不会报错

二、变量解构赋值

在ES6中允许按照一定模式从数组和对象中提取值，对变量进行赋值，称为解构赋值

（1）数组的解构

const allSpark = ['前端','后台','运维','产品','设计'];
let [one,two,three,four,five] = allSpark;
console.log(one);
console.log(two);
console.log(three);
console.log(four);
console.log(five);

（2）对象的解构

const allSpark = {
    name:'allSpark工作室',
    age:3,
    magic:function(){
        console.log('我是allSpark工作室!');
    }
};
let {name,age,magic} = allSpark;
consloe.log(name);
consloe.log(age);
consloe.log(magic);
magic();

三、模板字符串

在ES6中引入新的声明字符串的方式，注意事项：

1.声明

let allSpark = `我是一个字符串！`;

2.内容中可以直接出现换行符

let allSpark = `<ul>
                  <li>前端</li>
                  <li>后台</li>
                  <li>产品</li>
                  <li>运维</li>
                  <li>设计</li>
                </ul>`

3.变量拼接，使用${}实现

let allSpark = `allSpark`;
let love = `${allSpark}是西邮的一个工作室！`;
console.log(love);

四、简化对象写法

在ES6中允许在大括号里面直接写入变量和函数，作为对象的属性和方法，（优点：简洁）

let name = `哈哈哈`;
let change = function(){
    console.log('这是简化对象写法里面的一个函数!');

};
const xiyou = {
    name,
    change,
    love(){
      console,log('第二个函数!');
    }
}

五、箭头函数

在ES6中使用箭头（=>）定义函数

let fn (a,b) =>{
  return a+b;
}

注意事项：

在箭头函数中，this是静态的，this始终指向函数声明时所在作用域下的this的值
箭头函数不能不作为构造实例对象
箭头函数不能使用arguments变量
箭头函数适合与this无关的回调，定时器，数组等方法的回调
箭头函数不适合与this有关的回调，事件回调，对象等方法

箭头函数的简写

1）省略小括号，当形参有且只有一个的时候

let fn = n =>{
  return n*n;
}

2）省略花括号，当代码体只有一条语句的时候，此时return必须省略，而且语句块执行的结果就是函数的返回值

let fn = n => n * n;

六、参数默认值

ES6允许给函数参数赋初始值

1、形参初始值，具有默认值得参数，一般位置靠后

function fn(a,b,c=3){
  return a + b + c;
}
let result = fn(1,2);
console.log(result);

2、也可以和解构赋值相结合

function submit({name,password}){
  console.log(name);
  console.log(password);
}
submit({
  name:"张三",
  password:"love"
})

七、rest参数

在ES6中引入rest参数，来获取函数的实参，取代arguments

function data(...args){
  console.log(args);
}
data('哈哈哈','呵呵呵','嘿嘿嘿');

注意：

与ES5的区别：ES5转化为对象，ES6转化为数组
当有多个参数的时候，rest参数必须放在参数最后面

八、扩展运算符

扩展运算符： . . .

可以将数组转化为逗号分隔的参数序列

1、数组合并

const sex = ['男' ,'女'];
const school = ['小学','初中','高中','大学'];
const rensheng = [...sex,...school];

2、数组复制

const sex = ['男' ,'女'];
const school = [...sex,];

3、将伪数组转为真数组

九、symbol

新的一种原始数据类型，表独一无二的值，JavaScript的第七种数据类型，类似于字符串

特点：

symbol值唯一，可解决命名冲突问题
symbol值不能与其他数据进行运算
symbol定义的对象属性不能使用for..in循环遍历，但是可以使用Reflect.ownKeys来获取所有的键名

symbol向对象中添加方法up和down

let game = {...}

let methods ={
  up:Symbol(),
  down:Symbol()
};

game[methods.up] = function(){...};
game[methods.down] = function(){...};

十、ES6模块化语法

主要由两个命令export和import组成

export：规定模块的对外接口

import：输入其他模块提供的功能

十一、其他

（一）Array.prototype.includes

includes用于检测数组中是否包含某个元素，返回布尔类型

（二）指数操作符

使用**实现幂运算，与Math.pow()结果相同

（三）Object.values和Object.entries

Object.values()返回一个给定对象的所有可枚举属性的数组

Object.entries()返回一个给定对象吱声可遍历属性[key,value]的数组