一、全局作用域
- 为
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 = 1function 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 = 0for (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 = 0other.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)) // 3console.log(Math.min(...arr)) // 1const 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').valueconst 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 = 1let 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 }] = arrconsole.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名字混淆，要求渲染函数里面的数据名改为 myDatafunction 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>