ES6常用语法解析

2023-11-24 15:35

秦倩 453

ES6常用语法解析

ECMAScript 6 是继ECMAScript 5 之后发布的JavaScript语言的新一代标准，加入了很多新的特性和语法，该标准于2015年6月17日发布了正式版本，并被正式命名为ECMAScript 2015。

let

特性：

变量不能重复声明
在声明所在的块级作用域中有效(块级作用域包含if else while for等)
不存在变量提升
不影响作用域链

{
    let school = 'CTBU';
    function fn(){
       console.log(school);
     }
     fn();
 }

const

用于声明常量，const 关键字声明的常量必须在声明时进行初始化，const声明的常量一般使用大写（潜规则），常量的值不能修改，也在声明所在的块级作用域中有效，对于数组可元素的修改，不算做对常量的修改，不会报错。

const TEAM = ['uzi','mlxg','xxh'];
TEAM.push('hhh');
console.log(TEAM); // 不报错
// TEAM = 100;
// console.log(TEAM); // 报错

解构赋值

ES6允许按照一定的模式从数组和对象中提取值，对变量进行赋值，这被称为结构赋值。

数组：对于解构数组，变量的顺序要与数组中的元素顺序相同。

const F4 = ['婷婷','紫寒','千千','悦悦'];
let [ting,han,qian,yue] = F4;
console.log(ting,han,qian,yue);

对象：对于解构对象来说，解构所使用的变量名称要与对象中的属性名相同，顺序可以不同。

const tom= {
    name:'tom',
    age:18,
    say:function(){
        console.log('morning~');
    }
};

let {name,age,say} = tom;
console.log(name);
song();

模版字符串

ES6引入新的声明字符串的方式。在字符串中使用变量和表达式，使得字符串和变量之间拼接起来的语法更加优雅。

let str = `<ul>
<li>早上好</li>
<li>中午好</li>
</ul>`;
let weather= '晴朗';
let today = `今天天气好{{weather}`;

箭头函数

ES6 允许使用箭头 => 定义函数。

箭头函数的声明和调用

// ES5
function foo() {}

// ES6
const foo = () => {};
foo()

简写形式

// 省略小括号：当形参有且只有一个的时候
let add = (n)=>{ return n++; };
let add = n => {return n++;};

// 省略花括号：当代码体有且只有一行的时候，此时return也要去掉，且语句的执行结果就是函数的返回值
let add = (n)=>{ return n++; };
let add = n =>  n++;

注意事项箭头函数不能作为构造函数使用箭头函数没有原型箭头函数内没有arguments箭头函数不能使用yield关键字
箭头函数与ES5声明的普通函数的区别：箭头函数的this是静态的，始终指向函数声明时所在的作用域下的this的值（箭头函数没有自己的this，它的this是继承而来）。

参数默认值

ES6 允许函数参数赋值初始值，一般设置初始值的形参位置要靠后。

function add(a, b, c=10) {
    return a + b + c;    
}
const result = add(1, 2);
console.log(result);

rest参数

ES6 中引入了 rest 参数，用于获取函数的实参，代替 arguments，rest参数之后不能再有其他参数(即只能是最后一个参数)

// ES5 获取实参的方式
function data (){
    console.log(arguments);
}
//data('tom','bob','lucy');

// ES6 获取实参的方式 rest参数
    function data(...args){
console.log(args);//数组 filter some every map
}
// data('tom','bob','lucy');

与arguments的区别：

剩余次数只包含没有对应实参，而arguments对象包含了传给函数的所有实参
rest参数是一个数组，而arguments对象是伪数组
剩余参数必须放在最后面

spread扩展运算符

... 扩展运算符能将数组转换为逗号分隔的参数序列

字符串新增方法

satrtsWith()

startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false 。

str.startsWith(searchString[, position])

endsWith()

endsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串结尾，并根据判断结果返回true 或 false 。

// str.endsWith(searchString[, position])

// 判断字符串开头是否为h
const isa = str.startsWith("apple");
console.log(isa); // true

includes()

includes() 方法用来判断当前字符串是否以另外一个给定的子字符串结尾，并根据判断结果返回true 或 false 。

// str.includes(searchString[, position])

// 判断字符串结尾是否为d
const isd = str.endsWith("banana");
console.log(isd); // false