ES6 语法学习(一)

1、let 和 const 关键字

let 与 var 的区别有：

a、let 声明的变量只在当前的块级作用域内有效(块级作用域通俗的话就是被{}包裹起来的区域声明对象的{}例外)。

b、let 声明的变量不能被重复声明。

c、不存在变量的提升。

<body>

<input type="button" value="test-1">

<input type="button" value="test-2">

<input type="button" value="test-3">

<input type="button" value="test-4">

<input type="button" value="test-5">

<input type="button" value="test-6">

<script>

    window.onload = function () {

        let ainp = document.getElementsByTagName('input');

        // for(var i=0;i<ainp.length;i++){

        //     ainp[i].index=i;

        //     ainp[i].onclick=function(){

        //         console.log(this.index);

        //     }

        // }

        for (let i = 0; i < ainp.length; i++) {

            ainp[i].onclick = function () {

                console.log(i);

            }

        }

    }

</script>

</body>

const 常量--不可以改变的量

常量在声明的时候必需被赋值否则会报错(Missing initializer in const declaration)，而变量在声明的时候可以不被赋值

常量是不可被改变的，但是常量为引用类型的时候不保证不会被改变（可以用Object.freeze进行冻结），也可以使用闭包的形式对其进行保护。

const a = {test: 'haha'};

console.log(a);

//输出 haha

a.test = 'are you ok???';

console.log(a);

//输出 are you ok???

//防止常量被修改可以用Object.freeze(object)进行冻结

const b = {name: 'king'};

Object.freeze(b);

b.name = 'haha';

console.log(b);

//输出 king

const t=[1];

Object.freeze(t);

t.push(2);

//会报错

console.log(Array.isArray(t));

//输出 true

扩展：Object.freeze,Object.defineProperty,Object.seal

    // Object.freeze 是对对象的冻结，使对象不可被修改和扩展,但是多级的object那么就需要使用递归

    const obj = {

        name: 'test',

        age: 20,

        content:{

            t:'haha'

        }

    };

    // Object.freeze(obj);

    //并且实现递归

    Object.defineProperty(Object, 'yffreeze', {

        value: function (val) {

            for (let per in val) {

                if (val.hasOwnProperty(per)) {

                    if (typeof val[per] == 'object') {

                        arguments.callee(val[per]);

                    } else {

                        Object.defineProperty(val, per, {

                            writable: false

                        })

                    }

                }

            }

            //该函数实现对象的不可扩展性

            Object.seal(val);

        }

    });

    Object.yffreeze(obj);

    obj.content.t = 'nono';

    console.log(obj);

    //结果不会被更改

2、解构赋值

解构赋值主要包括两个方面：数组的解构赋值，对象的解构赋值，字符串的解构赋值，数值与布尔值的解构赋值，函数参数的解构赋值。

数组的解构赋值

//多维数组解构赋值

let arr1 = [1, 2, 3, ['a', 'b', ['this is d']]];

let [, , , [, , [d]]] = arr1;

console.log(d);

//输出 this is d

//扩展运算符

let [a, b, ...arr] = arr1;

console.log(a, b, arr);

//输出 1  2  [3, ['a', 'b', ['this is d']]]

//利用扩展运算符合并多个数组

let t1 = [1, 2, 3];

let t2 = ['a', 'b', 'c'];

console.log([...t1, ...t2

])

;

//输出 [1, 2, 3, "a", "b", "c"];

//当且仅当，项数的值为undefined的时候，默认的等号才起作用（值为null的时候等号不起作用）

let [m, n = 'no'] = ['ok'];

console.log(n);

//输出 no

//交换变量

let p = 'are you ok???';

let q = 'today is good day!!!';

[p, q] = [q, p];

console.log(p, q);

//输出 today is good day!!!  are you ok???

//对已经声明的变量进行数组解构赋值

let ori;

[ori] = ['this is a test'];

console.log(ori);

//输出 this is test

对象的解构赋值

//通常情况下解构赋值

let obj = {name: 'AAA', age: 30};

let {name, age} = obj;

console.log(name, age);

//输出 AAA 和 30

//给对象解构赋值，并且起新名

let obj1 = {name: 'BBB', age: 40};

let {name: new_name, age: new_age} = obj1;

console.log(new_name, new_age);

//输出 BBB 和 40

console.log(name, age);

//对于name 和age 是没有影响的

//扩展运算符在对象中的使用

let obj3 = {fav: 'reading'};

let obj2 = {...obj, ...obj3};

//拼接对象如果有同类项，那么后面的值会对前面的值进行覆盖

console.log(obj2);

//输出 {name: "AAA", age: 30, fav: "reading"}

let {name: obj2_name, ...other} = obj2;

//注意避免重名的方法就是起别名

console.log(obj2_name, other);

//输出 AAA {age: 30, fav: "reading"}

//对已经声明的对象进行解构赋值,注意要加上括号

let set;

({name: set} = obj);

console.log(set);

//声明解构赋值的默认值,并且只有在undefined的情况下，这种默认值有效

let {name: aa, age: bb, hobby = 'test'} = obj;

console.log(hobby);

//获取整项的同时又获取子项

{

    let {name, hobby, hobby: [hob1],} = {

        name: 'this is name',

        hobby: ['reading']

    };

    console.log(hobby);

    console.log(hob1);

}

//复杂情况下的解构赋值

{

    let data = {

        name: 'testName',

        age: 'testAge',

        content: [

            {first: 'AAA', son: ['A', 'a']},

            {second: 'BBB', son: ['B', 'b']},

            {third: 'CCC', son: ['C', 'c']},

        ]

    };

    //获取content并且用arr命名，获取content里除first的其他项

    let {content: arr, content: [first, ...rest]} = data;

    //获取content里面 second项里面的b值

    let {content: [, {son: [, sec_b]}]} = data;

}

对象解构赋值在函数传参中的运用

//在ES6之前的参数匹配

let test = function (a = 'ok') {

    console.log(a);

};

test('abc');

let test1 = function (obj) {

    let name = obj && obj.name || 'name';

    let age = obj && obj.age || 30

    console.log(name, age);

};

test1({name: 'haha'});

//以ES6的形式进行传参，那么在函数进行调用的时候，必需传入对象，否则会报错

let test2 = function ({url = 'http://www.baidu.com', type = 'get'}) {

    console.log(url);

    console.log(type);

};

test2({url: 'http://www.taobao.com'});

字符串的解构赋值

//对字符串进行解构赋值相当于str.split('')的效果

let [...arr] = 'congratulation';

console.log(arr);

//输出 ["c", "o", "n", "g", "r", "a", "t", "u", "l", "a", "t", "i", "o", "n"]

//对字符串的属性进行解构赋值

let {length, split: sp} = 'ok';

console.log(length);

console.log(sp);

//分解出来的方法要用call来调用

console.log(sp.call('no', ''));

数值和布尔的解构赋值可以利用花括号对其属性的提取。

//在ES6之前获取函数面的实参的方法

let test = function () {

    console.log(arguments);

};

test(1, 2, 3);

//输出 Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

//在ES6添加了一个扩展运算符

let test1 = function (...rest) {

    console.log(rest);

};

test1('a', 'b', 'c');

//输出 ["a", "b", "c"]

3、ES6的函数扩展

字符串方法的扩展

--模板字符串：主要用的是``这个符号对字符串进行修辞，如果遇到变量，用${}对变量进行解析

let name = 'aaa';

let age = 30;

let str = `我的名称叫${name}，我的年龄是${age}`;

console.log(str);

//输出 我的名称叫aaa，我的年龄是30

//效果等同于以下方法

let str1 = "我的名称叫" + name + "，我的年龄是" + age;

console.log(str1);

--字符串函数部份

//padStart padEnd  表示对字符串进行补全，padStart表示往字符串前添加，padEnd表示往字符串后面追加

let str = 'today';

console.log(str.padStart(10, 'ok'));

//输出 okokotoday  如果长度不刚好，这个函数会对其进行截取操作

console.log(str.padEnd(10, 'ok'));

//输出 todayokoko

//repeat 对字符串进行复制操作，repeat的参数不能为负数

console.log(str.repeat(3));

//输出 todaytodaytoday

//运用函数自己封装

let str_repeat = function (str, num) {

    //运用数组拼接的方法

    return new Array(num + 1).join(str);

};

console.log(str_repeat(str, 3));

//startsWith  endsWith  判断是否是以指定的字符串开头和结尾，返回的是一个布尔值

console.log(str.startsWith('t'));   //输出 true

console.log(str.startsWith('n'));   //输出 false

console.log(str.endsWith('y'));     //输出 true

//includes  表示包含的意思，返回的是一个布尔值

console.log(str.includes('od'));

console.log(str.includes('today'));

console.log(str.includes('ok'));

--字符串的遍历方法

//ES6之前的方法是通过for来对字符串进行遍历的

let str = 'congratulation';

for (let i = 0, len = str.length; i < len; i++) {

    // console.log(str[i]);

    console.log(str.charAt(i));

}

//也可以Array.prototype.slice.call(str);

//注意区别for in,并且for...of...也可以用在数组里面，但是不可用在对象里面

for (let word of str) {

    console.log(word);

}

--unicode 在没有办法解析的时候可以用花括号进行修辞如 console.log(`\u{1f436}`)，输出的是一个小图标

正则表达式的扩展

通常来讲，正则表达式的修辞符包括三个：i m g 但是在ES6中添加了两个修辞符，具体区别和例子如下

    console.log(/^\uD83D/.test('\uD83D\uDC2A')); // true

    console.log(/^\uD83D/u.test('\uD83D\uDC2A'));// false

    //正则表达式中，如果加了y那么就是表示连续的两个指定字符

    let reg1 = /ok/g;

    let reg2 = /ok/gy;

    let str = 'okok-are you okok--ok';

    console.log(str.match(reg1));

    console.log(str.match(reg2));

函数的扩展

//函数参数默认值,在默认值调用的时候不能调用后面未声明的参数

let test = function (a = 'ok', b = a + 'yes') {

    console.log(a, b);

};

test();

//函数参数的扩展运算符,其使用情况和数组的扩展运算符一样

let test1 = function (a, ...rest) {

    console.log(a, rest);

};

test1(1, 2, 3, 4, 5, 6);

//箭头函数,在箭头函数中，是没有arguments这个获取参数的方法以及arguments.callee这个方法

let test2 = () => {

    // console.log(arguments);

};

test2(1, 2, 3, 4, 5);

//会报错

//简单的箭头函数如果避免其有返回值,在唯一返回值前添加一个void便可以避免其有返回值

let arr = [1, 2, 3, 4, 5, 6];

let test3 = arr => void arr.pop();

console.log(test3(arr));

//箭头函数没有自己的this其this指向的是自身所处环境的this

let test4 = function () {

    this.name = 'ok';

    let test5 = () => {

        console.log(this);

    };

    test5()

};

let t = new test4();

//输出 test4 {name: "ok"},说明test5的this指向是test4;

对象的扩展

//ES6对象的表示法，如果对象的项与变量一样，那么只写一项就可以了

let name = 'AAA';

let age = 30;

let obj = {

    name, age, say() {

        console.log('ok');

    }

};

console.log(obj);

//输出 {name: "AAA", age: 30, say: ƒ}

//还有一种表示法

let n_obj = {

    [name]: 'BBB',

    [age]: 40

};

console.log(n_obj);

//输出 {30: 40, AAA: "BBB"}

//使用扩展运算符对对象进行复制，这个功能是浅复制,注意浅复制的顺序会影响对象里的顺序

let a_obj = {

    name,

    content: {

        set: 'ok'

    }

};

let b_obj = {...a_obj};

a_obj.name = 'aaa';

a_obj.content.set = 'change';

console.log(b_obj);

//name不会改变，但是set会变成change,说明这个是浅复制

对象方法的扩展

//Object.is 相当于===的的功能，判断两个参数之间是否全等,引用类型的仍然不能相等

console.log(Object.is('12', 12));

//输出 false

let obj = {name: 'aaa', age: 12};

let c_obj = {name: 'aaa', age: 12};

console.log(Object.is(obj, c_obj));

//输出 false

//两者之间的差别在于+0与-0之间，NaN之间

console.log(+0 === -0, Object.is(+0, -0));

//前者输出true,后者输出false

console.log(Number('no') === Number('yes'), Object.is(Number('no'), Number('yes')));

//前者输出false,后者输出true

//Object.assign 相当于扩展运算符的功能，合并或者复制的对象之间是浅复制

let obj1 = {name: 'aaa', like: {lan: 'english'}};

let obj2 = {age: 30, like: {sport: 'football'}};

console.log(Object.assign(obj1, obj2));

//同类项后者会覆盖前者的对象

//Object.keys 与 Object.values 前者返回的是对象的keys,后者返回的是对象的values,并且返回的都是数组形式

let person = {

    name: 'aaa',

    age: 30,

    sex: 'man'

};

console.log(Object.keys(person), Object.values(person));

//输出 ["name", "age", "sex"]  ["aaa", 30, "man"]

//Object.entries(obj)表示把指定的obj进行逐项拆解，并且里面的key,value成为每个数组的项如下例子，

console.log(Object.entries(person));

//输出 (3) [["name", "aaa"], ["age", 30],["sex", "man"]]

//__proto__与 Object.getPrototypeOf(obj)一样，是获取对象的原型

console.log(Object.is(person.__proto__, Object.getPrototypeOf(person)));

//输出 true

//扩展Object.create(obj)表示新建一个以obj为原型的对象

console.log(Object.create(person));

//输出一个以person为原型的空对象

//Object.setPrototypeOf(obj,原型对象)

console.log(Object.setPrototypeOf(obj, person));

//把obj的原型改成person

//super,调用原型属性或者方法,注意：只有在ES6数组里的新的函数表示法里面才能使用super，其他方式不能调用

let n_obj = {

    say() {

        console.log(`my name is ${super.name}`);

    }

};

Object.setPrototypeOf(n_obj, obj);

n_obj.say();

//输出 my name is aaa

数组的扩展

//可以通过扩展运算符传参

let arr = ['小明', 20, ['男', '瘦'], '是个幽默的人'];

let test = (...rest) => {

    console.log(rest);

};

test(...arr);

//通过扩展运算符进行合并数组,但是也只是浅复制

let n_arr = [...arr];

arr[2][0] = 'ok';

console.log(n_arr);

//通过新对象set对数组进行去重

let a_arr = [1, 2, 3, 3, 3, 36, 8];

let b_arr = new Set(a_arr);

console.log(b_arr);

//输出 Set(5) {1, 2, 3, 36, 8}

let c_arr = [...b_arr];

console.log(c_arr);

//输出 [1, 2, 3, 36, 8]

//添加项

b_arr.add('ok');

//删除项

b_arr.delete(1);

//清除所有内容

// b_arr.clear();

//进行遍历set对象

b_arr.forEach(function () {

    // console.log(arguments);

});

for (let val of b_arr) {

    // console.log(val);

}

// console.log(b_arr.entries());   这个方法是输出下标与值

//判断是否有指定项

console.log(b_arr.has(3));

//获取所有的键名

console.log(b_arr.keys());

//获取所有的键值

console.log(b_arr.values());

数组函数扩展学习

//Array.from(obj,fn)  作用是把类数组转变成数组,注意：类数组里面要有length这个属性

//obj是表示目标类数组，fn表示回调，并且把回调返回的值作为数组的值

let obj = {

    0: 'name',

    1: 'age',

    2: 'sex',

    length: 3

};

let a_obj = Array.from(obj, item => item + 'ok');

console.log(a_obj);

//输出 ["nameok", "ageok", "sexok"]

//Array.of 把里面的参数合成一个数组

let b_obj = Array.of('are', 'you', 'ok');

console.log(b_obj);

//输出 ["are", "you", "ok"]

//fill 是表示给数组填充默认值

let c_obj = new Array(5).fill('ok');

console.log(c_obj);

//输出 ["ok", "ok", "ok", "ok", "ok"]

//includes 表示数组是否包含指定项

console.log(a_obj.includes('nameok'));

//输出 true

//keys,values 表示数组的下标和值,entries是获取数组的下标和值

for (let [k, v] of a_obj) {

    console.log(k, v);

}

console.log(a_obj.entries());

//输出 Array Iterator {}，要去循环才能获得到值

//find,findIndex 根据条件回调，按顺序遍历数组，当回调返回true时，就返回当前遍历到的值，而findIndex是返回当前遍历到的下标

let sign = [1, 3, 5, 8, 9].find((value, index, arr) => value % 2 === 0);

console.log(sign);

//输出 8

let signIndex = [1, 3, 5, 8, 9].findIndex((value, index, arr) => value % 2 === 0);

console.log(signIndex);

//输出 3

ES6 语法学习(一)的更多相关文章

ES6 语法学习总结
第一节:什么是ES6? ES6是什么?跟JavaScript有什么关系? JavaScrip由三部分组成:分别是ECMAScript,BOM和DOM. 1)由此看出,ECMAScript是Java ...
ES6语法学习
ECMAScript 6,也被称为ECMAScript 2015是ECMAScript标准的最新版本.6是语言的一个重要更新,并第一次更新语言由于ES5 2009标准.现在主要JavaScript引擎 ...
ES6 语法学习(二)
1.类的建立与继承 constructor方法是类的构造函数是默认方法,通过new命令生成对象实例时,自动调用该方法.一个类必须有constructor方法,如果没有显式定义,一个默认的constru ...
ES6语法学习(一)-let和const
1.let 和 const 变量提升: 在声明变量或者函数时,被声明的变量和函数会被提升到函数最顶部: 但是如果声明的变量或者函数被初始化了,则会失去变量提升: 示例代码: param2 = &quo ...
Webpack4 学习笔记三 ES6+语法降级为ES5
前言此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...
ES6语法的学习与实践
ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...
如何让浏览器支持ES6语法，步骤详细到小学生都能看懂！
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
WebStorm ES6 语法支持设置
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...
一些基础的ES6 语法
<script> window.onload = function () { //---------------------------let----------------------- ...

随机推荐

webpack加载postcss，以及autoprefixer的loader
webpack2.0加载postcssloader以及autoprefixer实现自动根据兼容性的需求给css加私有前缀的功能,给开发带来便利, 下面是我的配置信息,亲测有效: 1.webpack.c ...
ABP mysql
SetSqlGenerator("MySql.Data.MySqlClient", new MySql.Data.Entity.MySqlMigrationSqlGenerator ...
PLSQL：orecal，tnsname简介
导入ORACLE遇到很多问题,学了好多,其中很长时间花在网络配置上,刚开始学,具体原因不知道,先把搜集到的好文章存下来,以后慢慢研究. 监听配置文件为了使得外部进程如 CA ...
Python——递归函数
1.定义:在自己的函数,调用自己 2.递归的最大内存不能超过997层 import sys sys.setrecursionlimit(1000000) 可以达到电脑理论的最大次 import s ...
Vue学习笔记5
列表渲染用 v-for 把一个数组对应为一组元素 <div id="app"> <li v-for = "item in array"> ...
Tesseract-ocr 安装与使用
Tesseract(识别引擎),一款由HP实验室开发由Google维护的开源OCR(Optical Character Recognition , 光学字符识别)引擎,与Microsoft Offic ...
Hive 执行作业时报错 [ Diagnostics: File file:/ *** reduce.xml does not exist FileNotFoundException: File file:/ ]
2019-03-10 本篇文章旨在阐述本人在某一特定情况下遇到 Hive 执行 MapReduce 作业的问题的探索过程与解决方案.不对文章的完全.绝对正确性负责. 解决方案 Hive 的配置文件 ...
zookeeper的单实例和伪集群部署
原文链接: http://gudaoyufu.com/?p=1395 zookeeper工作方式 ZooKeeper 是一个开源的分布式协调服务,由雅虎创建,是 Google Chubby 的开源实现 ...
第二章 python的介绍及变量
1.编程语言的介绍 a.机器语言使用二进制编写指令的编程方式 b.汇编语言汇编指令与机器语言相对应 c.高级语言需要借助特殊的工具将其转换成机器语言,但是方便人进行阅读理解的编程方式从执行效率 ...
2019The Preliminary Contest for ICPC China Nanchang National Invitational
The Preliminary Contest for ICPC China Nanchang National Invitational 题目一览表考察知识点 I. Max answer 单调栈+ ...

ES6 语法学习(一)

ES6 语法学习(一)的更多相关文章

随机推荐

热门专题