了解一下ES6: 解构赋值&字符串-白红宇

今天我们来了解一下ES6--解构赋值&字符串

解构赋值

首先，我们先了解一下什么是解构赋值。

解构赋值就是分解一个数组/对象，用数组/对象的方式定义变量，然后按照规则赋值给变量

看不懂？上代码

这是解析数组的方式：

var [name,age,address] = ['janlay',17,'beijing'];console.log(name,age,address);复制代码

输出 janlay 17 beijing

解构赋值必须遵循“等号两边结构类似”的原则去操作

错误示范: 因为等号左边是对象的方式，等号右边则是数组的方式，类型不类似。

var {name,age,address} = ['janlay',17,'beijing'];console.log(name,age,address); //这是种错误的做法。输出undefined复制代码

如果数组中嵌套数组怎么办？例如：

[1, 2, 3, [4, 5, 6, [7, 8]]]复制代码

那这样我们就遵循解构赋值等号两边结构类似的原则，也定义一组结构类似的变量

let [a, b, c, [d, e, f, [g, h]]] = [1, 2, 3, [4, 5, 6, [7, 8]]];console.log(a, b, c, d, e, f, g, h);复制代码

结果控制台输出1 2 3 4 5 6 7 8

如果我们只想要数组其中一个元素进行赋值怎么办？，那我们就可以用 “,”进行占位

例如我们只要数组中的“睡觉”元素

let [,sleep,,] = ["吃饭","睡觉","上网","打豆豆"];console.log(sleep); 复制代码

结果输出 “睡觉”

当然下面这样也是可以的。但是不够清晰

let [,sleep] = ["吃饭","睡觉","上网","打豆豆"];复制代码

刚才只是对数组进行解构，解构赋值也可以应用在对象上

let {nick, address} = {nick: 'janlay', address: 'Beijing'};console.log(nick, address);复制代码

输出 janlay Beijing

当然也有第二种方式:

这里等号左边的key是指等号右边对象的key，等号左边的value代表新的变量名。等号右边的value会赋值给等号左边的value

let {nick: name, address: localAddress} = {nick: 'janlay', address: 'Beijing'};console.log(name, localAddress);复制代码

输出 janlay Beijing

如果相应位置没有对应元素，那我们还可以给定默认值

let {nick, address = '济南'} = {nick: 'janlay'};console.log(nick, address);复制代码

输出: janlay 济南

字符串

模板字符串

以前我们想要在字符串内拼接一个变量，需要用+的方式。这样做不仅阅读效果差，还容易出错

let name = 'janlay';let address = 'Beijing';let hello = '你们好,我叫' + name + '。我来自' + address + '。很高兴认识你们';console.log(hello);复制代码

自从模板字符串出现后，省事了很多。有点模板引擎的味道。

模板字符串是以 “ ` ”(反引号) 开头和结尾。他在键盘Tab键的上方。如果我们改造上面那段话，只需要：

let hello = `你们好,我叫${name}。我来自${address}。很高兴认识你们`;复制代码

不难看出，如果想在模板字符串内使用一个变量，只需要用${变量名}就可以。

如果我们在模板字符串内加前置操作，可以在模板字符串前加一个tag，代表声明一个方法。进行处理参数和变量。方法的第一个参数代表模板字符串的静态字符串。values代表是模板字符串内的所有变量的value

let hello = before`你们好,我叫${name}。我来自${address}。很高兴认识你们`;function before(strings, ...value) {    console.log(strings, value);}复制代码

输出：[ '你们好,我叫', '。我来自', '。很高兴认识你们' ] [ 'janlay', 'Beijing' ]

静态字符串按照变量的占位，自动分割为数组。变量则正常分割为数组

字符串的新方法

includes()：返回布尔值，表示是否包含某个字符/字符串。

startsWith()：返回布尔值，表示某个字符/字符串是否在字符串头部。

endsWith()：返回布尔值，表示某个字符/字符串是否在字符串尾部。

let address = '北京市东城区东长安街';console.log(address.includes("东城")); //trueconsole.log(address.startsWith("北京市")); //trueconsole.log(address.endsWith("长安街")); //true复制代码

当然，这三个方法还可以指定开始搜索的位置，也就是下标。源码里很明确讲到，如果不指定位置，那么将默认从0下标开始查找

position If position is undefined, 0 is assumed, so as to search all of the String.复制代码

repeat 重复函数

这个表面意思就能看出，可以用来重复n遍字符串。参数是重复次数

let sign = "重要的话重复三遍;";console.log(sign.repeat(3));复制代码

输出 重要的话重复三遍;重要的话重复三遍;重要的话重复三遍;

padStart&padEnd 补足函数 (ES8新方法)

这两个函数代表将字符串补足为n位。第一个参数就是需要补足的位数，第二个参数就是补足用的字符。如果没有指定字符，默认用“ ”补足。

下面是padStart的第二参数源码说明。从字符串头部向左补足

The default value for this parameter is " " (U+0020).复制代码

示例：

let str = "a";console.log("(" + str.padStart(7) + ")");复制代码

输出 ( a)

如果含有参数

let str = "1";console.log("(" + str.padStart(7,"abcd") + ")");复制代码

输出 (abcdab1)

不难看出，其补足是以位数进行补足。到达需要的长度就会停止补齐。无论你需要补足的字符串是否补正确

私人微信: wer884181317，欢迎有志之士一起探讨