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> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="checkbox" id="all" > 全选 <br/> <input type="checkbox" name="prod" value="1"> 商品1 <br/> <input type="checkbox" name="prod" value="2"> 商品2 <br/> <input type="checkbox" name="prod" value="3"> 商品3 <br/> <input type="checkbox" name="prod" value="4"> 商品4 <br/>
<script type="text/javascript" src="/js/index.js">
</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中还提供了一些别的操作方法:
- 查找操作
- find
- findIndex
- 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); |
- 循环数组中的值
- keys:取得所有下标,在数组里没用,因为下标就是从0开始的固定数列
- values:取得所有值,在数组里没用,因为值就是数组本身的内容
- 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循环,可以把一个数组或集合中的所有值,取得放到一个变量里进行处理。
可以不需要再通过下标取得每一个元素。
- 拷贝
- copyWithin:从自己数组中取得一部分值,拷贝到自己里面。
- 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); } |
- 判断是否包含内容
- startsWith,endsWith,includes
let str = "abcdedf";
console.log(str.startsWith("abc")); console.log(str.endsWith("def")); console.log(str.includes("d")); |
- 重复复制多次字符串
- repeat
let str = "abc";
console.log(str.repeat(3)); |
- 补位方法
- padStart、padEnd
- 用来补足不够的内容
- 一般用来补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")); |
- 模板字符串
- 用来替代原有的字符串拼接操作
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); |
而单纯的模板字符串还存在着很多的局限性。如:
不能自动转义特殊的字符串。(这样很容易引起注入攻击)
不能很好的和国际化库配合(即不会格式化特定语言的数字,日期,文字等)
没有内建循环语法,(甚至连条件语句都不支持, 只可以使用模板套构的方法)
- 标签模板
- 主要作用是编写一个方法,可以把模板字符串拆分为变量和值的形式。
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); |
- 循环打印功能
- Keys
- 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); } |