ES6语法（一）

最新推荐文章于 2022-11-21 21:12:47 发布

黑猫_默雨

最新推荐文章于 2022-11-21 21:12:47 发布

阅读量164

点赞数

分类专栏： Javascript 文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/weixin_44001906/article/details/125578668

版权

Javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

var、let、const的区别

	var声明的变量	let声明的变量	const声明的变量
作用域	全局	当前代码块	当前代码块
是否提升	提升（被提升到js代码最上面）	不提升（必须先声明再使用）	不提升（必须先声明再使用）
是否可重新赋值	可用var 或不带关键字直接重新赋值	不能用let重新赋值，同作用域内可不带关键字重新赋值	必须在声明时赋值，赋值后无法重新赋值
如果是对象对象或数组	可修改对象内部键值对（Object.xxx=newVelue）	可修改对象内部键值对	可修改对象内部键值对
是否污染全局变量	污染	不污染	不污染
是否属于window对象	属于	不属于（不能使用 window.xxx 访问）

模板字符串

<body>
    <div class="box">
    </div>
    <script>
        const box = document.querySelector(".box");
        let id = 1,
            name = "lily";

        // let htmlStr = "<p id=" + id +">" + name + "</p>";
        //上一行写法等同于下一行ES6写法
        let htmlStr = `<p id=${id}>${name}</p>`;
        box.innerHTML = htmlStr;
    </script>
</body>

函数

参数默认值

参数默认值可以是数值

function add(a=10, b=20) {//如果调用函数时没有传参，则a参为数默认值10，b参数为默认值20
    return a + b;
}
console.log(add());//30

参数默认值也可以是一个函数

 function add(a, b=getVal(5)) {
    return a + b;
}
function getVal(val) {
    return val
}
console.log(add(10));//15

不定参数（剩余参数）

用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。具名参数只能放在参数组的最后，并且有且只有一个不定参数。

function f(a, ...values) {
    console.log(values);
}
f(1, 2);//[2]
f(1, 2, 3, 4);//[2, 3, 4]

扩展运算符

将一个数组分割，并将各个项作为分离的参数传给函数

const arr = [2,4,6,8,10];
//获取数组中的最大值
console.log(Math.max.apply(null,arr));//10
//ES6扩展运算法更方便
console.log(Math.max(...arr));//10

箭头函数

let add1 = function (a, b) {
    return a + b
}
console.log(add1(10, 20));//30

// 使用ES6语法改写
let add2 = (a, b) => {
    return a + b
}
//或
// let add2 = (a, b) => (a + b)
console.log(add2(20, 30));//50

//只有一个参数的箭头函数可以更简洁
let add3 = a => a;
console.log(add3(10));//10

let add4 = a => (a+5);//后面的小括号也可以省略（但最好加上？）
console.log(add4(10));//15

//没有参数的箭头函数
let fn =  () => "hello!"+ "233"
console.log(fn());//hello!233

//返回对象的箭头函数
let getObj = (id, name) => ({ id: id, name: name });
console.log(getObj(1, "lily"));//{ id:1. name: "lily" }

//闭包
let fn1 = (()=>{
    return ()=>{
        console.log("闭包函数");
    }
})()
fn1()//闭包函数

箭头函数内部没有arguments

不能使用new关键字实例化

this指向创建箭头函数的上下文的this的指向

https://www.csdn.net/tags/MtjacgwsNzQzMDEtYmxvZwO0O0OO0O0O.html

解构赋值

数组模型的解构

基本

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

可嵌套

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

可忽略

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

不完全解构

let [a = 1, b] = []; // a = 1, b = undefined

剩余运算符

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

字符串等

在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

解构默认值

当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

let [a = 2] = [undefined]; // a = 2

对象模型的解构

基本

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

解构默认值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

扩展的对象的功能

简写1

const name = "lucy",
      age = 20;
// const person = {
//     name: name,
//     age: age,
//     sayName: function () {
//         console.log(this.name);
//     }
// }
//等同于以下写法
const person = {
    name,
    age,
    sayName() {
        console.log(this.name);
    }
}
person.sayName();//lucy

简写2

function fn(x, y) {
    return { x, y };
}
console.log(fn(10,20));//{x:10, y:20}

黑猫_默雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6语法（一）

函数参数默认值参数默认值可以是数值参数默认值也可以是一个函数不定参数（剩余参数）用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。具名参数只能放在参数组的最后，并且有且只有一个不定参数。扩展运算符将一个数组分割，并将各个项作为分离的参数传给函数箭头函数箭头函数内部没有arguments不能使用new关键字实例化this指向创建箭头函数的上下文的this的指向https://www.csdn.net/tags/MtjacgwsNzQzMDEtYmxvZwO0O0OO0
复制链接

扫一扫