浅谈ES5与ES6

最新推荐文章于 2024-09-12 16:43:23 发布
最新推荐文章于 2024-09-12 16:43:23 发布
阅读量919 收藏 16
点赞数 24
分类专栏： 前端面试篇 文章标签： es6 前端 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45464944/article/details/142103142
版权

 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 对象，简化异步编程。

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

南辞w
关注
  • 24
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
墨鱼菜鸡
07-11 4485
Node.js 的基础教学 之 exports 和 module.exports：https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript、ES5、ES6：https://www.cnblogs.com/lovesong/p/4908871.html 1、为什么有模块概念 理想情况下，开发者只需要实现核...
浅谈 es5 与es6 对象构造和继承
杰克拉乌的博客
08-12 295
//es5 和es6 创建对象得区别         function User(name,age){             this.name = name;             this.age = age;         }                  class User{             constructor(name,age){                 ...
浅谈es5和es6中的继承
陈强的博客
04-15 77
首先给大家介绍下在es5中构造函数的继承 1 function A(){ 2 2 //构造函数A 3 3 this.name="我是A函数"; 4 4 } 5 5 6 6 A.prototype={ 7 7 construct...
浅谈ES5/ES6
weixin_33853827的博客
05-22 102
ES概念解释： 　　ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。 ECMA-262规范定义了ECMAScript支持的一套关键字，这些关键字标识了ECMAScript语句的开头和/或结尾。根据规定，关键字是保留的，不能用作变...
浅谈ES5和ES6继承和区别
weixin_30699463的博客
07-10 120
最近想在重新学下ES6，所以就把自己学到的，记录下加强下自己的理解 首先先简单的聊下ES5和ES6中的继承 1.在es5中的继承： function parent(a,b){ this a = a; this b = b; } function child(c){ this c = c }; 　　通过子集去继承父级： parent.call...
浅谈JavaScript、ES5、ES6
c123m的专栏
04-29 128
什么是JavaScript JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。（好吧，概念什么最讨厌了） 动态： 在运行时确定数据类型。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型。 弱类： 计算时可以不同类型之间对使用者透明地隐式转换，即使类型不正确，也能通过隐式转换来得到正确的类型。 原型： 新对象继承对象（作...
浅谈 JavaScript、ECMAScript （ES5、ES6）是什么、相互关系
愿我如星君如月 ... 夜夜流光相皎洁 ...
01-11 2931
一、ECMAScript 和 JavaScript 的关系 ES6 === ECMAScript6 从百度百科的资料上来看： ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript 或 JScript，但实际上后两者是 ECMA-262 标准的实现和扩展。 ECMAScript 和 JavaScri...
JS高频面试题整理(包含ES5，ES6)
铁锤妹妹的博客
12-03 2981
同步：同步方法表明调用一旦开始，调用者必须等待方法执行完成，才能继续执行后续方法。 JavaScript的同步：如果在函数返回结果的时候，调用者能够拿到预期的结果(就是函数计算的结果)，那么这个函数就是同步的. 异步：方法一旦开始，立即返回，调用者无需等待其中方法执行完成，就可以继续执行后续方法。 JavaScript的异步：如果在函数返回的时候，调用者还不能购得到预期结果，而是将来通过一定的手段得到（例如回调函数），这就是异步（例如ajax操作）。...
【转】浅谈JavaScript、ES5、ES6
weixin_33853827的博客
10-15 116
什么是JavaScript JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。（好吧，概念什么最讨厌了） 动态： 在运行时确定数据类型。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型。 弱类： 计算时可以不同类型之间对使用者透明地隐式转换，即使类型不正确，也能通过隐式转换来得到正确的类型。 原型： 新对象继承对象（作...
浅谈ES6新增的数组方法和对象
01-19
es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map let arr=[1,2,3,4,3,2,1,2]; 遍历数组最简洁直接的方法 for (let value of arr) { console.log(value);//输出1,2,3,4,3,2,1,2 } 1. ...
浅谈ECMAScript6新特性之let、const
08-29
`let` 是ES6中用于声明变量的新关键字，它解决了在ES5中`var`存在的问题。`let`声明的变量具有块级作用域，这意味着变量的作用范围限制在它们被声明的代码块内，而不是整个函数或全局作用域。例如： ```javascript ...
浅谈浏览器的兼容性(必看篇)
01-19
我就说说自己的看法啊，不对的请指正。 浏览器就是2大派系，一个是其他浏览器，一个是IE（这...4.对于ES5和ES6的支持程度不一样。 5.html5的标签。 6.css3的媒体查询 对应解决方法： 1.引入normalize.css，可以统一各种
浅谈JavaScript面向对象--继承
10-17
在JavaScript中，继承可以通过多种方式实现，其中ES5和ES6提供了不同的实现手段。 ES5实现继承主要分为两个步骤： 1. 构造函数间的“代码复制粘贴”： 在ES5中，可以通过将父类的构造函数复制到子类中，然后通过...
swc 编译 es6为commonjs
junjiahuang的博客
09-12 127
swc
Vue使用query传参Boolean类型，刷新之后转换为String问题
最新发布
q879936814的博客
09-12 192
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
easyexcel模板导出并且公式自动计算的方法
weixin_47615289的博客
09-11 200
【代码】easyexcel模板导出并且公式自动计算的方法。
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 624
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
qq_39969848的博客
09-09 855
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值