阅读 96

了解一下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("东城")); //true
console.log(address.startsWith("北京市")); //true
console.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,欢迎有志之士一起探讨


关注下面的标签,发现更多相似文章
评论