【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

相关推荐
小小坤3 分钟前
前端基于AI生成H5 vue3 UI组件
前端·javascript·vue.js
既见君子18 分钟前
透明视频
前端
竹等寒21 分钟前
Go红队开发—web网络编程
开发语言·前端·网络·安全·web安全·golang
lhhbk25 分钟前
angular中下载接口返回文件
前端·javascript·angular·angular.js
界面开发小八哥27 分钟前
数据可视化图表库LightningChart JS 全新发布v7.0——提高视觉质量
开发语言·javascript·信息可视化·图表·lightningchart
YUELEI11830 分钟前
Vue使用ScreenFull插件实现全屏切换
前端·javascript·vue.js
问道飞鱼1 小时前
【技术方案设计】H5埋点方案设计以及实现(入门版)
开发语言·javascript·h5·事件·埋点
我自纵横20231 小时前
第一章:欢迎来到 HTML 星球!
前端·html
发财哥fdy1 小时前
3.12-2 html
前端·html
ziyu_jia1 小时前
React 组件测试【React Testing Library】
前端·react.js·前端框架