《ECMAScript6入门》整理(上)

时间:2022-08-27 13:07:02

0、前言

ECMAScript和JavaScript的关系

ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。

1、let和const命令

let命令

用于声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块有效


let a = 10;
var b =1;

const命令

用来声明常量。一旦声明,其值不能改变。
const的作用域与let命令的相同,只在声明的块级作用域内有效。

2、变量的解构赋值

数组的结构赋值

ES6允许按照一定模式,从数组和对象中取值,对变量进行赋值,这被称为解构(Destructuring)
以前为变量赋值只能直接赋值:

var a = 1;
var b = 2;
var c = 3;

ES6允许这样:

let [a,b,c] = [1,2,3];

这种写法属于”匹配模式”,只要等号两边的模式相同,左边的变量就会被赋予对应的值
嵌套赋值:

let [foo,[[bar],baz]] = [1,[[2],3]];
foo // 1;
bar // 2;
baz // 3;

如果解构不成功,变量的值就等于undefined。

对象的解构赋值

解构不仅可以用于数组,也可以用于对象

let {foo, bar } = {foo:"aaa",bar:"bbb"};
foo // "aaa"
bar // "bbb"

ps:数组的元素是按照次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值:

let {bar , foo} = {foo:"aaa",bar:"bbb"};
bar // bbb;
foo // aaa

对象解构也可以嵌套;
对象解构也可以指定默认值

var {x = 3} = {};
x // 3

注意:

var x;
{x}
= {x:1};

这种写法会报错,原因是javaScript会把{x}理解成代码块,所以发生语法错误。正确写法如下:
({x}) = {x:1} 或者 ({x} = {x:1});

变量解构赋值用途很多

1、交换变量的值

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

2、从函数返回多个值

function example(){
return [1,2,3];
//return{
// foo:1,
// bar:2
//}
}
var [a,b,c] = example();
//var {foo,bar} = example();

3、函数参数的定义

function f({x,y,z}){
//
}
f({x:1,y:2,z:3})

4、函数参数的默认值

jQuery.ajax = function(url,
{async = true,beforeSend = function(){},
cache = true,
complete = function(){},
crossDomain = false,
global = true
//...more config

}){
// ... do stuff

}

5、遍历Map结构

let map = new Map ();
map.set('first','hello');
map.set('second','world');

for(let [key,value] of map){
console.log(key + "is" + value);
}
//first is hello
//second is world

//获取键名
for (let [key] of map){
//...
}
//获取键值
for(let [,value] of map){
//...
}

3、字符串的扩展

codePointAt:方法的参数,是字符在字符串中的位置(从0开始)。它会返回四字节UTF-16字符的Unicode编号。
String.fromCodePoint:该方法用于从Unicode编号返回对应的字符串。作用与codePointAt刚好相反

字符的Unicode表示法

js允许用”\uxxxx”形式表示一个字符,这种表示方法只限于\u0000~\uFFFF之间,ES6做出了改进,只要将大于0xFFFF的编号放进大括号中就能正确解读

正则表达式的u修饰符

ES6增加了u修饰符,来处理大于\uFFFF的Unicode字符

    var = "吉"
/^.$/.test(s) //false
/^.$/u.test(s) //true

contains():返回布尔值,表示是否找到了参数字符

startWith():返回布尔值,表示参数字符串是否在原字符串的头部

endWith():返回布尔值,表示参数字符串是否在原字符串的尾部

repeat():返回一个新字符串,表示将原字符串重复n次

正则表达式的y修饰符

修饰符叫做”粘连”修饰符,全局匹配,后一次匹配都是从上一次匹配成功的下一个位置开始。g修饰符只确保剩余的位置中存在匹配,y修饰符则必须从剩余的第一个位置进行匹配。

var s = "aaa_aa_a";
var r1 = /a+/g;
var r2 = /a+/y;
r1.exec(s) //["aaa"]
r2.exec(s) //["aaa"]
r1.exec(s) //["aa"]
r2.exec(s) //null

模版字符串

    //普通字符串
'in javaScript' 'is a line-feed'
//多行字符串
'in javaScript this is
not legal'

//字符串中嵌入变量
var x = 1;
var y = 2;
console.log('${x}+${y}' = ${x+y}') //1+2=3