前端进阶_ECMAScript 6 简介_ES6基本语法_et声明变量、const声明常量_模板字符串_对象初始化简写_解构（对象、数组）赋值_默认参数_传播操作符_箭头函数_数组map和reduce

最新推荐文章于 2024-08-26 08:58:39 发布

2393li

最新推荐文章于 2024-08-26 08:58:39 发布

阅读量189

点赞数

分类专栏： JavaEE_第五阶段_前端进阶文章标签： ecmascript javascript css

本文链接：https://blog.youkuaiyun.com/yigerendegeming/article/details/120602940

版权

JavaEE_第五阶段_前端进阶专栏收录该内容

10 篇文章

订阅专栏

1、let声明变量、const声明常量

let声明变量

1、变量不能重复声明
2.、存在块儿级作用域
3.、不存在变量提升

//声明变量
let a
let b,c,d
let e = 100
let f = 521, g = 'iloveyou', h = []

//1. 变量不能重复声明
let name = 'Helen'
let name = '环'//报错：SyntaxError: Identifier 'name' has already been declared

//2. 存在块儿级作用域
// if else while for 
{
   let star = 5
}
console.log(star)//报错：star is not defined

//3. 不存在变量提升
console.log(song)//报错：Cannot access 'song' before initialization
let song = '依然爱你';

//变量提升
console.log(song) //undefined
var song = 'aaa

const声明常量

1、声明的同时要有初始值
2、一旦赋予了初始值就不能改变
3、规范：大写字母和下划线
4、当常量的地址不变时，可以修改常量内容

//声明常量
const PI = 3.1415926
console.log(PI)

//1、声明的同时要有初始值
//const A //Missing initializer in const declaration

//2、一旦赋予了初始值就不能改变
//PI = 15561

const a = 1
console.log(a)

//3、规范：大写字母和下划线
const A = 1
console.log(A)

//4、当常量的地址不变时，可以修改常量内容
const TEAM  = ['康师傅','雷士']
TEAM.push('欢欢')

console.log(TEAM)    //[ '康师傅', '雷士', '欢欢' ]

在这里插入图片描述

2、模板字符串

模板字符串相当于加强版的字符串，用反引号 `，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

以前：我们都是使用 ‘’ 或者 “” 来把字符串套起来
现在： `` 【反引号】

//es5    
let name = 'itcast'    
console.log('hello ' + name)    

//es6    
const name = 'itcast'    
console.log(`hello ${name}`) //hello itcast

// ES6 引入新的声明字符串的方式 『``』 '' ""
//1. 声明
let str = `我也是一个字符串哦!`
console.log(str, typeof str)

//2. 内容中可以直接出现换行符
let list = `<ul>
            <li>沈腾</li>
            <li>玛丽</li>
            <li>魏翔</li>
            <li>艾伦</li>
            </ul>`
console.log(list)

//3. 变量拼接
let lovest = '贾玲'
let out = `我喜欢${lovest}`
console.log(out)

在这里插入图片描述

3、对象初始化简写

以{}形式直接表示的对象
这里的简写是指：如果一个对象中的key和value的名字一样的情况下可以定义成一个。

let username = 'Tom'
let age = 2
let sing = function () {
  console.log('I love Jerry')
}

// 传统
let person1 = {
  username: username,
  age: age,
  sing: sing,
}
console.log(person1)
person1.sing()

// ES6：这样的书写更加简洁
let person2 = {
  age,
  username,
  sing,
}
console.log(person2)
person2.sing()

4、方法简写

方法的简写比传统方式少function括号

// 传统
let person1 = {
  sayHi: function () {
    console.log('Hi')
  },
}
person1.sayHi()

// ES6
let person2 = {
  sayHi() {
    console.log('Hi')
  },
}
person2.sayHi()

5、解构赋值

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

对象解构

对象解构 —- es6提供一些获取快捷获取对象属性和行为方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>对象解构</title>
</head>
<body>
    <script>
        // 对象解构 --- es6提供一些获取快捷获取对象属性和行为方式
        var person = {
            name:'zhangsan',
            age:32,
            language:"cn",
            // 函数也有处理
            /* say:function(){
                console.log(this.name+"年龄是：" + this.age);
            }   */
            /* say:()=>{
                console.log(this.name+"年龄是：" + this.age);
            }  */
            say(){
                console.log(this.name+"年龄是：" + this.age);
            } 
        };
        // ===========================传统的做法========================
        var name = person.name;
        var age = person.age;
        person.say();
        // ===========================对象解构做法========================
        //es6的做法 前提：默认情况name,age必须是jsonkey.
        var {name,age} = person;
        console.log(name,age);
        // 可以用冒号取小名
        var {name,age,language:lan} = person;
        console.log(name,age,lan);
    </script>
</body>
</html>

数组的解构

//1. 数组的解构
const F4 = ['小沈阳','刘能','赵四','宋小宝']
let [xiao, liu, zhao, song] = F4
console.log(xiao)
console.log(liu)
console.log(zhao)
console.log(song)

根据名字自动解构

let {xiaopin} = zbs
xiaopin()

6、参数的默认值

注意：函数在JavaScript中也是一种数据类型，JavaScript中没有方法的重载

//ES6 允许给函数参数赋值初始值
//1. 形参初始值 具有默认值的参数
function add(a, b, c = 0) {
  return a + b + c
}
let result = add(1, 2)
console.log(result)

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

7、对象传播操作符【…】

传播操作符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ES6的语法：传播操作符【...】</title>
</head>
<body>
    <script>
        // 1： 定义一个对象
        var person1 = {
            name: '小飞飞',
            age: 16,
        };
        // 2： 对象解构
        var {name,age} = person1;
        // =========================== ... 对象融合=====================
        var person2 = {
            ...person1,
            gender:1,
            tel:13478900
        };
        console.log(person2);
        // =========================== ... 对象取值=====================
        // ... 对象取值
        var person3 = {
            name:"李四",
            gender:1,
            tel:"11111",
            address:'广州'
        };
        // ...person4 把剩下没取走给我。
        var {name,gender,...person4} = person3;
        console.log(name)
        console.log(age)
        console.log(person4)
        // =================场景分析 -----伪代码========================
        // 模拟后台：异步查询返回用户数据 如下：
        function findUsers(){
            $.get("xxxxx",function(res){
                var res = {
                    pages:11,
                    pageSize:10,
                    pageNo:1,
                    firstFlag:true,
                    lastFlag:false,
                    total:123,
                    data:[{},{},{},{}],
                };
                // ==========================对象 ... 取值===============
                var {data:users,...pagesjon} = res;
                //等价于
                /*  var users = res.data;
                   var pagesjon = {
                    res = {
                        pages:11,
                        pageSize:10,
                        pageNo:1,
                        firstFlag:true,
                        lastFlag:false,
                        total:123,
                    }; */
            })
        }
    </script>
</body>
</html>

8、箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：
参数 => 函数体
箭头函数多用于匿名函数的定义

        // 箭头函数
        // 它也是一种函数的定义，它简化定义仅此而已。
        // 步骤：1：去掉function  2: 括号后面加箭头。
        
        // 无参数的函数
        var sum = function(){
        }
        
        // 箭头改造如下
        //var sum = () => {}
        
        // 有参数
        // 第一种情况  一个参数的如下
        var sum2 = function(a){
        };
        // 箭头改造如下
        var sum2 = (a)=>{};
        var sum2 = a=>{
            return a;
        };
        
        // 第二种情况 二个参数的以上,记住括号一定要加
        var sum3 = function(a,b){
            return a + b;
        };
        // 箭头改造如下
        var sum3 = (a,b)=>{
            return a + b;
        };
        
        // 第三种情况，如果没有逻辑体，只有返回值可以简化如下
        var sum4 = function(a,b){
            return a + b;
        };
        // 箭头改造如下
        var sum4 = (a,b)=>a+b

        // 执行
        console.log(sum2(100));
        console.log(sum3(100,100));
        console.log(sum4(100,100));

9、数组map和reduce方法使用(了解)

数组中新增了map和reduce方法。

map()

方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。

举例：有一个字符串数组，希望转为int数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组方法的扩展-map reduce</title>
</head>
<body>
    <script>
        /*********************************map*********************/
        let arr = ['1', '20', '-5', '3'];
        console.log(arr)
        // 1:数据类型的更改 map自身循环的功能
        // 2:map方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。
        var newarr = arr.map(function (value) {
            return parseInt(value) * 2;
        });
        /* 
        // 箭头简化01
        var newarr = arr.map(value=>{
            return parseInt(value) * 2;
        });
        // 箭头简化02
        var newarr = arr.map(value => parseInt(value) * 2);
        */
        console.log("原数组：", arr);
        console.log("map的newarr数组：", newarr); // 2 40 -10 6
        /*********************************end map*********************/
        /*********************************reduce*********************/
        //reduce 计算方法
        let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        var result = arr2.reduce((a, b) => a + b);
        console.log(result);
        /*********************************end reduce*********************/
    </script>
</body>
</html>

reduce()

reduce(function(),初始值（可选）) ：

接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

第一个参数是上一次reduce处理的结果
第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组方法的扩展-map reduce</title>
</head>
<body>
    <script>
        /*********************************reduce*********************/
        //reduce 计算方法 
        let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // 箭头写法 -- 1到10相加 
        var result = arr2.reduce((a, b) => a + b);
        // 原始写法  -- 1到10相加
        //var result = arr2.reduce(function(a,b){
        //    return a+b;
        //})
        console.log(result);
        /*********************************end reduce*********************/
    </script>
</body>
</html>