【ES6】基础特性总结

概述

仅个人使用,复习ES6的笔记,比较粗糙,仅适用于浏览器端。

数据类型

ES6(ECMAScript 2015)引入了一些新的数据类型和对现有数据类型的扩展。以下是ES6中数据类型的一个简要总结表格:

数据类型 描述
Number 包括整数和浮点数,新增了Number.isInteger()等方法。
String 字符串类型,新增了模板字符串、字符串遍历器等特性。
Boolean 布尔类型,没有新增。
Undefined 表示变量已声明但未初始化,没有新增。
Null 只有一个值null,表示空值,没有新增。
Symbol 新增的原始数据类型,用于创建唯一的不可变标识符。
Object 包括普通对象和特殊对象(如Array、Function等),新增了Object.assign()等方法。
Array 数组对象,新增了Array.from()Array.of()等静态方法。
Function 函数对象,没有新增。
Map 存储键值对的集合,键和值可以是任意值,支持迭代。
Set 存储唯一值的集合,支持迭代。
WeakMap 存储键值对的集合,键必须是对象,且垃圾回收机制可以忽略其值。
WeakSet 存储唯一对象的集合,垃圾回收机制可以忽略其值。
Promise 用于异步计算的对象,允许你为异步操作写同步代码。
Generator 函数*(星号)表示的函数,可以创建迭代器。
ArrayBuffer 二进制数据缓冲区,用于操作二进制数据。
TypedArray 基于ArrayBuffer的视图,包括Int8ArrayUint8Array等类型。

这个表格简要概述了ES6中的数据类型及其特点。ES6的引入极大地丰富了JavaScript的数据类型和功能,使得编程更加灵活和强大。

变量和常量申明

javascript 复制代码
console.log(x);  //ReferenceError: Cannot access 'x' before initialization
console.log(PI); 

let x = 10;      // 申明变量
const PI = 3.14; // 申明常量
  • letconst都不存在变量提升,也不会像var申明的变量变成全局变量或挂载到顶层对象window上。

解构赋值

变量解构赋值

javascript 复制代码
let x = 10;
let y = 10;
let z = 10;

可以使用类似数组的形式,批量申明和赋值:

javascript 复制代码
let [x,y,z] = [10,20,30]; 
console.log(x,y,z);  // 10 20 30

对象的解构赋值

javascript 复制代码
let {name,sex,age} = {age:12,sex:"man", name:"张三"};

console.log(sex)
  • 和数组形式一样,let {} = {}并不是创建了一个对象,而是以对象的形式批量声明变量;
  • let {name,sex,age},定义了变量名称,{age:12,sex:"man", name:"张三"}则指定对应名称的变量的值
  • 可以看到,相比数组形式的解构赋值,对象形式对赋值时的变量位置没有要求,只需要名称对应上即可。

函数参数解构赋值

首先是数组形式:

javascript 复制代码
function sum([x,y,z]){
    return x + y + z;
}

console.log(sum([10,20,30])); // 60

然后是对象形式:

javascript 复制代码
function msg({name,sex,age}){
    return `你好,${name},你的性别是${sex},年龄是${age},对吗?`;
}


console.log(msg({sex:"男",age:12,name:"张三"})); //你好,张三,你的性别是男,年龄是12,对吗?

箭头函数

箭头函数可以理解为普通函数形式的简写形式。

javascript 复制代码
let f = function(p){
    return p;
}

可以简写为:

javascript 复制代码
let f = p => p;

其中:

  • =>之前的p是传入的参数,之后的p是返回的值;

再比如:

javascript 复制代码
let f = p => p * p;
console.log(f(12)); // 144

就变成了f(p) = p * p的效果。

再比如:

javascript 复制代码
let sum = (a,b) => a+b;
console.log(sum(12,14)); // 26

可以看到两个参数,使用了括号和参数列表形式。

没有参数时,则必须写上()

javascript 复制代码
let say_hello = () => "hello!";

console.log(say_hello()); // hello!

当函数比较复杂时,可以用{}和多行函数体形式:

javascript 复制代码
let max = (a,b) => {
    if(a>b){
        return a;
    }else{
        return b;
    }
};

console.log(max(12,34));  // 34
console.log(max(120,34)); // 120

rest参数和扩展运算符

  • ...名称叫做rest参数,可以用于函数的不定项参数
  • ...[数组],此处的...叫做扩展运算符,可以将数组变为逗号分隔的多项形式
javascript 复制代码
function sum(...nums){
    let n = 0;
    for (let num of nums){
        n += num;
    }
    return n;
}


console.log(sum(5,6,7,12,35)); // 65
  • ...之后跟变量名,并且用于函数参数,则是rest参数
javascript 复制代码
console.log(...[12,14,16]); // 12 14 16
  • ...之后跟的是数组,则就是扩展运算符,其将数组元素拆分为单独的三个元素

Symbol

Symbol代表唯一值。

javascript 复制代码
let s = Symbol('abc');

console.log(s); // Symbol(abc)
console.log(typeof s); // symbol
  • Symbol不是构造函数,不能使用new关键字,否则会有如下异常:
javascript 复制代码
TypeError:Symbol is not a constructor
  • Symbol括号中内容代表Symbol描述,只是为了方便开发中辨识,并不是Symbol的值

Set和Map

  • Map是字典,用于保存键值对
javascript 复制代码
let m = new Map();

m.set("name","张三");

console.log(m.get("name")); // 张三

以下是ES6中Map对象的常见属性和方法的总结表格:

属性/方法名称 描述
Map.prototype.constructor 创建实例对象的构造函数,对于Map实例,初始值为Map构造函数。
Map.prototype.size 返回Map对象中的键值对数量。
Map.prototype[Symbol.toStringTag] 返回字符串"Map",用于Object.prototype.toString()方法。
方法名称 描述
Map.prototype.clear() 移除Map对象中所有的键值对。
Map.prototype.delete(key) 移除Map对象中指定的键值对,如果键值对存在并成功被移除,返回true,否则返回false
Map.prototype.entries() 返回一个新的迭代器对象,包含Map对象中所有键值对[key, value]二元数组,以插入顺序排列。
Map.prototype.forEach(callbackFn, thisArg) 以插入顺序为Map对象中的每个键值对调用一次callbackFn。如果提供了thisArg参数,则它将作为每一次回调的this值。
Map.prototype.get(key) 返回与指定的键key关联的值,若不存在关联的值,则返回undefined
Map.prototype.has(key) 返回一个布尔值,用来表明Map对象中是否存在与指定的键key关联的值。
Map.prototype.keys() 返回一个新的迭代器对象,包含Map对象中所有元素的键,以插入顺序排列。
Map.prototype.set(key, value) Map对象中设置与指定的键key关联的值,并返回Map对象。
Map.prototype.values() 返回一个新的迭代器对象,包含Map对象中所有的值,并以插入Map对象的顺序排列。
Map.prototype[Symbol.iterator]() 返回一个新的迭代器对象,包含Map对象中所有元素[key, value]二元数组,以插入顺序排列。

这些是Map对象在ES6中的一些常见属性和方法,它们提供了对键值对集合的高效操作。

  • Set是集合,类似于去重数组

以下是ES6中Set对象的常见属性和方法的总结表格:

属性/方法名称 描述
Set.prototype.constructor 创建实例对象的构造函数,对于Set实例,初始值为Set构造函数。
Set.prototype.size 返回Set对象中的元素数量。
Set.prototype[Symbol.toStringTag] 返回字符串"Set",用于Object.prototype.toString()方法。
方法名称 描述
Set.prototype.add(value) Set对象中添加一个新的元素。
Set.prototype.clear() 移除Set对象中的所有元素。
Set.prototype.delete(value) 移除Set对象中的指定元素,如果元素存在并成功被移除,返回true,否则返回false
Set.prototype.entries() 返回一个新的迭代器对象,包含Set对象中每个元素的[value, value]二元数组,以插入顺序排列。
Set.prototype.forEach(callbackFn, thisArg) 以插入顺序为Set对象中的每个元素调用一次callbackFn。如果提供了thisArg参数,则它将作为每一次回调的this值。
Set.prototype.has(value) 返回一个布尔值,用来表明Set对象中是否包含指定的值。
Set.prototype.keys() 返回一个新的迭代器对象,包含Set对象中所有元素的键,以插入顺序排列。由于Set只有键,所以keys()方法返回的迭代器和values()方法相同。
Set.prototype.values() 返回一个新的迭代器对象,包含Set对象中所有的值,并以插入Set对象的顺序排列。
Set.prototype[Symbol.iterator]() 返回一个新的迭代器对象,包含Set对象中所有元素[value, value]二元数组,以插入顺序排列。

这些是Set对象在ES6中的一些常见属性和方法,它们提供了对唯一值集合的高效操作。

proxy和Reflect

相关推荐
代码小学僧2 分钟前
团队协作必备!pnpm 版本管理与 corepack 使用指南
前端·node.js·团队管理
一天睡25小时2 分钟前
前端工程化&&Webpack 和 Vite 的区别
前端·前端框架
gxn_mmf2 分钟前
页面需要重加载才能显示的问题修改
前端·bug
北京_宏哥3 分钟前
🔥Jmeter(二十五) - 从入门到精通 - JMeter函数 - 下篇(详解教程)
前端·jmeter·面试
天生我材必有用_吴用5 分钟前
鸿蒙开发入门到进阶:从布局基础到组件实战
前端·harmonyos·arkts
zhangxiao6 分钟前
自定义指令 - 去除所有空格和换行
前端
三思而后行,慎承诺6 分钟前
详解React Fiber架构中,reconcile阶段的具体工作流程
javascript·react.js·ecmascript
前端太佬7 分钟前
微信公众号网页登录:前端视角下的技术实现精要
前端·javascript·微信
Ryan今天学习了吗8 分钟前
如何在浏览器中渲染100万个元素,并且保证页面不卡顿?超详细底层原理图文分享
前端