JavaScript基础（3）

news/2023/6/8 0:00:56

参考资料：课程链接

目录

  • 1.ES6
    • 1.1.ES定义变量
    • 1.2.案例-块级作用域
    • 1.3.ES6的箭头函数
    • 1.4.ES6的解构赋值
    • 1.5.ES6的对象简写
    • 1.6.ES6展开运算符
    • 1.7.ES6模块化语法

1.ES6

我们所说的ESS和ES6其实就是在js语法的发展过程中的一个版本而已

  • ECMAScript 就是js的语法
    • 以前的版本没有某些功能
    • 在ES5这个版本的时候增加了一些功能
    • 在ES6这个版本的时候增加了一些功能
  • 因为浏览器是浏览器商生产的
    • ECMAScript发布了新的功能以后，浏览器商需要让自己的浏览器支持这些功能
    • 这个过程是需要时间的
    • 所以到现在，基本上大部分浏览器都可以比较完善的支持了
    • 只不过有些浏览器还是不能全部支持
    • 这就出现了兼容性问题
    • 所以我们写代码的时候就要考虑哪些方法是ES5或者ES6的，看看是不是浏览器都支持
  • let和const关键字
    • 我们以前都是使用var关键字来声明变量的
    • 在ES6的时候，多了两个关键字let和const.也是用来声明变量的
    • 只不过和var有一些区别
      1. 1et和const不允许重复声明变量
      2. 1et和const不允许提前使用变量
      3. const不可以更改值

1.1.ES定义变量

在定义var变量前使用变量并不会报错，因为发生了变量提升

console.log(a) //在定义var变量前使用变量并不会报错，因为发生了变量提升
var a = 100
console.log(a)
  • let
    与var的区别：
    1. 必须在定义后使用；
    2. 变量不能重名；
    3. 块级作用域(只存活于定义它的区域{})：
// console.log(b) //会报错，不能在定义前使用
let b = 100
// let b = 3
console.log(b)
if (1) {var i = 100let j = 99 //只存活于定义它的区域console.log(i)console.log(j)
}
console.log(i)
// console.log(j) //显示未定义，不能访问
  • const
    let 变量
    const 常量，普通类型其值不能更改，复杂数据类型比如obj，可以更改obj里面的值（但其实也没有更改，因为指向obj的指针并未改变）；初始化不赋值也不行
// let 变量
let name = 'xiaoming'const age = 21
name = 'daming'
// age = 23 不能修改
console.log(name, age)// const num 初始化不赋值会报错

1.2.案例-块级作用域

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.header {display: flex;width: 500px;}.header li {flex: 1;height: 50px;line-height: 50px;text-align: center;border: 1px solid #000;}.box {position: relative;}.box li {position: absolute;left: 0;top: 0;width: 500px;height: 200px;background-color: yellow;display: none;}.header .active {background-color: #f00;}.box .active {display: block;}</style>
</head><body><ul class="header"><li class="active">1</li><li>2</li><li>3</li><li>4</li></ul><ul class="box"><li class="active">111</li><li>222</li><li>333</li><li>444</li></ul><script>var oHeaderItems = document.querySelectorAll('.header li')var oBoxItems = document.querySelectorAll('.box li')/*下面这个方法有坑，可能人为点击来不及响应就已经for循环完了，因此每次点击输出的都是4for (var i = 0; i < oHeaderItems.length; i++) {oHeaderItems[i].onclick = function() {console.log(i)}} */for (let i = 0; i < oHeaderItems.length; i++) {// 1.自定义属性oHeaderItems[i].dataset.index = i// oHeaderItems[i].onclick = handleroHeaderItems[i].onclick = function() {console.log(i)// var 时输出的全是4，因为for循环结束了，我们还没来得及点击；// let 它有暂存性死区，它会保留当前的值}}</script>
</body></html>

1.3.ES6的箭头函数

//普通写法
var test1 = function() {console.log('11')
}
// 箭头写法
var test2 = () => {console.log('22')
}
test1()
test2()

箭头写法的特点：

  • 1.（只有一个形参时）小括号可以省略；
  • 2.{}可以省略 只有一句代码或只有返回值的时候；
  • 3.没有arguments；
  • 4.箭头函数的this是父级作用域的
//1.（只有一个形参时）小括号可以省略；
var test3 = a => {console.log('22', a)
}
test3('a')

//2.{}可以省略 只有一句代码或只有返回值的时候
//返回值，这种用法偏多
// 使用这种方式返回对象类型时，记得在{}对象外面加上一个()比如var test4 = a => ({name:'brisa'})
var test4 = a => 100 * a
console.log(test4(2))var list = ['aaa', 'bbb', 'ccc']// var newList = list.map(function(item) {//     return `<li>${item}</li>`// })var newList = list.map(item => `<li>${item}</li>`)
console.log(newList.join())// 一句话
var test5 = () => console.log('thanks')
test5()

// 3.没有arguments
var test6 = function() {console.log(arguments) //函数内自定义的一个特殊变量console.log(arguments[0], arguments[1], arguments[2])// console.log(Array.from(arguments))//转成数组// var test6 = function(a, b, c) {// console.log(a, b, c)
}
test6(1, 2, 3)/*var test6 = () => {console.log(arguments)//报错，箭头函数没有arguments}test7(1, 2, 3)*/

// 4.箭头函数的this是父级作用域的
mytext.oninput = function() {var that = thissetTimeout(function() {console.log(this) //windowconsole.log(that) //input 用that赋值，指代父级的this}, 1000)setTimeout(() => console.log(this), 1000) //input，父级作用域}

// 函数的默认参数
function test8(a=1, b=2) {//给1个默认参数，防止程序崩坏return a + b
}
// var test8 = (a=1,b=2)=>a+b
console.log(test8())

1.4.ES6的解构赋值

ES6的解构赋值：快速的从对象和数组中获取里面的成员

// 快速的从对象和数组中获取里面的成员
var arr = ['xiaoming', 'tiechui', 'shanzhen']
let [x, y, z] = arr //解构赋值
console.log(x) //arr[0]

// 用解构赋值的方式交换值
// 这种交换值方式不能用let定义，会出错
var a = 5
var b = 10
var [a, b] = [b, a] //交换
console.log(a, b)

var arr2 = [1, 2, [3, 4, [5]]] //多维数组
var [i, j, [k, l, [m]]] = arr2 //可以快速获取值
console.log(arr2[2][2][0], m)

var obj = {name: 'brisa',age: 100,location: 'SiChuan',
}
let {name,age,location: mylocation //冲突时，可以重命名} = obj// document.write(obj.name)
// document.write(obj.age)
// document.write(obj.location)document.write(name)
document.write(age)
document.write(location)//window
document.write(mylocation)

var obj2 = {name: 'brisa',age: 100,location: {province: 'SiChuan',city: 'chengdu'},hobby: ['1', '2', '3']
}
var {name,age,location: {province,city},hobby: [m, n, l]
} = obj2
console.log(name, age, province, city, m, n, l)

1.5.ES6的对象简写

<input type="text" id="myusername">
<input type="password" id="mypassword">
<button id="mybtn">login</button>
<script>mybtn.onclick = function() {let username = myusername.valuelet password = mypassword.valueconsole.log(usn, psw)/*var obj = {username: username,password: password}*/// key和value相同（命名<变量名>）时，就可以简写var obj = {username,password}console.log('发给后端的结构',obj)
</script>

        var obj1 = {a: 1,// getName: function() {//     console.log(this.a)// }//简写如下getName() {console.log(this.a)}}obj1.getName()}

1.6.ES6展开运算符

  1. … 展开数组
var a = [1, 2, 3]
var b = [4, 5, 6]// console.log(a.concat(b))
//数组
var c = [a, b] //(2) [Array(3), Array(3)] 
// 展开
var d = [...a, ...b] //(6) [1, 2, 3, 4, 5, 6]
console.log(c)
console.log(d)
  1. … 复制
var a = [1, 2, 3]
//b改变会改变a
// var b = a //b改变不会改变a
// var b = a.slice()
// var b = a.concat()
var b = [...a]
b[0] = 'brisa'
console.log(a, b)
  1. … 参数-实参-形参
var test1 = function() {console.log(arguments)}/*var test2 = () => {console.log(arguments) //箭头函数，没有arguments}*///形参的运用
var test3 = (a, b, ...arr) => { //修改为 ...arr就可以正确执行了（接收的是对应参数组成的数组）// ...arr这种形参必须在最后console.log(arr)
}test1(1, 2, 3, 4, 5)// test2(1, 2, 3)
test3(1, 2, 3, 4, 5)// 实参的运用
var arr = [1, 2, 35, 5, 6, 78, 9]
var res = Math.max(...arr)
console.log(res)
  1. … 伪数组转换
function test() {// arguments会是一个伪数组// 如何将其转成真正的数组?// 1. Array.from(arguments)// 2.var arr = [...arguments]console.log(arr)
}
test(1, 2, 3, 4, 5)var oli = document.querySelectorAll('li')//不是真的数组
var oliarr = [...oli]//转成真的数组
console.log(oli, oliarr)
  1. …对象
var obj1 = {name: 'brisa',age: 100
}
var obj2 = {name: 'tiechui',location: 'sichuan'
}
var obj = { //合并对象，同key的会被后面的value覆盖掉...obj1,...obj2
}
console.log(obj)

一个关于 …对象的小案例

<h1>修改</h1>
<input type="text" id="myusername">
<input type="number" id="myage">
<button id="btn">修改</button>
<div id="box"></div>
<script>
var obj = {name: 'brisa',age: 100,location: 'sichuan',id: '20001128',
}// function render(obj) {
// console.log(obj)
// var {
//     name,
//     age,
//     location
// } = obj
function render({name,age,location
}) { //还可以这样写(解构赋值)box.innerHTML = `name:${name},age:${age}, location:${location}`
}
render(obj)
btn.onclick = function() {var name = myusername.valuevar age = myage.valuevar newObj = { //新的obj，对于原obj没有影响...obj,name: name,age: age}//1.传给后端（省略没写）//2.重新渲染页面render(newObj)
}
</script>

1.7.ES6模块化语法

模块化：
解决如下问题，1.私密不漏；2.重名不怕；3.依赖不乱

  1. 私密不漏
//A.js 需要导出
function A1(){//...
}
//...
export {A1,A2,test,A_A,
}

//html中需要导入
<script type="module">import {A1, A2, test } from './module/A.js'; A1(); A2(); test(); 
</script>
  1. 重名不怕
<script type="module">// 用 as 重命名import {A1, A2, test as A_test} from './module/A.js'; import {B1, B2, test as B_test} from './module/B.js'; A_test(); B_test(); 
</script>
  1. 依赖不乱
// js需要用到其他js文件中的函数，也可以直接通过export+import使用
import { A_A } from '../module/A.js'
import { B_B } from '../module/B.js'A_A()
B_B()
function C() {console.log('C')
}

<!-- 一般放在<head>里 -->
<script src="./module/C.js" type="module"></script>

其他：
如果只用导出一个时，可以使用默认导出：export default XX，使用import XXX from '地址'，XX和XXX名字不要求一样，因为这里只导出了一个，取不同名字相当于重命名了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.exyb.cn/news/show-4576245.html

如若内容造成侵权/违法违规/事实不符，请联系郑州代理记账网进行投诉反馈，一经查实，立即删除！

相关文章

点云分割训练哪家强？监督，弱监督，无监督还是半监督？

点云分割训练哪家强？监督，弱监督，无监督还是半监督？

点击进入—>3D视觉工坊学习交流群0. 笔者个人体会近年来&#xff0c;自动驾驶领域的各项下游任务基本上都要求了对场景的语义理解&#xff0c;比如自动驾驶车辆要能够理解哪个是路面、哪个是交通灯、哪个是行人、哪个是树木&#xff0c;因此点云分割的作用就不言而喻。但随着…
阅读更多...
重磅：USNews2021世界大学排行榜出炉！清华首登亚洲第一

重磅：USNews2021世界大学排行榜出炉！清华首登亚洲第一

点击上方“3D视觉工坊”&#xff0c;选择“星标”干货第一时间送达整理&#xff1a;公众号科研大匠本文仅做学术分享&#xff0c;如有侵权&#xff0c;请联系删除。10月20日&#xff0c;USNews发布2021世界大学排行榜。2021年US News世界大学排名涵盖了分布在81个国家/地区的近…
阅读更多...
【AI产品】拥有它，一秒成为艺术家，你还在等什么？

【AI产品】拥有它，一秒成为艺术家，你还在等什么？

欢迎来到《AI产品》专栏&#xff0c;本专栏面向所有热爱人工智能技术的朋友、同学。在本专栏中&#xff0c;会多多分享给大家不同种类的且新奇有趣的AI产品&#xff0c;对产品中的核心技术进行深度剖析。文章底部会推荐相关核心技术学习资料&#xff0c;全部原创&#xff01;请…
阅读更多...
可怕！公司部署了一个东西，悄悄盯着你···

可怕！公司部署了一个东西，悄悄盯着你···

点击上方“菜鸟学Python”&#xff0c;选择“星标”公众号超级无敌干货第一时间推给你&#xff01;&#xff01;&#xff01;作者 | 轩辕之风O来源 | 编程技术宇宙我是一个网络监控软件&#xff0c;我被开发出来的使命就是监控网络中进进出出的所有通信流量。这个网络中所有人的…
阅读更多...
微交互如何提高产品的使用体验

微交互如何提高产品的使用体验

关注我们&#xff0c;获一手游戏运维方案 辉记培根蛋炒饭辉记培根蛋炒饭&#xff0c;网易游戏视觉设计师&#xff0c;从事过 2C 端和 2B 端的各类型产品的设计&#xff0c;努力学习提升用户体验方面的知识。好设计就是能跟用户互动交流的设计。前言 在了解微交互之前可先了解《…
阅读更多...
speedoffice（Word）怎么修改纸张方向

speedoffice（Word）怎么修改纸张方向

经常用office的就会发现&#xff0c;通常Word纸张都是纵向的&#xff0c;有时我们编辑文件需要横向的&#xff0c;那么怎么调整了Word纸张方向呢&#xff1f; 1、首先&#xff0c;我们打开一个演示Word文档&#xff0c;并找到上方“布局”--“方向”&#xff0c;如图&#xff…
阅读更多...
极速office（Word）怎么修改纸张方向

极速office（Word）怎么修改纸张方向

经常用office的就会发现&#xff0c;通常Word纸张都是纵向的&#xff0c;有时我们编辑文件需要横向的&#xff0c;那么怎么调整了Word纸张方向了&#xff0c;以极速office为例. 首先&#xff0c;打开要调整页面方向的文件&#xff0c;在“布局”菜单栏找到“方向”项目&#xf…
阅读更多...
Word怎么修改纸张方向

Word怎么修改纸张方向

经常用office的就会发现&#xff0c;通常Word纸张都是纵向的&#xff0c;有时我们编辑文件需要横向的&#xff0c;那么怎么调整了Word纸张方向了&#xff0c;以speedoffice为例. 首先&#xff0c;打开要调整页面方向的文件&#xff0c;在“布局”菜单栏找到“方向”项目&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023