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----------------------- ...
随机推荐
- java 的数据类型及其所占的字节数
1.char java中的一个char是2个字节.java采用unicode,2个字节来表示一个字符. 一个数字或英文或汉字都是一个字符,只不过数字和英文时,存储的2个字 节的第一个字节都为0,就是浪 ...
- jzoj6099. 【GDOI2019模拟2019.4.1】Dist
题目链接:https://jzoj.net/senior/#main/show/6099 考虑直接统计某个点到其它所有点的距离和 我们先把整个团当成一个点建图,处理出任意两个团之间的距离\(dis(i ...
- mongoDB 文档概念
mongoDB 文档概念 什么是文档 文档是 mongodb 基本的数据组织单元,类似于mysql 中的记录 文档由多个键值对组成,每个键值对表达一个数据项 属于 bson 数据 ps: bson ...
- NOI真题记录
NOI2001 食物链,拓展域并查集. 炮兵阵地,棋盘状压DP. NOI2002 银河英雄传说,kruskal重构树/带权并查集. 贪吃的九头龙,树形DP. NOI2003 逃学的小孩,树形DP,二次 ...
- jmeter+maven+jenkins自动化接口测试（上）
代码已上传git(包括调试的jmx,jmeter相关文件等):https://gitlab.com/yinzhenzhi/jmeterandmaven 目的:现在很多人都在做自动化接口的平台,我也正在 ...
- POJ - 3616 Milking Time (动态规划）
Bessie is such a hard-working cow. In fact, she is so focused on maximizing her productivity that sh ...
- utf8的大小写敏感性测试及其修改方法
utf8的大小写敏感性测试及其修改方法 # 测试utf8的大小写敏感性及其修改方法 -- 以下是utf8不区分大小写 # 修改数据库: ALTER DATABASE database_name CHA ...
- 分布式监控系统开发【day37】:监控客户端开发（五）
一.目录结构 二.模块方法调用关系总图 三.入口文件main 1.解决了说明问题 1.客户端就干了一件事情,干什么事情 收集数据汇报给服务端? 但是我这个客户端是插件形式2.首先必须要传一个参数,st ...
- Shell脚本之grep
1. 过滤空行 grep -v ^$
- Angular: 执行ng lint后如何快速修改错误
当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...