前端笔记2（ES6数组，字符串，对象扩展）

2.1、数组扩展

ES5之前，声明数组有两种方式：

1、直接使用JSON语法声明（[ ]）

声明二维数组

var Array = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]]

2、通过new Array的方式声明

// let arr = [3,45,6,7,8,9,0];

let arr = new Array(1,2,3,4,5,7,8);

console.log(arr);

在ES6中，为了避免使用 new Array()中传入一个参数的误解，加入了一个新的建立数组的方法：Array.of()

// let arr = [3,45,6,7,8,9,0];

// let arr = new Array(4);

let arr = Array.of(2,3,4);

// arr[5] = 20;

console.log(arr);

除此以外，ES6中还提供了一个from方法，可以将类似数组的数据转换为数组类型。

在ES5中提供了一个forEach的语法，可以对数组中的任意变量编写相应的方法操作。

例如：

let arr = Array.of(2,3,4);

// for (let i = 0;i < arr.length;i++) {

// console.log(arr[i] * 2);

// }

arr.forEach(function(value){

console.log(value*3);

});

如果是取得页面元素，取得的一组元素并不能使用forEach来进行处理。

// 将allcheckbox真正变成数组

var allRealcheckbox = Array.from(allcheckbox);

allRealcheckbox.forEach(function(item){

item.checked = true;

});

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</script>

</body>

</html>

实际上，在ES6中，使用最多的数组相关的语法，应该是解构操作。

例如：

将数组中的每个值取得，放到单独的变量中。

let arr = [2,3,4,5];

// let a = arr[0];

// let b = arr[1];

// let c = arr[2];

let [a,b,c,d,e] = arr ;

console.log(a,b,c,d,e);

这种语法支持嵌套使用

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

// let a = arr[0];

// let b = arr[1];

// let c = arr[2];

let [a,b,c,d,[e,f]] = arr ;

console.log(e,f);

这里还支持空白值的使用

let arr = [2,3,4,5,6];

// let a = arr[0];

// let b = arr[1];

// let c = arr[2];

let [,a,,,b] = arr ;

console.log(a,b);

还支持可变参数

let arr = [2,3,4,5,6];

// let a = arr[0];

// let b = arr[1];

// let c = arr[2];

let [a,b,...c] = arr ;

console.log(c);

同时，支持默认值的设置。

let arr = [2,3,4,5,6];

// let a = arr[0];

// let b = arr[1];

// let c = arr[2];

let [a,b,c,d,e = 0] = arr ;

console.log(e);

典型应用场景：值交换

let a = 10 ;

let b = 20 ;

console.log(a,b);

[a,b] = [b,a];

console.log(a,b);

数组，在ES6中还提供了一些别的操作方法：

查找操作
1. find
2. findIndex
3. includes

let arr = [5,0,1,2,3,4];

// let result = arr.find(function(item){

// return item > 5;

// });

// let result = arr.findIndex(function(item){

// return item > 5;

// });

let result = arr.includes(2);

console.log(result);

循环数组中的值
1. keys：取得所有下标，在数组里没用，因为下标就是从0开始的固定数列
2. values：取得所有值，在数组里没用，因为值就是数组本身的内容
3. entries：取得key-value键值对，在数组里没用，因为key没用

let arr = [5,32,12,34,24];

// let arr2 = arr.keys();

for (let [key,value] of arr.entries()) {

console.log(key,value);

}

这里又有一个新的循环语法：

for … of

类似Java的forEach循环，可以把一个数组或集合中的所有值，取得放到一个变量里进行处理。

可以不需要再通过下标取得每一个元素。

拷贝
1. copyWithin：从自己数组中取得一部分值，拷贝到自己里面。
2. fill：将一个值拷贝到数组中，替换原有的内容

let arr = [5,32,12,34,24];

// console.log(arr.copyWithin(0,3,5));

console.log(arr.fill(false,0,1));

2.2、字符串扩展

在JavaScript中，字符串可以认为一个字符数组。

因此也支持数组的一些结构操作。

let str = "Hello world" ;

let [a,b,c,d,e,...f] = str ;

console.log(a,d,f);

这样，我们就可以实现把字符串转换为字符数组的操作。

如果想把字符数组转换为字符串，可以使用 join()方法来实现。

let str = "Hello world" ;

let [...f] = str ;

console.log(f);

console.log(f.join('-'));

字符串的典型扩展操作：

针对Unicode编码的扩展

let str = "\u{20BB6}";

console.log(str);

对于这种UTF-16的编码的中文字符，我们必须使用特殊的取值方法，才能完整的把值取得。

let str = "\u{20BB6}abc";

console.log(str.length);

// for (let i = 0;i < str.length;i++) {

// console.log(str.codePointAt(i));

// }

for (let s of str) {

console.log(s);

}

判断是否包含内容
1. startsWith，endsWith，includes

let str = "abcdedf";

console.log(str.startsWith("abc"));

console.log(str.endsWith("def"));

console.log(str.includes("d"));

重复复制多次字符串
1. repeat

let str = "abc";

console.log(str.repeat(3));

补位方法
1. padStart、padEnd
2. 用来补足不够的内容
3. 一般用来补0

let month = "7";

console.log(month.padStart(4,"0"));

console.log(month.padEnd(4,"0"));

let str = "7-19";

console.log(str.padStart(10,"YYYY-MM-dd"));

模板字符串
1. 用来替代原有的字符串拼接操作

let name = "张三" ;

let age = 30 ;

// let result = "姓名："+name+", 年龄："+age+"，";

let result = `姓名：${name},

年龄：${age}ajhdf;asd

jf;lkasjdf;lkasdjf;

aklsjdf;laksdjfa;klsdfja;sdfjas;`;

console.log(result);

而单纯的模板字符串还存在着很多的局限性。如：

不能自动转义特殊的字符串。（这样很容易引起注入攻击）

不能很好的和国际化库配合（即不会格式化特定语言的数字，日期，文字等）

没有内建循环语法，（甚至连条件语句都不支持，只可以使用模板套构的方法）

标签模板
1. 主要作用是编写一个方法，可以把模板字符串拆分为变量和值的形式。

function testTemplate(arr,name,age) {

console.log(arr);

console.log(name,age);

}

let name = "张三" ;

let age = 30 ;

// let result = "姓名："+name+", 年龄："+age+"，";

testTemplate`姓名：${name},

年龄：${age}ajhdf;asd

jf;lkasjdf;lkasdjf;

aklsjdf;laksdjfa;klsdfja;sdfjas;`;

tag `Hello ${a+b} world ${a*b}`;

tag函数的第一个参数是一个数组，该数组的成员时模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员和第二个成员之间，以此类推。tag函数的其他参数都是模板字符串各个变量被替换后的值，由于本例中，模板字符串含有两个变量，因此tag会接收到value1和value2两个参数。
tag函数所有参数的实际值如下：
——第一个参数：['Hello ',' world ','']
——第二个参数：15
——第三个参数：50
也就是说tag函数实际上是以下面的形式调用的
tag(['Hello ',' world ',''],15,50);

2.3、对象扩展

对象在ES6中支持简洁写法。

let test = 123 ;

let abc = "abc" ;

// let oldObj = {

// a:a,

// b:b

// };

let newObj = {

test,abc

}

console.log(newObj);

以上的功能一般用在前台传递数据到后台时，如果后台返回一个JSON结果，给前台进行解析时，可以通过结构的方式来取得里面的变量，语法类似数组操作。

let obj = {

name : "zhangsan",

age : 30 ,

weight : 95.4

};

let {name,age,weight} = obj ;

console.log(name,age,weight);

let obj = {

name : "zhangsan",

age : 30 ,

weight : 95.4

};

let {name:age,age:weight,weight:name} = obj ;

console.log(name,age,weight);

let obj = {

name : 30,

age : "zhangsan" ,

weight : 95.4 ,

sports :[

"足球","篮球"

card : {

id:"1234890"

}

};

let {sports:[a,b],card:{id}} = obj ;

console.log(a,b,id);

在对象创建的语法里，还多出现了一个属性表达式的操作。

let a = "b";

let obj = {

[a.repeat(3)]:"abc"

};

console.log(obj);

对象的新的方法：

1、assign：复制对象

let objA = {

a:"a",

age:20

}

let objB = {

b:"b",

age:30

}

Object.assign(objA,objB);

console.log(objA);

循环打印功能
1. Keys
2. Entries

let objA = {

a:"a",

age:20

};

for (let key of Object.keys(objA)) {

console.log(key);

}

let objA = {

a:"a",

age:20

};

for (let [key,value] of Object.entries(objA)) {

console.log(key,value);

}