ES5..

news/2025/2/7 3:50:45/

一.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 definedconsole.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);//100n = 200;console.log(arguments); // 100  依然是100console.log(n);//200 }

6. eval函数作用域

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

利用它实现 转json

		var n = 10;eval(' "use strict"; var n=20; console.log(n);');//20console.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);//windowconsole.log(this.name);console.log(a,b);// }fn.bind(person,"你好")("大家好");

2).call 的语法

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

    function fn(a,b) {console.log(this);//windowconsole.log(this.name);console.log(a,b);// }fn.call(person,"你好call","2222")

3).apply的语法

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

    function fn(a,b) {console.log(this);//windowconsole.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 initializationlet 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";//indexOfconsole.log(str.indexOf("c") != -1);  //trueconsole.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,默认是windowvar 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实例化


http://www.ppmy.cn/news/369253.html

相关文章

java se 05

java se 05

1&#xff1a;方法重载(理解) (1)在同一个类中&#xff0c;方法名相同&#xff0c;参数列表不同的方法。 参数列表不同&#xff1a;个数不同&#xff0c;数据类型不同 与返回值类型无关。 (2)练习&#xff1a; A:判断哪些和给定的方法是方法重载 B:写4个比较数据是否相等…
阅读更多...
Java-se05

Java-se05

多态 Instanceof关键字 Instanceof 识别该对象是否是该类的类型&#xff0c;是该类类型返回true&#xff0c;反之false。 识别类型&#xff1a;本类和父类 面向对象&#xff1a;封装&#xff0c;继承&#xff0c;多态 常用的类 Java提供API很多类。 基本数据类型封装类 整…
阅读更多...
Java程序设计基础期末复习

Java程序设计基础期末复习

前言 主要是为了应付考试的。 Java基础 1、Java常识 Java是可跨平台的&#xff0c;不会因为操作系统不同而无法运行Java虚拟机负责将字节码翻译成虚拟机所在平台的机器码&#xff0c;让当前平台运行该机器码Java的开发过程&#xff1a;源文件(.java) —Java编译器&#xff…
阅读更多...
订单ID篡改测试-业务安全测试实操(5)

订单ID篡改测试-业务安全测试实操(5)

订单ID篡改测试，登录失败信息测试 实操过程和说明 往期文章： 暴力破解测试-业务安全测试实操(1)_luozhonghua2000的博客-CSDN博客 本地加密传输测试-业务安全测试实操(2)_luozhonghua2000的博客-CSDN博客 Seesion会话超时时间测试-业务安全测试实操(3)_luozhonghua2000的…
阅读更多...
Java SE（十九）：线程

Java SE（十九）：线程

文章目录 Java SE一、多线程什么是进程线程使用场合线程的基本原理Thread类简介Thread类创建线程Runnable实现线程Thread.currentThread方法获取线程信息线程优先级sleep方法yield方法interrupt方法join方法守护线程线程同步的概念Synchronized关键字线程安全API与非线程安全AP…
阅读更多...
使香蕉派 bananapi M5 创建ap热点（软路由）

使香蕉派 bananapi M5 创建ap热点（软路由）

使用banana pi M5 创建ap热点实验可用 1.安装工具 使用 hostapd 和 isc-dhcp-server sudo apt-get update // 更新资源库sudo apt install hostapd //安装 hostapd sudo apt install isc-dhcp-server // 安装isc-dhcp-server##&#xff03;　&#xff11;.&#xff12;…
阅读更多...
库克自愿年薪腰斩/ 华为问界M5 M7降价/ DeepL估值达10亿美金... 今日更多新鲜事在此...

库克自愿年薪腰斩/ 华为问界M5 M7降价/ DeepL估值达10亿美金... 今日更多新鲜事在此...

日报君 发自 凹非寺量子位 | 公众号 QbitAI 芜湖~今天是周五&#xff0c;办公室的年味儿已经越来越浓了。 日报君携小伙伴在此给大家拜个早年。 话说&#xff0c;今天还有哪些科技新鲜事值得一看&#xff1f;下面为您呈上。 库克2023年薪总额将削减超40% 新的一年&#xff0c;苹…
阅读更多...
自动驾驶——智能驾驶辅助/问界M5

自动驾驶——智能驾驶辅助/问界M5

之前在TOP3咨询公司实习&#xff0c;有研究各个tier级别的辅助驾驶现状&#xff0c;现在6年过去了&#xff0c;智能驾驶辅助有了新的发展。 我们这次看看问界M5的辅助驾驶&#xff0c;具体的视频可以参考B站 大家车-YYP对问界的解说 https://www.bilibili.com/video/BV1E94y1…
阅读更多...
最新文章

Copyright @ 2022~2023