ES5..

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量263 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pms19990828/article/details/125387071
版权

一.ES5

在2009年推出的新的语法

1).严格模式

使用use strict,它又分为全局严格和局部严格

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

1).全局严格
  		// "use strict";//全局严格模式
        function fn1() {
    
            console.log(this); //undefined
        }
        fn1()

        function fn2() {
            console.log(this); //undefined
        }
        fn2()
2).局部严格
 		function fn1() {
            "use strict"; //局部严格模式
            console.log(this); //undefined
        }
        fn1()

        function fn2() {
            console.log(this); //window
        }
        fn2()

2.严格模式的注意事项

1). 使用变量必须使用 ‘关键字’ (var let const)

2). 禁止函数内的this指向全局对象 window

3). 禁止使用8进制, (不要写0开头的数字)

4). 不允许在非函数的代码块内声明函数

5). arguments与形参不同步 (不一致)

6). eval函数作用域

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

1). 声明变量使用关键字(var let const)
        "use strict";
        myname = "刘德华";  //ReferenceError: myname is not defined
        console.log(myname);
2).禁止函数内的this指向全局对象 window
  "use strict";   
   function fn() {
            console.log(this); //undefined
   }
  fn()
3).禁止使用8进制, (不要写0开头的数字)
"use strict";
 var a=099;
console.log(a);
//Uncaught SyntaxError: Decimals with leading zeros are not allowed in strict mode.
4).不允许在非函数的代码块内声明函数
  "use strict";
        if (true) {
            function fn() {
                alert(123);
            }
        }

  fn(); //Uncaught ReferenceError: fn is not defined
5.arguments与形参不同步 (不一致)
        "use strict";
        function fn(n) {
            console.log(n);//100
            n = 200;
            console.log(arguments); // 100  依然是100
            console.log(n);//200 
        }
6. eval函数作用域

eval()函数的作用,是把字符串解析成js代码

利用它实现 转json

		var n = 10;
        eval(' "use strict"; var n=20; console.log(n);');//20
        console.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); //没有被删除,还会报错

3.严格模式的好处

消除了代码一些不合理的地方

保证了代码的安全

提高了代码运行速度

二 ES5 bind 和call,apply

bind 是用于改变函数内部this的指向,它不会立即执行函数

call 是用于改变函数内部this的指向,它会立即执行当前函数,它有多个参数 (推荐使用,具体效率高于apply)

apply 是用于改变函数内部this的指向,它会立即执行当前函数,第2个参数是数组

1).bind 的语法

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

        function fn(a,b) {
            console.log(this);//window
            console.log(this.name);
            console.log(a,b);// 
        }
        fn.bind(person,"你好")("大家好");
2).call 的语法

有多个参数,会自动执行函数

    function fn(a,b) {
            console.log(this);//window
            console.log(this.name);
            console.log(a,b);// 
   }
  fn.call(person,"你好call","2222")
3).apply的语法

第2个参数是一个数组,会自动执行函数

    function fn(a,b) {
            console.log(this);//window
            console.log(this.name);
            console.log(a,b);// 
    }
   fn.apply(person,["你好apply","2222"])

4.与this相关的场景有哪些? (重点)

1.函数内部的this,默认是window

2.事件绑定函数,内部的this,默认是事件的绑定者

3.对象内部函数里头的this,指向当前的对象

4.定时器,延时器里的this,默认始终是window

5.bind,call,apply会改变this的 指向

6.严格模式下,函数内部的this,指向undefined

7.箭头函数内部的this,指向上下文对象(环境变量)

8.new 会改变构造函数内部this的指向

三.ES5数组的高阶函数

  1. forEach 只能做遍历,不会被中断,可以异常结合try..catch..finally重点

  2. Map 能做遍历,返回的是一个数组

  3. some 只要有一个条件满足,就返回true,默认返回false

  4. every所有的提交满足,才返回true,否则返回false

  5. filter 返回条件满足的成员是 一个数组

  6. reduce 一个参数是一个函数,函数内部有 pre,cur,index,arr 根据函数内部的retrun返回指定结果

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

四.ES6

ES6又称之为 EcmaScript 2015 ,因为是2015发布

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++) {
            oBtns[i].onclick = function () {
                console.log(i); //下标解决了
            }
   }

2).const 常量,

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

  • 如果声明的变量的值是引用类,可以修改值,不能修改类型

值类型

  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";
        //indexOf
        console.log(str.indexOf("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*100;
  });
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: "周杰伦", age: 18 },
            { id: 3, name: "蔡徐坤", age: 29 },
            { id: 4, name: "吴彦祖", age: 33 },
        ]
        var strName = "杰"
        var person = oList.find(function (item) {
            return item.name.includes(strName)
        })
        console.log(person);

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

        //删除 带 '杰' 那个人的信息
        // splice(index,1);
        var oList = [
            { id: 1, name: "刘德华", age: 20 },
            { id: 2, name: "周杰伦", age: 18 },
            { id: 3, name: "蔡徐坤", age: 29 },
            { id: 4, name: "吴彦祖", age: 33 },
        ]
        var strName = "杰"
        var index = oList.findIndex(function (item) {
            return item.name.includes(strName)
        })
        oList.splice(index, 1);
        console.log(oList);

4. ES6-Function新增

4.1 函数的默认参数

    function sayHello2(name='qianfeng'){
          document.write(`Hello ${name}`);  //注意引号
    }

4.2 箭头函数（重点）

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

1.1计算2个数的和 普通函数
  		function calc(a, b) {
            return a + b;
        }
        var res = calc(10, 20);
        console.log(res);
1.2计算2个数的和 箭头函数
  	  var calc = (a, b) => {
            return a + b;
        }
        var res = calc(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返回一个对象的普通的升级写法
    function set(name) {
            return { name };
    }
3.3返回一个对象的箭头函数
var set = name => ({ name });
 console.log(set("abc"));
4.箭头函数常见写法
 		var arr = [11, 22, 33, 44];
        //升序
        arr.sort((a, b) => a - b);
        //降序
        arr.sort((a, b) => b - a);
        // 每个数放大10被
        arr.map(item => item * 10);
        ...

5.箭头函数的this指向（重点）

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

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

在事件里,默认也是window

        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改变

注意:

1.箭头函数内部的this指向,不会被bind,call和apply改变

2.箭头函数,不能被new实例化

it shuai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES5及ES6
qq_64395787的博客
06-21 132
ES5与部分ES6
ES5和ES6
wangchuan_long的博客
02-13 199
ES5和ES6 我们所说的 ES5 和 ES6 其实就是在 js 语法的发展过程中的一个版本而已 比如我们使用的微信 最早的版本是没有支付功能的 随着时间的流逝，后来出现了一个版本，这个版本里面有支付功能了 ECMAScript 就是 js 的语法 以前的版本没有某些功能 在 ES5 这个版本的时候增加了一些功能 在 ES6 这个版本的时候增加了一些功能 因为浏览器是浏览器厂商生产的 ECMAScript 发布了新的功能以后，浏览器厂商需要让自己的浏览器支持这些功能 这个过程是需要时间的 所
九大ES5特性，巩固你的JavaScript基础
青轩桃李能几何，流光欺人忽蹉跎
08-27 712
在编程中，函数是一段可重复使用的代码块，用于执行特定的任务或计算。通过函数的定义和调用，我们可以把代码分成小块，使得程序结构更清晰，易于维护和扩展。函数名称：给函数取一个可识别的名称，用于后续的函数调用。参数列表：定义函数需要接收的参数，可以是零个或多个参数。每个参数都有一个名称和类型。函数体：函数体是函数的实际执行部分，包含一系列的语句和算法，用于完成特定的任务。返回值：函数可以选择性地返回一个值作为结果。返回值的类型可以是任意类型，也可以是空。
Javascript的重要版本之一——ES5新特性总结
小宇，要努力敲代码
03-03 710
ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准的修正。 与HTML5规范进程本质类似，ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。
ES5特性
linchaocsdn的博客
09-03 1150
Es5特性一、严格模式1、禁止给未声明过的变量赋值2、静默失败升级为错误提示3、普通函数中this不再指向window，而是指向undefined4、禁用了arguments.callee二、保护对象1、保护属性1）、重新定义属性配置（1）、禁止修改属性（2）、禁止for...in... 遍历属性，实现半隐藏（3）、禁止删除属性（4）、一次性设置==多个属性==的配置2）、访问器属性——用来自定义规则保护属性值（1）、将需要设置自定义规则保护的属性取别名（想办法隐藏）（2）、设置访问器属性，保护和监控属性（
ES5与ES6中数组find、findIndex，数组如何查找
单车去旅行的博客
12-04 4229
一、ES5中的查找 1.Array.some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。 语法： arr.some(callback(element[, index[, array]])[, thisArg]) callback 用来测试每个元素的函数，接受三个参数： element 数组中正在处理的元素。 index...
ES5简介
lz010123的博客
04-21 2027
ES5 es5严格模式 “use strict”; 声明严格模式 n = 123 console.log(n); //这个里面会直接报错 采用了严格模式后对应的内容 需要更加规范 不支持八进制 //eslint 代码检查器 //怪异模式 n = 123 console.log(n); 1、不可以省略var声明变量 "use strict"; //声明严格模式 n = 123 //报错 console.log(n); 2、禁止函数使用this关键字指向全局变量 <body> &
webmssdk.es5.js插桩之后的文件
03-08
该文件纯占位，无意义
Es5.rar_es5
09-24
在本压缩包“Es5.rar_es5”中，我们聚焦于JavaScript的一个重要版本——ECMAScript 5（ES5）。这个版本是JavaScript编程语言的第五个正式版本，它在2009年发布，对现代Web开发产生了深远的影响。在这个“Robotic ...
ES5.md
06-19
ES5
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
10-15
主要介绍了详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
flume-es5.X依赖.zip
03-23
《Flume-ES5.X依赖详解与自定义Sink实践》 在大数据处理领域，Apache Flume是一个被广泛使用的工具，用于高效、可靠地收集、聚合和移动大量日志数据。而Flume-ES5.X是Flume的一个版本，它特别针对Elasticsearch 5.x...
es5.github.io:带注释的ECMAScript 5.1
05-16
使用GitHub Web UI并将其签出以创建本地es5-spec工作区。 使用以下两个步骤在工作区中创建注释。 为了使一个注释，例如，ES5规范的第10.2.1.2，创建在一个文件anno当地ES5规格的工作区命名的子目录x10.2.1.2....
ES5 语法详解
彼岸舞的博客
08-16 463
ES5语法详解 全称 : ECMAScript 2019年发布 严格模式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <bod...
ES6新特性
weixin_30826761的博客
03-24 192
什么是ES6 ECMAScript6在保证向下兼容的前提下，提供大量新特性，目前浏览器兼容情况如下： ES6特性如下： 1.块级作用域 关键字let, 常量const 2.对象字面量的属性赋值简写（property value shorthand） 1 var obj = { 2 3 // __proto__ 4 5 __proto__: the...
认识 ES5
LJDbk的博客
03-20 478
ES5研究两个特性 1. es5新增的语法 - 严格模式 2. es5新增了一些数组的方法 严格模式 1. 默认是没有开启严格模式的 2. 严格模式就是js中的一种语法，一旦使用这种语法，就等于我们的代码，使用了严格模式。 3. 开启了严格模式以后，我们的代码更加规范： 4. 在全局/局部的最上面，添加字符串： 'use strict' 5. 全局中使用可以规范到局部/局部中开启严格模式，只能规范局部 严格模式的特性 * 不允许省略var定义变量 * 不允许函数参数同名 * 不允许普
lambda 注意点
ryuali2010的专栏
07-19 790
(lambda  (parameter)  body) Lambda表达式可以视为特殊的函数名，名字本身就直接描述函数的用途。这就是为啥可以用带#'的lambda表达式来代替一个函数名。同时他跟单纯的函数名有区别。 比如你直接输入plot，他怎么会知道这个就是个函数名字呢？所以会说plot unbound，你必须得指明它是一个函数对象#' 注意点：下面这个例子也说明了，无论你la
ES5
isxixi的博客
11-20 2468
建议看张鑫旭的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
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 1134
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
lib.es5.d.ts中的test
05-14
`lib.es5.d.ts` 是 JavaScript 的标准库文件，其中 `test` 不是一个函数或方法，而是一个类型定义，用于描述正则表达式的 `test` 方法的类型。正则表达式的 `test` 方法用于测试一个字符串是否匹配某个正则表达式，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值