最详细的ES6基础语法

什么是ES6?

netscape(网景)公司创造了javascript这个脚本语言,javascript被越来越多的使用,后来出现的脚本语言也很多,就希望把它提交给国际化标准组织ECMA实行秦国的货币统一政策,ECMA发布的标准就叫做ECMAScript 。

ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了。ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。基于nodejs的web框架也应运而生,有express,AngularJs,Nodejs等等

变量声明let与const

变量let

1.let声明的变量不存在预解析

JS预解析的过程可以这样理解:
预解析就像是一场游戏,游戏开始之前先清点玩家参与的名单,只要你开黑加入了这场团战,那你就是游戏的参与者。无论你挂机还是不挂机,都是游戏的参与者。
underfined就好比挂机的。
报错找不到的就不是这场游戏的参与者

console.log(flag);
var flag = 456;结果为undefined

console.log(flag);
var flag = 456;结果会报错,无法在初始化之前访问

2.let声明的变量不允许重复(在同一个作用域内)

3.ES6引入了块级作用域,块内部定义的变量,只能先声明再使用,在外部是不可以访问的

4.for循环括号中声明的变量只能在循环体中使用

常量const

适用变量let的所有语法

有一点需要注意点的:const声明的常量必须初始化


变量的解构赋值

数组解构赋值

解构赋值,是将 = 右边的结构分解(解构),然后按照格式给 = 左边进行赋值

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

 let [a=111,b,c] = [,123,];

a=111是指定默认值

对象的解构赋值

let {foo,bar} = {foo : 'hello',bar : 'hi'};

// 对象属性别名(如果有了别名abc,那么原来的名字foo就无效了)
 let {foo:abc,bar} = {bar : 'hi',foo : 'nihao'};

字符串的解构赋值

let [a,b,c,d,e] = "hello";

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

对应字符串的字符,如果字符串不够,那个变量则为undefined,字符串过多,则变量为前面的部分.

字符串相关扩展

    includes()
    startsWith()
    endsWith()

 includes() 判断字符串中是否包含指定的字串(有的话返回true,否则返回false)
参数一:匹配的字串;参数二:从第几个开始匹配
startsWith()  判断字符串是否以特定的字串开始
endsWith()  判断字符串是否以特定的字串结束

比如:

console.log('hello world'.includes('world',6));
let url = 'admin/index.php';
console.log(url.startsWith('admin'));
console.log(url.endsWith('phph'));

结果为true true false

模板字符串


 let obj = {
    username : 'lisi',
    age : '12',
    gender : 'male'
};

// 反引号表示模板,模板中的内容可以有格式,通过${}方式填充数据
let tpl = `
    <div>
        <span>${obj.username}</span>
        <span>${obj.age}</span>
        <span>${obj.gender}</span>
        <span>${1+1}</span>
    </div>
`;

函数扩展

参数默认值

function foo(param = 'nihao'){
    console.log(param);
}
foo('hello kitty');

参数默认值为nihao

参数解构赋值

//函数参数的解构功能对于实现多参的函数是非常有用的。

function foo({uname='lisi',age=13}={}){
    console.log(uname,age);
}
foo({uname:'zhangsan',age:15});

这里的对象里属性的默认是为lisi ,13

rest参数(剩余参数)

function foo(a,b,...param){
    console.log(a);
    console.log(b);
    console.log(param);
}
foo(1,2,3,4,5);

打印的结果为1,2,[3,4,5]

剩余的参数都会加入param里变成数组的一部分

扩展运算符

和rest参数相对立,把数组里的属性值拆分成一个个单独的数值

function foo(a,b,c,d,e,f,g){
    console.log(a + b + c + d + e + f + g);
}
let arr = [1,2,3,4,5,6,7];
foo(...arr);

合并数组:
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3);

箭头函数

基本格式:let 函数名 = (参数1,参数2) => {函数体}

如:let foo = (a,b) => {let c = 1; console.log(a + b + c);}    foo(1,2); 结果打印4

匿名函数:

let arr = [123,456,789];

arr.forEach((element,index)=>{
    console.log(element,index);
});

  箭头函数的注意事项:
1、箭头函数中this取决于函数的定义,而不是调用

2、箭头函数不可以new

3、箭头函数不可以使用arguments获取参数列表,可以使用rest参数代替

发布了59 篇原创文章 · 获赞 11 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_41160739/article/details/104133660