首页 > 其他分享 >浅谈ES5与ES6

浅谈ES5与ES6

时间：2024-09-12 20:23:12浏览次数：10  
标签：myFunction ES6 ES5 const 浅谈 value var Array log

 ES5

什么是ES5？

ES5即ECMAScript 5，又称ECMAScript 2009，是ECMAScript的第五次修订，可以说是JavaScript比较重要的版本，于2009年正式发布。

ES5的主要特性

严格模式

"use strict" 定义 JavaScript 代码应该以 "严格模式" 执行。

在严格模式下，我们所编写的代码会受到一定的规则约束，帮助我们编写更加清晰、更加符合规范的代码。

比如，在严格模式，不能使用未声明的变量。

此外，"use strict" 只是一个字符串表达式。旧浏览器如果不理解它们就不会抛出错误

"use strict";
n = 6;  // 报错：未声明的变量

数组方法 

在ES5中，新增了一些数组方法，这使得我们能更加方便地操作数组。

新增的数组方法有：Array.isArray()、Array.forEach()、Array.map()、Array.filter()、Array.reduce()、Array.reduceRight()、Array.every()、Array.some()、Array.indexOf()、Array.lastIndexOf()。

Array.isArray()

检查对象是否为数组

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  consloe.log(Array.isArray(fruits)) // true
}

Array.forEach()

为每个数组元素调用一次函数

var txt = 0;
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
console.log(txt); // 99

function myFunction(value) {
  txt = txt + value; 
}

Array.map()

将数组中的每个元素进行处理，将其转换为另一个值，最终返回一个新数组，该数组包含了经过处理后的每个元素

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
console.log(numbers2); // [90, 8, 18, 32, 50]

function myFunction(value) {
  return value * 2;
}

Array.filter()

筛选出数组中符合条件的元素，并返回出一个新数组

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
console.log(over18); // [45, 25]

function myFunction(value) {
  return value > 18;
}

Array.reduce()

可以确定数组总和

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
console.log(sum); // 99

function myFunction(total, value) {
  return total + value;
}

Array.reduceRight()

对数组的两个值(从右到左)计算的一个函数

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
console.log(sum); // 99

function myFunction(total, value) {
  return total + value;
}

Array.every()

对数组中所有元素都进行判定，是否都满足判定条件，返回一个布尔值

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
console.log(allOver18); // false

function myFunction(value) {
  return value > 18;
}

Array.some()

对数组中元素进行判定，是否存在满足判定条件的元素，返回一个布尔值

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
console.log(someOver18); // true

function myFunction(value) {
  return value > 18;
}

Array.indexOf()

检索数组中的某个元素值并返回其位置

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
console.log(a); // 2

Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾处开始检索。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
console.log(a); // 2

 JSON支持

原生支持 JSON 格式的解析和字符串化。

JSON.parse()

将字符串转换为js对象

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');
console.log(obj.name + ',' + obj.age); // Bill,62

JSON.stringify()

将js对象转换为字符串

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
console.log(myJSON); // {"name":"Bill", "age":62, "city":"Seatle"}

Object方法 

新增的对象方法增强了对象的操作能力。

// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)

// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)

// 访问属性
Object.getOwnPropertyDescriptor(object, property)

// 将所有属性作为数组返回
Object.getOwnPropertyNames(object)

// 将可枚举属性作为数组返回
Object.keys(object)

// 访问原型
Object.getPrototypeOf(object)

// 防止向对象添加属性
Object.preventExtensions(object)

// 如果可以将属性添加到对象，则返回 true
Object.isExtensible(object)

// 防止更改对象属性（而不是值）
Object.seal(object)

// 如果对象被密封，则返回 true
Object.isSealed(object)

// 防止对对象进行任何更改
Object.freeze(object)

// 如果对象被冻结，则返回 true
Object.isFrozen(object)

 getter 和 setter

可以在对象中定义属性的访问器。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};

// 使用 setter 设置对象属性：
person.lang = "en";

// 使用 getter 显示来自对象的数据：
console.log(person.lang);

ES6 

什么是ES6？

ES6 也称为 ECMAScript 6 和 ECMAScript 2015。

一些人把它称作 JavaScript 6。发行于2015年，也是JavaScript比较重要的一个版本。

ES6的特性

块级作用域 

JavaScript let

let 语句允许我们使用块作用域声明变量。

JavaScript const

const 语句允许您声明常量（具有常量值的 JavaScript 变量）。

常量类似于 let 变量，但不能更改值。

箭头函数 

更简洁的函数表达式，不绑定 this。

const add = (a, b) => a + b;  
console.log(add(2, 3)); // 5  

const obj = {  
    value: 10,  
    getValue: function() {  
        return () => this.value; // this 指向 obj  
    }  
};  
const getValue = obj.getValue();  
console.log(getValue()); // 10

 模板字符串

使用反引号定义字符串，支持多行和嵌入表达式。

const name = "Alice";  
const greeting = `Hello, ${name}!`; // "Hello, Alice!"  
const multiLine = `This is a string  
that spans multiple lines.`;

Class类 

引入基于类的面向对象编程。

class Animal {  
    constructor(name) {  
        this.name = name;  
    }  
    speak() {  
        console.log(`${this.name} makes a noise.`);  
    }  
}  
const dog = new Animal("Dog");  
dog.speak(); // "Dog makes a noise."

模块化 

支持模块的导入与导出。

// module.js  
export const pi = 3.14;  
export function add(x, y) {  
    return x + y;  
}  

// main.js  
import { pi, add } from './module.js';  
console.log(pi); // 3.14  
console.log(add(2, 3)); // 5

Promise

用于处理异步操作 。

const fetchData = () => {  
    return new Promise((resolve, reject) => {  
        setTimeout(() => {  
            resolve("Data received");  
        }, 1000);  
    });  
};  

fetchData().then(data => console.log(data)); // "Data received"

解构赋值

 从数组或对象中提取值并赋给变量。

const arr = [1, 2, 3];  
const [a, b] = arr; // a = 1, b = 2  

const obj = { x: 1, y: 2 };  
const { x, y } = obj; // x = 1, y = 2

扩展运算符

 使用 ... 语法展开数组或对象。

const arr1 = [1, 2, 3];  
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]  

const obj1 = { a: 1 };  
const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }

Symbol  唯一命名 

Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。

var obj1 = Symbol("obj");
var obj2 = Symbol("obj");
obj1 == obj2 //false

 指数运算符

取幂运算符（**）将第一个操作数提升到第二个操作数的幂。

const x = 5;
const z = x ** 2;          // 结果是 25

x ** y 的结果与 Math.pow(x,y) 相同

 默认参数值

允许设置函数默认值

function myFunction(x, y = 10) {
  // y是10如果y没有传值
  return x + y;
}
myFunction(5); // 将返回 15

Array新方法 

Array.find()

该方法返回通过测试函数的第一个数组元素的值。

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
console.log(first); // 25

function myFunction(value, index, array) {
  return value > 18;
}

Array.findIndex()

该方法返回通过测试函数的第一个数组元素的索引。

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
console.log(first); // 3

function myFunction(value, index, array) {
  return value > 18;
}

ES5和ES6的区别 

变量声明

  • ES5：使用 var 声明变量，存在变量提升（hoisting）和全局作用域的问题。

  • ES6：引入 let 和 const，支持块级作用域，避免了变量提升的问题。

函数表达式

  • ES5：使用传统方法处理对象和数组。

  • ES6：引入解构赋值和扩展运算符，简化了对象和数组的操作。

字符串处理

  • ES5：使用普通字符串，无法直接嵌入表达式。

  • ES6：引入模板字符串，使用反引号 " ` " 支持多行和嵌入表达式。

对象和数组操作

  • ES5：使用传统方法处理对象和数组。

  • ES6：引入解构赋值和扩展运算符，简化了对象和数组的操作。

类和继承

  • ES5：使用构造函数和原型链实现面向对象编程。

  • ES6：引入 class 关键字，支持更简洁的类定义和继承。

模块化

  • ES5：没有原生模块化支持，通常使用 IIFE（立即调用函数表达式）或其他库（如 CommonJS）。

  • ES6：原生支持模块化，使用 import 和 export 。

异步编程

  • ES5：使用回调函数处理异步操作。

  • ES6：引入 Promise 对象，简化异步编程。

 如果这篇文章对你有所帮助，还希望能够点点关注点点赞还有收藏！

标签：myFunction,ES6,ES5,const,浅谈,value,var,Array,log
From： https://blog.csdn.net/qq_45464944/article/details/142103142

相关文章

  • 浅谈 C# 中的顶级语句
    前言在C#9版本中引入了一项新特性：顶级语句，这一特性允许在不显式定义Main方法的情况下直接编写代码。传统的写法namespaceTestStatements{internalclassProgram{staticvoidMain(string[]args){foreach(vararginargs)......
  • 浅谈 C# 中的顶级语句
    前言在C#9版本中引入了一项新特性：顶级语句，这一特性允许在不显式定义Main方法的情况下直接编写代码。传统的写法namespace TestStatements{    internal class Program    {        static void Main(string[] args)        {       ......
  • 深入探索从ES6到ES2023
    从ES6到ES2023，我们深入探索ECMAScript（简称ES）的演变与发展，了解这一JavaScript标准背后的技术革新和进步。ECMAScript作为JavaScript的标准化版本，每年都在不断推出新版本，为开发者带来更加丰富和强大的功能。本文将从ES6的引入开始，逐步介绍到最新的ES2023，同时探讨这些新特性对......
  • 浅谈为什么数据库要用B树
    朋友，你有没有遇到过这样的情况？明明数据库里存的东西还不算太多，可一查数据，页面加载慢得像蜗牛？别急，问题可能出在你的数据库索引上。而今天我要跟你聊的，就是在数据库里被广泛应用的B树（B-Trees），它可是提升数据库性能的秘密武器。听起来有点深奥？别担心，我会用最简单的方式，帮你把这个复......
  • 浅谈PCB中的EMC设计规则的理解
    一：两个概念 EMI：电磁干扰  电磁干扰可划分为传导性干扰和辐射性干扰。传导性干扰指的是干扰源通过导线等可导电介质将干扰信号从一个系统传导到另一个系统。辐射性干扰指的是干扰源在空间上将干扰信号从一个电路系统传导到另一个电路系统。 EMC：电磁兼容性  电磁......
  • 浅谈高维前缀和
    之前做了一道高维前缀和题做着做着忘掉怎么写了，遂记一发。你说的对，但是我谈的真的很浅。铺垫回忆一下我们求前缀和是怎么求的。一维前缀和：for(inti=1;i<=n;i++){ s[i]=s[i-1]+a[i];}没有任何问题对吧。而求二维前缀和时，我们通常会使用如下方法求前缀和（如果不是当我没说......
  • 浅谈人工智能之Python调用AutoGen Studio SDK
    浅谈人工智能之Python调用AutoGenStudioSDK引言在之前的文档中我们讲解了如何搭建AutoGenStudio环境以及基于AutoGenStudio构建AIAgent并且进行执行。今天我们介绍如何通过Python调用AutoGenStudio提供的SDK来运行workflow，即AIAgent。实例说明第一步：我们使用命......
  • 安全运营之浅谈SIEM告警疲劳
    闲谈：     刚开始学习SIEM、态势感知这类产品的时，翻阅老外们的文章总是谈什么真阳性，假阳性告警、告警疲劳，当时在国内资料中没找到很合理的解释，慢慢就淡忘这件事了。随着慢慢深入工作，感觉大概理解了这些概念并且有了一些新的领悟。心血来潮写了这篇文章，想给刚接触SIEM......
  • ES6新增功能
    ES6（ECMAScript2015）作为JavaScript语言的一个重大更新，新增了许多功能，极大地提高了JavaScript的编程效率和代码的可读性。以下是ES6新增的主要功能：1.新增的变量声明方式let和const：这两个关键字用于声明变量，它们都具有块级作用域，与var的函数作用域不同。let声明的变量可以重新......
  • 【转】数据模型——从D模型到C/C'模型的浅谈
    数据模型——从D模型到C/C'模型的浅谈原文链接：https://zhuanlan.zhihu.com/p/521380989DSColloquium在DA和ML中寻找life的wisdom（真香~）​关注 15人赞同了该文章一、引言在日常企业运营和发展过程中，总会遇到这么一个情景：已有的业务系统的设计与实施......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99