ES5或ES6

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量133 收藏
点赞数
分类专栏： js 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huan12306/article/details/125292771
版权

ES5或ES6 上

ES(ESMA SCRIPT) 常见的版本ES3(最基础的版本 所有的浏览器都能解析) ES5(部分低版本浏览器不能解析) ES6(大部分的不能直接解析)

ES5
es5的增强内容

严格模式(es5新增的一个模式)

1.变量命名必须要有修饰符

2.函数内部this不能指向window

3.函数内部arguments与形参不同步

4.禁止在非函数代码块内声明函数

5.禁止八进制

6). eval函数作用域

7). delete 删除window的属性报错

1.声明变量使用关键字(var let const)
"use strict"
myname = "刘德华";//
cosole.log(myname)
2.禁止函数内的this指向全局对象window
"use strict"
function fn(){
    console.log(this) //underfined
}
fn()
3.arguments与形参不同步(不一致)
"use strict"
function fn(n){
	console.log(n) //100
	n = 200
	console.log(argumnets) //100 arguments与形参不同步(不一致)
	console.log(n)//200
}
fn(100)
4.禁止使用八进制(不要写0开头的数字)
"use strict";
 var a=099;
console.log(a);
//Uncaught SyntaxError: Decimals with leading zeros are not allowed in strict mode.
5.不允许在非函数的代码块内声明函数
"use strict"
if(true){
	function fn(){
	 alert(123)
	}
}
fn() //Uncaught ReferenceError: fn is not defined
6.eval函数作用域

eval()函数的作用 把字符串解析成js代码 == JSON.parse 可以利用它实现转JSON

var n = 10;
eval(' "use strict"; var n = 20; console.log(n);')//20
cosole.log(n) //10
7.delete 关键字报错
"use strict"
var a = 100
console.log(window.a)
delete window.a//Uncaught TypeError: Cannot delete property 'a' of #<Window>
console.log(window.a)//没有被删除,还会报错
使用"use strict" 他又分为全局严格和局部严格

这句话必须放在代码第一行

  • 全局严格
"use strict" //全局严格模式
function fn(){
	console.log(this) //undefined

}
fn()
function fn2(){
	console.log(this) //undefined

}
fn2()
  • 局部严格
function fn(){
    "use strict"//局部严格
    console.log(this) //undefined
}
fn()
function fn2(){
    console.log(this) //window
}
fn2()
数组加强

indexOf 根据对应的内容找下标 找不到返回-1

lastindexOf

高阶函数

forEach 遍历(遍历每个结果做相关操作)

map 遍历 return(遍历每个结果做相关操作 返回一个新的数组)

some 有符合的内容返回Boolean

every 所有都符合 返回Boolean

rudece reduceRight 计算(遍历每个值 做相关计算 返回结果)

​ 第一个参数是一个函数,函数内部有pre cur index arr 根据函数内部的return返回指定结果

​ 第二个参数是pre的初始值

filter 过滤 (遍历每个结果找到返回条件的结果 返回数组)

  • bind是用于改变函数内部this的指向 不会立即执行
  • call 是用于改变函数内部this的指向 会立即执行当前参数 它有多个参数(推荐使用,具体效率高于apply)
  • apply 是用于改变函数内部this的指向 会立即执行当前参数 第二个参数是数组
bind绑定this指向
var obj = {
	name:'jack'
}
//属于window
var name = "tom"
function hi(){
    //this指向window
    console.log(this.name)
}
hi() //打印tom
//bind方法 属于object的方法
//把hi绑定给obj  hi里面的this指向对应的obj
var bindFn = hi(obj)
//bind 的返回值也是一个对象
hi()//打印jack

只改变函数内部的this指向 不会执行该函数

var person = {
    name: "刘德华"
}

function fn(a, b, c) {
    console.log(this)//函数内部的this指向window
    console.log(this.name)
    console.log(a, b, c)
}
fn.bind(person, "你好", "你们好", '大家好')() //不会自动执行 需要加小括号
apply call方法
var obj = {
    name: 'jack'
}
var name = "tom"

function fn() {
    console.log(this.name)
}
fn()
//绑定this指向 自动执行方法 第一个参数指定的this指向 第二个参数为函数需要的参数 传递的参数为数组
fn.apply(obj,null)//可以添加第二个参数  fn.apply(obj,[name,age]) 在fn()要写相应的参数以及要打印
//第一个参数指定的this指向 第二个参数为函数需要的参数 传递的参数为一个个元素
fn.call(obj,null) //例如fn.call(obj,name,age)

function fn(a,b) {
    console.log(this);//window
    console.log(this.name);
    console.log(a,b);// 
}
fn.call(person,"你好call","2222")
fn.apply(person,["你好apply","2222"])
**setInterval 和setTimeout 默认情况下,内部函数的this指向window
  • 与this相关的场景有哪些(重点)
  1. 函数内部的this,默认是window
  2. 事件绑定函数,内部的this,默认是事件的绑定者
  3. 对象内部函数里头的this,指向当前的对象
  4. 定时器,延时器里的this,默认始终是window
  5. bind,call,apply会改变this指向
  6. 严格模式下,函数内部的this,指向undefined
  7. 箭头函数内部的this,指向上下文对象(环境变量)
  8. new会改变构造函数内部this的指向

ES6

es6 对于函数对象和string 数组做了加强

命名修饰符

1).let块级作用域

  • 相同的变量名称,只能被声明一次
let myname="刘德华";
let myname="周杰伦"; //相同的变量名称,只能被声明一次
// Uncaught SyntaxError: Identifier 'myname' has already been declared
  • 如果在代码块内声明的变量,只能在代码块内使用
{
    let myname = "刘德华";
}
 console.log(myname);//Uncaught ReferenceError: myname is not defined
  • 防止变量的提升(预编译)
  function fn() {
      console.log(myname) //Cannot access 'myname' before initialization
      let myname = "蔡徐坤";
      console.log(myname);
 }
  fn();
  • 使用let解决下标问题
  var oBtns = document.querySelectorAll("button");// 5 
        for (let i = 0; i < oBtns.length; i++) {//用var打印全是5 用let会顺序打印
            oBtns[i].onclick = function () {
                console.log(i); //下标解决了
            }
   }

2).const 常量 (块状作用域) 定义建议写大小写

修饰常量,常量是不可变的,不允许二次赋值 定义的时候必须要赋值 生命的也是一个快状作用域

  1. 如果声明的变量的值是值类型,不可以被修改

  2. 如果生命的变量的值是引用类,可以修改值,不能修改类型

    值类型

    const COOLMAN = "老罗";
COOLMAN = "谭杨帆" //常量 不可以修改
console.log(COOLMAN)   //Uncaught TypeError: Assignment to constant variable.

    引用类型

    const COOLMAN = {
	name:'换',
	sex:'男',
	age:'18'
}
COOLMAN.name = "胡安"
console.log(COOLMAN) //胡安 类型没有被改变,对象的属性或者方法可以被修改

const 与let的相同点

可以避免变量的提升

也具备块级作用域

同一个变量只能声明一次

2.ES6-String新增方法

2.1 字符串的方法

includes(): 返回布尔值,表示是否找到了参数字符串

var str = "abc123"
console.log(str.indeOf("c") !=-1)//true
console.log(str.includes('c'))//true

startsWith(): 返回布尔值,表示参数字符串是否在源字符串的头部

var str = "abc123"
 console.log(str.startsWith("a"));//true

endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

var str = "abc123";
console.log(str.endsWith("3"));

repeat()： 返回一个新字符串，表示将原字符串重复n次.

var str = "我爱你!";
console.log(str.repeat(100)); // 100次

2.2 字符串模板

       var chars="不"
       var str=`今天天气很${chars}好!`; 
       console.log(str);// 今天天气很不好!

3.ES6-Array新增

3.1 Array.from() 把伪数组转换为数组

第一个参数 伪数组

第二个参数 是一个回调函数,该回调函数内部写逻辑并且返回内容

var arg = {
    0:100,
    1:200,
    2:300,
    "a":99,
    length:3
}
var arr = Array.from(arg,function(item){
    console.log(item)
    return item*10
})
console.log(arr)  //[10000,20000,30000]

3.2 Array.of()把一组值转换成数组

   var arr = Array.of(1, 3, 5, 7, 9);

     console.log(arr);

3.3 find 根据条件,返回值

var oList = [
	{id:1,name:'一',age:20},
	{id:2,name:'ff',age:22},
	{id:3,name:'we',age:24},
	{id:4,name:'rg',age:26},
]
var strName = "f"
var person = oList.find(function(item){
    return item.name.includes(strName)
})
console.log(person) //会返回符合条件的值

3.4 findIndex 根据条件,返回值的下标

var oList = [
	{id:1,name:'一',age:20},
	{id:2,name:'ff',age:22},
	{id:3,name:'we',age:24},
	{id:4,name:'rg',age:26},
]
var strName = "f"
//var person = oList.findIndex(function(item){
//    return item.name.includes(strName)
//})
//console.log(person)  //1
 var index = oList.findIndex(function (item) {
            return item.name.includes(strName)
        })
        oList.splice(index, 1);
        console.log(oList); //删除

4. ES6-Function新增

4.1 函数的默认参数

function fn(name = 'qian'){
	document.write(`hello${name}`)  //注意括号
}

4.2 箭头函数（重点）

箭头函数,又叫做 拉姆达表达式 Lambda,是函数的语法糖,箭头函数一定是一个匿名函数

1.1计算2个数的和 普通函数
function cale(a,b){
	return a + b
}
var res=cale(10,20)
console.log(res)
1.1计算2个数的和 箭头函数

var calc = (a,b)=>{
	return a+b
}
var res=cale(10,20)
console.log(res)
2.1将一个数放大10被的普通函数
    	function show(n) {
            return n * 10
   		  }
2.2将一个数放大10被的箭头函数
     var show = n => n * 10;
3.1返回一个对象的普通函数
function set(name){
	var obj = {}
	obj.name = name
	return obj
}
3.2 返回一个对象的箭头函数
var set = name =>({name})
console.log(set("abc))
4.箭头函数常见写法
var arr = [1,2,3,4,5]
//升序
arr.sort((a,b)=>a-b)
arr.sort((a, b) => b - a);
// 每个数放大10被
arr.map(item => item * 10);

5.箭头函数的this指向(重点)

箭头函数内部的this,默认是根据函数所在的运行函数(上下文对象) , 在window下,this指向window

在定时器和延时器里,默认是window

在事件里,默认也是window

箭头函数的特性

当前只有一个参数 可以省略()

'当前只有一行代码 可以省略()

当前如果只有一行代码 需要返回值 可以省略()

箭头函数里面没有this

箭头函数没有arguments

总结:箭头函数里面的this指向父元素的this

注意:

  1. 箭头函数内部的this指向,不会被bind,call和apply改变
  2. 箭头函数,不能被new实例化
var Person = {
    name:'刘德华',
    showA:function (){
        //console.log(this) //Person 对象里的普通方法的this,指向当前对象
        var fn = ()=>{
            console.log(this) //Person 箭头函数的this,指向上下文对象(环境变量)
        }
        fn()
    },
    showB:()=>{
        //console.log(this) //window,对象里的箭头函数的this,默认是window
        var fn = ()=>{
            console.log(this);//window 箭头函数的this
        }
        fn()
    }
}
Person.showA()
Person.showB()
person.showB.bind(Person)()//箭头函数内部的this指向,不会被bind,call,apply改变
循环的增强

for in 循环(对象)

for of 循环(数组)

//for in 遍历对象
//for of 遍历数组
var obj = {
    name:"jack"
    age:"18"
}
var arr = [1,2,3,4]
//for in
for(var i in obj){//对于对象遍历获取的是key
    console.log(i) //获取key
    console.log(obj[i]) //获取的是value
}
for(var i in arr){ //对于数组遍历拿到是下标(存在一定的问题,不建议使用)
    console.log(i,arr[i])
}
//for of  遍历数组的
for(var item of arr){//遍历的是值
    console.log(item)
}
//对于没有迭代器的对象是不能使用for of来遍历的 迭代器(用于迭代的对象)
//属于对象的方法 Object
//entries() 获取每个元素 包含键和值 keys() 获取所有的键  values()获取所有的值
for(var item of Object.keys(obj)){ //迭代对象
    console.log(item)
}
for(var item of Object.values(obj)){ //迭代对象
    console.log(item)
}
for(var item of Object.entries(obj)){ //迭代对象  entries 返回一个二维数组
    console.log(item)
}
object的方法

keys 获取对象的所有的key

values 获取对象的所有的values

entries 获取对象的所有的键值对象(数组)

function 加强
对应默认参数 (支持没传值的时候 有一个默认值)
//后续在封装函数的时候  一定要用到
function sayHi(name = 'hello',age= '19'){
	console.log(name)
    console.log(age)
}
//如果你没有传值他也会有个默认值
sayHi() //hello 19
//如果你传值的就会将默认值替换
sayHi('jack') //jack 19
sayHi('jack',20) //jack 20
扩展运算符 *

打开对应的数组…

…[a,b,c] ===> a b c

解构(对象)

打开对应的对象(解除构造)提取到里面的值

//对象里面存在n个键值对象
var obj = {
    name:'jack',
    age:18
}
console.log(obj.name)
console.log(obj.age)
//es6新增了对应的解构 减少对应的obj
var {name,age,sex} = obj //称为解构
//得到对应的name 去对比obj里面是否存在相同1的一个属性名叫name 如果没有返回undefined 有就返回这个对应的值
console.log(obj.name) //jack
console.log(obj.age) // 18
console.log(obj,sex) //undefined
var {message} = {
    message:'hello'
    message:'world'
}
console.log(message)//hello
huan12306
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES5及ES6
qq_64395787的博客
06-21 125
ES5与部分ES6
ES5+ES6全部语法包含案例
weixin_55712985的博客
09-08 613
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，ES6是大佬所需，我们没有任何理由不学习ES6，同时也是学习Vue的前置技能
ES5和ES6
lff18277233091的博客
01-24 279
ES5和ES6 我们所说的 ES5 和 ES6 其实就是在 js 语法的发展过程中的一个版本而已 比如我们使用的微信 最早的版本是没有支付功能的 随着时间的流逝，后来出现了一个版本，这个版本里面有支付功能了 ECMAScript 就是 js 的语法 以前的版本没有某些功能 在 ES5 这个版本的时候增加了一些功能 在 ES6 这个版本的时候增加了一些功能 因为浏览器是浏览器厂商生产的...
【web】ES5知识点小结
m0_66112222的博客
10-13 411
es5，js，数据类型
day16(ES5和ES6)
m0_49992474的博客
12-20 681
ES5和ES6 一、ES5严格模式 除了正常运行模式，ECMAscript 5 添加了第二种运行模式：“严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。 1、严格模式的特点 a、消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为; b、消除代码运行的一些不安全之处，保证代码运行的安全； c、提高编译器效率，增加运行速度； d、为未来新版本的Javascript做好铺垫。 "严格模式"体现了Javascript更合理、更安全、更
继承行为在 ES5 与 ES6 中的区别详解
11-29
笔者注：一句话引发的基础知识回炉，基础不扎实，还要什么自行车 最近在看 React 方面的一些文章时，看到了这样一个问题，「为什么每个 class 中都要写 super， super 是做什么的？」, 刚看到这个问题时，直接就...
es6转es5在线转换.txt
04-14
es6转es5在线转换地址，和如何利用babel工具将es6语法转换成es5语法 es6有些语法是目前浏览器无法支持的，所以我们需要转换一下
js定义类的方法示例【ES5与ES6】
10-16
主要介绍了js定义类的方法,结合实例形式分析了javascript ES5与ES6标准下类的定义方法,需要的朋友可以参考下
React中ES5与ES6写法的区别总结
08-30
主要总结介绍了关于React中ES5与ES6的写法区别，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
lambda 注意点
ryuali2010的专栏
07-19 788
(lambda  (parameter)  body) Lambda表达式可以视为特殊的函数名，名字本身就直接描述函数的用途。这就是为啥可以用带#'的lambda表达式来代替一个函数名。同时他跟单纯的函数名有区别。 比如你直接输入plot，他怎么会知道这个就是个函数名字呢？所以会说plot unbound，你必须得指明它是一个函数对象#' 注意点：下面这个例子也说明了，无论你la
ES5
isxixi的博客
11-20 2441
建议看张鑫旭的es5es5新增加： forEach (js v1.6) map (js v1.6) filter (js v1.6) some (js v1.6) every (js v1.6) indexOf (js v1.6) lastIndexOf (js v1.6) reduce (js v1.8) reduceRight (js v1.8) 浏览器支持Opera 11+ Firefox
ES6的Lambda表达式
sinat_27180563的博客
09-04 5199
ES6的Lambda表达式
Javascript Lambda的简单实现
Leolin的专栏
03-19 4997
由来 今早面试看到一题是说使用js实现.net中的where功能，当时脑子里一片空白，只能回来脑补下（本来想将博客放到github及Blogger上，但限于配置麻烦，暂且放这里）。 真心不知道ES6以下的js支不支持 " => "， 后来在chrome上测试下竟然支持，我没有打开chrome对ES6的支持。这是一个简单实现， 主要使用到了eval，暂时没有考虑其性能，同时实现了 se
ES6函数与Lambda演算
weixin_34256074的博客
01-09 359
缘起 造了一个轮子，根据GitHub项目地址，生成项目目录树，直观的展现项目结构，以便于介绍项目。欢迎Star。 repository-tree 技术栈： ES6 Vue.js Webpack Vuex lodash GitHub API 应用涉及到了展现目录树，实现方法不可或缺的一定是递归遍历。进而开启了我对lambda演算的探索发...
JavaScript函数的Lambda简略写法（箭头函数）
英俊帅比林的博客
09-29 4176
JS的箭头函数是函数表达式的简略写法，格式如下： (参数1,参数2,......,参数n) =&gt;{ 具体函数逻辑 } 该表达式相当于定义了如下函数： function(参数1,参数2,......,参数n) { 具体函数逻辑 } 当我们需要使用这个函数的时候，要将创建的函数赋给一个var变量，然后通过变量的名字去调用它 举个例子： &lt;script&gt; //声明箭头函数 v...
学习ES6（六）--函数 Lambda函数（=>） 详解
qq_34975445的博客
04-08 2627
函数是可读，可维护和可重用代码的构建块。使用function关键字定义功能。以下是定义标准函数的语法。 function function_name() { // function body } 要强制执行该功能，必须调用它。这称为函数调用。以下是调用函数的语法。 function_name() 功能分类 函数可以分为返回函数和参数化函数。 返回功能 函数也可以将值与...
ES5..
pms19990828的博客
06-21 252
在2009年推出的新的语法使用,它又分为全局严格和局部严格 2).局部严格 2.严格模式的注意事项 1). 声明变量使用关键字(var let const) 2).禁止函数内的this指向全局对象 window 3).禁止使用8进制, (不要写0开头的数字) 4).不允许在非函数的代码块内声明函数 5.arguments与形参不同步 (不一致) 6. eval函数作用域 eval()函数的作用,是把字符串解析成js代码利用它实现 转json 7).delete 变量 报错 3.严格模式的好
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 117
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 196
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
ES5 和 ES6区别
03-29
ES5 和 ES6 是 JavaScript 的两个版本，两者之间有以下区别： 1. 变量声明方式不同：ES5 使用 var 声明变量，ES6 使用 let 和 const 声明变量。 2. 箭头函数：ES6 引入了箭头函数，简化了函数的写法。 3. 模板字符串：ES6 引入了模板字符串，可以直接在字符串中使用变量和表达式。 4. 类和继承：ES6 引入了 class 和 extends 关键字，使得 JavaScript 可以像传统面向对象语言一样使用类和继承。 5. 解构赋值：ES6 引入了解构赋值，可以方便地从对象或数组中取出值赋给变量。 6. Promise：ES6 引入了 Promise，可以更方便地进行异步编程。 7. 模块化：ES6 引入了模块化，使得 JavaScript 可以像其他编程语言一样进行模块化开发。 总的来说，ES6 引入了很多新的语法和特性，使得 JavaScript 更加现代化、可读性更高、开发更方便。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值