day15 ES5和ES6

2023-02-28 06:00| 来源: 网络整理| 查看: 265

JavaScript构成

BOM 操作浏览器对象

DOM 操作文档对象

ECMAScript 基础语法

ECMAScript介绍

ECMAScript是对应js的基础语法，里面包含js中除dom操作和bom的所有内容。ECMAScript主要拆分为俩个单词 ECMA (欧洲计算机协会) 、Script (脚本)。ECMAScript 简称（es）他主要的版本有 ES3、ES5、ES6...对应的版本管理以及切换是由不同兼容问题产生的。低版本的兼容就比较好，高版本的兼容性较差。在项目中我们可以使用bable.js来进行生成代码的版本切换（后续框架中必然使用的）。ES3为基础版本他支持市面常用的所有浏览器，ES5支持市面上大多数浏览器, ES6只支持高版本浏览器。

ECMAScript的版本

ES3 基础版本（大多数的基础内容都属于es3）

ES5 (ES2009) 他在es3上增强对应的规范性以对应的方法

ES6 (ES2015) 他在es5的基础上扩展了对应的类及对应的处理

ES5新增内容

概述：

我们在平常书写代码的时候其实没有多大的规范性，我们可以自由发挥（可以声明任何的变量且可以不写声明的关键词），平常的这种模式就被称为怪异模式（平常书写模式），在此之上诞生的具备规范性的模式就被称为严格模式（框架的底层设计）。主流浏览器现在实现了严格模式。但是不要盲目地依赖它，因为市场上仍然有大量的浏览器版本只部分支持严格模式或者根本就不支持（比如 IE10 之前的版本）。严格模式改变了语义。*依赖这些改变可能会导致没有实现严格模式的浏览器中出现问题或者错误。谨慎地使用严格模式，通过检测相关代码的功能保证严格模式不出问题。最后，记得*在支持或者不支持严格模式的浏览器中测试你的代码。如果你只在不支持严格模式的浏览器中测试，那么在支持的浏览器中就很有可能出问题，反之亦然。

严格模式的书写

书写在首行

使用use strict来声明

'use strict' hello = '你好' console.log(hello) //报错

严格模式的特性

声明变量必须使用var关键词声明

函数中的this不允许指向全局对象（global）（window）

arguments中的实参不同步

函数名的参数唯一

函数声明只处于上下文对象中

禁止使用八进制方法

将一切不规范的地方全部抛出错误

数组新增的高阶函数

高阶函数就是以函数作为参数的函数被称为高阶函数

新增的高阶函数有

forEach 遍历 (返回值为void)

var arr = ['a','b','c','d'] //传入的函数为操作函数 //传入的函数有三个参数分别为遍历的值遍历的下标遍历的数组 arr.forEach(function(value,index,array){ console.log(value,index,array) })

map 遍历（返回值是数组且这个数组个数和遍历的数组个数一致）

//map的使用和forEach是一样的唯一的区别在于forEach map有返回值 // map返回的是一个数组这个数组的个数一定和你遍历的数组个数是一样的 var arr=[1,2,3,4,5,6,7,8] var nums = arr.map(function (v, i, array) { if (i % 2 == 0) { return v } }) console.log(nums)//[1,undefind,3,undefind,5,undefind,7,undefind]

filter 过滤（返回的是一个数组）

//filter用于过滤里面传入的对应的函数一定返回值boolean true就是添加的返回的数组如果是 false就不添加 //v表示对应的值 i表示下标 array表示数组 var filterArr = ['a', 'b', 'c', 'ab'].filter(function (v, i, arr) { //条件返回值boolean return /a/.test(v) }) console.log(filterArr)//['a','ab']

every 每个都满足条件返回true （传入的函数的必须返回的boolean）

//every 当前是否每个都满足条件 var is = ['1', '2', '3', '4'].every(function (v, i, arr) { return v > 3 }) console.log(is) //false

some 只有有一个满足条件返回false （传入的函数的必须返回的boolean）

//some当前是否存在满足条件的 var is = ['1', '2', '3', '4'].some(function (v, i, arr) { return v > 3 }) console.log(is)//true

reduce 计算的 (返回的是一个值（一般情况下为number或者string）)

示例求和

// reduce求和 var number = [10, 2, 3, 13, 41, 34, 12].reduce(function (prev, current, i, arr) { return prev + current }) console.log(number) //数值相加为1115

示例求偶数位的和

//reduce 第一个参数为处理函数第二个参数为初始值 (如果没有设置默认为第一个如果设置那么就对应设置的值) //prev前面的结果值（默认为第一个的值）如果的参数设置了那么prev值为这个设置值 //current 现在的值（默认从第二个开始）设置了第二个参数那么默认从第一个开始 //i 默认从下标为1开始设置了第二个参数那么下标从0开始 var number = [10, 2, 3, 13, 41, 34, 12].reduce(function (prev, current, i, arr) { //判断是否为偶数位 console.log(i) if (i % 2) { prev += current } return prev },0) console.log(number)//49

参数讲解

第一个为处理函数处理函数里面存在四个参分别为前面的结果值当前遍历的值当前遍历的下标

当前遍历的数组

第二个为初始值如果没有指定那么会将第一个值赋给前面的结果值默认从下标1开始

reduceRight 从右开始计算

//reduceRight 从右往左算 var str = ['a','b','c','d','abc','def'].reduceRight(function(prev,current){ return prev+current },'hello') console.log(str) //hellodefabcdcba

高阶函数实现

forEach

var arr = [1,2,3,4] //封装myForEach function myForEach(callback) { if (typeof callback != 'function') { throw new Error('参数错误') } //遍历执行处理函数 for (var i = 0; i < arr.length; i++) { callback(arr[i], i, arr) } } //调用 myForEach(function (v, i, arr) { console.log(v, i, arr)

map

//封装myMap function myMap(callback) { if (typeof callback != 'function') { throw new Error('参数错误') } //返回的内容 var results = [] //遍历执行处理函数 for (var i = 0; i < arr.length; i++) { results.push(callback(arr[i], i, arr)) } return results } console.log(myMap(function(v){return v+'hello'}))

every

//封装myEvery function myEvery(callback) { if (typeof callback != 'function') { throw new Error('参数错误') } //遍历执行处理函数 for (var i = 0; i < arr.length; i++) { //只要一个是false那么直接返回false if (!callback(arr[i], i, arr)) { return false } } return true } console.log(myEvery(function(v){return v= 4 }))

filter

//封装myFilter function myFilter(callback) { if (typeof callback != 'function') { throw new Error('参数错误') } //准备一个返回的数组 var results = [] //遍历执行处理函数 for (var i = 0; i < arr.length; i++) { //当里面返回的true填入到数组 if (callback(arr[i], i, arr)) { results.push(arr[i]) } } return results } console.log(myFilter(function(v){return v>2}))

reduce

//myReduce function myReduce(callback, value) { if (typeof callback != 'function') { throw new Error('参数错误') } //value被传递的情况 var index = 0 var previous = value //如果value值没有被传递那么我的遍历从下标1开始初始值为对应的下标为0的元素 if (typeof value == 'undefined') { //判断是否为空数组 if(arr.length == 0){ throw new Error('Reduce of empty array with no initial value') } index = 1 previous = arr[0] } //遍历计算值 for(;index2 }) console.log(v) //4 //findIndex 查找下标的方法查找不到返回-1 var i = [1,2,3,4].findIndex(function(v,i,arr){ return v{return 1} var fn = () =>1 console.log(fn())

箭头函数的特性

没有this 没有arguments

箭头函数没有原型（prototype）（不能被new）

字面量简写

属性简写（属性值为变量属性值和属性名名字一致的情况下）

函数简写（删除对应的:function）

var name ='张三' var age = 18 //原本写法 var obj = { name: name, age: age } //简写属性值一定是变量属性名和属性值一致 var obj = { name, age } //不支持 name:'name'这种简写属性值不为变量 console.log(obj) //原本写法 var obj = { sayHello:function(){ console.log('hello') } } //对象中的函数简写 var obj = { sayHello(){ console.log('hello') } } obj.sayHello()

解构赋值

解构的概述就是将对应的对象或者数组解除对应的构造暴露其中的内容。

对象的解构（快速提取对象中的属性根据属性名提取）

基础写法

var {key,key1} = {key:value,key1:value1} var obj = {name:'jack',age:18} obj.name ob.age //简化写法使用解构赋值的形式直接获取里面的name和age var {name,age} = {name:'jack',age:18} console.log(name) console.log(age)

数组的解构（根据对应的顺序）

基础写法

var [变量名,变量名1...] = [值,值1] //数组的解构是对应的顺序的 var [a,b,c] = [1,2,3] console.log(a)

扩展运算符 ...

可以规定对应的参数不受限制自动将对应的内容封装为一个数组

//接收不限制的参数 function sum(...args) { //自动将对应的数据组装成一个数组 //args是一个数组 console.log(args) //遍历args数组进行计算 return args.reduce((prev,current)=>prev+current) } console.log(sum(1,2,3,4,5,1,2,1,2,1)) //数组分割符 , es5的 var arr = [,,,,,] console.log(arr)

打开对应的数组

// 利用...打开对应的数组 var arr = [{name:'张三'},{name:'李四'}] var newArr = [...arr] console.log(arr,newArr,newArr == arr) //俩个数组组成一个数组 var arr1 = [1,2,3] var arr2 = [4,5,6] var newArr = arr1.concat(arr2) console.log(newArr) var newArr = [...arr1,...arr2] //对应的方法传参里面自动添加, console.log(...arr1)

打开对应的对象

//利用...来打开对象 var obj = {name:'jack',age:18} var newObj = {...obj} console.log(obj,newObj,newObj == obj)

【本文地址】

day15 ES5和ES6

day15 ES5和ES6

今日新闻

推荐新闻