ES6入门基础

本文详细介绍了ECMAScript 6(ES6)的关键新特性,包括let和const声明变量、解构赋值、箭头函数、剩余参数与扩展运算符、模板字符串以及Set和Map数据结构。通过实例演示了这些特性的用法,帮助开发者更好地理解和运用ES6,提升编程效率。
摘要由CSDN通过智能技术生成

1.ES6概述

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。

ES6 实际上是一个泛指,泛指 ES2015 及后续的版本。

1.1.为什么要学习ES6

  • ES6 的版本变动内容最多,具有里程碑意义
  • ES6 加入许多新的语法特性,编程实现更简单、高效

2.ES6的新增语法

2.1.let关键字

let 关键字用来声明变量,使用 let 声明的变量有几个特点:

  • 不允许重复声明
  • 具有块级作用域
  • 不存在变量提升
  • 具有暂时性死区

示例1:

//不允许重复声明
//Identifier 'num' has already been declared
let num = 10
let num = 20

示例2:

//let定义的变量具有块级作用域,var不具有
if (true) {
    let a = 1;
    var b = 2;
}
//2
console.log(b);//a is not defined
//用let关键字定义的变量具有块级作用域,上面的变量a只在if的{}内有效,故发生a is not defined错误
console.log(a);

示例3:

//let关键字定义的变量不存在变量提升
//Cannot access 'a' before initialization
console.log(a);
let a = 1;//undefined
console.log(b);
var b = 1

示例4:

//使用let关键字能防止循环变量变成全局变量
for (var i = 0; i < 10; i++) {
}
//10
console.log(i);for (let i = 0; i < 10; i++) {
}
// i is not defined
console.log(i);

示例5:

//使用1et关键字声明的变量具有暂时性死区特性
var num = 10
if (true) {
    //当块级作用域内用let定义了相同名字的变量时,块级作用域外用var定义的同名变量会失效
    //Cannot access 'num' before initialization
    console.log(num);
    let num = 20
}

2.2.const关键字

const 关键字用来声明常量,常量就是值(内存地址)不能变化的量。const 声明有以下特点:

  • 声明必须赋初始值
  • 标识符一般为大写
  • 不允许重复声明
  • 值不允许修改
  • 块级作用域
//(1)声明必须赋初始值
//Missing initializer in const declaration
const a
​
//(2)不允许重复声明
const b = 2
//Identifier 'b' has already been declared
const b = 3//(3)值不允许修改
const c = 3
//Assignment to constant variable.
c = 5//(4)对于复杂类型的数据来说其内部的值可以更改,但是不能重新赋值
const ary = [1, 2]
ary[0] = "a"
ary[1] = "b"
//[ 'a', 'b' ]
console.log(ary);
//重新赋值,内存地址被改变了
//Assignment to constant variable.
ary = [10, 20]//(5)块级作用域
if (true) {
    const d = 6
}
//d is not defined
console.log(d);

2.3.let、const和var 的区别

  • 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
  • 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
  • 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值。
varletconst
函数级作用域块级作用域块级作用域
变量提升不存在变量提升不存在变量提升
值可更改值可更改值不可更改

2.4.解构赋值

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

(1)数组的解构赋值

let array = [1, 2, 3]
let [a, b, c] = array
//1
console.log(a);
//2
console.log(b);
//3
console.log(c);//如果解构不成功,变量的值为undefined。
let array = []
let [a, b] = array
//undefined
console.log(a);
//undefined
console.log(b);

(2)对象的解构赋值

示例1:

let person = {
    name: '小明',
    age: "23"
}
let {name,age} = person
//小明
console.log(name);
//23
console.log(age);

示例2:

let person = {
    name: '小明',
    age: "23"
}
//myName和myAge属于别名
let {
    name: myName,
    age: myAge,
    gender
} = person
//小明
console.log(myName);
//23
console.log(myAge);
如果解构不成功,变量的值为undefined。
//undefined
console.log(gender);

2.5.箭头函数

ES6 允许使用「箭头」(=>)定义函数。

示例:

let fn = (arg1, arg2, arg3) => {
    return arg1 + arg2 + arg3;
}

箭头函数的注意点:

(1)如果形参只有一个,则小括号可以省略

function fn(num) {
    return num
}let fn = num => {return num}
//3
console.log(fn(3));

(2)函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果

function sum(num1, num2) {
    return num1 + num2
}let sum = (num1, num2) => num1 + num2
let sumResult = sum(1, 2)
//3
console.log(sumResult);

(3)箭头函数 this 指向声明时所在作用域下 this 的值,指向的是函数定义位置的上下文this。

示例1:

let obj = {
    name: "小明"
}function fn() {
    console.log(this);
    //箭头函数的this指向的是函数定义位置的上下文this,fn()函数指向obj,故箭头函数的this也指向obj
    return () => {
        console.log(this);
    }
}
//使用call()使得this指向obj
//{ name: '小明' }
let resFn = fn.call(obj)
//{ name: '小明' }
resFn()

示例2:

let obj1 = {
    age: 20,
    //对象不具有作用域,所以箭头函数的this指向全局作用域window
    say: () => {
        console.log(this.age);
    }
}
//undefined
obj1.say()

(4)箭头函数不能作为构造函数实例化

(5)不能使用 arguments

2.6.reset参数(剩余参数)

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

ES6 引入 剩余参数,用于获取函数的实参,用来代替 arguments

示例1:

//作用与 arguments 类似
//rest参数必须是最后一个形参
function sum(first, ...args) {
    console.log(first);
    console.log(args);
}
//1 [ 2, 3 ]
sum(1, 2, 3)

示例2:

//剩余参数和解构配合使用
let person = ["张三", "李四", "王五"]
let [p1, ...p2] = person
//张三
console.log(p1);
//[ '李四', '王五' ]
console.log(p2);

2.7.spread 扩展运算符

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

示例1:

let arry = [1, 2, 3]
//1 2 3
console.log(...arry);

示例2:

//扩展运算符可以应用于合并数组。
//方法1
let arry1 = [1, 2, 3]
let arry2 = [4, 5, 6]
let arry3 = [...arry1, ...arry2]
//[ 1, 2, 3, 4, 5, 6 ]
console.log(arry3);//方法2
arry1.push(arry2)
//[ 1, 2, 3, 4, 5, 6 ]
console.log(...arry1);

2.8.模板字符串

模板字符串(template string)是增强版的字符串,用反引号(`)标识,特点:

  • 字符串中可以出现换行符
  • 可以使用 ${xxx} 形式输出变量

示例1:

//基础用法
let name = `小明`
//小明
console.log(name);

示例2:

//使用 ${xxx} 输出变量
let name = "小明"
let sayName = `你好,我叫${name}!`
//你好,我叫小明!
console.log(sayName);

示例3:

//模板字符串中可以换行
let obj = {
    name: "小明",
    age: "22"
}
let html = `
<div>
     <span>${obj.name}</span>
     <span>${obj.age}</span>
</div>
`
/* <div>
     <span>小明</span>
     <span>22</span>
</div> */
console.log(html);

示例4:

//在模板字符串中可以调用函数
let sayHello = function () {
    return "hello"
}
let say = `${sayHello()}`
//hello
console.log(say);

2.9.简化对象写法

ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。

示例:

let name = "小明"
let age = 22
let sayHello = function () {
    console.log("hello");
}
// 属性和方法的简写
let obj = {
    name,
    age,
    sayHello
}
// 小明
console.log(obj.name);
// 22
console.log(obj.age);
// hello
obj.sayHello();

2.10.Set数据结构

ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的,集合实现了 iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历,集合的属性和方法:

属性和方法说明
size返回集合的元素个数
add增加一个新元素,返回当前集合
delete删除元素,返回 boolean 值
has检测集合中是否包含某个元素,返回 boolean 值
clear清空集合,返回 undefined

示例1:

let s = new Set([1, 2, 3, 4, 5, 1, 2, 3])
//Set(5) { 1, 2, 3, 4, 5 }
console.log(s);
// 1 2 3 4 5
console.log(...s);//添加元素
s.add(1).add(6).add(7);
// 1 2 3 4 5 6 7
console.log(...s);// 删除元素
s.delete(7)
// 1 2 3 4 5 6
console.log(...s);//判断是否存在某值
let isExist = s.has(6)
// true
console.log(isExist);// 清除所有值
s.clear()
//Set(0) {}
console.log(s);

示例2:

// 遍历Set结构
let s = new Set([1, 2, 3, 4, 5, 1, 2, 3])
//1 2 3 4 5 
s.forEach((value) => console.log(value))

2.11.Map数据结构

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map 也实现了iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属性和方法:

属性和方法说明
size返回 Map 的元素个数
set增加一个新元素,返回当前 Map
get返回键名对象的键值
hashas 检测 Map 中是否包含某个元素,返回 boolean 值
clearclear 清空集合,返回 undefined

示例:

let m = new Map([
    ["name", "小明"]
])// 获取映射元素的个数
//1
console.log(m.size);// 添加映射值
//Map(2) { 'name' => '小明', 'age' => 22 }
console.log(m.set('age', 22));// 获取映射值
//22
console.log(m.get('age'));// 检测是否有该映射
//true
console.log(m.has('age'));// 清除
//undefined
console.log(m.clear());

3.ES6的新增方法

3.1.数组的新增方法

(1)Array.from()方法

Array.from()方法能将将类数组或可遍历对象转换为真正的数组

示例1:

let arrayLike = {
    "0": "1",
    "1": "2",
    "2": "3",
    length: 3
}
let arr = Array.from(arrayLike);
//[ '1', '2', '3' ]
console.log(arr);

方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

示例2:

let arrayLike = {
    "0": "1",
    "1": "2",
    "2": "3",
    length: 3
}
let arr2 = Array.from(arrayLike, item => item * 2);
//[ 2, 4, 6 ]
console.log(arr2);

(2)Array.of()方法

用于把一组值变成数组

示例:

let arr3 = Array.of(1, 2, 3)
//[ 1, 2, 3 ]
console.log(arr3);

(3)find()方法

用于找出第一个符合条件的数组成员,如果没有找到返回undefined

let ary = [{
    id: 1,
    name: "zhangsan"
}, {
    id: 2,
    name: "lisi"
}]let target = ary.find(item => item.id === 2)
//{ id: 2, name: 'lisi' }
console.log(target);

(4)findIndex()方法

用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1

let ary2 = [1, 2, 3]
let index = ary2.findIndex(item => item > 1)
//1
console.log(index);

(5)includes()方法

//true
console.log([1, 2, 3].includes(1));
//false
console.log([1, 2, 3].includes(0));

3.2.对象的新增方法

(1)Object.is()

它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。

//true
console.log(Object.is("1", "1"));
//false
console.log(Object.is({}, {}));

3.3.字符串的新增方法

(1)startsWith() 和 endsWith()方法

  • lstartsWith():表示参数字符串是否在原字符串的头部,返回布尔值
  • lendsWith():表示参数字符串是否在原字符串的尾部,返回布尔值
let str = "Hello world!"
//true
console.log(str.startsWith("Hello"));
//true
console.log(str.endsWith("!"));

(2)repeat()方法

repeat方法表示将原字符串重复n次,返回一个新字符串。

// hello hello hello 
console.log("hello ".repeat(3));
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值