前言
ECMAScript 6（以下简称ES6）是 JS 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JS 语言可以用来编写复杂的大型应用程序，成为企业级开发语言.
ECMAScript 5 (ES5) ：ECMAScript 的第五版，于2009年标准化，该标准已在所有现代浏览器中完全支持。
ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015) :ECMAscript 第 6 版，2015 年标准化。这个标准已经在大多数现代浏览器中部分实现。
一. 变量var/let 和const三者区别
1.ES5声明变量 var
1.1 有变量预解析
1.2 没有块级作用域
2.ES6声明变量 let const
1.1 没有变量预解析
1.2 有块级作用域
3. let与const区别
let : 变量。 可以修改
const:常量. 不可以修改
4.补充:
* 实际开发中, 只要不修改的变量都用const,需要改的时候用let
* 实际开发中,只要不修改的变量都用const,需要修改的时候用let
* 变量域:1.全局域{}外面的 2.局部域function里面的 3.块级域{分支和循环语句}里面的
二. 对象和函数的解构赋值
1.对象 解构赋值 ： 变量赋值的简写(解构精髓：当变量名 和 对象属性值一致的时候，只需要写一个)
1. 取出对象的属性 赋值 给 变量
let { name,age,sex } = obj
let { name,age,sex } = obj
2. 取出变量的属性 赋值 给 对象
let obj = {
name: '张三',
age: 20,
sex: '男'
}
1. 取出对象的属性 赋值 给 变量
ES5
let name = obj.name
let age = obj.age
let sex = obj.sex
let score = obj.score
ES6
let { name, age, sex, score } = obj
console.log(name, age, sex, score)//'张三',20,'男',undefined
2. 取出变量的属性 赋值 给 对象
let username = 'admin'
let password = '123456'
ES5
let p = {
username:username,
password:password
}
ES6
let p = {
username, // username:username
password,
}
2.函数参数解构: 当函数参数是对象类型,就可以对形参进行解构
传参本质： 实参给形参赋值
function fn(obj) {
//对函数形参进行解构
let { name, sex, age } = obj
console.log(name, sex, age)
}
let obj = {name:'张三',age:20,sex:'男'}
fn1 (obj)
function fn1({ name, age }) {
console.log(name, age)
}
fn1 ({ name: '张三', age: 20, sex: '男' })
三. 箭头函数
1.箭头函数 : 相当于 function函数的简写
1.1去掉function,改成 箭头 =>
1.2形参小括号写到箭头左边
2.箭头函数语法注意点
2.1 如果箭头函数只有一个形参,则可以省略小括号
2.2 如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return）
*/
let fn = (a, b) => { return a + b }
(1)如果箭头函数只有一个形参,则可以省略小括号
let fn1=(a)=>{a*a}
let fn1 = a => { return a * a }
(2)如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return）
let fn2 = a => { a * a }
let fn2 = a => a * a
*** 补充:
1.function函数this有三种指向 : 谁 调用我 , 我就指向谁
普通函数: 函数名() this -> window
对象方法: 对象名.函数名() this -> 对象名
构造函数: new 函数名() this -> new创建实例
2.箭头函数this : 没有this
* 箭头函数本质是访问 上级作用域中的this
四. 展开运算符
1.展开运算符: ...
相当于数组遍历的简写
let arr1 = [10, 20, 30]
let arr2 = [40, 50, 60]
2.应用
2.1 连接两个数组
arr1.push(...arr2)
ES5 : concat()
let arr = arr1.concat(arr2)
arr.push(70)
ES6
let arr = [...arr1, ...arr2, 70]
console.log(arr)
2.2 求数组最大值
let max = Math.max(...arr1, ...arr2)
console.log(max)
五. 数组迭代方法
1.数组map方法
1.数组map方法作用: 映射数组
说人话：按照某种映射关系, 把数组的每一个元素给修改了
举例：全场8折: 数组的每一个元素 * 0.8
2. map方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
* return 新数组的元素
* 如果没有return, 则map的返回值都是undefined
2.3 map方法的返回值
* 返回映射之后的新数组
*/
let arr = [ 88,90,100,20,50 ]
完整写法
let res = arr.map( (item,index) => {
return item*0.8
} )
箭头函数如果形参只有一个可以省略小括号， 如果函数体只有一行可以省略大括号(必须省略return)
let res = arr.map( item=>item*0.8 )
2.数组filter方法
1.数组filter方法作用: 筛选数组
* 应用场景: 筛选数组,将符合条件的元素放入新数组中
* 举例： 找出数组中所有大于10的元素
2. filter方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
* return true : 符合筛选条件，放入新数组中
* return false : 不符合筛选条件，不放入新数组中
2.3 filter方法的返回值
* 返回筛选之后的新数组
let arr = [88, 90, 100, 20, 50]
需求：找出50以上的元素
完整写法:
let res = arr.filter((item, index) => {
if (item > 50) {
return true
}
})
简写:
let res = arr.filter(item =>item > 50)
3.数组forEach方法
1.数组forEach方法作用: 遍历数组
* 应用场景: 和 for(let i=0;i<arr.length;i++){} 功能一致
2. forEach方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
* 没有返回值
2.3 forEach方法的返回值
* 没有返回值
*/
let arr = [45, 60, 88, 90, 20]
arr.forEach((item, index) => {
console.log(item, index)
})
4.数组some方法
1.数组some方法作用: 判断数组中是否有符合条件的元素
* 应用场景: 非空判断（判断多个表单元素，有没有空文本）
* 举例 ： 判断数组中有没有负数
2. some方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
* return true : 循环结束。 找到了满足条件的元素
* return false : 循环继续。 没找到，循环继续。 如果所有元素全部遍历还是没找到，最终结果就是false
2.3 some方法的返回值
* true : 有符合条件的元素
* false : 没有符合条件的元素
*/
let arr = [10, 20, 50, 60, 70, 80]
标准写法:
let res = arr.some((item,index)=>{
if( item < 0 ){
return true
}else{
return false
}
})
let res = arr.some((item, index) => {
if (value < 0) {
return true
}
})
//简写
let res = arr.some(value => value < 0)
5.数组every方法
1.数组every方法作用: 判断数组中 是否所有的 元素都满足条件
* 应用场景: 开关思想 (购物车全选框)
* 举例 ： 判断数组中是不是都是正数
2. every方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
* return true : 循环继续, 满足条件,如果所有的元素全部遍历还是true,则最终的结果就是true
* return false : 循环结束。 只要要到不满足条件的元素，循环结束。最终的结果false
2.3 every方法的返回值
* true : 所有的元素 都符合条件
* false : 有元素 不符合条件
let arr = [10, 20, 50, 60, 70, 80]
标准写法:
let res = arr.every((item,index)=>{
if( item >= 0 ){
return true
}else{
return false
}
})
let res = arr.every((value, index) => {
if (value > 0) {
return true
}
})
let res = arr.every(value => value > 0)
6.数组findIndex方法
1.数组findIndex方法作用: 查找元素的下标
* 数组的findIndex与indexOf异同点
相同点：功能一致，都是查找元素下标。 有则返回下标，无则返回固定值-1
不同点：应用场景不同
indexOf : 查找数组中的元素都是值类型
findIndex : 查找数组中的元素都是引用类型
2. findIndex方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
* return true : 循环结束。 找到了,此时返回值就是下标
* return false : 循环继续。 没找到，循环继续。 如果所有元素全部遍历还是没找到，最终结果就是-1
2.3 some方法的返回值
* 元素下标 或者 -1
let arr = [
{name:'张三',age:20},
{name:'李四',age:18},
{name:'王五',age:16},
]
需求：找名字为王五的人在哪里
let res = arr.findIndex(item=>{
if( item.name == 'sfs' ){
return true
}else{
return false
}
})
let res = arr.findIndex(item=>item.name == '王五')
7.数组reduce
1.数组reduce方法 : 数组累加器方法
* 对数组每一个元素执行一次回调函数,累加最后一次回调的结果
2.reduce场景: 数组元素求和、求数组元素最大值
let arr = [20,55,60]
***详解:
第一个参数：回调 (上一次值,当前值,当前下标)=>{}
* 默认下标不是从0开始，而是从1开始。 开发中一般需要设置默认值
* return 值 就是下一次 sum的值
第二个参数: 初始值
* 一般需要设置初始值为0, 如果不设置遇到空数组则会报错
reduce方法返回值是 ： 最后一次sum的结果
let res = arr.reduce( ( sum,item,index )=>{
console.log( sum,item,index)
return sum + item
} , 0 )
let res = arr.reduce( ( sum,item )=>sum + item , 0 )
总结
每天吸收和巩固一点知识.相信我未来的你绝对会感谢现在的你
