es6基础知识2

作者 : 开心源码 本文共2447个字,预计阅读时间需要7分钟 发布时间: 2022-05-12 共205人阅读

1. 块作用域

作用域指的是变量的作用范围,js本身具备了全局作用域和函数作用域,es6中新添加了块作用域。块作用域可以了解为由{}包含的代码所产生的作用范围

es6中还新添加了两种变量公告方式let和const,原来的var不支持块作用域

var与let的区别
var支持变量公告预解析,不支持块作用域,允许重复公告
let不支持变量公告预解析,支持块作用域,不允许重复公告

{    var a = 1;  //var 不支持 {}    let b = 2;    const c = 3;}console.log(a);console.log(b);console.log(c);

const不支持变量公告预解析,支持块作用域,不允许重复公告,并且是一个常量(值一旦确认,不允许修改),同时公告常量必须复制,不允许公告后再赋值。

2. 解构赋值

解构赋值的含义是允许按照肯定的模式从数组或者者对象中提取值,并对变量进行赋值。

2.1 数组解构

数组解构的写法:

let arr = [1, 2, 3];let [a, b, c] = arr; //提取数组中的值,并逐个赋值给a,b,cconsole.log(a, b, c); //1 2 3

上面这种写法等价于:

let arr = [1, 2, 3];let a = arr[0];let b = arr[1];let c = arr[2];console.log(a, b, c);//1 2 3

强调一点的是,使用数组解构需要值逐个对应,比方说上面的那个例子,假如只是想把1,3赋值给a,b,那么应该这样写[a, , c] = arr

2.2 对象解构

对象解构的写法:

let { game, level } = { game: "bird", level: "king" };  // 左侧中变量的名称必需是右侧对象中存在的key,解构的顺序不需要对应console.log(game, level);

对象解构需要注意变量中的名称需要和右边对象的键值(key值)对应,但是不要求顺序上对应。

有时候,不想用对象的key值作为变量名,这个时候可以在左侧给变量取一个别名

let  {left: L, top: T} = {left: 100, top: 200};console.log(L, T);//100 200// 这段代码就相当于let obj = {left: 100, top: 200};let L = obj.left;let T = obj.top;

2.3 多重解构

一个简单的例子:

let { scores: [english, math], year} = {scores: [99, 98], 2019}// 这样的写法相当于:let english = 99;let math = 98;let year= 2019;

3. 扩展运算符

扩展运算符的含义是将数组或者者对象转化为参数序列,可以了解为将数组外面的[]和对象外面的{}去掉,而后将数组或者者对象转化为,分隔的参数化序列

// 解构赋值可以这样来了解['a‘,'b','c'] => 'a','b','c'{left:100, top:200} => left: 100, top: 200

解构赋值的表示法是...,在一个对象或者者数组前面加上...代表对其进行解构

let arr = [1, 3, 4]// ...arr表示 1,3 4

构赋值在少量函数的使用和对象、数组的合并方面非常好用,比方说想求得一个数组的最大值:

let arr = [1, 2, 3, 4, 5];// 没有解构赋值的化可能需要这么做let max = Math.max(arr[0], arr[1], arr[2], arr[3], arr[4]);// 有理解构赋值,即可以这样做:let max = Math.max(...arr)

使用解构赋值方便进行数组的合并

let arr1 = [1, 2, 3];let arr2 = [4, 5, 6];let arr3 = [...arr1, ...arr2]; //arr3 = [1, 2, 3, 4, 5, 6]

包括对象的合并:

let obj1 = {left:100, top: 200};let obj2 = {width: 200, height: 200};let obj3= {    ...obj1,    ...obj2};

4.模板字符串

模板字符串是es6新添加的一种字符串表示法,区别于之前的或者者便是字符串,模板字符串使用反引号`表示

模板字符串有两个主要的作用,一是保持字符串格式,二是变量表达式解析:

// 保持字符串的格式:var str = `        ${1+1}    模板字符串`; console.log(str);//变量表达式解析let score = 100// 打印分数的话以前可能这么写:console.log('your score is ' + score);// 现在可以这样写:console.log(`your score is ${score}`)

5. 对象拓展

在es6中,对于对象的拓展主要是对象简介表达式和属性名表达式。对象简介表达式指的是当对象的key与对应的属性所引用的变量或者函数同名的时候,可以简写为一个;属性名表达式指的是对象的属性名可以接受表达式作为key,表达式计算的结果作为最终的key

简介表达式举例:

var name = 'john';var score = function () {    return 100}// 当对象是下面这种形式的时候var obj = {    name: name,    score: score}// 即可以简写为var obj = {    name,    score}

属性名表达式举例:

在es6之前,对象的属性名只能是字符串,在es6中添加了属性名表达式,也就是说通过[]符号中的表达式计算出最终的值来作为属性名,满足了少量情况动态变化属性名的需求。

// 定义一个变量var abc = 'name'var obj1 = {    abc: 'something',    [abc]: 'john'}// obj1对象相当于:var obj2 = {    abc: 'something',    name: 'john'}

属性名表达式

在使用属性名表达式进行访问的时候,肯定得注意obj1["abc"]obj1[abc]是不同的,第一种是正常访问对象的属性,第二种是属性名表达式,需要先计算出真正的属性名而后在访问。

注意访问上的区别

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » es6基础知识2

发表回复