e6的语法 递归 箭头函数 解构 闭包 展开运算符 Set 去重
1.箭头函数的语法
- 箭头函数一般都是匿名函数（函数表达式 | 回调函数）
let getSum = (参数列表) => {函数体}
let getSum =(item,index) => {
return item + index
}
// 箭头函数的调用和普通函数一样
console.log(getSum(10,20))
1.如果只有一个参数，那么可以省略()
let sayHi = name => {
consloe.log('我是'+name)
}
//2.如果函数体只有一句，也可以省略{}，箭头函数默认会将这一句的结果返回 ，不能使用return返回了
let getsum = (a,b) => a +b
console.log(getsum(20,10))
2.箭头函数的特性
- 箭头函数的this是确定的，况且永远不变的
- 箭头函数不会产生this ，意味着它使用的this不是函数本向所产生的this，只有function才会产生this
- 箭头函数中的this指向：创建这个箭头函数 所在对象的 上下文（环境）
let obj = {
name: '小明',
age: 20,
say: function () {
return () => {
console.log(this)
}
}
}
let fn = obj.say()//这里的this指向window
let tepm = {
name: '小红',
age: 18
}
fn.call(tepm)//this不变指向obj
3.instanceof 验证
-
语法：实例对象 instanceof 构造函数
-
判断当前的实例对象是否某个构造函数的实例，是则返回 true
-
-
对数组的求和
- 判断用户传入的参数是否正确
- 要求用只能输入传递数组
<script>
function getSum(arr) {
if (!(arr instanceof Array)) {
alert('请传递数组')
return
}
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
return sum
}
console.log(getSum({ name: '小明', age: 10 }));
// console.log(getSum([1, 2, 3, 4, 5]))
</script>
4.es5的对象定义和继承
<script>
// 父项
function Penson(name, age) {
this.name = name
this.age = age
}
Penson.prototype.say = function () {
console.log(this.name, this.age);
}
let pen = new Penson('小明', 18)
pen.say()
// 子项
function Student(name, age, gender) {
// 子项继承父项的方法
Penson.call(this, name, age)
this.gender = gender
}
// 将对象的原型复制一份
Student.prototype = { ...Penson.prototype }
// 调用方法的话先改变原型才new对象
let Stu = new Student('小明', 18, 170)
Stu.say()
</script>
6.es6的对像定义和继承
<script>
// 创建父项对象
class Penson {
// 构造器 里面的小括号就是传参的
constructor(name, age) {
this.name = name
this.age = age
}
// 创建方法
say() {
console.log(this.name, this.age);
}
}
// new出对象
let pen = new Penson('xiao', 19)
console.log(pen);
pen.say()
// 子项继承
// extends 会自动继承父项的元素和方法
class Student extends Penson {
// 构造器里面传参数
constructor(name, age, gender, skill) {
super(name, age)
this.gender = gender
this.skill = skill
}
}
let Stu = new Student('小明', 18, 170, '七十二变')
console.log(Stu);
Stu.say()
</script>
7.函数的默认值
- 为function的参数设置默认值，没有传参就使用参数的默认值，如果传参了就使用传参的值
- 形参是一个变量，变量就可以赋值
- 细节：参数默认值一般写在参数列表的最后，原因在于实参和形参顺序上是一一对应的
<script>
function say(age, userName = '小明') {
console.log(`你好,${userName}我今年${age}`)
}
say(20)
</script>
8.对象的简写
- es6新语法规定了，如果对象的键值同名可以指写一个
- 在对象中定义的方法也可以简写 ：可以直接写函数本身
let name = '小明'
let age = 18
let obj = {
name,
age,
say() {
console.log(name,age)
}
}
console.log(obj)
9.解构
- 解构分为数组解构和对象解构
- 解构：就是从数组中获取某些元素值，或者从对象中获取某些属性的值
- 数组解构
let arr = [13, 2, 3, 55, 66, 77]
//语法：let [a,b,c] = 数组 ，可以提出前面三个的值分别赋值给三个变量
//细节：数组的解构需要使用[]
let [a, b, c, d] = arr
console.log(a, b, c, d) //13 2 3 55
- 用一句代码实现交换两个数的值
<script>
let num1 = 10;
let num2 = 20;
[num1, num2] = [num2, num1]
console.log(num1, num2)
</script>
- 对象的解构：从对象中获取指定名称的属性
- 语法：let = {属性名} = 对象
<script>
let obj = {
name: '小明',
age: 18
}
let { name, age } = obj
console.log(name, age)
</script>
-
注意点：如果解构时的属性名称和对象中的属性名称不一致，则会返回undefined
let obj = { name: '小明', age: 18 } //这里的age 不一样就会返回 undefined let { name, ag } = obj console.log(name, ag) -
注意点2: 解构时相等于定义了变量 ，如果重名了 可以在解构时设置其他的名字
- 语法：let {属性名：重新设置属性名} = 对象
- 重新设置了属性名就用重新设置的属性名
<script> let name = 20 let obj = { name: '小明', age: 18 } let { name: myName, age } = obj console.log(myName, age) </script>- 注意点3深度解构 --- 与后期有关
- 解构出一个成员之后，在可以对这个成员进行解构
- 语法： let {属性名：{属性名}} = 对象名
- 解构出一个成员之后，在可以对这个成员进行解构
<script>
let str = {
name: '小明',
age: 20,
computer: {
brand: 'dell', pirce: 5000
}
}
let { computer: { brand, pirce } } = str
console.log(brand, pirce)
</script>
10.展开运算符也叫剩余运算符
-
剩余运算符 。了解
let arr = [123,456,789,22,333,555] let [a,b,...c] = arr console.log(a,b,c) //a=123,b=456 c= 把后面的值变成数组 -
展开运算符 ... :将数组或者对象的属性展开为一个一个的值 （重要）
- 将temp数组追加到arr后面
<script>
let arr = [1, 2, 3, 456]
let temp = [7, 8, 9]
arr.push(...temp)
console.log(arr)
</script>
-
将obj的对象添加到obj2 对象
<script> let obj = { name: '小明', age: 18 } let obj2 = { ...obj,// 展开obj的值 复制给obj2 gender: '男' } console.log(obj2) </script>
11.Set去重
-
去除数组中重复的值 ，将不重复的值放到新数组中
<script> let arr = [2, 3, 2, 3, 5, 5, 6, 5, 7, 8, 7, 6, 8] let temp = [...new Set(arr)] //[2, 3, 5, 6, 7, 8] console.log(temp) </script>
12.递归思想
-
函数递归：函数内部直接会间接调用自己
-
递归必须_有结束条件
用递归函数求100的和
<script> function getSum(n) { //判断结束条件 if (n == 1) { return 1 } return n + getSum(n - 1) } let sum = getSum(100) console.log(sum)//5050 </script>- 斐波那契数列没有优化的
<script> function feibo(n) { if (n == 1 || n == 2) { return 1 } return feibo(n - 1) + feibo(n - 2) } let febo = feibo(6) console.log(febo) //8 建议不要超过45不然浏览器会卡 </script>- 优化后的 斐波那契数列
<script> function outer() { let arr = [0, 1, 1] function febo(n) { if (arr[n]) { return arr[n] } let result = febo(n - 1) + febo(n - 2) arr.push(result) return result } function getArr() { return [...arr].splice(1) } return { febo, getArr } } let obj = outer() console.log(obj.febo(5)) console.log(obj.getArr()) </script>-
使用递归生成目录
-
这个是data对象部分
let data = { parent: '递归案例', // 如果有children说明有下一级 children: [ { parent: '目录1', children: [] }, { parent: '目录2', children: [] }, { parent: '目录3', children: [ { parent: '子目录1', children: [ { parent: '第一层', children: [ { parent: '第二层', children: [ { parent: '第三层', children: [ { parent: '第四层', children: [] } ] } ] } ] } ] }, { parent: '子目录2', children: [] } ] }, { parent: '目录4', children: [ { parent: '第一层', children: [] } ] } ] }
-
-
计算部分
let str = data.parent + '</br>' function getStr(data) { // 判断data.children是否还有下一级 ，有的话继续遍历 if (data.children && data.children.length > 0) { data.children.forEach((item) => { str += item.parent + '</br>' getStr(item) }) } } getStr(data) document.write(str)
13.闭包
<script>
// 定义一个A函数，在A函数中定义一个B函数，让B函数访问A函数中的变量
function test() {
let age = 20
// 1.能够在外界访问age
// 函数一旦声明，作用域就确定好了，函数可以访问外部的成员
function getAge() {
return age
}
// 2.能够让外界操作age
function setAge(value) {
age = value
}
return { getAge, setAge }
}
// console.log(age)
let obj = test() // 只调用一次
console.log(obj)
obj.setAge(50)
console.log(obj.getAge())
</script>
-
闭包的好处就是 里面的数不会随意改变
<script> function suijishu() { let num = Math.random() function fun() { return num } return fun } let fn = suijishu() console.log(fn()); console.log(fn()); console.log(fn()); console.log(fn()); </script>
