ES6

文章目录

ES6

ECMAScript 6,也被称为ES6或ECMAScript 2015,是JavaScript语言标准的第六个版本,于2015年发布。它引入了许多新的语言特性和改进,以增强JavaScript的编程能力和简化复杂应用的开发

let 声明变量

let声明变量与var相似,但是使用规范会更严格。

注意事项:

  • let 声明的变量有严格局部作用域
  • let 只能声明一次, var 可以声明多次
  • let 不存在变量提升, var 存在变量提升
html 复制代码
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>demo</title>
</head>
<body>
<script type="text/javascript">

    // let 细节 1
    // (1) let 声明的变量, 在代码块中,则作用域在代码块中
    // (2) var 声明的变量, 在代码块中,作用域没有限制
    {
        var name = "lxg";
        let job = "java 工程师";
        console.log("name=", name);
        console.log("job=", job);
    }

    console.log("name=", name);
    console.log("job=", job);//job is not defined

    // let 细节 2
    // 1. var 可以声明多次
    // 2. let 只能声明一次
    var num1 = 100;
    var num1 = 200;
    console.log(num1);
    let num2 = 600;
    let num2 = 900; //Uncaught SyntaxError: redeclaration of let num2
    console.log(num2);
    
    // let 细节 3
    // 1. let 不存在变量提升
    // 2. var 存在变量提升
    console.log("x=", x);//undefined
    var x = "tom";
    
    //can't access lexical declaration 'z'
    console.log("z=", z);
    let z = "mary";
</script>
</body>
</html>

const 声明常量

const 声明常量在定义时需要赋值,并且不能修改。

javascript 复制代码
//常量
const PI = 3.14;
console.log("PI=", PI)

解构赋值

解构赋值是对赋值运算符的扩展,是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。主要有两种形式: 数组解构和对象解构

数组解构

javascript 复制代码
let arr = [1, 2, 3];
//如果要看某个变量的类型
console.log("arr=>", arr);

//数组解构[取出元素]
//1.传统
let x = arr[0], y = arr[1], z = arr[2];
console.log(x, y, z);

//2. ES6 风格
let [a, b, c] = arr;
console.log("==================================");
console.log(a, b, c);

let [num1, num2, num3] = [100, 200, 300];
console.log(num1, num2, num3);

对象解构

javascript 复制代码
//monster 是一个对象
let monster = {name: '牛魔王', age: 800};

//传统方式取出属性-解构 对象名.属性名
console.log(monster.name, " ", monster.age);

//ES6 对象解构
//1. 把 monster 对象的属性, 赋值给{name,age}
//2. {name,age} 的取名 name 和 age 要和 monster 对象的属性名保持一致
//3. 使用{} 包括, 不要使用[]
//4. {name,age} 顺序是无所谓
let {name, age} = monster;
console.log("========================");
console.log("name=", name, " age=", age);

//还有其它的形式,比如方法上使用对象解构
//如果这样使用,仍然要保证名称和对象的属性名一致
function f1({name, age}) {
console.log("f1-name=", name, " ", "f1-age=", age)
}
f1(monster);

模板字符串

模板字符串使用反引号````````将字符串包裹

应用场景:

  • 可作为普通字符串
  • 可用来定义多行字符串,即可以将换行字符串原生输出
  • 字符串插入变量和表达式, 使用 ${}
  • 字符串中调用函数
javascript 复制代码
//1、字符串,换行会原生输出
let str1 = `for(int i = 0;i < 10;i++){
					System.out.println("i="+i);
				}`;
console.log("str1=", str1);

//2. 字符串插入变量和表达式。变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
let name = "lxg";
//当解析 ${name}, 就找最近的 name 遍历, 进行替换
//然后可以得到最后解析的字符串
let str2 = `名称=${name}`;
let str3 = `1+2=${1 + 2}`;
let n1 = 80;
let n2 = 20;
let str4 = `${n1}+${n2}=${n1 + n2}`;
console.log("str2=", str2);
console.log("str3=", str3);
console.log("str4=", str4);

//3. 字符串中调用函数
function sayHi(name) {
    return "hi " + name;
}
let name2 = "tom";
let str5 = `sayHi() 返回的结果是=${sayHi('jack')}`;
let str6 = `sayHi() 返回的结果是=${sayHi(name2)}`;
console.log("str5=", str5);
console.log("str6=", str6);

对象相关新特性

声明对象简写

javascript 复制代码
const age = 800;
const name = "牛魔王";
// 传统 声明/定义对象
let monster = {name: name, age: age};

// ES6 声明/定义对象
//1. {name, age} : 表示对象的属性名是 name 和 age
//2. 属性 name 的值是从变量/常量 name 来的
let monster02 = {name, age};
console.log("monster02=>", monster02);

对象方法简写

javascript 复制代码
// 传统-对象方法定义
let monster = {
    name: "红孩儿", 
    age: 100, 
    sayHi: function () {
        console.log("信息: name=", this.name, " age=", this.age);
    }
}
monster.f10 = function () {
    console.log("哈哈");
};
monster.sayHi();
monster.f10();

// ES6-对象方法定义
let monster2 = {
    name: "红孩儿~", 
    age: 900, 
    sayHi() {
        console.log("信息: name=", this.name, " age=", this.age);
    },
    f1() {
        console.log("f1()");
    }
}
monster2.sayHi();
monster2.f1();

对象拓展运算符

javascript 复制代码
// 拷贝对象(深拷贝)
let cat2 = {...cat};
cat2.name = "中花猫";
console.log("cat=>", cat);//小花猫
console.log("cat2=>", cat2);//中花猫

// 合并对象[深拷贝]
let monster = {name: "白骨精", age: 100};
let car = {brand: "奔驰", price: 800000};
let monster_car = {...monster, ...car}
monster_car.name = "狐狸精";
console.log("monster=>", monster);
console.log("monster_car=>", monster_car);

箭头函数

箭头函数提供更加简洁的函数书写方式。基本语法是:(参数列表) => { 函数体 }

注意事项:

  • 箭头函数没有参数或有多个参数,要用 () 括起来,箭头函数只有一个参数, 可以省略()
  • 箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块
  • 函数体只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回
  • 箭头函数多用于匿名函数的定义

一个参数:

javascript 复制代码
// 传统定义函数
var f1 = function (n) { 
    return n * 2
}
console.log("传统= " + f1(2))

// ES6 , 箭头函数使用
let f2 = (n) => {
    return n * 2;
}
console.log("f2() 结果= ", f2(100));//200

//上面的 es6 函数写法,还可以简化
let f3 = n => n * 3;
console.log("f3() 结果=", f3(100));//300

//函数也可以传给一个变量
function hi(f4) {
    console.log(f4(900));
}
hi((n) => {
    return n + 100
});

多个参数:

javascript 复制代码
// 传统
var f1 = function (n, m) {
    var res = 0
    for (var i = n; i <= m; i++) {
        res += i
    }
    return res
}
console.log("传统= " + f1(1, 10))

// ES6 , 箭头函数使用
let f2 = (n, m) => {
    var res = 0
    for (var i = n; i <= m; i++) {
        res += i
    }
    return res
};
console.log(f2(1, 10));

箭头函数加对象解析:

javascript 复制代码
const monster = {
    name: "红孩儿", age: 1000, skill: ['红缨枪', '三位真火']
}
//要求:在方法形参取出 monster 对象的 skill 属性
//传统方式
function f1(monster) {
    console.log("skill=", monster.skill);
}

f1(monster);

//箭头函数
let f2 = ({skill}) => {
    console.log("skill=", skill);
}

//1. f2 传入对象 monster
//2. f2 形参是 {skill} , 所以 es6 的对象解构特性, 会把 monster 对象的 skill 属性赋给skill
//3. 对象解构的前提就是 {skill}的 skill 和 monster 的 skill 属性是一致
f2(monster);
//箭头函数+解构, 注意有{}, skill 名称需要和对象属性名一致.
let f3 = ({age, name, skill}) => {
    console.log("skill=", skill, " age=", age, " name=", name);
}
f3(monster);
相关推荐
小远yyds19 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云3 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205873 小时前
web端手机录音
前端