这里写目录标题
- let
-
- const
-
- this
-
- 与事件体连用
- 与普通方法连用(除了事件体及构造方法)
- bind
-
- json对象和字符串的相互转换
-
- for。。。in 与 for。。。of
-
- 箭头函数
-
- 综合案例:五星好评
-
- 解构赋值
- 字符串新增方法
-
- includes
- startsWith
- endsWith
let
特点
let是定义变量的关键字,与var的作用相同
let a = 123;
console.log(a);
特点:
1.必须先定义后使用
2.不能重复定义
3.块级作用域,被let修饰的变量,在该作用域下,变量不会丢失,也不能在该作用域外使用
{
let a = 123;
}
console.log(a);
var oLis = document.querySelectorAll("li");
for(let i=0; i<oLis.length; i++){
oLis[i].onclick = function(){
console.log(i);
}
}
console.log(i);
4.暂时性死区:当内部变量与外部变量同名时,内部变量屏蔽外部变量(暂时性死区(TDZ:Temporal Dead Zone):实际上,在块作用域开始的时候,let所声明的变量已经存在,但是他不允许被访问,直到该变量的声明语句出现,从块作用域开始到该变量声明语句间的区域被称为暂时性死区)
let a = 123;
{
let a = 456;
console.log(a);
}
console.log(a);
const
特点
1.被 const 修饰的变量称为只读变量(对于数组等容器来讲主要在于不能
用重新赋值的办法来改变其内容,也即不能改变或产生新的地址)(无
论是内置基本类型还是引用类型,const 修饰的是栈空间存储的内
容)
2.必须初始化
3.必须先定义后使用
4.不能重复定义
5.块级作用域
6.暂时性死区
软性规则:习惯上只读变量名大写
注意点一
const arr = [6,4,7,3,8];
arr[1] = 6666;--------------以const定义数组arr,此处修改他
的第一个元素的数值是可以的,并不会报错,因为const修饰的是
引用类型存储在栈空间的地址,而不是它存储在堆空间的数据本
身,当我们直接去改变数据本身是可以改变的
arr = [6,7,8];----------------------这里的修改则会报错,因
为直接赋值去掉数组元素是改变了栈空间中堆空间数据存放的地
址,而栈空间的内容正是被const所修饰,而无法改变的(但此处
使用api则可以在不报错的情况下修改数组元素及其数值,因为
api是在原数组的基础上进行修改,并不会产生新的地址)
console.log(arr);
注意点二
var,let,const的异同?
1.都是用来定义变量的关键字
2.var自带声明提升
3.const修饰只读变量且必须初始化(只修饰存储在栈空间的内容)
4.let和const的共同点:
必须先定义后使用,
不能重复定义,
块级作用域,
暂时性死区。
this
this:函数体内的内置对象(只能在函数体内使用)
与事件体连用
与事件体连用->代表触发该事件的元素本身
document.onclick = function(){
console.log(this);
}
var oInput = document.querySelector("input");
oInput.onblur = function(){
console.log(this.value);
}
与普通方法连用(除了事件体及构造方法)
与普通函数连用(除了事件体以及构造方法)->调用该普通函数的对象
function fun(){
console.log(this);
}
window.fun();
let json = {
a:123,
fun:function(){
console.log(this);
}
}
json.fun();
bind
作用 参数 以及 代码演示
作用:修改事件体内this的指向,bind是函数对象的一个函数
参数:函数对象.bind(希望this指向的目标元素)
代码展示:
let fun = function(){
}
fun.bind()---> function(){
}.bind()
案例:
style:
#box{
width: 100px;
height: 100px;
background-color: hotpink;
}
html:
<div id="box"></div>
script:
let oBox = document.querySelector("#box");
document.onclick = function(){
this.style.display = "none";
}.bind(oBox);
json对象和字符串的相互转换
字符串转json对象
将json格式字符串转换为JSON对象通常我们称之为JSON的反序列化
语法:JSON.parse(json格式字符串)----------常用(转成的json对象通过返回值带回)
let str = '{"name":"laowang","age":18}';
let json = JSON.parse(str);
console.log(json.name,json.age);
json对象转字符串
将json对象转化为json格式字符串形式通常我们称之为JSON的序列化
语法:JSON.stringify(json对象)(转成的json对象形式的字符串通过返回值带回)
let json = {"name":"laowang","age":18};
let str = JSON.stringify(json);
console.log(str);
for。。。in 与 for。。。of
for…in
功能:遍历下标或json的key,常用于遍历json对象(也可以用来遍历数组等,但是如果数组对象的原型链上添加了自定义属性,需要通过hasOwnProperty()判断属性是否属于数组本身,forin的特性就是会吧原型链上的自定义属性一起遍历)
语法:for(let 索引 in 容器){
循环体内的索引:a.数组是下标 b.json就是key
}
let json = {
"name":"老王",
"age":18
}
for(let index in json){
console.log(json[index]);
}
for…of
功能:遍历元素内容(注意事项:不能遍历json)
常用于遍历没有下标的容器-------------set(集合),map(映射)
let arr = [6,5,7,"heihei",8,9,3];
for(let item of arr){
console.log(item);
}
箭头函数
特点以及代码演示
箭头函数:匿名函数的另一种写法
let f = function(){
console.log("f");
}
let f = ()=>{
console.log("f");
}
f();
document.onclick = ()=>{
console.log("haha");
}
特点:
1.当箭头函数只有一个参数时,可以省略参数的()
let f = a=>{
console.log(a+5);
}
f(8);
2.当函数体只有一条语句时,可以省略{}
let f = a=> console.log(a+5);
f(8);
3.当函数体只有一条语句时,则自带return
let f = a => a + 13;
console.log(f(10));
关于this:
箭头函数的this问题--->代表箭头函数父元素的前缀/父元素的this指向(箭头函数没有this指向,如果上下文存在函数,会继承上下文函数的this指向,如果上下文没有函数,则继承全局变量的前缀,也即window)
document.onclick = ()=>{
console.log(this);-----------------此处this代表的不是document,而是window,因为函数document的父元素前缀是window
}
let stu = {
"name":"凢凢",
"show":()=>{
console.log(this);
}
}
stu.show();----------------被调用时,函数show里面的this代表的是window,是函数show所在的父元素stu的前缀window
综合案例:五星好评
代码演示
style:
* {
margin: 0;
padding: 0;
}
div {
width: 27px;
height: 27px;
background: url(img/star.gif) no-repeat top center;
float: left;
}
html:
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
script:
var hbs = document.getElementsByTagName("div");
for (let i = 0; i < hbs.length; i++) {
hbs[i].onmouseover = function () {
for (let j = 0; j < hbs.length; j++) {
if (j <= i) {
hbs[j].style.backgroundPosition = "bottom center";
} else {
hbs[j].style.backgroundPosition = "";
}
}
}
hbs[i].onclick = function () {
for (let h = 0; h < hbs.length; h++) {
if (h <= i) {
hbs[h].style.backgroundPosition = "bottom center";
} else {
hbs[h].style.backgroundPosition = "";
}
hbs[h].onmouseover = null;--------------点击事件之后,所有的星星需要循环解绑划入事件
}
}
}
解构赋值
解构赋值:解析结构进行赋值
1.定义变量时批量赋值
a.数组方式赋值
let x,y;
x = 1;
y = 2;
let [x,y] = [1,2];
console.log(x,y);
b.json对象方式赋值--->可以去掉json访问属性时的前缀:let {key1,key2} = json对象;
上下文环境:在访问json对象的属性时,可能出现很长的前缀,比如:xxx.xxx.xxx.xxx.xxx.name
let stu = {
"name":"马浩奇",
"age":18
}
let {name,age} = stu;
console.log(name,age);
2.交换两个变量的值
let x,y;
x = 123;
y = 456;
[x,y] = [y,x];
console.log(x,y);-------------此时X,Y原本的赋值已经被交换,x = 456,y = 123;
补充:无参交换
var a = 1,b = 2;
a = a + b;
b = a - b;
a = a - b;
console.log(a,b)---------------此时a,b值发生交换
字符串新增方法
includes
功能:判断字符串是否包含目标字符串
参数:字符串.includes("目标字符串")
let str = "hello world.js";
console.log(str.includes("yingying"));
startsWith
功能:判断字符串是否以目标字符串作为开头
参数:字符串.startsWith("目标字符串")
let str = "hello world.js";
console.log(str.startsWith("el"));
endsWith
功能:判断字符串是否以目标字符串作为结尾(常用来判断文档后缀名,来判断文档类型)
参数:字符串.endsWith("目标字符串")
let str = "hello world.js";
console.log(str.endsWith(".js"));