ES6的属性及方法

最新推荐文章于 2023-01-17 13:38:17 发布

郝丽友巧克力派

最新推荐文章于 2023-01-17 13:38:17 发布

阅读量671

点赞数

文章标签： es6 javascript 开发语言

本文链接：https://blog.csdn.net/m0_61235042/article/details/125937583

版权

一、let

作用：声明变量

 let a;
 let b,c,d;
 let e=200;
 let f=300,g='hello',h=[];

特点：1.变量不能重复声明

2.块儿级作用域全局，函数，eval

if else while for

{
   let girl='red';
}

3.不存在变量提升

4.不影响作用域链

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let-实践案例</title>
    <style>
       .item {
            width: 100px;
            height: 50px;
            border: solid 1px red;
            /* 浮动效果 */
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="page-header">点击切换颜色</h2>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
    </div>
    <script>
        //获取div元素对象
        let items = document.getElementsByClassName('item');

        //遍历并绑定事件
        for (let i = 0;i<items.length;i++) {
            items[i].onclick = function(){
                //修改当前元素的背景颜色
                items[i].style.background = 'green';
            };
            
        }
    </script>
</body>
</html>

二、const 定义常量（值不能修改的量叫做常量）

特点：1.一定要赋初始值

2.一般常量使用大写（潜规则）

3.常量的值不能修改

4.块儿级作用域

5.对于数组和对象的修改，不能算做对常量的修改，不会报错

const TEAM = ['ZT','JT','MLXG','Letme'];
TEAM.push('Xing')

三、解构赋值

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

1.数组的解构

const F4 = ['cici','coco','ling','lulu'];
let [ci,co,li,lu] = F4;

2.对象的解构

const zhao = {
    name:'mike',
    age:20,
    changge:function(){
        console.log('我可以唱歌');
  }
};
let {changge} = zhao;
changge();

四、模板字符串

ES6 引入新的声明字符串的方式 `` '' ""

声明

let str = `我是一个字符串哦！`

特点：1.内容中可以直接出现换行符

let str = `<ul>
             <li>沈腾</li>
             <li>玛丽</li>
             <li>魏翔</li>
             <li>艾伦</li>
            </ul>`

2.变量拼接

let lovest = 'lucy';
let out = `${lovest} is good girl!!`;

五、简化对象写法

ES6 允许在大括号里面直接写入变量和函数，作为对象的属性和方法，这样写更简洁

let name = '尚硅谷';
let change = function(){
    console.log('我们可以改变你！')
};

const school = {
    name,
    change,
    improve(){
       console.log('我们可以提高你的技能');  
  }
}
console.log(school);

六、箭头函数

ES6 允许使用箭头 => 定义函数

//声明一个函数
let fn = function(){

}

let fn () => (a,b) => {
    return a+b;
}
//调用函数
let result = fn (1,2);
console.log(result);

特点：1.this是静态的，this始终指向函数声明时所在作用域下的this的值

function getName(){
   console.log(this.name);
}
let getName2 = () => {
   console.log(this.name);
}

//设置window对象的name属性
window.name='尚硅谷';
const school = {
    name:"ATGUIGU"
}

//直接调用
getName();
getName2();

//call方法调用
getName.call(school);
getName2.call(school);

2.不能作为构造实例化对象

let Person = (a,b) => {
    this.name=name;
    this.age=age
}
let me = new Person('xiao',20);
console.log(me);

3.不能使用arguments变量

let fn = () => {
    console.log(arguments);
}
fn(1,2,3);

箭头函数的简写

  //1).省略小括号，当形参有且只有一个的时候
          let add = n => {
            return n+n;
          }
          console.log(add(5));
  //2).省略花括号，当代码体只有一条语句的时候，此时return必须省略掉
  //而且语句的执行结果就是函数的返回值
          let pow = n => n*n;
          console.log(pow(10));

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实例</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="ad"></div>
    <script>
         //需求1 点击 div 2s 后颜色变为粉色
         //获取元素
         let ad = document.getElementById('ad');
         //绑定事件
         ad.addEventListener("click",function(){
            //保存this的值
            // let _this = this;
            //定时器
            setTimeout(() => {
                //修改背景颜色 this
                // _this.style.background = 'pink';
                this.style.background = 'pink';
            },2000);
         })

         //需求2 从数组中返回偶数的元素
         const arr = [1,6,5,60,8,79,100];
        //  const result = arr.filter(function(item){
        //     if (item % 2 === 0) {
        //         return true;
        //     }else{
        //         return false;
        //     }
        //  });
        const result = arr.filter(item => item % 2 === 0);

         console.log(result);

         //总结：箭头函数适合与 this 无关的回调。定时器，数组的方法回调
         //箭头函数不适合与 this 有关的回调。事件回调，对象的方法
    </script>
</body>
</html>

七、参数默认值

ES6 允许给函数参数赋值初始值

1.形参初始值具有默认值的参数，一般放在后面（潜规则）

function add(a,b,c=20){
  return a+b+c;
}
let result = add(1,2);

2.与解构赋值结合

 function connect({host="100.23.5",username,password,port}) {
            console.log(host)
            console.log(username)
            console.log(password)
            console.log(port)
  }
  connect({
            host:"localhost",
            username:'root',
            password:'root',
            port:3306
  })

八、rest参数

ES6 引入rest参数，用于获取函数的实参，用来代替argums

ES5 获取实参的方式

function data(){
    console.log(arguments);
}
data('coco','lucy','lulu');

rest参数

function data(...args){
    console.log(args);//filter some every map
}
data('coco','lucy','lulu');

rest 参数必须要放到参数最后

function fn(a,b,...args){
     console.log(a);
     console.log(b);
     console.log(args);
}
fn(1,2,3,4,5,6);

九、扩展运算符

【...】扩展运算符能将数组转换成为逗号分隔的参数序列

function chunwan(){
    console.log(arguments)
}
chunwan(...happy);//chunwan('沈腾','玛丽','艾伦')

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展运算符应用</title></title>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        //1.数组的合并
        // const kuaizi = ['王太利','肖央'];
        // const fenghuang = ['曾毅','玲花'];
        // //ES5
        // // const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
        // const zuixuanxiaopingguo = [...kuaizi,...fenghuang]
        // console.log(zuixuanxiaopingguo);

        //2.数组的克隆
        // const sanzhihua = ['E','G','M'];
        // const sanyecao = [...sanzhihua];//['E','G','M']
        // console.log(sanyecao)

        //3.将伪数组转为真正的数组
        const divs = document.querySelectorAll('div');
        const divArr = [...divs];
        console.log(divArr)
    </script>
</body>
</html>

十、Symbol

创建Symbol的两种方式

1.创建Symbol

let s = Symbol();
let s1 = Symbol('hello');
let s2 = Symbol('hello');

2.Symbol.for创建

let s3 = Symbol.for('hello');
let s4 = Symbol.for('hello');

注意：不能与其他数据进行运算

let result = s + 100;
let result = s > 100;
let result = s + '100';
let result = s + s;

js的数据类型

USONB you are so niubility

u undefined

s string symbol

o object

n null number

b boolean

Symbol创建对象属性

1.在对象原有的基础上创建对象属性

//声明一个对象
let methods = {
    up:Symbol(),
    down:Symbol()
};

game[methods.up] = function(){
    console.log("我可以改变形状");
}

game[methods.down] = function(){
    console.log("我可以快速下降");
}

console.log(game)

2.直接在对象上通过Symbol创建对象属性（是独一无二的）

let youxi = {
    name:"狼人杀",
    [Symbol('say')]:function(){
        console.log('我可以发言'); 
  },
    [Symbol('changge')]:function(){
        console.log('我可以唱歌'); 
  }
}

Symbol的内置属性

举两个例子：

1.Symbol.hasInstance

class Person {
    static [Symbol.hasInstance](params){
        console.log(param);
        console.log("我被用来监测类型了");
        return false
  }
}

let o = {};

console.log(o instanceof Person);

2.Symbol.isConcatSpreadable

const arr = [1,2,3]
const arr2 = [4,5,6]
arr2 [Symbol.isConcatSpreadable] = false;
console.log(arr.concat(arr2))

十一、迭代器

迭代器（iterator）是一种接口，为不同的数据结构提供统一的访问机制，任何数据结构只要部署iterator接口，就可以完成遍历操作。

iterator接口主要供for...of消费，用for..of进行遍历

工作原理：1.首先创建一个对象

2.调用对象的next方法。会不断调用next方法，直到调用到最后一个成员

3.当done值为true，即完成调用

 //声明一个数组
        const xiyou = ['唐僧','孙悟空','猪八戒','沙僧']

 //首先创建一个对象
        let iterator = xiyou[Symbol.iterator]();

 //调用对象的next方法
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());

迭代器自定义遍历对象

//声明一个对象
const banji = {
      name:"终极一班",
      stus:[
          "xiaoming",
          "xiaohong",
          "cuihua",
          "wangcai"      
      ],
      [Symbol.iterator](){
                //索引变量
                let index = 0;
                //在外层声明一个变量，做一个保存
                let _this = this;
                return{
                    next:function(){
                        if (index < _this.stus.length) {
                            const result = {value:_this.stus[index],done:false};
                            //下标自增
                            index++;
                            //返回结果
                            return result;
                        }else{
                            return{value:undefined,done:true};
                        }
                    }
                }
            }
        }
}

//遍历这个对象
for (let v of banji ){
    console.log(v);
}

十二、生成器函数

生成器其实是一种特殊的函数，与传统的语法行为不同

执行方法：用yield执行

function * gen(){
   yield '一只没有耳朵';
   yield '一只没有尾巴';
   yield '真奇怪';
}

调next方法才会执行

let iterator = gen();
iterator.next();

生成器函数参数

function * gen(arg) {
    console.log(arg);
    let one = yield 111;
    console.log(one);
    let two = yield 222;
    console.log(two);
    let three = yield 333;
    console.log(three)
}

//执行获取迭代器对象
let iterator = gen('aaa');
console.log(iterator.next());
//next方法可以传入实参
//参数作为上一个yield语句返回的结果
console.log(iterator.next('bbb'));
console.log(iterator.next('ccc'));
console.log(iterator.next('ddd'));

生成器函数实例1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成器函数实例</title>
</head>

<body>
    <script>
        //异步编程 文件操作 网络操作（ajax，request）数据库操作
        //回调地狱
        // setTimeout(() => {
        //     console.log(111);
        //     setTimeout(() => {
        //         console.log(222);
        //         setTimeout(() => {
        //             console.log(333);
        //         }, 3000);
        //     }, 2000);
        // }, 1000);

        function one() {
            setTimeout(() => {
                console.log(111);
                iterator.next()

            }, 1000);
        }
        function two() {
            setTimeout(() => {
                console.log(222);
                iterator.next()
            }, 2000);
        }
        function three() {
            setTimeout(() => {
                console.log(333);
                iterator.next()
            }, 3000);
        }

        function * gen() {
            yield one();
            yield two();
            yield three()
        }

        let iterator = gen();
        iterator.next()
    </script>
</body>

</html>

生成函数实例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成器函数实例2</title>
</head>
<body>
    <script>
        //模拟获取 用户数据 订单数据 商品数据 
        function getUsers() {
            setTimeout(() => {
                let data = '用户数据';
                //调用next方法，并且将数据传入
                iterator.next(data);
            }, 1000);
        }
        function getOrders() {
           setTimeout(() => {
             let data = '订单数据'
             iterator.next(data);
           }, 1000);
        }
        function getGoods() {
            setTimeout(() => {
                let data = '商品数据'
                iterator.next(data);
            }, 1000);
        }

        function * gen() {
           let users = yield getUsers();
           console.log(users);
           let orders = yield getOrders();
           console.log(orders);
           let goods = yield getGoods();
           console.log(goods);
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();
    </script>
</body>
</html>

十三、set

ES6的一种新的数据结构，类似于数组，但里面的值都是唯一的，可以使用for of进行遍历

set的操作属性

1.size 返回元素的个数

2.add 添加元素

3.delete 删除元素返回布尔值

4.clear 清空元素

5.has 检测集合中是否包含某个元素，返回布尔值

set集合实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set集合实践</title>
</head>
<body>
    <script>
        let arr = [1,2,5,2,1];

        //1.数组去重
        // let result = [...new Set(arr)];
        // console.log(result)

        //2.交集
        let arr2 = [1,4,5];
        // let result = [...new Set(arr)].filter(item => {
        //     let s2 = new Set(arr2);//1 4 5 8 2
        //     if (s2.has(item)) {
        //         return true;
        //     }else{
        //         return false;
        //     }
        // });
        //简写
        // let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        // console.log(result)

        //3.并集
        // let unny = [...new Set ([...arr,...arr2])];
        // console.log(unny);

        //4.差集
        let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(diff);
    </script>
</body>
</html>

十四、Map

ES6的一种新的数据结构，类似于对象，普通对象的key必须是字符串或者数字，而Map的key可以是任何数据类型。

Map的属性和方法

1.size 返回Map的元素个数

2.set 增加一个新的元素返回当前Map

3.get 返回键名对象的键值

4.has 监测Map中是否包含某个元素，返回布尔值

5.clear 清空集合，返回undefined

十五、class类

类的静态成员

由类直接调用和获取，不需要实例化对象来实现

写法会更加清晰，可以看作是一个语法糖

使用static关键字来添加静态属性和方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态成员</title>
</head>
<body>
    <script>
        class Phone{
            //静态属性
            static name = '手机';
            static change(){
                console.log("我可以改变世界")
            }
        }

        let nokia = new Phone();
        console.log(nokia.name);
        console.log(Phone.name)
    </script>
</body>
</html>

类继承

1.对象继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象继承</title>
</head>
<body>
    <script>
        //ES5
        //手机
        function Phone(brand,price) {
            this.brand=brand;
            this.price=price;
        }

        Phone.prototype.call=function(){
            console.log("我可以打电话");
        }

        //智能手机
        function SmartPhone(brand,price,color,size) {
            Phone.call(this,brand,price);
            this.color=color;
            this.size=size;
        }

        //设置子级构造函数的原型
        SmartPhone.prototype = new Phone;
        SmartPhone.prototype.constructor = SmartPhone;

        //声明子类的方法
        SmartPhone.prototype.photo = function(){
            console.log("我可以拍照")
        }
        SmartPhone.prototype.playGame = function(){
            console.log("我可以玩游戏")
        }

        const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch');

        console.log(chuizi);
    </script>
</body>
</html>

2.Class 可以通过extends关键字实现继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类继承2</title>
</head>
<body>
    <script>
        class Phone{
            //构造方法
            constructor(brand,price){
                this.brand=brand;
                this.price=price
            }
            //父亲的成员属性
            call(){
                console.log("我可以打电话！！");
            }
        }

        class SmartPhone extends Phone{
            //构造方法
            constructor(brand,price,color,size){
                super(brand,price);//Phone.call(this,brand,price)
                this.color=color;
                this.size=size
            }

            photo(){
                console.log("拍照");
            }

            playGame(){
                console.log("玩游戏");
            }

            call(){
                //子类不可以调用父类同名方法
                console.log("我可以视频通话");
            }
        }

        //实例化对象
        const xiaomi = new SmartPhone('小米',2459,'绿色','6.8inch');
        // console.log(xiaomi);

        xiaomi.photo();
        xiaomi.playGame();
        xiaomi.call();
    </script>
</body>
</html>

class的get和set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>get和set</title>
</head>
<body>
    <script>
        //get和set
        class Phone{
            get price(){
                console.log("价格属性被读取了");
                return 'iloveyou';
            }

            set price(newVal){
                console.log("价格属性被修改了");
            }
        }

        //实例化对象
        let s = new Phone();

        // console.log(s.price)
        s.price='free'
    </script>
</body>
</html>

十六、数值扩展

1.0. Number.EPSILON 是 Javascript 表示的最小精度

EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16

    function equal(a,b) {
         if (Math.abs(a-b) < Number.EPSILON) {
            return true;
         }else{
            return false;
         }
    }
    console.log(0.1 + 0.2 === 0.3);
    console.log(equal(0.1 + 0.2, 0.3))

2.二进制(b)和八进制(o)

   let b = 0b1010;
   let o = 0o777;
   //十进制(d)
   let d = 100
   //十六进制(x)
   let x = 0xff
   console.log(x)

3.Number.isFinite 检测一个数值是否为有限数

 console.log(Number.isFinite(100));
 console.log(Number.isFinite(20/0));
 console.log(Number.isFinite(Infinity));

4.Number.isNaN 检测一个数值是否为 NaN

console.log(Number.isNaN(123));

5.Number.parseInt Number.parseFloat字符串转整数

console.log(Number.parseInt('123hello'));
console.log(Number.parseFloat('564lucy'))

6. Number.isInteger 判断一个数是否为整数

console.log(Number.isInteger(50));

7.Math.trunc 将数字的小数部分抹掉

console.log(Math.trunc(3.14926));

8. Math.sign 判断一个数到底为正数负数还是零

 console.log(Math.sign(100))
 console.log(Math.sign(0))
 console.log(Math.sign(-999999999))

十七、对象方法扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象方法扩展</title>
</head>
<body>
    <script>
        //1.Object.is 判断两个值是否完全相等
        // console.log(Object.is(123,456));// ===
        // console.log(Object.is(NaN,NaN));// ===
        // console.log(NaN === NaN);// ===

        //2. Object.assign 对象的合并
        //属性名重复的，后一个覆盖前一个，没有的，则合并
        // const config1 = {
        //     host:'localhost',
        //     port:3306,
        //     name:'root',
        //     pass:'root',
        //     test:'test'
        // };
        // const config2 = {
        //     host:'http://www.baidu.com',
        //     port:33061,
        //     name:'baidu',
        //     pass:'baidu',
        //     test2:'test2'
        // };
        // console.log(Object.assign(config1,config2));

        //3. Object.setPrototypeOf 设置原型对象  Object.getPrototypeof
        const school = {
            name:"zijie"
        }
        const cities = {
            xiaoqu:['北京','上海','广州']
        }
        Object.setPrototypeOf(school,cities);
        console.log(Object.getPrototypeOf(school));
        console.log(school);
    </script>
</body>
</html>

郝丽友巧克力派

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ES6的属性及方法

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
复制链接

扫一扫