|
目录
1.解构
2.对象解构
3.字符串扩展和字符串模板
4.函数参数默认值
5.箭头函数
6.对象操作优化
6.1对象优化
6.2合并对象属性
6.3声明对象简写
6.4声明对象方法的简写
6.5对象拓展运算符
6.6对象合并assign方法
7.数组操作map和reduce方法
1.解构
//解构表达式
let arr = [11,22,33]
/*let a1 = arr[0]
let a2 = arr[1]
let a3 = arr[2]
console.log(a1,a2,a3)*/
//将元素分别保存在aX变量里
let [a1,a2,a3] = arr
console.log(a1,a2,a3)
2.对象解构
//对象解构 const常量
const person = {
name: 'zyw',
age: 22,
language: ['java','js','css']
}
/*const name = person.name
const age = person.age
const language = person.language*/
const {name,age,language} = person
console.log(name,age,language)
const {name:a,age:b,language:c} = person
console.log(a,b,c)
3.字符串扩展和字符串模板
//字符串扩展
let name = 'zyw.java'
//判断字符串以什么开头
console.log(name.startsWith('zyw')) //true
//以什么结尾
console.log(name.endsWith('java')) //true
console.log(name.includes('w.')) //true
//字符串模板
let s = `
<div>
<div>Hello</div>
</div>
`
//console.log(s)
//字符串插入变量和表达式
let name = 'zyw'
let age = 22
//let info = `我是${name}，今年${age}岁`
//let info = `我是${name+'~haha'}，今年${age+10}岁`
let f = function(){
return '我是方法'
}
let info = `我是${name+'~haha'}，今年${age+10}岁，${f()}`
console.log(info)
4.函数参数默认值
//函数参数默认值
function f(a,b=2) {
return a+b
}
console.log(f(4))
console.log(f(4,9))
//不定长参数
function f1(...value) {
console.log(value.length)
}
f1(1,2,3)
5.箭头函数
let print = function (obj) {
console.log(obj)
}
//function 可优化掉，一个参数（obj）（）可优化掉
//方法中代码如果只有1行，{} 可优化掉
let print2 = obj => console.log(obj)
print2(100)
//箭头函数
let sum = function (a,b) {
return a+b
}
//代码只要1行，返回值 不用 return
let sum2 = (a,b) => a+b
console.log(sum2(2,3))
//箭头函数
const person = {
name: 'zyw',
age: 22
}
/*let hello = function (obj) {
console.log("hello," + obj.name)
}
hello(person)*/
//传参时解构，解构时()不能省略
//传入对象，把name属性解构出来
let hello = ({name}) => console.log("hello," + name)
hello(person)
6.对象操作优化
6.1对象优化
//对象优化
const person = {
name: 'zyw',
age: 22,
language: ['java','js','css']
}
//['name', 'age', 'language']
console.log(Object.keys(person))
//['zyw', 22, Array(3)]
console.log(Object.values(person))
//[Array(2), Array(2), Array(2)]
console.log(Object.entries(person))
6.2合并对象属性
//合并对象属性
let target = {a:1}
let s1 = {b:2}
let s2 = {c:3}
//将s1 s2 合并到 target
Object.assign(target,s1,s2)
console.log(target)
6.3声明对象简写
//声明对象简写
let name = 'zyw'
let age = 22
//以前
//let person = {name: name,age: age}
//属性名和变量名 同名可缩写
let person = {name,age}
console.log(person)
6.4声明对象方法的简写
//声明对象时方法的简写
let person = {
name: 'zyw',
eat: function(food){
console.log(this.name+"吃"+food)
},
//此处this 当前窗口，所以不能用下面语句
//eat2: food => console.log(this+"吃"+food),
eat2: food => console.log(person.name+"吃"+food),
eat3(food){
console.log(this.name+"吃"+food)
}
}
person.eat('橘子')
person.eat2('苹果')
person.eat3('香蕉')
6.5对象拓展运算符
//对象拓展运算符（深拷贝）
let person = {name: 'zyw',age: 22}
/*let p = person
p.name = 'lisi'
console.log(person)*/
let p = {...person}
p.name = 'lisi'
console.log(person)
console.log(p)
6.6对象合并assign方法
//对象合并
let name = {name: 'zyw'}
let age = {age: 22}
let person = {...name,...age}
name.name = 'lisi'
Object.assign(person,name,age)
console.log(person)
7.数组操作map和reduce方法
/*
数组新增 map() reduce()
map() 接收一个函数，将原数组中的每个元素用这个函数进行处理
返回新数组
*/
let arr = [1,3,5]
//item是每个元素
arr = arr.map(item => item * 2)
console.log(arr)
/*
reduce() 为数组中每个元素依次执行回调函数，不包括
数组中被删除或从未赋值的元素
参数：
1.previousValue 上一次调用回调返回的值，或者提供的默认值
2.currentValue 数组中当前被处理的元素
3.当前元素的索引
4. 调用reduce的数组
*/
let arr2 = [1,3,5]
let result = arr2.reduce((a,b) => {
console.log('上一次处理后：' + a)
console.log('当前正在处理：' + b)
return a + b
}, 100)
console.log('结果：' + result)
|