大作业做网站,乐清市腾速网络科技有限公司,个人网站建设源代码,课程网站建设发展趋势提示#xff1a;关键字声明#xff1a;let与const,长度单位#xff1a;em与rem,vw与wh#xff0c;解构赋值#xff0c;箭头函数(简介) 目录
一、ES6介绍
二、letconst
1.let
1) 用 let 关键字声明的变量不能提前引用
2) 不允许重复声明变量
3) 可以产生块级作用… 提示关键字声明let与const,长度单位em与rem,vw与wh解构赋值箭头函数(简介) 目录
一、ES6介绍
二、letconst
1.let
1) 用 let 关键字声明的变量不能提前引用
2) 不允许重复声明变量
3) 可以产生块级作用域 { }
总结
2.const
三、 长度单位
1.em与rem
1).em
2).rem
2.vw与vh
四、 解构赋值
五、箭头函数
1.基本语法
2.语法 一、ES6介绍
ES6ECMAScript 2015是JavaScript的第六个版本引入了许多新的语言特性和功能使得JavaScript更加现代化、强大和易用。
二、letconst
1.let
1) 用 let 关键字声明的变量不能提前引用
// 声明变量
console.log(index);// 报错
let index 100;
console.log(index);
2) 不允许重复声明变量
// 声明变量
let index 100;
let index 99;// 报错
3) 可以产生块级作用域 { }
{// 块级作用域的变量是局部的是私有的。let x 10;console.log(x);// 10
}
console.log(x);// 报错
{let x 50;console.log(x);// 50
}// var 全局作用域
for (var i 0; i 3; i) {buttons[i].onclick function () {console.log(i:, i);// i:3}
}// let 块级作用域
for (let i 0; i 3; i) {buttons[i].onclick function () {console.log(i:, i);// i:123}
}
总结
var 和 let 的区别:
var会出现变量声明提升, let不能变量声明提升
var可以重复声明, let 不允许重复声明
var没有块级作用域, let 有块级作用域
2.const
1.声明常量 // 变量 值是可以改变的let a 100;a 99;a 98;// 常量值是固定的 基本类型的数据, 如果数据为引用类型那么可以间接的修改// const b 1;// b 2;// 报错const arr [red,green,blue];// arr [红色,绿色,蓝色];// 通过索引值间接的修改arr[0] 红色;arr[1] 绿色;arr[2] 蓝色;console.log(arr);
2.和 let 一样const 也具有块级作用域。
3. 在使用 const 声明变量时必须同时进行赋值。
三、 长度单位
1.em与rem
1).em
如果应用于文本1em 等于当前元素的字体大小。如果应用于非文本元素1em 等于其父元素的字体大小
!-- div classbox-1px单位固定的/div --stylebody {font-size: 20px;}.parent {font-size: 40px;}/* 1em ?px 由父元素的字体属性决定。 此处是1em 40px */.box-2 {width: 10em;height: 10em;background-color: green;}/stylediv classparent!-- div classbox-2span stylefont-size: 16px;em单位(可变的由父元素字体大小变化)/span/div --/div
2).rem
rem 相对于文档的根元素html的字体大小。默认情况下根元素的字体大小是浏览器的默认字体大小通常为 16px。rem 没有继承性子元素的字体大小不受父元素的影响这样可以更好地控制样式。 style/* html: 根元素 */html {font-size: 30px;}.big {font-size: 100px;}/* 1rem ?px 由根元素的字体属性决定。默认1rem 16px */.box-3 {width: 10rem;height: 10rem;background-color: blue;font-size: 16px;}/stylediv classbigdiv classbox-3rem单位(可变的由根元素字体大小变化)/div/div
设置rem的值
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle基本模板/titlestylehtml {font-size: 20px;}.box {/* 1rem 20px */width: 5rem;height: 5rem;background-color: red;}/style
/headbodydiv classbox/divscript; (function () {// 初始化html标签的字体const init function () {// 根元素const html document.documentElement;// 视口宽度const width document.documentElement.offsetWidth || window.innerWidth;// 设计稿的宽度const w 320;// 默认字体20pxconst value 20;// html标签字体大小结果let fontSize width / w * value;// 设置html标签字体html.style[fontSize] fontSize px;}// 初始化html字体init();// 监听页面尺寸变化window.addEventListener(resize, init);})()/script
/body/html 2.vw与vh
style/* 1vw 百分之?的屏幕的宽度 *//* 1vh 百分之?的屏幕的高度 *//* 假设在320的视口尺寸下设置盒子宽度100px 高度100px1vw 320 * (1 / 100) 100 / 320 * 100 31.25vw*/.box-4 {width: 31.25vw;height: 31.25vw;background-color: deeppink;}/stylediv classbox-4vw (视口宽度)/div四、 解构赋值 解构赋值Destructuring Assignment是一种在 JavaScript 中从数组或对象中提取数据并将其赋值给变量的方式。解构赋值使得从数组或对象中提取数据变得更加简洁和直观。
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle基本模板/titlestyle/style
/headbodyscript// 1) 赋值 // 定义a,b,c三个变量// let a red;// let b green;// let c blue;// 2) 数组解构赋值let arr [red, green, blue];// 左右两个结构相同才能进行赋值let [a, , c] arr;console.log(a, c);// red blue// 3) 对象解构赋值let obj { x: 100, y: 500, r: 400 };// 同样需要注意左右两侧的数据结构使用的是对象中的keylet { x, y, r, w } obj;console.log(x, y, r, w);// 遇到结构较复杂如何解剖赋值let { result: [{ num: aa }, { num: bb }, { num: cc }] } { result: [{ num: 100 }, { num: 200 }, { num: 300 }] }console.log(aa);// 100console.log(bb);// 200console.log(cc);// 300let { data:[i,j,k] } { data: [111, 222, 333] };console.log(i,j,k);// 111 222 333// 数组 [0,1,2,3,4,....]// 对象: {key: value}// let [] [];// let {} {};// 使用解构赋值这种方式记录数据的时候需要注意左右两侧数据结构要相同否则无法赋值。/script
/body/html
五、箭头函数
1.基本语法
!DOCTYPE html
html langzh-cn
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle基本模板/titlestyle/style
/head
bodyscript// 普通函数const sayHello function(){console.log(这就是一个普通函数!!!)}sayHello();// 箭头函数// 使用箭头 声明的代码块const speakHello () {console.log(这就是一个箭头函数~~~)}speakHello();/script
/body
/html
2.语法
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle基本模板/titlelink relstylesheet href./libs/bootstrap/css/bootstrap.min.css
/headbodybutton classbtn btn-success m-3点击按钮/buttonscript// 1. 代码块// 1.1 *********// const add () {// console.log(test)// }// add();// 1.2 *********// 有参数而且是一个参数的情况// const add x {// console.log(x)// }// add(1000);// 1.3 *********// const add (x,y) {// console.log(x,y)// }// add(1000,9999);// 1.4 *********// 返回值// const add (x,y) {// return x y// }// let r add(1000,9999);// console.log(r);// 10999// 1.5 *********// 意思是返回xy的结果// const add (x,y) x y; // let r2 add(1,2);// console.log(r2);// 3// 1.6 *********// 接收单一参数的函数// 柯里化函数// const add function(x) {// return function(y){// return function(z){// return x y z;// }// }// }// let r3 add(1)(2)(3);// console.log(r3);// 6// 1.7*********// 箭头函数// const add x y z x y z;const add x y z x y z;// let r4 add(1)(2)(3);// console.log(r4);// 6// 可以让书写函数代码的风格要更加简约// 2. 事件函数const butt document.querySelector(.btn-success);// 注意this的使用// butt.onclick function(){// console.log(this);// 事件调用者就是按钮标签// }// console.log(this);// window// butt.onclick () {// console.log(this);// window// }// 3. 回调函数// setTimeout(function(){},100)// setTimeout((){// document.body.classNamebg-danger;// },100)// let arr [111,222,333];// // arr.forEach(function(item,index){})// arr.forEach((item,index){// console.log(item,index);// })// arguments会报错// const foo (a,b) {// console.log(arguments);// }// foo(1,2)// arguments不会报错// const foo function(a,b) {// console.log(arguments);// }// foo(1,2)// 构造函数const Person function (name) {this.name name;}const p1 new Person(小明);console.log(p1);// Person {name: 小明}// Uncaught TypeError: Animal is not a constructor// 报错// const Animal (name) {// this.name name;// }// new Animal(小狮子)// 注意// 1. 箭头函数作用域没有this的概念// 2. 箭头函数作用域没有arguments对象// 3. 箭头函数不能作为构造函数使用也不能作为原型对象的函数/script
/body/html
