java 转码工具

java 转码工具

对象的解构赋值

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };

foo // "aaa"

bar // "bbb"

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };

foo // "aaa"

bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };

baz // undefined

上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。

如果解构失败，变量的值等于undefined。

let {foo} = {bar: 'baz'};

foo // undefined

上面代码中，等号右边的对象没有foo属性，所以变量foo取不到值，所以等于undefined。

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量

默认值

对象的解构也可以指定默认值。

var {x = 3} = {};

x // 3

var {x, y = 5} = {x: 1};

x // 1

y // 5

字符串的解构赋值

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

const [a, b, c, d, e] = 'hello';

a // "h"

b // "e"

c // "l"

d // "l"

e // "o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';

len // 5

函数参数的解构赋值

函数的参数也可以使用解构赋值。

function add([x, y]){

return x + y;}

add([1, 2]); // 3

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y

function demo([x,y]){

return x+y;

}

console.log(demo([10,20]));

function demo([x,y=30]){

return x+y;

}

console.log(demo([10]));

function demo(x,y=20){

return x+y;

}

console.log(demo(10))

解构赋值用途

(1)交换变量的值

let x = 1;let y = 2;

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

上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰

面试题：

请用一句代码，实现两个数据值互换？

(2)提取 JSON 数据

解构赋值对提取 JSON 对象中的数据，尤其有用。

let jsonData = {

id: 42,

status: "OK",

data: [867, 5309]};

let { id, status, data: number } = jsonData;

console.log(id, status, number);

// 42, "OK", [867, 5309]

(3)函数参数的默认值

jQuery.ajax = function (url, {

async = true,

beforeSend = function () {},

cache = true,

complete = function () {},

crossDomain = false,

global = true,

// ... more config

} = {}) {

// ... do stuff

};

解构赋值：

后面使用react使用方便：

比如想获取 state里面的数据 普通写法：this.data.state

var state={

flag:true,

msg:'ok'

}

var {flag,msg}=state;

console.log(flag,msg)

ES6 加强了对 Unicode 的支持，允许采用uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。

字符串的扩展

字符的 Unicode 表示法

"u0061"

// "a"

但是，这种表示法只限于码点在u0000~uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。

"uD842uDFB7"

// ""u20BB7"

// " 7"

字符串的遍历器接口

ES6 为字符串添加了遍历器接口(详见《Iterator》一章)，使得字符串可以被f循环遍历。

for (let codePoint of 'foo') {

console.log(codePoint)}

// "f"// "o"// "o"

除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。

模板字符串(重点)

传统的 JavaScript 语言，输出模板通常是这样写的(下面使用了 jQuery 的方法)。

$('#result').append(

'There are ' + unt + ' ' +

'items in your basket, ' +

'' + Sale +

' are on sale!');

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

$('#result').append(`  There are ${unt} items   in your basket, ${Sale}  are on sale! `);

字符串的新增方法

实例方法：includes(), startsWith(), endsWith()

实例方法：repeat()

实例方法：padStart()，padEnd()

实例方法：trimStart()，trimEnd()

includes(), startsWith(), endsWith()

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

· includes()：返回布尔值，表示是否找到了参数字符串。

· startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

· endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!'; s.startsWith('Hello') // dsWith('!') // true s.includes('o') // true

这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!'; s.startsWith('world', 6) // dsWith('Hello', 5) // true s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。