前端入门到熟悉day26

let和const命令介绍

let命令

ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

for循环的计数器,就很合适使用let命令。

var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined

let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

Const命令

const声明一个只读的常量。一旦声明,常量的值就不能改变。

const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

const的作用域与let命令相同:只在声明所在的块级作用域内有效。

const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。

const声明的常量,也与let一样不可重复声明。

//常量 const声明一个只读的常量。一旦声明,常量的值就不能改变。

const usr = {};

// usr={};报错

usr.usrName=“Tom”;

usr.showName=function(){

console.log(this.usrName)

}

usr.showName();

// const PI = 3.1415926;

// PI =3;

//这个对象传值传递“引用” ref

let usr1 = usr;

let usr2 = usr;

console.log(usr1===usr2);//true; 值一样 类型也是一样

usr1.usrName = ‘Mike’;

usr.showName();

usr1.showName();

usr2.showName();

console.log("====================================");

const x=5;

let x1=x;

let x2=x;

console.log(x1===x2);

//number 传递值

x1 =6;

console.log(“x1=”+x1);

console.log(“x2=”+x2);

let和var的区别

通过var定义的变量,作用域是整个封闭函数,是全域的 。通过let定义的变量,作用域是在块级或是子块中。

变量提升现象:浏览器在运行代码之前会进行预解析,首先解析函数声明,定义变量,解析完之后再对函数、变量进行运行、赋值等。 
不论var声明的变量处于当前作用域的第几行,都会提升到作用域的头部。 
var 声明的变量会被提升到作用域的顶部并初始化为undefined,而let声 明的变量在作用域的顶部未被初始化

但是直接用let声明变量不赋值是会打印undefined,还是初始化了,只是let声明放在赋值之后,let声明会提前但不会初始化。

只要块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,不再受外部的影响。总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的,尽管代码块外也存在相同全局变量。

let不允许在相同作用域内,重复声明同一个变量。

//使用let和var的区别 let 命令声明的变量只能在自己的代码块内有效 外面引用会抛出异常

// {

// var b=1;

// let a=2;

// }

// console.log(a);

let arrs=[];

for (let i=0;i<20;i++){

// var x = i; //由于js没有局部变量 每次使用都会使用一个新的x覆盖掉原来的x

let x=i;//es6的局部变量 每一次都创建一个新的x 属于本次作用域

arrs[i]=function(){

console.log(“x=”+x);

}

}

// console.log(arrs.length);

arrs0;

arrs5;

arrs11;

arrs17;

// var a = [];

// for (var i = 0; i < 10; i++) {

// a[i] = function () {

// console.log(i);

// };

// }

冻结Object.freeze()与临时作用域with

冻结Object.freeze()

Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。

临时作用域with

with 和 catch 语句主要用来临时扩展作用域链, 将语句中传递的变量对象添加到作用域的头部。语句结束后,原作用域链恢复正常。

let name =“zhang”;

// console.log(hello${name});

// ${字符串} 模板字符串

//冻结对象

// const clzQ1203 = {name:‘Q1203’,stuNum:9};

const clzQ1203=Object.freeze({name:‘Q1203’,stuNum:9}) //不会抛出异常 但是不能改变对象原有的属性和方法

clzQ1203.name=‘88888’;

// console.log(clzQ1203.name);

//临时扩展作用域 with

let stu = {sn:“Mike”,sa:19,ssb:{sbn:“js”,tchr:“Maybe”}}

//with创建一个临时作用域

with(stu){

console.log(stu);

console.log(学生姓名:${sn});

stu.sg=“我好帅”;

console.log(stu);

}

with(stu.ssb){

console.log(老师姓名:${tchr})

}

解构与占位符

我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新特性:解构。解构是一种打破数据结构,将其拆分为更小部分的过程。

对象解构

对象字面量的语法形式是在一个赋值操作符左边放置一个对象字面量

数组解构

与对象解构的语法相比,数组解构就简单多了,它使用的是数组字面量,且解构操作全部在数组内完成,而不是像对象字面量语法一样使用对象的命名属性

混合解构

可以混合使用对象解构和数组解构来创建更多复杂的表达式,如此一来,可以从任何混杂着对象和数组的数据解构中提取想要的信息

其他解构

【字符串解构】

字符串也可以解构赋值。这是因为,字符串被转换成了一个类似数组的对象

【数值和布尔值解构】

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错

let stu ={sn:‘Mike’,sa:19,ssbj:{sbn:‘js’,tchr:‘Tom’}};

// let stuName = stu.sn;

// console.log(stuName);

let {sn,sa,ssbj} = stu; //对象解构

// console.log(sn);

// console.log(ssbj.tchr);

//数组解构

let arrNums = [1,2,3,4,5,6,7,8,9,10];

let [a1,a2,a3] = arrNums;

// console.log(a1:${a1});

// console.log(a2:${a2});

// console.log(a3:${a3});

let [b1,b2,b3,…bn] = arrNums; //指定位置解构

// console.log(b1=${b1});

// console.log(b2=${b2});

// console.log(b3=${b3});

// console.log(bn=${bn});

//多维数组解构

let arrs2 = [10,20,[30,40,[80,90,100]],[60,70]];

let [r0,r1,[r2,r2_,[…r3]],r4] =arrs2;

// console.log(“r1=”+r1);

// console.log(“r2=”+r2);

// console.log(“r3=”+r3);

// console.log(“r4=”+r4);

arrs2.forEach(function(v,i){

// console.log(v)

});

//使用占位符

let [,[x1,[x2]],] = arrs2;

console.log(“x1=”+x1);

console.log(“x2=”+x2);

// let sex =‘男’

stu.sex=‘男’;

let {sn:stuName,sa:stuAge,ssbj:stuMajay,sex=‘男’} = stu; //对象解构 使用别名

console.log(stuName=${stuName});

console.log(sex=${sex})

console.log(stu);

map和set解构和函数参数解构和解构运用

Set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set本身是一个构造函数,用来生成 Set 数据结构。

通过add()方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的值。

Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。

去除数组重复成员的方法。

// 去除数组的重复成员[…new Set(array)]

上面的方法也可以用于,去除字符串里面的重复字符。

[…new Set(‘ababbc’)].join(’’)

// “abc”

向 Set 加入值的时候,不会发生类型转换,所以5和"5"是两个不同的值。Set 内部判断两个值是否不同,使用的算法叫做“Same-value-zero equality”,它类似于精确相等运算符(===),主要的区别是NaN等于自身,而精确相等运算符认为NaN不等于自身。

Set 实例的属性和方法

Set 结构的实例有以下属性。

Set.prototype.constructor:构造函数,默认就是Set函数。

Set.prototype.size:返回Set实例的成员总数。

Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。

add(value):添加某个值,返回 Set 结构本身。

delete(value):删除某个值,返回一个布尔值,表示删除是否成功。

has(value):返回一个布尔值,表示该值是否为Set的成员。

clear():清除所有成员,没有返回值。

Array.from方法可以将 Set 结构转为数组。

遍历操作

Set 结构的实例有四个遍历方法,可以用于遍历成员。

keys():返回键名的遍历器

values():返回键值的遍历器

entries():返回键值对的遍历器

forEach():使用回调函数遍历每个成员

需要特别指出的是,Set的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用 Set 保存一个回调函数列表,调用时就能保证按照添加顺序调用。

Map

含义和基本用法

JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

Map 结构的实例有以下属性和操作方法。

(1)size 属性

size属性返回 Map 结构的成员总数。

(2)set(key, value)

set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。

(3)get(key)

get方法读取key对应的键值,如果找不到key,返回undefined。

(4)has(key)

has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。

(5)delete(key)

delete方法删除某个键,返回true。如果删除失败,返回false。

(6)clear()

clear方法清除所有成员,没有返回值。

遍历方法
Map 结构原生提供三个遍历器生成函数和一个遍历方法。

keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回所有成员的遍历器。
forEach():遍历 Map 的所有成员。
需要特别注意的是,Map 的遍历顺序就是插入顺序。

与其他数据结构的互相转换
(1)Map 转为数组

前面已经提过,Map 转为数组最方便的方法,就是使用扩展运算符(…)。

(2)数组 转为 Map

将数组传入 Map 构造函数,就可以转为 Map。

(3)Map 转为对象

如果所有 Map 的键都是字符串,它可以无损地转为对象。

如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。

对象转为 Map
(5)Map 转为 JSON

Map 转为 JSON 要区分两种情况。一种情况是,Map 的键名都是字符串,这时可以选择转为对象 JSON。

另一种情况是,Map 的键名有非字符串,这时可以选择转为数组 JSON

(6)JSON 转为 Map

JSON 转为 Map,正常情况下,所有键名都是字符串。

但是,有一种特殊情况,整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。

// Array Object , Set:集 ,Map映射表[key:value]

let set1 = new Set([1,2,3,4,5]);

//console.log(set1.size);//size属性:size是指这个Set的长度,和数组的length效果一样的" 5

set1.add(3);

set1.add(4);

set1.add(5);

set1.add(6);

set1.add([4,7,8,9]);

//set 不存重复的数据

// console.log(set1.size);

console.log("===================================================")

// set1.forEach((v)=>{console.log(v)});

// ()=>{

// }

// set1.forEach(function(v){

// console.log(v)

// })

// let set = new Set();

// set.add({});

// set.size // 1

// set.add({});

// console.log(set);

// const items=new Set([1,2,3,4,5,5,5,5,5,5])

// // console.log(typeof items); object

// const array = Array.from(items); //能够把集合转换成数组

// console.log(array);

//Set集合遍历

let set = new Set([‘red’, ‘green’, ‘blue’]);

// for(let item of set.keys()){

// console.log(item);

// }

for (let x of set) {

// console.log(x);

}

// console.log(set);

console.log("=Map")

let map = new Map();

map.set(‘s001’,{sn:‘Tom’,sage:19});

map.set(‘s002’,{sn:‘Mike’,sage:18});

map.set(‘s003’,{sn:‘Marray’,sage:20});

// console.log(map.size);

let s2 = map.get(‘s002’);

// console.log(s2);

// console.log(s2.sn+","+s2.sage);

map.forEach((value,key)=>{

// console.log(key+":"+value)

});

//对set解构

let [st0,st1,…stn] = set1;

// console.log(st0);

// console.log(st1);

// console.log(stn);

//对map进行解构

console.log(map)

let [m1,m2]=map;

console.log(m1[0]);

console.log(m1[1].sn)

参数解构

//函数参数解构赋值

function adder(num0,num1){

return num0+num1

}

console.log(adder(1,2));

//参数解构

function adder2([num0,num1]){

return num0+num1;

}

console.log(adder2([3,4]))

//参数解构

function adder3({num0=10,num1=20}={}){

return num0+num1;

}

console.log(adder3({num0:5,num1:6}))

console.log(adder3());

console.log(adder3({num0:5}));

console.log(adder3({num1:5}));

应用解构

//应用解构

let x=1,y=2;

// let z=y;

// y=x;

// x=z;

// [x,y]=[y,x];

// console.log(x=${x});

// console.log(y=${y});

function getStuScore(sid){

if(sid==1){

return [‘mike’,‘js’,87]

}else if(sid ==2){

return [‘jack’,‘css’,10]

}

}

let [snm,subject,score] = getStuScore(2);

console.log(snm=${snm});

猜你喜欢

转载自blog.csdn.net/weixin_44160944/article/details/88043765
今日推荐