js es5和es6有哪些常用的api

2024-09-06 18:36
文章标签 js api 常用 frontend es6 es5

本文主要是介绍js es5和es6有哪些常用的api,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

ES5 和 ES6(ES2015)是 JavaScript 语言发展的两个重要版本。ES5 已经广泛支持,并成为 Web 开发的标准,而 ES6 引入了许多新特性,极大地增强了语言的表达能力和开发效率。

ES5 常用 API

1. 数组方法

ES5 引入了许多新的数组方法,使得操作数组变得更加方便:

  • Array.prototype.forEach(callback[, thisArg])

    • 对数组中的每个元素执行一个提供的函数。
    [1, 2, 3].forEach(function(item) {console.log(item);
    });
    
  • Array.prototype.map(callback[, thisArg])

    • 创建一个新数组,其结果是该数组中的每个元素调用一个提供的函数后的结果。
    const numbers = [1, 2, 3];
    const doubled = numbers.map(function(x) { return x * 2; });
    
  • Array.prototype.filter(callback[, thisArg])

    • 创建一个新数组,其包含通过所提供函数实现的测试的所有元素。
    const evenNumbers = [1, 2, 3, 4, 5].filter(function(x) { return x % 2 === 0; });
    
  • Array.prototype.reduce(callback[, initialValue])

    • 对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
    const sum = [1, 2, 3].reduce(function(acc, curr) { return acc + curr; }, 0);
    
  • Array.prototype.some(callback[, thisArg])

    • 检查数组中是否有元素通过了被提供的函数测试。
    const hasEven = [1, 3, 5].some(function(x) { return x % 2 === 0; });
    
  • Array.prototype.every(callback[, thisArg])

    • 检查数组中的所有元素是否都通过了被提供的函数测试。
    const allEven = [2, 4, 6].every(function(x) { return x % 2 === 0; });
    
  • Array.prototype.indexOf(searchElement[, fromIndex])

    • 返回数组中第一个找到的元素的索引;如果没有找到,则返回-1。
    const index = [1, 2, 3].indexOf(2);
    
  • Array.prototype.lastIndexOf(searchElement[, fromIndex])

    • 从数组的末尾向前查找,返回数组中最后一个找到的元素的索引;如果没有找到,则返回-1。
    const lastIndex = [1, 2, 3, 2, 1].lastIndexOf(2);
    
2. 对象方法
  • Object.create(proto[, propertiesObject])

    • 创建一个新对象,使用提供的原型对象和可选的属性描述符对象。
    const proto = { a: 1 };
    const obj = Object.create(proto);
    
  • Object.defineProperty(obj, prop, descriptor)

    • 直接在一个对象上定义一个新属性或修改现有属性,并返回该对象。
    const obj = {};
    Object.defineProperty(obj, 'x', { value: 10, writable: true });
    
  • Object.keys(obj)

    • 返回一个由一个给定对象的所有自身可枚举属性组成的数组。
    const keys = Object.keys({ a: 1, b: 2 });
    
  • Object.values(obj)

    • 返回一个由对象的自身可枚举属性值组成的数组。
    const values = Object.values({ a: 1, b: 2 });
    
  • Object.entries(obj)

    • 返回一个由一个给定对象自身可枚举属性 [key, value] 对组成的数组。
    const entries = Object.entries({ a: 1, b: 2 });
    
3. 函数方法
  • Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])
    • 创建一个新函数,当调用时,它的 this 值被固定为提供的值,同时传入给定的参数。
    const func = function() { console.log(this); };
    const boundFunc = func.bind({ a: 1 });
    boundFunc();
    

ES6 (ES2015) 新增的常用 API

1. 块级作用域变量
  • let

    • 声明一个块级作用域的局部变量。
    let x = 10;
    
  • const

    • 声明一个只读的常量。
    const PI = 3.14;
    
2. 箭头函数
  • =>
    • 箭头函数提供了更简洁的函数语法,并且 this 的值在编译时就被确定下来。
    const add = (a, b) => a + b;
    
3. 模板字符串
  • ``
    • 使用反引号 ` 可以创建多行字符串,并且可以嵌入变量。
    const name = "Alice";
    console.log(`${name} says hello!`);
    
4. 解构赋值
  • ``
    • 允许按照一定模式,从数组和对象中提取值,对变量进行赋值。
    const [a, b] = [1, 2];
    const { x, y } = { x: 1, y: 2 };
    
5.
  • class
    • 提供了一种更加面向对象的方式来定义类。
    class Person {constructor(name, age) {this.name = name;this.age = age;}greet() {console.log(`Hello, my name is ${this.name}.`);}
    }
    const alice = new Person("Alice", 30);
    alice.greet();
    
6. 模块
  • importexport
    • 提供了一种标准的方式来导入和导出模块。
    // moduleA.js
    export const message = "Hello from module A";// main.js
    import { message } from './moduleA';
    console.log(message);
    
7. Map 和 Set
  • Map

    • 一种新的键值对集合,键可以是任意类型。
    const map = new Map();
    map.set('key', 'value');
    
  • Set

    • 一种新的集合类型,成员的值都是唯一的。
    const set = new Set();
    set.add(1).add(2).add(3);
    
8. WeakMap 和 WeakSet
  • WeakMap

    • 键是弱引用的对象,当键不再被外部持有时会被自动回收。
    const weakMap = new WeakMap();
    const obj = {};
    weakMap.set(obj, 'value');
    
  • WeakSet

    • 键是弱引用的对象,当键不再被外部持有时会被自动回收。
    const weakSet = new WeakSet();
    const obj = {};
    weakSet.add(obj);
    
9. Promise
  • Promise
    • 一种异步编程解决方案,提供了一种更加优雅的方式来处理异步操作。
    const promise = new Promise((resolve, reject) => {setTimeout(() => resolve('Done!'), 1000);
    });promise.then(result => console.log(result));
    

总结

ES5 和 ES6 分别代表了 JavaScript 发展的两个重要阶段。ES5 主要增加了对数组和对象操作的支持,而 ES6 引入了更多的语言特性,如类、模块、箭头函数等,极大地提升了 JavaScript 的开发体验。了解这些 API 的使用方法,可以帮助开发者更高效地进行 Web 开发。

这篇关于js es5和es6有哪些常用的api的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1142800

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

常用的jdk下载地址

jdk下载地址 安装方式可以看之前的博客: mac安装jdk oracle 版本:https://www.oracle.com/java/technologies/downloads/ Eclipse Temurin版本:https://adoptium.net/zh-CN/temurin/releases/ 阿里版本: github:https://github.com/

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

30常用 Maven 命令

Maven 是一个强大的项目管理和构建工具,它广泛用于 Java 项目的依赖管理、构建流程和插件集成。Maven 的命令行工具提供了大量的命令来帮助开发人员管理项目的生命周期、依赖和插件。以下是 常用 Maven 命令的使用场景及其详细解释。 1. mvn clean 使用场景:清理项目的生成目录,通常用于删除项目中自动生成的文件(如 target/ 目录)。共性规律:清理操作