ECMA6 Script

最新推荐文章于 2024-07-26 15:27:00 发布

包包dR

最新推荐文章于 2024-07-26 15:27:00 发布

阅读量214

点赞数

文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/bbdRzzz/article/details/128139991

版权

ES6

JavaScript组成：

ECMAScript：javascript基本语法
BOM：浏览器对象模型（操作浏览器）核心对象 window
DOM：文档对象模型（操作html）核心对象：document

ECMAScript

ECMAScript5:脚本语言，不需要独立的编译器，通过浏览器来加载运行，实现用户和页面的交互
ECMAScript6：是javaScript的下一代语法标准，于2015年6月发布，是javaScript正式成为企业级的开发语言
ECMAScript和javascript关系
- ECMAScript是一个语法规范，javaScript是该语法规范的实现

ES6的语法

let 和 const
- let：用来声明块级变量，var声明的变量会出现作用域的提升（会出现变量的污染）
- const：声明的常量必须要初始化
const声明的对象：常对象
- 可以修改对象的属性值，但是不能修改对象本身

key是键 value是值

ES6交换变量的值

let a = 1;
let b = 2;
[a,b] = [b,a]
console.log(a,b);   // 2,1

冻结对象

不能修改对象的属性
使用Object.freeze(对象名)

  const obj = {
            name: '李四',
            age: 25
        }
        console.log(obj);
        Object.freeze(obj)//冻结对象
        obj.name='mab'
        console.log(obj);

hasOwnProperty(key)函数：判断key是否是对象的属性，如果是返回true，不是返回false

 function fn(obj) {
    Object.freeze(obj)
    for (let key in obj) {
if (obj.hasOwnProperty(key) && typeof obj[key] == 'object'){
         fn(obj[key])
        }
    }
}

ES6新特性

临时死区

用let和const声明的变量，使用let 声明的变量、const声明的常量的作用域不会被提示
在循环中使用var的情况：
结构赋值：Rest运算符：“…”
- 当迭代器使用：会被顺序遍历容器中的元素

拷贝数组

let arr = [1,2,3,4]
let newarr = [...arr]

合并数组

合并数组就是将多个数组扩展后放置到新的数组中，同时也支持将数组扩展后，放置到其他数组的任意位置处

let arr = [1,2,3,4]
let newarr = [5,6,7,8]

let a3 = [...arr,...newarr,9]

将数组扩展为函数参数

支持将数组扩展为函数的参数，在函数调用的时候，直接传入数组的扩展作为参数

 function fn(x, y, z) {
            return x + y + z;
        }
        const num = [1,2,3];
        console.log(fn(...num));//6

克隆对象

        let obj1 = {
            name:'包包dR',
            age:'20'
        }
        let obj2 = {...obj1};
        console.log(obj2);

合并对象

合并时，key不能一样，如果一样，将放不进去

        let obj1 = {
            name:'包包dR',
            age:'20'
        }
        let obj2 = {
            nam:'LCX',
            ag:'22'
        }
        let obj3 = {...obj1,...obj2};
        console.log(obj3);

支持在参数上赋值

    function fn(age = 18, type = 1) {
        
        }

解构赋值

Rest运算符：...

当迭代器使用：会按顺序遍历容器中的元素

        function fun(x,y,z) {
            console.log(x,y,z);
        }
        let arr = [11,22,23];
        fun(arr)
  fun(...arr) // ... 运算符的作用是一个迭代器：一次遍历数组中的元素

替代函数的内置属性arguments

     function fun(...args) {
            console.log(args);
        }
        let arr = [11,22,23];
        fun(arr)

通过解构赋值可以简化变量的赋值

let arr = [11,22,33]
let [a,b,c] = arr

通过...把特定的元素放在变量里

  let [a,...arr] = [11, 22, 33]
        console.log(a);
        console.log(arr);

通过解构来交换变量的值

let a = 10
let b = 20; //最后一个后面必须加`;` 结尾
[a, b] = [b, a];
console.log(a, b);

对象的解构

将对象的属性解构出来赋值给变量

  let obj = {
            id: 1001,
            userName: '关羽',
            sex: '男',
            score: {
                html: 98,
                css: 95,
                js: 85
            }
        }
let { id, userName, sex,score:{html,css,js}} = obj;//变量名必须和对象的属性名相同
        console.log('编号', id);
        console.log('用户名', userName);
        console.log('性别', sex);
        console.log('css成绩',css);

在解构时可以给变量重命名

    let obj = {
            id: 1001,
            userName: '关羽',
            sex: '男',
            score: {
                html: 98,
                css: 95,
                js: 85
            }
        }
        let { id, userName, sex, score: { html, css, js } } = obj;//变量名必须和对象的属性名相同
        let { id: userId } = obj;
        console.log('编号', userId);
        console.log('用户名', userName);
        console.log('性别', sex);
        console.log('css成绩', css);

模板字符串

是用反引号``和$(变量名)将字符串常量和变量写在字符串里，就不需要,'+'进行字符串的拼接

Symbol类型

ES5的数据类型：number , string , boolean , bigint , null , undefined , object

ES6新增的Symbol：表示唯一的值

直接创建

let 变量名 = Symbol
间接创建

let 变量名 = Symbol

set集合

set是一个构造函数，凡是用构造函数创建对象时都要用new

是一种数据结构，里面不能存放重复的值，可以用于数组去重，字符串去重

创建方式
- 使用new运算符：let 变量 = new Set()
- 用过数组来创建：let 变量名 = new Set([1,2,3,5,6])去除重复的元素

     let arr = [1,2,3,2,0,3,5]
        let s2 = new Set(arr)
        console.log(s2)//1,2,3,0,5

常用方法

add()

添加值，返回set结构本身

 let s1 = new Set();
        // console.log(s1);
        let arr = [1, 2, 3, 2, 0, 3, 5]
        let s2 = new Set(arr)
        console.log(s2)//1,2,3,0,5
        let tmp = s1.add('玛卡巴卡');
        console.log(typeof tmp) //object
        s1.add(123).add(456).add('abc');
        console.log(s1);//将集合转换成数组
        console.log(...tmp);
        console.log(tmp);

delete()

删除集合中的元素,

 let s1 = new Set();
        // console.log(s1);

        let arr = [1, 2, 3, 2, 0, 3, 5]
        let s2 = new Set(arr)
        console.log(s2)//1,2,3,0,5


        let tmp = s1.add('玛卡巴卡');
        console.log(typeof tmp) //object

        s1.add(123).add(456).add('abc');
        console.log(s1);//将集合转换成数组

        console.log(...tmp);
        console.log(tmp);

        let flag = s1.delete(123);
        console.log(flag);
        console.log(...s1);

has(val)

判断val在集合中是否存在，如果存在返回true，不存在返回false

clear()

清空集合中所有元素的值

values()

获取的是集合中所有的value

ksys()

获取集合中的key

强调：Set集合也是key-value格式，它的key和value是相同的

属性

size存放的是集合中元素的个数

遍历方法

for…of

for(let i of s1.keys()){
    console.log(i)
    }

forEach

 s1.forEach(function (value, key) {
    console.log(value + '---------' + key);   
})

集合运算

并集

 let setA = new Set([4, 5, 6]);
let setB = new Set([5, 6, 7])
// 1.实现setA与setB的并
// let bj = new Set([...setA,...setB]);
// console.log(bj);

/* 
  2.实现setA与setB的交集：通过过滤器来实现
   [...setA]：
*/
let arr = [...setA] // 解构集合SetA将其转换成数组

// 对arr进行过滤，使用filter函数
let temp = arr.filter(function (item) {
    //一次从arr中取出元素，传递给item,在函数体中设置筛选条件，将满足条件的
    return setB.has(item) //满足条件的item返回
    if (setB.has(item)) {
        return item
    }
})

WeakSet

只是一个对象集合，集合中只能存放对象，只支持add,has,delete

Map集合

数据的存放格式：采用 key-value(键值对)的方式进行存放，采用这种方式存放数据的有：

对象：属性对应的是Key（键），属性值对应的是value(值)
```
let obj = {
name:'张三'
age:25
    }
```
JSON：是常用的一种前后台数据交换的格式
Map

Map的定义

Map是一种数据结构（Hash结构），在ES6中是Map一种存放许多键值对的有序列表

Map的使用方法

属性：size — 存放的是Map中的元素个数
方法：
- Map()：构造方法，用来创建Map对象，不带参数表示创建空的Map，即Size属性为0
- set(key,value)：向Map中添加数据
- get(key)：获取键为key的value
- has(key)：判断Map中是否存在key，返回布尔
- delete(key)：删除key
- clear()：清空Map
- keys():返回Map中的所有key
- values()：返回Map中的所有value
- entries()：获取Map中的所有成员（即所有的键值对）
- for of循环遍历
```
  for (let temp of m2.entries()) {
            console.log(temp);
        }
        for (let [key, value] of m2.entries()) {
            console.log(`${key}:${value}`);
        }
```
- for each循环
```
 m2.forEach(function(value,key) {
    console.log(key,value);
        } 
    );
```
强调
- Map中的Key不能重复
- keys()返回的是Map中所有key集合 — keys()返回的集合类型是Set
- 在Map中通过key可以得到对应的value，但是不能用过value得到Key

课堂练习2：Map数组（数组的每个单元都是一个key-value）

Map转换为数组

解构整个Map:

  let m4 = new Map([
            ['one','北京'],
            ['two','上海'],
            ['three','深圳']
        ]);
let arr = [...m4];
console.log(arr);//将m4转换成数组.arr本质是三行两列的二维数组

解构keys()

let a1 = [...m4.keys()]
console.log(a1);

解构values()

let a2 = [...m4.values()]
console.log(a2);

函数

ES5的函数

通过function关键字来定义函数

function  函数名 （[参数]）{
    
    }

函数表达式

let 变量 = function([参数]){
    
    }

注意
- 形参和实参的区别
- 函数的返回值：return语句来实现

ES6中对函数的扩展

函数形参的默认值

     function fun(a, b, c=45) { //形参的默认值为45，如果调用函数式没有给C传递参数值，则使用默认值
            if (typeof a === 'undefined') {
                a = 67
            }
            if (typeof b === 'undefined') {
                b = 89
            }
            console.log('a=', a);
            console.log('b=', b);
            console.log('c=', c);
        }
        let a = 10, b = 20, c = 30;
        fun(11,12)

箭头函数

在定义函数时使用<==>符号

在定义函数时使用=>符号，在定义回调函数（高阶函数），函数表达式时使用，可以简化代码

   let fun = () => 'zxc'
当箭头函数的函数语句只有一个一条时，需要注意两点
 {}可以省略

当箭头函数的函数语句只有一个一条时，需要注意两点

{}可以省略
默认含有return，在没有{}时，省略了return

包包dR

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECMA6 Script

ECMA6 Script
复制链接

扫一扫