ES5 ES6一

一.ES5

ES(ECMA Script) 常见的版本 ES3(最基础版本 所有浏览器都能解析) ES5(2009年12月发布 部分低版本浏览器不能解析) ES6(2015年发布 大部分的不能直接解析)

ES5的增强内容

// 严格模式 es5新增模式
“use strict”  // 表示当前使用的是严格模式 没有书写采用的是怪异模式

严格模式

1. 变量命名必须有修饰符
2. this指向 在函数内部不能指向window 返回undefined
3. 函数内部arguments数组的形参不会改变
4. 不允许在非函数的代码块内声明函数
5. 禁止八进制

数组新增方法

forEach

map

some

every

filter

reduce / reducRight

indexOf()

lastIndexOf()

bind绑定对象this指向

var obj = {
	name: 'jack'
}
// 属于window
var name = {
	name: 'tom'
}
function sayHi () {
	console.log(this.name)
}
sayHi()  // tom
var say = sayHi.bind(obj)
say() // jack bind的返回值也是一个对象

// 绑定this指向-自动执行 第1个参数指定this指向 第2个参数为函数需要的参数-为数组
sayHi.apply(obj, null)

// 绑定this指向-自动执行 第1个参数指定this指向 第2个参数为函数需要的参数-为1个个元素
sayHi.call(obj, null)

二.ES6

ES6诞生于2015年6月 对应函数对象和string 数组做了全套加强

<script type="module">es6代码<script>

命名修饰符

弥补var关键字不足 使我们代码更加规范

1. var声明的是伪全局作用域(变量提升) 不满足于作用域的规则

2. let关键字

   1. 声明的是块级作用域
   2. 同一作用域不能重复声明

   2.1 let作用

   ​ 1.防止全局变量泄露

   ​ 2.防止变量提升带来的覆盖问题

3. const关键字 修饰为常量不可变 定义名建议全大写

   1. 不允许二次赋值
   2. 定义常量时必须赋值

string新增方法

// includes 是否包含，返回boolean类型
str.includes()

// startWith 开头是否包含 第2个参数表示开始的下标-默认是0
str.startWith()

// endWith 结尾是否包含 第2个参数表示结束的下标-默认是0
str.endWith()

// repeat 重复n次
str.repeat(n)

数组新增静态方法和高阶函数

<ul>
    <li></li>
    <li></li>
</ul>
<script>
// Array.from() 将伪数组转为数组
var liList = document.querySelectAll('li')
Array.from(liList)
</script>

// Array.of() 将对应一组数据转为数组
var arr = Array.of(1, 3, 4, 5)

// find 高阶函数-参数是函数 返回第1个匹配的元素
var arr = [3, 5, 6, 7, 1]
arr.find(function (item, index, arr) {
    return item == 'a' 
})

// findIndex() 高阶函数-参数是函数 
arr.find(function(item, index, arr) {
    return item == 5
})

循环新增内容

var obj = {
    name: 'jack',
    age: 18,
}
var arr = [33, 44, 11, 22, 66]

// for in 遍历对象
for (var item in obj) {
    console.log(item)   // 遍历对象取到键
    console.log(obj[item])
}

for (var item in arr) {
    console.log(item)  // 遍历数组取到下标，存在一定问题增删会改变下标 不建议使用
}

// for of 遍历数组
for (var item of arr) {
    console.log(item)   // 遍历数组取到值 不能遍历没有迭代器的对象
}

/* Object对象方法 */
// Object.entries(obj) 获取每个元素 包含键和值 返回1个二维数组
// Objec.keys() 获取对象的所有键
// Object.values()  获取对象所有值
for (var kv of Object.entries(obj)) {
	console.log(kv)  // [key, value]  二维数组
}

function加强

对应默认参数 (支持没传值的时候有1个默认值)

// 如果没传name默认值是'hello' 后续封装函数一定要用到
function sayHi (name = 'hello') {
	console.log(name)
}

箭头函数

// 箭头函数 匿名函数
var fn = function() {  // 匿名函数
    console.log('sayk')
}
fn()  //调用匿名函数
var sayhi = () => {  // 箭头函数
    console.log('sayk')
}
sayhi()

// 箭头函数 1个形参可以省略()
// 函数只有1句代码 {}可以省略
var say = name => console.log(name)

// 当你需要return数据的时候 函数只有1句代码 return也可以省略
var sayHi = name => name

1. 箭头函数没有this 指向父级作用域this
2. 没有arguments伪数组

拓展运算符

// ... 打开数组 需要的时候默认会用','分割
var newArr = [...arr, ...arr1, arr2]
console.log(...[a, b, c])  // a b c  一般不会有','

解构对象

var obj = {
	name: '王五',
	age:  19,
}
// 解构 减少obj.
var {name, age, sex} = obj  // 比对obj是否有相同的属性
 如果没有返回undefined, 有就返回对应的值
console.log(name)  //’王五'
console.log(age)  // 19
console.log(sex)  // undefined