Js：ES6~ES11基础语法(一)

一、let变量声明以及const定义常量

let变量声明

特点:

变量不能重复声明
块级作用域
不存在变量提升
不影响作用域链

const定义常量

特点:

一定要赋初始值
一般常量使用大写(默认潜规则)
常量值不能修改
块级作用域
对于数组和对象的元素修改,不算对常量的修改,不会报错

二、变量的解构赋值

定义: ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值.

1、数组的解构

2、对象的解构

三、模板字符串

定义: ES6引入新的声明字符串的方式

特点:

声明

复制代码

let str = `1233`;

内容中可以直接出现换行符
变量拼接使用${}

复制代码

let loveset = 'Amumu';
let out = `${lovest}是最帅的`;

四、简化对象写法

定义: ES6允许在大括号里面,直接写入变量和函数,作为对象对属性和方法

五、箭头函数

定义: ES6 允许使用箭头(=>)定义函数

特点:

this是静态的,this始终指向函数声明时所在作用域下的this的值
不能作为构造函数实例化对象
不能使用arguments变量
箭头函数的简写

a、省略小括号,当形参有且只有一个的时候

b、省略花括号,当代码体语句只有一条语句的时候,此时return必须省略,而且语句的执行结果就是函数的返回值

注意:

箭头函数适合与this无关的回调,定时器,数组的方法回调
箭头函数不适合与this有关的回调,例如: 事件回调、对象的方法

javascript 复制代码

// 1.this是静态的，this始终指向函数声明时所在作用域下的this的值
function getName() {
    console.log(this.name)
}

let getName2 = () => {
    console.log(this.name)
}

window.name = '123'
const school = {
    name: 'school'
}

getName.call(school) // school
getName2.call(school) // 123

六、函数参数的默认值

定义: ES6允许函数参数赋值初始值

形参初始值,具有默认值的参数,一般位置要靠后(默认情况)
与解构赋值结合

javascript 复制代码

//ES6 允许给函数参数赋值初始值
//1. 形参初始值 具有默认值的参数，一般位置要靠后(潜规则)
function add(a,c=10,b) {
   return a + b + c;
}
let result = add(1,2);
console.log(result); // NaN

//2. 与解构赋值结合
function connect({host="127.0.0.1", username,password, port}){
    console.log(host) // test.com
    console.log(username) //root
    console.log(password) // root
    console.log(port) // 3306
}
connect({
    host: 'test.com',
    username: 'root',
    password: 'root',
    port: 3306
})

七、rest参数

定义: ES6引入rest参数,用于获取函数的实参,用来代替arguments

注意: rest参数必须放到参数最后

javascript 复制代码

// ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
// ES5 获取实参的方式
 function date(){
     console.log(arguments); // ['白芷','阿娇','思慧']
 }
 date('白芷','阿娇','思慧');

// rest 参数
 function date(...args){
     console.log(args);// ['白芷','阿娇','思慧'] filter some every map 
 }
 date('阿娇','柏芝','思慧');

// rest 参数必须要放到参数最后
function fn(a,b,...args){
    console.log(a); // 1
    console.log(b); // 2
    console.log(args); // [3, 4, 5, 6]
}
fn(1,2,3,4,5,6);