JavaScript——ES6新特性（1）

已于 2022-03-21 15:31:34 修改
阅读量855 收藏 3
点赞数 1
分类专栏： 前端 文章标签： javascript es6 前端
于 2022-03-18 20:24:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/realoser/article/details/123577630
版权

ES6 新特性（1）

一、let

  1. let 不能重复声明
// 报错：
let name = 'andy';
let name = 'red';
// 不会报错：
var name = 'andy';
var name = 'red';
  1. 块级作用域，只能在代码块里有效
// 报错：
{
    let name = 'andy';
}
console.log(name);

// 不会报错：
{
    var name = 'andy';
}
console.log(name);
  1. 不存在变量提升
// 返回 undefined
console.log(name);
var name = 'andy';

// 报错
console.log(name);
let name = 'andy';
  1. 不影响作用域链
// 返回 andy
{
    let name = 'andy';
    function fn() {
        console.log(name);
    }
    fn();
}
  1. 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>
<style>
    div {
        float: left;
        margin-right: 10px;
        width: 200px;
        height: 100px;
        border: 1px solid #c55;
    }
</style>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>
<script>
    let div = document.querySelectorAll('div');
    for (let i = 0; i < div.length; i++) {
        div[i].onclick = function() {
            div[i].style.backgroundColor = 'pink';
            // this.style.backgroundColor = 'pink';
        }
    }
</script>

</html>

二、const

用于声明常量，一般常量使用大写字母

  1. 必须赋初始值
// 报错
const NAME;
  1. 常量值不能修改
// 报错
const NAME = "andy";
NAME = 'red';
  1. 块级作用域
// 报错
{
    const NAME = "andy";
}
console.log(NAME);
  1. 可以对数组和对象的元素修改
    对于数组和对象的元素修改，不算做对常量的修改，不会报错。
// 返回 [ 'andy', 'red', 'tony' ]
const NAMES = ['andy', 'red'];
NAMES.push('tony');
console.log(NAMES);

三、解构赋值

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

  1. 数组的解构
// 返回 green red blue
const COLOR = ['green', 'red', 'blue'];
let [g, r, b] = COLOR;
// 声明了三个变量，每个变量的值就是数组对应位置的值
// g = COLOR[0]; r = COLOR[1]; b = COLOR[2];
console.log(g, r, b);
  1. 对象的解构
// 输出
// andy 50
// 救赎之道，就在其中
const ANDY = {
    name: 'andy',
    age: '50',
    salvation: function() {
        console.log('救赎之道，就在其中');
    }
}

let { name, age, salvation} = ANDY;
console.log(name, age);
salvation();

四、模板字符串

ES6 引入新的声明字符串的方式 `` 。

  1. 声明格式
// 返回 我是一个字符串 string
let str = `我是一个字符串`;
console.log(str, typeof str);
  1. 内容中可以直接出现换行符
// 正常输出
let li = `<ul>
<li>Andy</li>
<li>Red</li>
</ul>`;
console.log(li);
  1. 拼接字符串
// 输出 Andy向往自由
let name = 'Andy';
let freedom = `${name}向往自由`;
console.log(freedom);

五、简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。

let name = 'andy';
let salvation = function() {
    console.log('救赎之道，就在其中');
}

const ANDY = {
    name,  // name: name; 
    salvation,
    freedom() {
        console.log('向往自由');
    }
}
console.log(ANDY);

六、箭头函数

ES6 允许使用 => 定义函数。

  1. 声明格式
// 返回 3
let fn = (a, b) => {
    return a + b;
}
console.log(fn(1, 2));
  1. this 是静态的
    this 始终指向函数声明时所在作用域下的 this 的值。
    function getName() {
        console.log(this.name);
    }
    let getName1 = () => {
        console.log(this.name);
    }
    window.name = 'window';
    const SCHOOL = {
        name: 'SCHOOL'
    }
    getName();  // this 指向 window
    getName1(); // this 指向 window
    getName.call(SCHOOL); // this 指向 SCHOOL，改变了指向
    getName1.call(SCHOOL); // this 指向 window，不改变指向
  1. 不能作为构造函数
// 报错
let Person = (name, age) => {
    this.name = name,
        this.age = age
}
let andy = new Person('andy', 50);
  1. 不能使用 arguments 变量
// 返回 [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
function fnn() {
    console.log(arguments);
}
fnn(1, 2, 3, 4, 5)

// 报错
let fn = () => {
    console.log(arguments);
}
fn(1, 2, 3, 4, 5);
  1. 箭头函数的简写
  • 当形参有且只有一个的时候可以省略小括号
// 返回 6
let add = n => {
    return n + n;
}
console.log(add(3));
  • 当代码体只有一条语句的时候省略花括号
// 返回 9
let pow = n => n * n;
console.log(pow(3));
  1. 箭头函数实践
  • 点击盒子2秒后切换颜色
<!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>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: #963;
    }
</style>

<body>
    <div></div>
</body>
<script>
    let div = document.querySelector('div');
    div.addEventListener('click', function() {
        // this 指向div
        setTimeout(() => {
            // 小括号内 this 静态
            console.log(this);
            this.style.backgroundColor = '#369';
        }, 2000);
    })
</script>

</html>
  • 筛选偶数
// 返回 [ 6, 10, 100 ]

const ARR = [1, 6, 9, 10, 100, 25];
// filter 过滤器，返回符合条件的数组
// 回调函数，遍历数组, item是数组中的值
const RESULT = ARR.filter(item => item % 2 === 0); // 如果符合则是true
console.log(RESULT);
  1. 箭头函数使用场景
  • 箭头函数适合与this无关的回调，如定时器，数组方法回调；
  • 不适合与this有关的回调，如事件回调，对象方法。

七、参数初始值

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

  1. 形参初始值
// 返回 NaN
function add(a, b, c) {
    return a + b + c;
}
console.log(add(1, 2));

// 返回 3
function add(a, b = 0, c = 0) {
    return a + b + c;
}
console.log(add(1, 2));
  1. 与解构赋值结合
// 返回 175.178.66.58 root 123456 3306
function connect({ host='127.0.0.1', username, password, port }) {
    console.log(host, username, password, port);
}
connect({
    host: '175.178.66.58',
    username: 'root',
    password: '123456',
    port: 3306
})

八、rest 参数

ES6 引入 rest 参数，用于获取函数的实参，用来替代 arguments。

  1. rest 参数返回数组
  • rest 参数返回数组，提高了对参数处理的灵活程度。
// 返回对象 [Arguments] { '0': 1, '1': 2, '2': 3 }
function data() {
    console.log(arguments);
}
data(1, 2, 3)

// 返回数组 [ 1, 2, 3 ]
function date(...args) {
    console.log(args);
}
date(1, 2, 3)
  1. rest 参数必须放在最后
// 返回
// 1
// 2
// [ 3, 4, 5, 6 ]
function fn(a, b, ...args) {
    console.log(a);
    console.log(b);
    console.log(args);
}
fn(1, 2, 3, 4, 5, 6)

// 报错
function fn(...args, a, b) {
    console.log(a);
    console.log(b);
    console.log(args);
}
fn(1, 2, 3, 4, 5, 6)

九、扩展运算符

  1. 将数组转换为逗号分隔的参数序列
    扩展运算符能将数组转换为逗号分隔的参数序列。
// 返回数组 [Arguments] { '0': [ 'andy', 'red' ] }
const NAMES = ['andy', 'red'];
function shawshank() {
    console.log(arguments);
}
shawshank(NAMES);

// 返回参数序列 [Arguments] { '0': 'andy', '1': 'red' }
const NAMES = ['andy', 'red'];
function shawshank() {
    console.log(arguments);
}
shawshank(...NAMES); // 等同 shawshank('andy', 'red');
  1. 数组合并
// 返回 ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black']
const RGB = ['red', 'green', 'blue'];
const CMYK = ['cyan', 'magenta', 'yellow', 'black'];
// const COLOR = RGB.concat(CMYK);
const COLOR = [...RGB, ...CMYK]
console.log(COLOR);
  1. 数组克隆
    扩展运算符克隆数组是浅拷贝。
const RGB = ['red', 'green', 'blue'];
const COLOR = [...RGB];
console.log(COLOR);
  1. 将伪数组转换为真正的数组
// 返回 [ 'andy', 'red' ]
function shawshank() {
    return arguments;
}
const RESULT = shawshank('andy', 'red');
console.log([...RESULT]);

十、后接 ES6 新特性（2）

iFulling
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ES6学习总结(五)
qq_39471200的博客
06-13 169
数组的扩展 ES6新增了两种创建数组组的方法 Array.of方法 使用new Array方法创建数组会存在一些怪异点，如果传输入一个数值型量会被认为设置length，如果传入一个非数值型量会被认为设置数组中的某一项，传入多个参数会被认为是设置多个项 // 使用数组构造器创建数组 let arr = new Array(2) console.log(arr) // 2 console.log(ar...
ES6新特性之模块Module用法详解
08-30
ES6引入了一项重要的新特性——模块(Module)，这是为了解决JavaScript长期以来缺乏内置模块系统的困境。在ES6之前，开发者通常依赖于社区制定的模块加载方案，如CommonJS（Node.js环境）和AMD（浏览器环境）。然而，...
ES6 常用API详解
pcaxb的专栏
02-20 5991
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址： ES6 常用API详解 字符串转Int和Float类型，JS没有单双精度之分,只有Float没有Double，所以也没有parseDouble。单精度在内存中占32位4个字节有效数字6-7位,双精度占64位8个字节有效数字15-16位,一般常量都是双精度处理的,float a = 0.5报错,flo
ES6新特性01
weixin_45080950的博客
10-08 324
ES6新特性
方法参数
weixin_45420860的博客
07-30 172
调用有参方法的时候,传递的参数是可以自动强制转换的.就好比如说方法的参数列表是double型的,但是传递的时候传递了int.java会自动转换成double public void method(int a,double b){ } public void method(double a,int b){ } 这种重写方法的情况应该避免出现 所以在重写方法的时候,要么参数数量不一致,要么类型不...
ES6——数值扩展
weixin_54362381的博客
06-18 158
数值扩展 一、新的进制表示法 0o|0O代表八进制，octonary 0b|0B代表二进制，binary 二、新的方法与安全数 1、parseInt和parseFloat 功能：将数字以及字符串形式的数字转化为number形式的整数或者浮点数 这两个方法挂载对象从window换到了Number下面，即要通过Number.parseInt(1.23)来调用。 通过Number()可转为10进制； console.log(window.parseInt('1.23')); console.log(parseFl
ES6新特性之Symbol类型用法分析
08-30
ES6引入了一种全新的数据类型——Symbol，这是为了在JavaScript中解决属性命名冲突的问题。Symbol类型可以生成唯一的值，这使得它们成为定义不可变、独一无二的属性标识的理想选择。接下来，我们将深入探讨Symbol...
ES6新特性四：变量的解构赋值实例
08-30
在ES6（ECMAScript 2015）中，引入了一种强大的语法特性——变量的解构赋值。解构赋值允许我们从数组、对象或其他可迭代结构中提取值，并将它们赋值给一组变量。这个特性极大地提高了代码的可读性和简洁性。下面我们...
JS面向对象编程——ES6 中class的继承用法详解
11-21
JavaScript是一种基于对象的语言，虽然它的面向对象特性与传统面向对象编程语言有所不同，但在ES6中引入的`class`语法糖让其变得更加接近经典的面向对象概念。`class`关键字的使用大大简化了对象的创建和继承过程，...
原生JavaScript之es6中Class的用法分析
10-15
在JavaScript的ES6标准中，引入了一种新的语法特性——Class，这使得JavaScript的面向对象编程变得更加简洁和直观。Class的出现是对ES5中基于原型的面向对象编程方式的一个补充，提供了一种更加接近传统面向类的语言...
ES6 新增的循环方法
最新发布
前端程序猿的博客
06-07 1615
ES6 新增的循环方法为我们在遍历数组、字符串、Set、Map 等数据结构时提供了更加便捷的方式。在实际开发中，我们可以根据需求选择合适的方法进行使用。
ja|es6Promise异步处理用法指南(含测试用例)
执念斩长河
05-29 318
本博文源于js基础，使用Promise来做异步处理非常简单而且条理清晰。promise对象是then和catch两个方法来操作的，then方法用于执行下一步，catch方法用于执行失败(或拒绝)后的处理。 Promise实例对象的创建需要一个executor参数。executor是一个函数，要处理的业务就放在这个函数里。说多就太理论，先来个例子
ES5和ES6作用域详解
weixin_34221773的博客
11-07 855
ES5的作用域 变量起作用的范围，js中能创建作用域的只能是函数 { let a = 1; var b = 2; } console.log(a); // a is not defined console.log(b); // 2 var的作用域就是所在的函数体 let的作用域就是所在的代码块 词法作用域和函数作用域 当代码写好...
JS高级之ES6类与对象、静态成员、类的继承
李建雨的博客
12-17 412
一、类与对象 什么是类？ 好比：人类、动物类 就是一个群体的统称 类里描述这一类群体，有哪些特征和行为，所谓的特征对应到代码中就是属性，行为对应到代码中就是方法 类理解为是一套描述数据的模板，但是没有具体的数据 在ES6以前JS里是没有类专门的语法，都是通过 构造函数 起到类的作用 什么是对象？ 某一个群体里的实际例子 对象可以理解为是根据模板创造出来的具体的数据 所以我们经常把 创建对象 叫做 实例化对象 ES6里声明一个类的语法 ...
ES6语法新特性
dyk
07-29 1035
ES6语法新特性为什么要学习 ES6let 关键字不允许重复声明块儿级作用域（局部变量）：不存在变量提升：不影响作用域链：let案例：点击div更改颜色应用场景const 关键字声明必须赋初始值：不允许重复声明：值不允许修改：块儿级作用域（局部变量）：应用场景：变量和对象的解构赋值应用场景：模板字符串应用场景：简化对象和函数写法 为什么要学习 ES6 ES6 的版本变动内容最多，具有里程碑意义； ES6 加入许多新的语法特性，编程实现更简单、高效； ES6 是前端发展趋势，就业必备技能； let 关键字
ES6介绍、变量、常量、解构、模板字符串、对象的简化写法
mantou_riji的博客
05-15 618
文章目录ES介绍为什么学习ES6变量的声明let变量声明声明格式let特性let练习常量声明格式特点变量解构赋值 ES介绍 ES全称EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性。 为什么学习ES6 ES6的版本变动内容最多，具有里程碑意义 ES6加入许多新的语法特性，编程实现更简单、高效 ES6是前端发展趋势，就业必备技能 ES6的浏览器兼容性查看：http://kangax.gith
ES6--Promise对象
吴声子夜歌的博客
10-17 482
概述 是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise 状态 状态的特点 Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。 Promise 对象只有：从 pending 变为 fulfilled 和从 pendi...
ES6-数值的扩展-Number.parseInt(), Number.parseFloat()
极北
11-02 1627
ES6 将全局方法 parseInt() 和 parseFlost()，移植到 Number 对象上面，行为报纸不变。   // ES5的写法 parseInt('12.34') // 12 parseFloat('123.45#') // 123.45 // ES6的写法 Number.parseInt('12.34') // 12 Number.parseFloat('123.45#'...
ES6入门指南：新特性与应用详解
《ES6标准入门（第二版）》以浅显易懂的方式，系统地向读者传授了ES6的新特性和最佳实践，无论你是初次接触ES6的开发者，还是希望提升现有技能的JavaScript专家，这本书都是不可或缺的学习资料。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iFulling

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值