es5和es6新增内容

已于 2022-10-27 21:00:02 修改
阅读量94 收藏
点赞数
文章标签： es6 javascript 前端
于 2022-10-26 20:12:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73467167/article/details/127539711
版权

ES5新增内容

严格模式

概述：我们普通书写的js代码 并没有特别多的规范，甚至在某些时候可以随意发挥，这种模式被称为怪异模式。相对而言一种更加规范化的模式被称为严格模式。

严格模式的声明

使用 use strict 进行声明,他的声明位置必须在第一行 （常用于源码书写）

严格模式的特性

  • 声明一个变量必须具备关键词

  • 函数内this不能指向window

  • 函数内arguments形参和实参不同步

  • 禁止八进制方法

  • 函数声明必须在对应的位置进行声明

//怪异模式
// var a = 10
// b = 20
// console.log(a);
// console.log(b);
//严格模式
"use strict"; //声明必须在第一行
//声明一个变量必须要有关键词
c = 30
console.log(c);//c没有被定义
//严格模式中函数内的this不能指向window
function fn(){
    console.log(this);
}
fn()// this 是 undefined
//在严格模式中不能使用八进制相关的方法
//严格模式中argument的形参和实参不同步
//严格模式中函数只能在对应的声明函数地方进行声明

数组新增的高阶函数

高阶函数概述：

以函数作为参数的函数叫做高阶函数

新增的相关函数

遍历的函数

  • forEach （没有返回值）

//高阶函数
var arr = ['a','b','c']
//forEach
//传入的函数里面的三个参数分别是 第一个值 第二个下标 第三个遍历的数组
//forEach没有返回值  js函数里面参数如果不需要可以不传
arr.forEach(function(v,i,arr){
    // console.log(v); //里面值
    // console.log(i); //下标
    console.log(arr); //遍历的数组
})
//省略对应参数
arr.forEach(function(v){
    console.log(v);
})

  • map （返回值是一个数组）

//map
//map跟forEach使用是一样的 但map有返回值 返回一个数组
var mapArr = arr.map(function(v,i,arr){
    console.log(v);
})
console.log(mapArr);//[undefined,undefined,undefined]
var mapArr = arr.map(function(v,i,arr){
    console.log(v);
    return v+i+'你好'
})
console.log(mapArr);

过滤和对应计算的

  • filter （返回一个数组）

var arr = ['abc','a','bc']
//filter 过滤 传入对应的函数 通过函数来返回条件进行过滤 返回的值为数组
//第一个为值 第二位下标 第三为当前遍历的数组
var filterArr = arr.filter(function(v,i,arr){
    //里面包含a返回true 里面没有a返回false 
    //如果返回值是false 就不会加入到对应的数组 如果返回值为true就会加到对应的数组
    return /a/.test(v)
})
console.log(filterArr);//包含a的一个数组 ['abc','a']
var arr = [10,9,8,23,15]
//返回所有大于10的
var filterArr = arr.filter(function(v){
    return v>10
})
console.log(filterArr);//[23,15]
var arr = [10,9,8,23,15]

  • reduce （从前到后 返回一个值）

  • reduceRight （从后往前 返回一个值）

//reduce 计算的 计算所有的和
//prev表示前面的总和 第一次prev值为10 第二次为19 current默认从第二个开始
var sum = arr.reduce(function(prev,current,i,arr){
    console.log(prev);
    console.log(current);
    console.log(i);//1
    return prev+current
})
console.log(sum);
//调整到第1个开始 current的下标为0 
arr.reduce(function(prev,current,i,arr){
    console.log(i);//0
    console.log(prev);//0
},0)
//求乘积
var v = arr.reduce(function(prev,current){
    return prev * current
})
console.log(v);
//reduceRight 从右边开始 从后到前 prev值就是倒数第一个 i从倒数第二个开始 
arr.reduceRight(function(prev,current,i,arr){
    console.log(i);
})

判断是否存在

  • some （只要有一个就返回true）

// 查询的相关 条件在于传入的函数的返回的值
var arr = [0,1,2,3]
//根据里面返回的内容来进行判断的 里面只要有true返回 他就是true
var is = arr.some(function(v,i,arr){
    return v>2
})
console.log(is);

  • every （所有都满足条件返回true 不然返回false）

//every 每一个都要满足条件
var is = arr.every(function(v,i,arr){
    return v>=0
})
console.log(is);

注意事项

  • forEach和map的区别（forEach没有返回值 map有返回值）

  • reduce是用于计算的 reduce传入的函数有四个参数（前面的和（默认为第一个） 当前的值（默认是第二个开始） 当前的下标（默认从1开始） 当前遍历的数组）如果需要调整在后面进行传参。

  • some和every的区别 （some只要有一个满足条件就返回true every要每个都满足条件才返回true）

字符串新增

字符串模板

var username = '李丹'
var str = `hello${username}`
console.log(str) //hello李丹

改变this指向新增方法

this指向

  • this在函数内的this指向当前函数的调用的者（全局调用的函数this指向window）

  • this在对应的对象内的函数指向当前的对象的

  • this在事件对应的函数内指向当前事件的目标元素

如果需要更改this指向那么我们可以给对应的函数调用对应的方法

相关方法

  • bind （手动调用）

  • apply （自动调用 传递一个数组）（* 如果传递的是数组）

  • call （自动调用 一个个的数据传递）（* 一般常用）

function fn(arg,arg1){
    console.log(this);
    console.log(arg,arg1);
}
fn() //打印window
var obj = {name:'jack'}
//调用bind方法来更改this指向
//将对应的函数绑定给obj这个对象 bind不会执行函数
//函数调用的bind方法返回的是一个函数 这个函数不会自动调用 需要你手动调用
var v = fn.bind(obj)
//执行函数
v()
//bind方法运用 需要手动调用需要()来调用 传参传入到对应的()里面
fn.bind(obj)('你好','世界')
//apply 自动调用 第一个参数是绑定的对象 第二个参数是传递的参数（以数组进行传递）
fn.apply(obj,['hello','world'])
//call 自动调用  第一个参数是绑定的对象 第二个参数是传递的参数 （以一个个的元素进行传递）
fn.call(obj,'吃饭了吗','睡觉了吗')

apply方法和call方法的区别

  • apply方法传递的参数以数组形式

  • call方法传递的参数以元素形式

共同点

  • apply方法和call方法都会自动调用对应的函数

ES6新增内容

ES6对于字符串，数组，函数，对象，循环，变量修饰关键词、基础数据类型等都有新增

字符串新增方法

  • startsWith 是否开头

  • endsWith 是否结尾

  • includes 是否包含

  • repeat 平铺

var str = 'abc'
//是否开头 返回boolean类型
//是否以a开头
console.log(str.startsWith('a'));//true
// 是否结尾 返回boolean类型
//是否以a结尾
console.log(str.endsWith('a'));//false
//是否包含 返回boolean类型
//是否包含ac
console.log(str.includes('ac'));//false
//平铺 返回的是一个新的字符串
var newStr = str.repeat(2) //将对于的abc平铺俩遍
console.log(newStr);//abcabc

数组新增方法

普通方法

  • find 根据条件查找对应的值

  • findIndex 根据条件查找对应的下标

var arr = [1,2,3]
//普通方法(高阶函数) find findIndex
//根据条件查找 返回找到的第一个内容 没有找到返回undefined
//第一个是值 第二个是下标 第三个是数组
var value = arr.find(function(v,i,arr){
    return v>1
})
console.log(value);//2 
//根据条件返回找到第一次出现的下标 没有找到返回-1
var index = arr.findIndex(function(v,i,arr){
    return v>1
})
console.log(index);//1

静态方法

  • Array.from 将对应的伪数组转为数组

  • Array.of 将对应的传入的元素组成一个新的数组返回

//新增的俩个静态方法
//将伪数组转为数组
var btns = document.querySelectorAll('button') //NodeList 伪数组
// btns.map(function(v){
//     console.log(v);
// }) 出错 伪数组没有map方法
//转成数组以后再调用
Array.from(btns).map(function(v){
    console.log(v);
})
//将传进去的内容组成一个新的数组出来 返回对应的数组
var newArray = Array.of('a','b','c')
console.log(newArray);

变量修饰关键词

es3存在

  • var 声明伪全局变量

新增的

  • let 声明块状作用域变量（不允许重复声明 只在当前的代码块内起作用（块级作用域））

  • const 声明常量 （声明必须赋值 不允许修改 块级作用域）

// let  声明块级作用域
let a = 10
// let a = 20 不允许重复声明
a = 20
console.log(a);
// 块状作用域及伪全局作用域
for(var i=0;i<5;i++){
    setTimeout(function(){
        console.log(i);//重复打印五次5
    },1000)
}
//块级作用域 只在当前的作用范围内容 进入
for(let i=0;i<5;i++){
    setTimeout(function(){
        console.log(i);//打印0 1 2 3 4
    },1000)
}
// const 声明常量
const b = 10
// b = 20 //不允许二次赋值
console.log(b);
//声明必须要赋值
// const c 错的
//const也是块级作用域

基础数据类型

ES3的基础值类型

  • String

  • Number

  • Boolean

  • null

  • undefined

新增的值类型

  • symbol 独一无二的值

  • BigInt 大的整型

// 新增的类型
//独一无二的值(栈上面)
var sym = Symbol()
var sym1 = Symbol()
console.log(sym);
console.log(sym == sym1);//false
var sym2 = Symbol('你好') //传入的参数是说明
var sym3 = Symbol('你好')
console.log(sym2 == sym3);//false
//一般用于对象的key key不能重复的
var obj = { sym:10}
console.log(obj.sym);
//获取详情
console.log(sym2.description);
//BigInt 大的整型 容纳大的数
//Number中的整型Int容纳范围是有限的 10^16
var bi = BigInt('111111111111111111111111111111111111111111111111111111111111111')
console.log(bi);

循环

  • for in（遍历对象）

  • for of （遍历数组的 只要实现了iterator迭代器就可以用for of遍历）

var obj = {
    name: '张三',
    age: 18
}
for (var key in obj) { //遍历的是key （数组的key是下标）key的类型为字符串
    console.log(key)
}
var arr = ['a', 'b', 'c']
for (var value of arr) { //for of遍历的是值
    console.log(value)
}

函数的新增

新增函数的默认参数

// 函数新增 默认参数 
//默认a为0  b也为0 如果你传递了对应的参数 那么默认值就会被覆盖
function fn(a=0,b=0){
    console.log(a+b);
}
fn(1,3)//打印4
fn()//打印0
fn(1)//打印1

新增箭头函数

箭头函数的写法

(参数1,参数2,...参数n)=>{代码}

示例

//新增箭头函数 是一个匿名函数
var fn1 = ()=>{
    console.log('我是箭头函数');
}
fn1()

箭头函数的简化写法

  • 如果当前的参数只有一个 ()可以省略的

  • 如果当前的{}里面的代码只有一句的话 {}也可以省略

  • 如果当前的{}里面只有一句代码 且你需要返回数据的时候 可以省略return

//简化写法
// 如果当前的参数只有一个 ()可以省略的
// 如果当前的{}里面的代码只有一句的话 {}也可以省略
// 如果当前的{}里面只有一句代码 且你需要返回数据的时候 可以省略return
var fn2 = arg =>arg+'你好' //当前fn2 传递一个arg 返回一个arg+你好
var result = fn2('hello')
console.log(result);

箭头函数的特性

  • 没有this (根据作用域链向上找)

  • 没有arguments

//箭头函数的特性
var obj = {
    say:function(){
        console.log(this);
        console.log(arguments);
    }
}
obj.say() //打印obj
var obj = {
    say:()=>{
        console.log(this);
        console.log(arguments);
    }
}
obj.say() //打印window
//箭头函数里面没有this 所以他会去上面找 根据作用域链找离他最近的
//箭头函数里面没有arguments

对象里面内容的简化

属性的简化

当你的属性值是一个变量的情况下，以及你向使用你的变量作为key的名，这个时候可以省略key

var age = 18
var username = 'jack'
//简化 使用变量做键的名 {age:age,username:username}
var obj = {age,username}

函数的简写

var obj = {
    say:function(){
        console.log('hello')
    }
}
obj.say()
//简写 省略:和function
var obj = {
    say(){
        console.log('hello')
    }
}
obj.say()

循环的加强

  • for in 是用于遍历对象的 遍历的是对象的里面key 他也可以遍历数组（数组也是对象）

  • for of 是用于遍历数组的 遍历的是数组里面的value 他不可以遍历对象（只有实现了迭代器的对象才可以被遍历 必须具备length或者size属性）

如果要使用对应的for of来遍历对象的话 怎么办！！

Object的几个方法（静态方法） 可以用来实现对应的遍历

keys 拿到所有的key

values 拿到所有的值

entries 拿到所有的键值对

var obj = {age:18,name:'jack',sex:'男'}
//keys 获取所有的key 作为一个迭代对象
var k = Object.keys(obj)
console.log(k);
//values 获取所有的value
var v = Object.values(obj)
//entries 获取所有的key-value对
var e = Object.entries(obj)

新增的对应的迭代器类型（实现了迭代器）

set 元素不重复的一个集合（去重）

set声明

无参

var set = new Set() //空的集合

将数组作为参数传递

var arr = [1,1,2,2,3,3]
var set = new Set(arr) //传入数组
console.log(set) //1 2 3

相关的方法（增删改查）

add 添加

delete 删除

clear 清空

keys 获取key

values 获取值

entries 获取键值对象

forEach 遍历（三个参数分别是value,key,set）

has 判断是否存在 （返回的是boolean类型）

属性

size 获取对应的长度

//无参的形式
var set = new Set()
//添加 add append push...
set.add(1)
set.add(2)
set.add(1)
//获取对应的set的长度 size
console.log(set.size);//2 
//删除方法 delete remove
set.delete(1) //删除1这个value值
//删除所有 清空
// set.clear()
//获取元素
var key = set.keys() //获取所有key 值既是key 又是值
var value = set.values() //获取所有的值 
var kv  = set.entries() //获取所有的键值对
console.log(kv);
console.log(key);
console.log(value);
//set里面有一个forEach方法
// 第一个是值 第二个key 第三个是遍历的set
set.forEach((v,k,set)=>{
    console.log(v);
})
//has 判断是否存在 返回true和false
console.log(set.has(2));//true

WeakSet 内容存储对应的set（只能存储对象 但并不能完成去重）

var weakset = new WeakSet()
weakset.add({username:"张三"})
weakset.add({username:"张三"})
weakset.add({username:"张三"})
console.log(weakset);//里面还是存在3个

map 基于set和array之上构建的一个集合

​​​​​​​

贩剑小达人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用webpack将ES6转化ES5的实现方法
10-16
通过以上步骤，我们已经成功地配置了Webpack和Babel，使得它们能够将ES6代码转换为ES5，并处理新的API，以确保在不同环境下代码的兼容性。这不仅有助于提升代码的可维护性，还能确保应用在更广泛的用户群体中正常...
ES6中字符串string常用的新增方法小结
08-28
ES6中字符串string常用的新增方法小结 ES6中字符串string常用的新增方法小结主要介绍了ES6中字符串string常用的新增方法...ES6 中字符串 string 的新增方法可以让开发者更方便地操作字符串，提高开发效率和代码质量。
前端---【js阶段:ES5的使用】
m0_61307468的博客
04-03 674
ES5 除了正常运行模式（又称为混杂模式），还添加了第二种运行模式："严格模式"（strict mode）。严格模式顾名思义，就是使 JavaScript 在更严格的语法条件下运行。1.1作用消除代码运行的一些不安全之处，保证代码运行的安全为未来新版本的 JavaScript 做好铺垫1.2严格模式声明1.2.1全局开启"user strict"; 1.2.2函数内部function fn() {"user strict"} 只会在函数的内部开启严格模式(1) 不允许使用未声明的变量(2)函数内部的
Javascript的es5和es6
2202_75802608的博客
06-09 1696
es5和es6的关键字使用，包括继承方式不同的优点和缺点
JavaScript快速学习及ES5标准通览
最新发布
world_universe的博客
09-22 265
以es5标准规范为基础快速过一遍Javascript，以便能看懂boardgame.io教程的源代码。
JavaScript中ES5和ES6的区别
weixin_73426945的博客
07-16 526
💫总之，相对于ES5，ES6提供了更多方便的语法和功能特性，使得开发者能够更加高效和舒适地进行开发工作。⭐️变量声明方式：在ES5中，使用var关键字进行变量声明，而ES6引入了let和const关键字来声明变量。而在ES6中，增加了块级作用域，这意味着对于在if、for、switch等代码块中声明的变量，在外部是不可见的。⭐️箭头函数：ES6中新增了箭头函数，可以更简洁地定义函数，同时箭头函数没有自己的this，它的this绑定在父级作用域的this上。
ES5 ES6中Array对象去除重复项的方法总结
12-11
本文主要探讨了在ES5和ES6中如何利用Array对象去除重复项的方法。 首先，我们要解决一个JavaScript特有的问题，那就是`NaN`（Not a Number）的比较特性。在JavaScript中，`NaN !== NaN`，这意味着即使是同一个`NaN`...
浅谈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. ...
es5 原型、原型链、继承
weixin_41154070的博客
03-02 767
1. 理解对象 2. 创建对象 2.1 工厂模式 function createPerson(name, age, job){ let o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ console.log(this.name); } return o; } let person1 = createPerson(“Nicholas”, 29, “software Engineer”); le
闲谈一下，ES3、ES4、ES5、ES6 分别是什么
m0_37695902的博客
07-27 1860
闲谈一下，ES3、ES4、ES5、ES6 分别是什么 上图按照时间顺序说明了JavaScript、JScript和ECMAScript的发展。 显示在网景工作的Brendan Eich临危受命，用十天时间设计出LiveScript的第一个版本。临时发布前为了讨好Sun公司和Java程序员，LiveScript改名为JavaScript。 微软这边不甘示弱，你的浏览器有脚本功能，我的浏览器也要有啊。于是在IE3.0版本附带推出JScript。为什么叫JScript？因...
ECMAScript规范第8版(ES2017)已发布，新功能一览
热门推荐
lihefei_coder的博客
07-13 1万+
EcmaScript 8或EcmaScript 2017在6月底由TC39正式发布。 去年，似乎我们在谈论EcmaScript。 这不是什么 目前的标准是每年发布一个新的ES规范版本一次。 ES6于2015年发布，ES7于2016年发布，但ES5发布后却有人记得吗？ 这是发生在2009年，在JavaScript的神奇的兴起之前。所以我们将JavaScript的开发变化作为稳定的语言，现在我们需要将E
ES5、ES6、ES7、ES8
qq_35385241的博客
06-05 337
ES5、ES6、ES7、ES8 ES5 Strict Mode 在JS文件或是函数的顶部添加"use strict"即可启用严格模式。 "use strict"; function strict() { "use strict"; } 在严格模式下运行脚本，不少导致提醒或bug行为的事情会抛出错误，例如： （1）变量声明必须用var 在常规模式下，如果我们声明一个变量时省略了var关键字，解析引擎会自动将其声明为全局变量，但在严格模式下，会直接抛出异常，不会为我们转为全局变量 function s
ES5, ES2015 和 TypeScript 的区别
huzhenv5的博客
03-27 612
英文原文：Understanding ES5, ES2015 and TypeScript 参与翻译 (2人) : LeoXu, 溪边九节 ES5，ES2015（原名 ES6 ）和 TypeScript 之间有什么不同？我们应该学习和使用哪一个？ 首先，让我们为讨论这些建立一个基础。TypeScript 是 JavaScript 的超集。ES2015 是 ES5 的改进。知道关系可以让我们更容易学...
ES6转ES5
陈厚伯的博客
05-17 2387
ES6转ES5 一.ES6简介 ECMAScript2015，更新语法、规则、功能 浏览器对ES6的支持程度并不是很好，如果写了ES6的代码，需要运行在浏览器上的时候，需要将ES6的代码转成ES5的代码去浏览器上运行。 NodeJS平台是可以支持绝大部分的ES6的新内容。 二.安装nodejs 可以在我的云盘下载：https://pan.baidu.com/s/1jKKPefEwSlxoOQ7xR...
ES5新特性
weixin_34075268的博客
06-20 233
ES5 ECMAScript5.0正式版规范发布于2009年，（e...
ES5和ES6
lff18277233091的博客
01-24 443
ES5和ES6 我们所说的 ES5 和 ES6 其实就是在 js 语法的发展过程中的一个版本而已 比如我们使用的微信 最早的版本是没有支付功能的 随着时间的流逝，后来出现了一个版本，这个版本里面有支付功能了 ECMAScript 就是 js 的语法 以前的版本没有某些功能 在 ES5 这个版本的时候增加了一些功能 在 ES6 这个版本的时候增加了一些功能 因为浏览器是浏览器厂商生产的...
ES6 第一天
ILove_bugs的博客
10-26 396
let和const命令 ES6 新增了let命令，用来声明变量。 ES6新增了const命令用来声明一个只读的常量。 2.1 let命令 2.1.1 基础用法 2.1.2 let命令特点【重点】 let不存在变量提升与暂时性死区 代码案例： <script> //var有变量提升 console.log(age); var age = 20; ​ //let不存在变量提升 ...
es5 js日期格式化
durex_er的博客
11-12 1412
起因：因特殊原因不能用es6语法进行日期格式化所以format无法使用 例: rec.生日 = 2019-11-12 10:18:15时间格式 我想转换成日期格式，把时分秒去掉。如下： function format(e){ if(e){ var bb = e.getFullYear()+"-"+(e.getMonth()+1)+"-"+e.getDate()...
分别介绍ES5和ES6以及他们的异同点，重点介绍二者之间的区别
07-17
ES5（ECMAScript 5）和ES6（ECMAScript 2015）是JavaScript的两个不同版本。ES5是旧版本，而ES6是新版本，也被称为ES2015。下面是对它们的介绍以及二者之间的区别： ES5： - ES5于2009年发布，是目前广泛支持的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值