ES5+ES6
常见版本 : ES3(最基础的版本, 所有浏览器都能解析) / ES5(部分低版本不能解析 / ES6(大部分不能直接解析)
ES5 --- (2009年 12月)
JavaScript这种语言的基本语法结构是由ECMAScript来标准化的, 所以我们说的JavaScript版本一般指的是ECMAScript版本.
ES5 : ECMAScript 5 --- 有严格模式(新增模式) / 怪异模式
严格模式 : 字面理解, 更严格的模式, 浏览器对JS要求更苛刻, 语法格式要求更细致,例如:
- 变量命名必须要有修饰符 例如var
- 函数内部this不能指向window
- 函数内容的arguments形参不同步
- 禁止在非函数代码块内声明函数
- 禁止八进制
ES5 --- bind( )
绑定一个新对象, 让函数中的this指向该对象, 一般在定时器中使用较多
补充 --- apply( ) --- 绑定this指向, 自动执行方法 --- 第一个参数指定this指向, 第二个参数为函数所需要的参数---传递参数为数组
补充 --- call( ) --- 第一个参数指定this指向, 第二个参数为函数需要的参数 --- 传递一个个元素
ES5 --- Array新增
indexOf( ) :判断数组中是否包含某个元素, 和字符串的indexOf用法类似
forEach( ) : 用来遍历数组中的每一项, 没有返回值, 对原数组对象没有影响
arr.forEach(function( value, index, array){ 代码区块 });
map( ) : 和 forEach 非常相似, 都是用来遍历数组中的每一项的, 区别是map的回调函数支持return返回;
some( ) : 有一个内容符合条件返回true, 否则false
every( ) : 所有都是, 全部符合条件返回true, 否则 false
reduce( ) : 接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终为一个值,是ES5中新增的一个数组逐项
filter( ) : 过滤出数组中想要的元素, 不改变原数组
处理方法
var result = arr.reduce(function(pre, cur, index, array){ }
pre:上一次调用回调函数时的返回值,或者初始值
cur:当前正在处理的数组元素
index : 当前正在处理的数组元素下标
array : 调用reduce()方法的数组
result: 遍历完数组后的最终结果
forEach、map以及reduce的相同点
都是用于处理数组
都不兼容IE8及以下
forEach、map以及reduce的不同点
forEach 方法是将数组中的每一个值取出做一些程序员想让他们做的事情
map 方法是将数组中的每一个值放入一个方法中做一些程序员想让他们做的事情后可以返回一个新的数组
reduce 方法 将数组中的每一个值与前面的值处理后得到的最终值
ES6 (2015年 6月)
ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了
对于函数对象和string数组做了全套加强
ES6环境支持:
可以使用HBuilder最新版, HBuilder8.0版本支持ES6语法
也可以使用其他ES6编译器: Traceur
let ---块状作用域
--- 是ES6中新增关键字。它的作用类似于var,用来声明变量,但是所声明的变量,只在let命令所在的代码块内有效。
const --- 常量(块状作用域)
String新增
includes( ) --- 是否包含 , 返回Boolean值 true/false
startsWith( ) --- 表示参数字符串是否在源字符串的头部, 返回Boolean值
endsWith( ) --- 表示参数字符串是否在源字符串的尾部, 返回Boolean值
repeat( ) --- 平铺产生新的字符串
Array新增
Array.from( ) --- 将伪数组转为数组
Array.of( ) --- 将一系列的值转为数组
Array.find( ) --- 查找元素, 返回对应匹配的第一个元素
Array.findIndex( ) --- 查找下标, 返回对应第一个匹配的下标
function加强
对应默认参数(支持没传值的时候, 有一个默认值
function sayHi(name){ console.log(name) }
箭头函数 --- 匿名函数
特性:
1. 当前只有一个参数, 可以省略( )
2. 当前只有一行代码, 可以省略 { }
3. 当前如果只有一行代码,需要返回值,可以省略( )
4. 箭头函数里面没有this
5. 箭头函数没有arguments
总结 : 箭头函数里面的this指向父元素的this
如果箭头函数不需要参数或需要多个参数, 就使用一个圆括号代表参数部分
var fn = () => 5; 等同于: var fn = function () { return 5 };
var sum = (a, b) => a+b; 等同于 var sum = function(a, b) { return a+b;};
如果箭头函数的代码部分多于一条, 就使用大括号括起来, 使用return语句返回
var sum = (a, b) => { let c = a+b; return c; }
由于大括号被解释为代码块, 所以如果箭头函数直接返回一个对象, 必须在对象外面加上括号
var fn = id => ({ id: 11, name: "zhangsan" });
扩展运算符 *
打开对应的数组 ...
...[a, b, c] ===> a, b, c
解构
打开对应对象(解除解构) 提取到里面的值
Object新增
属性简写, 方法简写
Object.is( , ) --- 比较两个值是否严格相等, 与严格比较运算符(===)行为基本一致---
不同点 : 一是+0不等于-0, 二是NaN等于自身
Object.assign( ) --- 方法用来将源对象(source)的所有枚举属性, 复制到目标对象(target).
至少需要两个对象作为参数, 第一个参数是目标对象, 后面的参数都是源对象, 只要有IG参数不是对象,就好抛出TypeError错误
Set --- 数据结构set类似于数组, 但成员的值都是唯一的, 没有重复值
set属性和方法
- size --- 数量
- add(value) --- 添加某个值, 返回set结构本身
- delete(value) --- 删除某个值, 返回一个布尔值, 表示删除是否成功
- has(value) --- 返回一个布尔值, 表示这个值是否为Set的成员
- clear( ) --- 清除所有成员, 没有返回值
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?