专做耐克阿迪鞋网站,免费微信网站模板下载,单页网站定义,网站建设沈阳公司ECMAScript简介
JavaScript是大家所了解的语言名称#xff0c; 但它的正式名称叫做ECMAScript。
1996年11月#xff0c; JavaScript的创造者网景公司将JavaScript提交给国际化组织 ECMA(欧洲计算机制造联合会)#xff0c; 希望这种语言能够成为国际标准。
随后 ECMA 发布…ECMAScript简介
JavaScript是大家所了解的语言名称 但它的正式名称叫做ECMAScript。
1996年11月 JavaScript的创造者网景公司将JavaScript提交给国际化组织 ECMA(欧洲计算机制造联合会) 希望这种语言能够成为国际标准。
随后 ECMA 发布了规定浏览器脚本语言的标准 即ECMAScript。 它的历史版本
version时间描述1.01997诞生制定了语言的基本语法2.01998较小改动同步独立的ISO国际标准3.01999引入正则异常处理格式化输出等。在业界得到了广泛的支持 奠定了JS的基本语法4.02000过于激进,未发布5.02009引入严格模式Json扩展对象数组原型字符串日期方法6.02015模块面向对象语法Promise箭头函数letconst数组解构赋值等7.02016幂运算符数组扩展Async/await关键字8.02017Async/await字符串扩展9.02018对象解构赋值正则扩展102019扩展对象数组方法 ES6
目前市面上推荐使用的是ECMAScript 6.0(ES6) 主要原因在于
兼容性 目前并非所有的浏览器相关都支持最新语言的特性而ES6已经被广泛支持。并且通过转译工具可将ES6转换为较低版本的JavaScript以确保在各种环境中的运行新特性 ES6引入了箭头函数解构赋值类等使得代码更加简洁、易读和维护模块化支持 可以提升代码的复用性和可维护性使得项目结构更清晰异步编程 引入Promise和async特性 支持异步编程 ES6的推广主要还是为了解决ES5的不足目前浏览器的JavaScript虽是ES5版本但大多数的高版本浏览器支持ES6的使用。
它又被称为ES2015, 因为它是2015年发布的根据年份来命名的。
ES6所支持的新特性简要说明下
增加let和const, 可用于块作用域声明变量避免了var变量提升和作用域不明的问题新增的原始数据类型Symbol 可用于定义对象的唯一属性增加了解构赋值的语法 使得代码更加简洁和易于理解拓展了Number支持二/八进制表示增加了isFinite整合了parseInt方法等拓展了String新增了子字符串的识别 模版字符串的拼接等拓展了Array 增加了对象转换为数组以及查找的方法相关拓展了函数的默认参数设置 箭头函数等新增Map容器和Set对象的使用新增Proxy和Reflect引入class类的支持 支持extends继承 super访问父类防范 静态方法等引入模块 主要分为export导出和import导入引入Generator 、Promise和async等异步编程 let、const和Symbol
ES6之前只有全局变量和函数内局部变量。let和const为新增关键字
let 必须在声明之后才能使用 不可重复声明 块作用域 变量不能提升const 声明之后必须初始化否则会报错。 且声明后不允许改变属于只读变量。
// ---------- let -------------
{let value 0;console.log(value); // 0
}
// Error: value is not defined
console.log(value);// ---------- let -------------
const value: number 10;
// Error: Assignment to constant variable
value 100;经常会拿var与let比较
/*
var是ES5及之前的JavaScript的关键字特点
* 函数作用域声明的变量在整个函数体内 而不仅是在块作用域内
* 变量会提升声明的变量会提升到函数的顶部 即可在声明之前使用
* 允许重复声明
*/
function example() {var x 10;if (true) {var x 20; // 在同一函数作用域内重复声明变量xconsole.log(x); // 输出20}console.log(x); // 输出20
}
example();/*
let是ES6及之后的JavaScript和TypeScript引入的关键子特点
* 块作用域 比如if语句循环语句并不是整个函数体内
* 不存在变量提升必须声明之后才能使用
* 不允许重复声明否则会报错
*/
function example2() {let y 10;if (true) {let y 20; // 在块级作用域内声明变量yconsole.log(y); // 输出20}console.log(y); // 输出10
}
example2();const需要注意所谓的不允许改变真正指的是变量或引用所指向的内存地址不可改变。
在基础数据类型使用中值就保存在变量指向的地址。 而对于类似于Array数组Object对象等这些复杂类型 对象内的子元素是可改变的
// ------------ 数组 ------------
const numData [1, 2];
// 允许插入数值
numData.push(3);
console.log(numData);
// 不允许改变对象,Assignment to constant variable
numData [4, 5];// ------------ object ------------
const objectData {value: 1,
}
// 允许修改对象内部元素
objectData.value 2;
// 不允许改变对象Assignment to constant variable
objectData {value: 2};Symbol
除了number string boolean, object, null, undefined外, Symbol为新增的原始数据类型。
它被用于表示独一无二的值可被用于定义对象的唯一属性名构成
// lib.es2015.symbol.d.ts
interface SymbolConstructor {readonly prototype: Symbol;// 创建symbol对象(description?: string | number): symbol;// 全局搜索指定key字符串的symbol对象for(key: string): symbol;// 获取symbol对象的key, 如果没有则undefinedkeyFor(sym: symbol): string | undefined;
}declare var Symbol: SymbolConstructor;基本使用
let sym Symbol(a_1);
console.log(typeof(sym), sym); // symbol, Symbol(a_1)主要用法
定义常量保证不同常量的唯一性作为对象的属性名 使用[]来设定不要使用.
简单的实例
let sy Symbol(key1);let obj {[sy]: kk,value: 10,
};
// 虽然作为对象的属性名但其实是不可读的, 结果是{value: 10}
console.log(obj); 解构赋值
它是对赋值运算符的扩展 可用于 **数组 **或 对象 进行模式匹配 然后对其中的变量进行赋值。
// 基本使用
let [a, b, c] [1,2,3];
console.log(a, b, c); // 1, 2, 3
let {a, b, c} {a:1,b:2,c:3};
console.log(a, b, c); // 1, 2, 3 // 嵌套使用
let [a, [b, c]] [1, [2, 3]];
console.log(a, b, c); // 1, 2, 3
let [A, [[B], C]] [1, [[2], 3]];
console.log(A, B, C); // 1, 2, 3 // 忽略
let [a1, , c1] [1, 2, 3];
console.log(a1, c1); // 1, 3
let [, b2, , d2] [1,2, 3,4];
console.log(b2, d2); // 2, 4
let [a3, [, b3], [,,c3]] [1, [2,3], [4,5,6]];
console.log(a3, b3, c3); // 1, 3, 6 支持不完全解构可以做个简单了解但不推荐使用会有报错
// Error: Tuple type [number] of length 1 has no element at index 1
let [a1, b1] [1];
console.log(a1, b1); // 1, undefined let [a2 1, b2] [];
console.log(a2, b2); // 1, undefined 支持剩余参数通过...参数来设定它会用于收集剩余的元素来创建一个新的数组。
// 数组
let [a, ...b] [1, 2, 3];
console.log(typeof(a), typeof(b)); // number, object
console.log(a, b); // 1, [2, 3] // 对象
let {age, ...params} {name: ES, age: 2023, value: 1,
}
// 参数age被赋值其余的都给了params
// 2023, {name: ES, value: 1}
console.log(age, params); // 函数参数,比如求和
function AddNum(...numbers: any) {let totalValue 0;for (let num of numbers) {totalValue parseInt(num);}return totalValue;
}
console.log(AddNum(1, 2, 3)); // 6
console.log(AddNum(1, 2, 3)); // 6数字的拓展
二进制和八进制,分别增加了前缀0b/0B和0o/0O
console.log(0b1010 10); // true
console.log(0o12 10); // trueNumber.EPSILON 的使用, 浮点数的存储和精度问题导致计算机无法精确计算所以会设置一个很小的误差范围来比对
// 直接比较, 是不相等的
console.log(0.1 0.2 0.3); // false // 通过Number.EPSILON比对
function isEqual(a:number, b:number) {return Math.abs(a - b) Number.EPSILON;
}
console.log(isEqual(0.10.2, 0.3)); // true
console.log(isEqual(0.10.2, 0.300001)); // false 增加了最大/最小安全整数 范围在(2^-53, 2^53)之间
// 最小整数范围下限
const MIN_SAFE Number.MIN_SAFE_INTEGER;
console.log(MIN_SAFE - 1 MIN_SAFE - 2); // true
console.log(MIN_SAFE ! MIN_SAFE 1); // true // 最大整数范围上限
const MAX_SAFE Number.MAX_SAFE_INTEGER;
console.log(MAX_SAFE 1 MAX_SAFE 2); // true
console.log(MAX_SAFE ! MIN_SAFE - 1); // true Number.isFinite() 检查数值是否为有限数字即不为Infinity
// 基础数字,true
console.log(Number.isFinite(1));
// 最小浮点数误差,true
console.log(Number.isFinite(Number.EPSILON));
// 最小值,true
console.log(Number.isFinite(Number.MIN_VALUE));
// 最大安全整数上限,true
console.log(Number.isFinite(Number.MAX_SAFE_INTEGER));// 正无穷大,false
console.log(Number.isFinite(Number.POSITIVE_INFINITY));
// NaN, false
console.log(Number.isFinite(Number.NaN));
// 注意不存在隐式类型转换都是false
console.log(Number.isFinite(10));
console.log(Number.isFinite(undefined));
console.log(Number.isFinite([]));
console.log(Number.isFinite({}));parseInt() 从全局整合到Number中, 它主要用于将字符串转换为指定进制的数字
/*
funcName: parseInt(string: string, radix?: number | undefined): number
param: string 转换的字符串
param: radix: 可选参数进制范围在[2, 36], 默认十进制
*/
console.log(Number.parseInt(2)); // 2
console.log(Number.parseInt(12,56)); // 12
console.log(Number.parseInt(0011,2)); // 3// 注意虽然整合了但本质还是一个同一个函数
console.log(parseInt Number.parseInt); // true // 注意无法解析为数字的会返回NaN
console.log(Number.parseInt(10 1)); // 101
console.log(Number.parseInt(abc 1)); // NaN // 拓展可使用 isInteger 检测是否为number, 参数为unknown类型
console.log(Number.isInteger(1)); // true
// 如下一律为false
console.log(Number.isInteger(1));
console.log(Number.isInteger(undefined));
console.log(Number.isInteger(NaN));
console.log(Number.isInteger(false));
console.log(Number.isInteger(null));
console.log(Number.isInteger(Infinity));
console.log(Number.isInteger(Number.NEGATIVE_INFINITY));parseFloat() 从全局整合到Number中 它用于将字符串转换为数字
/**
funcName: parseFloat(string: string): number
param: string 要转换的字符串
*/// 注意参数不能为非string, 否则报错
// console.log(Number.parseFloat([]));
// console.log(Number.parseFloat(undefined));console.log(Number.parseFloat(123.45)); // 123.45
console.log(Number.parseFloat(123.45abc));// 123.45
console.log(Number.parseFloat(123abc456));// 123// 解析不出来就是NaN
console.log(Number.parseFloat(abc)); // NaNMath对象增加了一些方法的支持
方法名描述clz32返回数字的32 位无符号整数形式的前导0的个数imul返回两个数的32位整数乘积sign返回一个数的符号是正数(1)、负数(-1)还是0log10返回一个数的以10为底的对数log2返回一个数的以2为底的对数log1p返回一个数加1的自然对数expm1返回一个数的自然指数减1cosh返回一个数的双曲余弦值sinh返回一个数的双曲正弦值tanh返回一个数的双曲正切值acosh返回一个数的反双曲余弦值asinh返回一个数的反双曲正弦值atanh返回一个数的反双曲正切值hypot返回所有参数的平方和的平方根trunc返回一个数的整数部分fround返回一个数的最接近的单精度浮点数表示cbrt返回一个数的立方根//
// imul 计算 a * b
console.log(Math.imul(2, 3)); // 6
// sign 判定数字符号为是正数(1)、负数(-1)还是零
console.log(Math.sign(0)); // 0
console.log(Math.sign(Number.MAX_VALUE)); // 1
console.log(Math.sign(Number.NEGATIVE_INFINITY));// -1
// hypot 计算 所有参数的平方和的平方根
console.log(Math.hypot(3)); // 3
console.log(Math.hypot(3, 4)); // 5
// trunc 返回数字的整数部分没有四舍五入
console.log(Math.trunc(0.56)); // 0
console.log(Math.trunc(-1.56)); // -1
// cbrt 返回数字的立方根
console.log(Math.cbrt(8)); // 2
// log10 返回以10为底的对数
console.log(Math.log10(100)); // 2其他内容可参考: TypeScript 之 Number 字符串的拓展
增加的新特性主要有
模版字符串的支持 支持使用反引号和${}对字符串进行组合
// 使用反引号支持多行
let content Hello:
You have a lot of names, ES6 and ES2015console.log(content);// 组合且支持表达式的计算
const strName Alice;
const ageNum 25;
const msg My name ${strName} and I am ${ageNum1} years old.;
// My name Alice and I am 26 years old.
console.log(msg);// 表达式
const x 10;
const y 5;
const result ${x} ${y} ${x y};
// 10 5 15
console.log(result);// 调用函数
function f(){return have fun!;
}
let content Game start,${f()};
// Game start,have fun!
console.log(content);增加了字符串检索子字符串的接口
const str Hello, world!;
// startsWith 检测字符串是否在原字符串串头部
console.log(str.startsWith(Hello)); // true
console.log(str.startsWith(ello)); // false
// endsWith 检测字符串是否在原字符串的尾部
console.log(str.endsWith(world!)); // true
console.log(str.endsWith(rld)); // false
// includes 检测是否包含字符串
console.log(str.includes(llo)); // true
console.log(str.includes(o, w)); // true 增加了重复字符串和填充字符串的接口:
let str a;/**
reqeat 返回指定次数的新字符串注意
* 如果参数为大于0的浮点数则向下取整
* 如果为0到-1之间的数字默认为0
*/
console.log(str.repeat(3)); // aaa
console.log(str.repeat(3.5)); // aaa
console.log(str.repeat(-0.1)); // /*
padStart(maxLength: number, fillString?: string): string
func: 从头部补充字符串
param: 设定的长度如果小于当前字符串长度则返回当前字符串
param: 填充的字符串
*/
str str.repeat(3);
// 长度小于当前字符串长度不变
console.log(str.padStart(1, x)); // aaa
console.log(str.padStart(5, x)); // xxaaa// padEnd 从末尾补充字符串
console.log(str.padEnd(6, y)); // aaayyy 其他内容可参考: TypeScript 之 String 数组的拓展
扩展元算符的拓展... 支持将独立的元素合并为一个新的数组等
// 方式1
let [a, ...b] [1, 2, 3];
console.log(typeof(a), typeof(b)); // number, object
console.log(a, b); // 1, [2, 3] // 方式2
const arr1 [1, 2];
const arr2 [4, 5];
const mergedArray [...arr1, ...arr2];
console.log(mergedArray); // [1, 2, 4, 5]// 方式3
function AddNum(...numbers: any) {let totalValue 0;for (let num of numbers) {totalValue parseInt(num);}return totalValue;
}
console.log(AddNum(1, 2, 3)); // 6Array.of() 将参数转换为数组
console.log(Array.of(1, 2, 3)); // [1, 2, 3]
console.log(Array.of(1, 2, true)); // [1, 2, true] Array.from() 将对象或可迭代器对象转换为数组
// 基本使用
const str hello;
const arr Array.from(str);
console.log(arr); // [h, e, l, l, o]// 支持对每个元素处理
let array Array.from([1, 2, 3], (n) n * 2)
console.log(array); // [2, 4, 6] find()和findIndex() 查找满足条件的元素相关
const numbers [1, 2, 3];// find 查找并返回满足条件的第一个元素
const evenNumber numbers.find(num num % 2 0);
console.log(evenNumber); // 2// findIndex 查找并返回满足条件的第一个元素索引
const index numbers.findIndex(num num % 2 0);
console.log(index); // 1 includes() 检测数组中是否包含指定元素
const fruits [apple, banana, orange];
console.log(fruits.includes(banana)); // true
console.log(fruits.includes(grape)); // falsefill() 填充数据
/**
func: fill用指定的数值填充数组会修改原有数组并返回新的数组
param: 填充的数值
param: 开始索引, 如果忽略表示开始
param: 结束索引, 如果忽略表示末尾
*/
let arr1 Array.of(1, 2, 3);
console.log(arr1.fill(0)); // [0, 0, 0]let arr2 Array.of(1, 2, 3);
console.log(arr2.fill(0,1,2)); // [1, 0, 3]flat() 将嵌套数组展平为一个新的数组
const arr [1, 2, [3], [4]];
const flattenedArray arr.flat();
console.log(flattenedArray); // [1, 2, 3, 4]其他内容可参考 TypeScript 之 Array
