js高级第一天
一、全局作用域
- 为
window对象动态添加的属性默认也是全局的，不推荐！ - 函数中未使用任何关键字声明的变量为全局变量，不推荐！！！
- 尽可能少的声明全局变量，防止全局变量被污染
二、闭包
- 概念：简单理解：闭包 = 内层函数 + 外层函数的变量
- 作用：封闭数据，实现数据私有，外部也可以访问函数内部的变量； 闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来
- 代码：
<body>
<script>
// 1. 闭包 : 内层函数 + 外层函数变量
// function outer() {
// const a = 1
// function f() {
// console.log(a)
// }
// f()
// }
// outer()
// 2. 闭包的应用： 实现数据的私有。统计函数的调用次数
// let count = 1
// function fn() {
// count++
// console.log(`函数被调用${count}次`)
// }
// 3. 闭包的写法 统计函数的调用次数
function outer() {
let count = 1
function fn() {
count++
console.log(`函数被调用${count}次`)
}
return fn
}
const re = outer()
// const re = function fn() {
// count++
// console.log(`函数被调用${count}次`)
// }
re()
re()
// const fn = function() { } 函数表达式
// 4. 闭包存在的问题： 可能会造成内存泄漏
</script>
</body>
三、函数
- 函数参数：
arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。
<body>
<script>
// arguments对象获取所有实参
function sum() {
// 1. arguments 只存在于函数中 伪数组
// 2. arguments 可以得到传递过来的所有实参 [1, 2]
// console.log(arguments)
let sum = 0
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
console.log(sum)
}
sum(1, 2)
sum(1, 2, 3)
sum(1, 2, 3, 4)
// console.log(arguments) 外面无法使用
</script>
</body>
- 剩余参数
<body>
<script>
// 剩余参数获得多余的实参 返回真数组
// function sum(x, y, ...other) {
// console.log(x, y, other)
// }
// sum(1, 2)
// sum(1, 2, 3)
// sum(1, 2, 3, 4)
// 1. 求和效果
function sum(...other) {
// console.log(other) // [1, 2, 3, 4]
let sum = 0
other.forEach(function (ele) {
sum += ele
})
console.log(sum)
}
sum(1, 2)
sum(1, 2, 3)
sum(1, 2, 3, 4)
</script>
</body>
- 展开运算符
<body>
<script>
// 展开运算符：将一个数组/对象进行展开，咱们先讲展开数组
// 1. 基本使用, 不修改原数组
const arr = [1, 2, 3]
console.log(...arr)
console.log(arr)
//2. 使用场景： 求数组最大值/最小值，数组合并
// console.log(Math.max(1, 3, 8))
console.log(Math.max(...arr)) // 3
console.log(Math.min(...arr)) // 1
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
// console.log([arr1, arr2])
console.log([...arr1, ...arr2])
</script>
</body>
4. 箭头函数
```js
<body>
<script>
// 箭头函数
// 1. 基本语法
// const fn = function () {
// console.log('我是函数表达式')
// }
// fn()
// const fn = () => {
// console.log('我是箭头函数')
// }
// fn()
// 2. 细节使用
// 2.1 如果只有一个形参则可以省略小括号,其余个数不能省略，如果没有参数则写空的小括号
// const sum = (x) => {
// console.log(x + x)
// }
// sum(2)
// const sum = x => {
// console.log(x + x)
// }
// sum(2)
// 2.2 如果函数体只有一句代码，则可以省略大括号，这句代码就是返回值（省略return）
// const sum = x => {
// return x + x
// }
// const sum = x => x + x
// console.log(sum(5))
// 2.3 如果返回的是一个对象，则需要用小括号把对象包裹起来
// const fn = function() {
// return {name: '佩奇'}
// }
// const fn = () => ({ name: '佩奇' })
// console.log(fn())
// 2.4 箭头函数里面没有 arguments，但是有剩余参数
const fn = (...other) => {
// console.log(arguments)
console.log(other)
}
fn(1, 2)
</script>
</body>
- 箭头函数的this
- 以前函数中的this指向是根据如何调用来确定的。简单理解就是this指向调用者。箭头函数本身没有this,它只会沿用上一层作用域的this
<body>
<button class="btn1">点击</button>
<button class="btn2">5秒后启用</button>
<script>
// 1. 以前this的指向： 指向调用者
// console.log(this) // window
// // 普通函数
// function fn() {
// console.log(this) // window
// }
// window.fn()
// // 对象方法里面的this
// const obj = {
// name: 'andy',
// sayHi: function () {
// console.log(this) // obj
// }
// }
// obj.sayHi()
// 2. 箭头函数的中this指向-沿用上一层作用域的this
const fn = () => {
console.log(this) // window
}
fn()
// const obj = {
// name: 'andy',
// sayHi: () => {
// console.log(this) // window
// }
// }
// obj.sayHi()
const obj = {
name: 'andy',
sayHi: function () {
const fun = () => {
console.log(this) // obj
}
fun()
}
}
obj.sayHi()
// 3. 我们可以根据需求来选择是否使用箭头函数 this
// document.querySelector('.btn1').addEventListener('click', function () {
// this.style.color = 'red'
// })
document.querySelector('.btn1').addEventListener('click', () => {
// this.style.color = 'red'
// 此处不能用 this 指向 Window不是 按钮了
document.querySelector('.btn1').style.color = 'red'
})
document.querySelector('.btn2').addEventListener('click', function () {
this.disabled = true
// setTimeout(function () {
// console.log(this) // 定时器里面的this 指向 window
// this.disabled = false
// }, 5000)
setTimeout(() => {
console.log(this) //
this.disabled = false
}, 5000)
})
</script>
</body>
- ES6对象简写
- 在对象中，如果属性名和属性值一致，可以简写只写属性名即可
- 在对象中，方法（函数）可以简写
<body>
用户名: <input type="text" class="username"> <br>
密 码: <input type="password" class="password"> <br>
<button>点击</button>
<script>
// ES6对象属性和方法的简写
// 1. 对象属性的简写 (点击按钮生成对象)
document.querySelector('button').addEventListener('click', function () {
const username = document.querySelector('.username').value
const password = document.querySelector('.password').value
// const obj = {
// username: username,
// password: password
// }
// 属性名和属性值相同的时候，可以只写属性名
// 2. 对象方法的简写
// const obj = {
// username,
// password,
// sayHi: function() {
// console.log('hi~')
// }
// }
const obj = {
username,
password,
sayHi() {
console.log('hi~')
}
}
console.log(obj)
})
</script>
四、解构赋值
- 数组解构
<body>
<script>
// 数组解构
// 1. 基本语法
const [a, b, c] = [1, 2, 3]
console.log(a)
console.log(b)
console.log(c)
// 2. 典型的使用场景 交换2个变量的值
let x = 1
let y = 2;
[y, x] = [x, y]
console.log(x, y);
// 3. js 2个特殊情况需要加分号
// 3.1 如果是小括号开头的则需要加分号
(function () { })();
(function () { })();
// 3.2 如果是中括号开头的则需要加分号
</script>
</body>
<body>
<script>
// 数组解构变量和值不匹配的情况
// 1. 变量多，值少的情况
// const [a, b, c, d] = ['小米', '华为', '苹果']
// console.log(a)
// console.log(b)
// console.log(c)
// console.log(d) // undefined
// 2. 防止undefined传值，可以设置默认值
// const [a, b, c, d = '三星'] = ['小米', '华为', '苹果']
// console.log(a)
// console.log(b)
// console.log(c)
// console.log(d)
// 3. 变量少，值多的情况
// const [a, b] = ['小米', '华为', '苹果']
// console.log(a)
// console.log(b)
// 4. 利用剩余参数解决变量少值多的情况
// const [a, ...b] = ['小米', '华为', '苹果']
// console.log(a)
// console.log(b)
// 5. 按需导入，忽略某些值
const [a, , c, d] = ['小米', '华为', '苹果', 'vivo']
console.log(a)
console.log(c)
console.log(d)
</script>
</body>
- 对象解构
<body>
<script>
const username = 'andy'
const user = {
username: '小明',
age: 18
}
// 1. 对象解构赋值基本使用
// const { username, age, gender } = user
// console.log(username) // 小明
// console.log(age) // 18
// console.log(gender) // undefined
// 1.1 要求变量名和属性名必须一致
// 1.2 如果变量名和属性名不一致，则默认为 undefined
// 1.3 变量名不要和外面的变量名冲突，否则会报错
// 2. 更改解构变量名（重命名） 变量名: 新变量名
// const { username: uname, age } = user
// console.log(uname) // 小明
// console.log(age) // 18
// 3. 对象数组解构
const arr = [
{
username: '小明',
age: 18
}
]
const [{ username: uname, age }] = arr
console.log(uname)
console.log(age)
</script>
</body>
<body>
<script>
// 1. 这是后台传递过来的数据
const msg = {
"code": 200,
"msg": "获取新闻列表成功",
"data": [
{
"id": 1,
"title": "5G商用自己，三大运用商收入下降",
"count": 58
},
{
"id": 2,
"title": "国际媒体头条速览",
"count": 56
},
{
"id": 3,
"title": "乌克兰和俄罗斯持续冲突",
"count": 1669
},
]
}
// 需求1： 请将以上msg对象 采用对象解构的方式 只选出 data 方面后面使用渲染页面
// const { data } = msg
// console.log(data)
// 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数
// const { data } = msg
// msg 虽然很多属性，但是我们利用解构只要 data值
function render({ data }) {
// const { data } = arr
// 我们只要 data 数据
// 内部处理
console.log(data)
}
render(msg)
// 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData
function render({ data: myData }) {
// 要求将 获取过来的 data数据 更名为 myData
// 内部处理
console.log(myData)
}
render(msg)
</script>
五、filter遍历函数
<body>
<script>
// filter 筛选数组元素
const arr = [10, 20, 30, 40]
// const newArr = arr.filter(function (ele, index) {
// // console.log(ele)
// // console.log(index)
// // return 筛选条件
// return ele >= 30
// // return ele + 30 都是真的所以都选出来了
// })
const newArr = arr.filter(ele => ele >= 30)
console.log(newArr)
</script>
</body>
浙公网安备 33010602011771号