ES6常用

原创已于 2022-12-24 21:06:36 修改 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-12-24 18:36:12 首次发布

Js 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了ES6中的let和const变量声明，包括它们的作用域和赋值规则。接着，探讨了数组和对象的解构赋值，以及字符串解构赋值的用法。此外，还讲解了函数的默认参数、参数解构、rest参数和扩展运算符。最后，提到了箭头函数的特点及其在不同场景下的应用。

let变量和 count常量

let变量：

只作用于块作用域、不可以重复重名、不存在预解析、只能先声明再使用；
{
    let test = 123;
}
console.log(test);        //无法访问 会报错；


let que = 456;
let que = 789;    //不可重复名字  var重复是覆盖  let重复会报错；


console.log(jiu);    //只能先定义  后使用   在let变量定义前这一部分代码是不能使用let变量的
let jiu = 111;
const常量：

定义的时候必须赋值，一旦赋值后续就不能改变；
const P = 3.14159

数组的解构赋值、对象的解构赋值

ES6的数组解构赋值

//ES6之前
let a = 1,b = 2, c = 3;


//ES6写法
let [a,b,c] = [1,2,3];

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

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

ES6的对象的解构赋值

//给变量以对象的方式设置值
let {a,b} = {a : "hellow", b : "word!"};
console.log(a,b);

//取别名  a更换成了c   a这个变量就调用不了了  只能调用c
let {a:c,b} = {a : "hellow", b : "word!"};
console.log(a,b);
 
//给变量以对象的方式设置值  提前设置默认值  如果后面未设置a的话 那么就是默认值
let {a="nihao",b} = { b : "word!"};
console.log(a,b);


//给a、b、c三个变量都设置成Math对象
let {a,b,c} = Math;

ES6的字符串的解构赋值

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

//a = "h"  每个变量只存在字符

let {length} = "hi";
console.log(length);

//length = 2   就是字符的数量

字符串的相关拓展

includes 【指定字符串是否存在于文本中参数一指定字符串参数二从某个字符开始】
"hellow word".includes("word");
startsWith 【判断字符串是否以指定文本开始】
"hellow word".startsWith("hellow");
endsWith 【判断字符串是否以指定文本结束】
"hellow word".endsWith("word");

反引号模板

··反引号包含的内容可以设置格式

let obj = {
    username : "zhangsan",
    age : "13",
    gender : "male"
}

//不用反引号写法
let tag ='<div><span>'+obj.username+'</span><span>'+obj.age+'</span><span>'+obj.gender+'</span></div>';

//使用反引号写法
let fn = function(info) {
    return info;
}
let ntag = `
<div>
    <span>${obj.username}</span>
    <span>${obj.age}</span>
    <span>${obj.gender}</span>
    <span>${1+1}</span>
    <span>${fn('nihao')}</span>
</div>

console.log(tag);
console.log(ntag);

函数拓展

函数参数默认值

//以前的写法  如果没有提供param却调用了的话  那么就会出问题
function fn(param) {
    param = param || "hellow";
    console.log(param);
}

//ES6写法
function fn(param = "hellow") {
    console.log(param);
}

参数解构赋值

//uname = 'zhangsan'设置默认值    ={}也是给参数设置默认对象  

function fn({uname = 'zhangsan',age = '12'} = {}) {
    console.log(uname, age);
}

fn({uname:"lisi",age:14});

rest参数（剩余参数）

function foo(a,...t){
    console.log(a,t);
}

foo(1,2,3);

扩展运算符

//把数组中的每个数组都分成一个参数传递
function fn(a,b,c,d,e){
    console.log(a + b + c + d + e);
}

let arr = [1,2,3,4,5];
fn(...arr);
//也就是等同于 fn(1,2,3,4,5);



//【合并数组】

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

箭头函数 =>

1.箭头函数中的this取决于定义而不是调用

2.箭头函数不可以new

3.箭头函数不能使用arguments 可以用rest代替

//箭头函数使用方法  函数单条代码
let foo = () => console.log("hellow word!");
foo()

//箭头函数使用方法  函数多条代码
let foo = () => {let t = 1;console.log("hellow word!")};
foo()

//箭头函数使用方法 带参数返回值 提供2 返回2
let foo = (a) => a;
foo(2);

//箭头函数使用方法  多个参数
let foo = (a,b) => a+b;
foo(5,10);

//箭头函数使用方法  forEach遍历
let n = [111,222,333];
n.forEach((value,index) => {
    console.log(value);
});

//箭头函数使用方法  setTimeout

setTimeout(() => {
    console.log('hellow word');
},100);