let const var 的区别
声明变量关键字
1. ES5声明变量 var
1.1 有变量预解析
1.2 没有块级作用域
2.ES6声明变量 let const
1.1 没有变量预解析
1.2 有块级作用域
3. let与const区别
let : 变量。 可以修改
const : 常量。 不可以修改
* 实际开发中, 只要不修改的变量都用const,需要改的时候用let
对象的解构赋值
解构赋值 ： 变量赋值的简写(解构精髓：当变量名 和 对象属性值一致的时候，只需要写一个)
1. 取出对象的属性 赋值 给 变量
let { name,age,sex } = obj
2. 取出变量的属性 赋值 给 对象
let obj = {
name,// name : name
age,
sex
}
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,
say(){
console.log(111)
}//say:function(){}
}
console.log(p)
p.say()
数组的解构赋值
/*数组解构
1.取出数组元素 赋值给变量
2.取出变量的值 赋值给数组元素
*/
let arr = [10,20,30]
//ES5
// let n1 = arr[0]
// let n2 = arr[1]
// let n3 = arr[2]
// let n4 = arr[3]
//ES6
let [n1,n2,n3,n4] = arr
console.log( n1,n2,n3,n4)//10 20 30 undefined
//取出变量的值 赋值给数组
let num1 = 1
let num2 = 2
let arr1 = [num1,num2]
函数参数解构
函数参数解构: 当函数参数是对象类型,就可以对形参进行解构
//传参本质： 实参给形参赋值
function fn(obj){// let obj = {name:'张三',age:20,sex:'男'}
console.log( obj )
//对函数形参进行解构
let {name,sex,age} = obj
console.log( name,sex,age )
}
function fn1( {name,sex,age} ){// let {name,sex,age} = {name:'张三',age:20,sex:'男'}
console.log( name,sex,age )
}
fn( {name:'张三',age:20,sex:'男'} )
fn1( {name:'张三',age:20,sex:'男'} )
箭头函数
1.箭头函数 : 相当于 function函数的简写
(1)去掉function,改成 箭头 => (2)形参小括号写到箭头左边
2.箭头函数语法注意点
2.1 如果箭头函数只有一个形参,则可以省略小括号
2.2 如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return）
let fn = (a,b) => {
console.log(a+b)
}
fn(10,20)
//(1)如果箭头函数只有一个形参,则可以省略小括号
let fn1 = a=>{
console.log(a*2)
}
fn1(66)
//(2)如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return）
let fn2 = a=>a*2
let res = fn2(88)
console.log(res)
箭头函数的this指向
1.function函数this有三种指向 : 谁 调用我 , 我就指向谁
普通函数: 函数名() this -> window
对象方法: 对象名.函数名() this -> 对象名
构造函数: new 函数名() this -> new创建实例
2.箭头函数this : 没有this
* 箭头函数本质是访问 上级作用域中的this
let fn = ()=>{
//1级
console.log( this )
}
fn()
let obj = {
name:'张三',
eat:fn
}
obj.eat()
//由于箭头函数没有this,所以箭头函数不能作为构造函数 (new会修改this指向,而箭头没有this)
// new fn()
//箭头函数也无法修改this (call apply bind)对箭头函数是无效的
fn.call({name:'张三'})
//由于箭头函数没有this,所以箭头函数一般不作为事件处理函数
展开运算符
1.展开运算符: ...
相当于对象遍历的简写
2.应用
2.1 连接两个数组
2.2 求数组最大值
let arr1 = [10,20,30]
let arr2 = [40,50,60]
//ES5 : concat()
// let arr = arr1.concat(arr2)
// arr.push(70)
//ES6
let arr = [...arr1,...arr2,70]
console.log( arr )
//求数组最大值
let max = Math.max(...arr1,...arr2)
console.log( max )
数据类型Set(集合)
数据类型 Set : 集合
* Set相当于是数组类型, 和数组Array唯一的区别是不能存储重复元素
场景 : 数组去重
let newArr = [ ...new Set(需要去重的数组) ]
数组迭代方法
map()方法
1.数组map方法作用:映射数组
* 按照某种映射关系,把数组的每一个元素给修改了
例如:全场八折 数组的每一个元素 * .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 res1 = arr.map(item => item * 0.8)
console.log(res1)
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 ]
let res = arr.filter(item => item >= 10)
console.log( res )
forEach()方法
1.数组forEach方法作用:遍历数组
* 和 for(let i=0;i<arr.length;i++){} 功能一致
2. filter方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的 return
* 没有返回值
2.3 filter方法的返回值
* 没有返回值
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=>item < 0)
console.log( res )
every()方法
1.数组every方法作用: 判断数组中所有元素是否符合条件
* 开关思想
* 例如: 判断数组中是不是都是正数
2. some方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的 return
* return true : 循环继续,如果数组遍历完还是true,则最终结果就是true
* return false : 循环结束,只要找到不满足条件的元素,循环结束 最终结果false
2.3 some方法的返回值
* true 所有元素都符合条件
* false 有元素不符合条件
let arr = [10,20,50,60,70,80]
//标准写法
let res = arr.every( item => item >= 0)
console.log(res)
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=>item.name == '王五')
console.log(res)
reduce()方法
1.数组reduce方法 : 数组累加器方法
* 对数组每一个元素执行一次回调函数,累加最后一次回调的结果
2.reduce场景: 数组元素求和、求数组元素最大值
let arr = [20, 55, 60]
let num = arr.reduce((sum, v) =>
sum + v
)
console.log(num)
