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