ECMAScript 6 入门-1
一、变量
-
var
- 可以重复声明
- 无法限制修改
- 没有块级作用域
- 可以重新赋值
- 存在变量提升
console.log(a);//undefined
var a=1;
a=2;
console.log(a);//2
-
let
- 不会能重复声明
- 有块级作用域
- 可以重新赋值
- 不存在变量提升
console.log(a);//报错a is not defined
let a=1;
a=2;
console.log(a);// 2
-
const
- 不能重复声明
- 有块级作用域
- const是常量不可以重新赋值
- 不存在提升问题
- 没有改变存储地址是可以修改值的
const a=1;
a=3;
console.log(a);//报错Assignment to constant variable
const a = {
name: 'jack',
age: 18,
gender: '男'
};
a.age = 20;//当前没有改变a的存储地址是可以重新赋值的
console.log(a.age);//20
二、箭头函数
1.箭头函数
- 箭头函数的this指向永远是父级
- 如果一个参数可以省略()
- 如果有一行代码{}可以省略不写,注意return也需要省略要不然报错
//function 函数名(){}
//箭头函数
let show = (x, y) => {
console.log(x);//10
console.log(y);//20
}
show(10, 20);
//如果一个参数可以省略()
let show = x => {
console.log(x);//10
}
show(10);
//如果只有一行带吗{}也可以省略不屑 注意return也需要省略不严报错
let show = x => console.log(x);//10
show(10);
2.函数的参数
- 参数的扩展/展开
- 收集剩余参数 …
注意:Rest Parameter必须是最后一个
//...args名字随意
let show = (x, y, ...args) => {
console.log(x);//10
console.log(y);//20
console.log(args);//[ 30, 1, 5, 6 ]
}
show(10, 20, 30, 1, 5, 6);
- 展开数组
展开效果跟直接卸载哪里一样
let arr = [1, 2, 3, 4];
let arr1 = [5, 6, 7, 8];
let arr2 = [1, 2, 3, 4, ...arr1];
let arr3 = [...arr, 5, 6, 7, 8]
let arr4 = [...arr, ...arr1];
console.log(arr2);//[1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr3);//[1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr4);//[1, 2, 3, 4, 5, 6, 7, 8]
let a;
let arr=[1,2,3];
a=...arr;
console.log(a);//报错不可以这样写
-
默认值
如果传参数了就用传的参数如果没用就是默认参数
$('#div1').animate({width:'200px'});
$('#div1').animate({width:'200px'},1000);
let show = (x, y = 5, z = 6) => {
console.log(x);
console.log(y);
console.log(z);
}
show(8); //8 5 6
show(6, 7, 8);//6 7 8
三、解构赋值
-
数组解构赋值
模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值
let [a, b, c] = [1, 2, 3];
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
-
对象结构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
四、字符串的扩展
-
字符Unicode表示方法
这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。
对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符
"\u0061";//a
//改进后
"\u{20BB7}"
// "????"
"\u{41}\u{42}\u{43}"
// "ABC"
let hello = 123;
hell\u{6F} // 123
'\u{1F680}' === '\uD83D\uDE80'
// true
-
字符串遍历器接口
ES6为字符串添加了遍历器接口 ,使的字符串可以被for…of循环遍历
for (let codePoint of 'foo') {
console.log(codePoint)
}
// "f"
// "o"
// "o"
-
新增操作字符串的方法
1. String.fromCodePoint()
可以识别大于0xFFFF的字符,弥补了String.fromCharCode()方法的不足;
如果String.fromCodePoint方法有多个参数,则它们会被合并成一个字符串返回。
注意,fromCodePoint方法定义在String对象上,而codePointAt方法定义在字符串的实例对象上。
String.fromCodePoint(0x20BB7)
// "????"
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true
2. String.row()
ES6 还为原生的 String 对象,提供了一个raw()方法。该方法返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,往往用于模板字符串的处理方法;
String.raw`Hi\n${2+3}!`;
// 返回 "Hi\\n5!"
String.raw`Hi\u000A!`;
// 返回 "Hi\\u000A!"
如果原字符串的斜杠已经转义,那么String.raw()会进行再次转义。
String.raw`Hi\\n`
// 返回 "Hi\\\\n"
String.raw`Hi\\n` === "Hi\\\\n" // true
String.raw()方法也可以作为正常的函数使用。这时,它的第一个参数,应该是一个具有raw属性的对象,且raw属性的值应该是一个数组。
String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'
// 等同于
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);
3. includes(),startsWith(),endsWith()
传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数,表示开始搜索的位置。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
//第二个参数表示开始搜索的位置
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
4. repeat()
repeat方法返回一个新字符串,表示将原字符串重复n次
- 参数如果是小数,则被取整
- 如果repeat的参数是负数或者Infinity,会报错
- 如果参数是 0 到-1 之间的小数,则等同于 0,这是因为会先进行取整运算。0 到-1 之间的小数,取整以后等于-0,repeat视同为 0
- 参数NaN等同于 0。
- 如果repeat的参数是字符串,则会先转换成数字
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // "
'na'.repeat(2.9) // "nana"
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError
'na'.repeat(-0.9) // ""
'na'.repeat(NaN) // ""
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
5. trimStart(),reinEnd()
ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致,trimStart()消除字符串头部的空格会保留尾部空格,trimEnd()消除尾部的空格会保留头部空格。它们返回的都是新字符串,不会修改原始字符串。
除了空格键,这两个方法对字符串头部(或尾部)的 tab 键、换行符等不可见的空白符号也有效。
浏览器还部署了额外的两个方法,trimLeft()是trimStart()的别名,trimRight()是trimEnd()的别名。
const s = ' abc ';
s.trim() // "abc"
s.trimStart() // "abc "
s.trimEnd() // " abc"
五、数组扩展
1. Array.from()
Array.from().方法可以将两类对象转换成真正的数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
et arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组。
Array.from([1, 2, 3])
// [1, 2, 3]
2. Array.of()
Array.of()方法用于将一组值,转换为数组;总是返回参数值组成的数组。如果没有参数,就返回一个空数组。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
上面代码中,Array方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。
Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。
3. copyWithin()
copyWithin()方法,在当前数组内部,可以将制定的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
需要传递三个参数,如果这三个值不是数值则会转换为数值
- target(必需):从该位置开始替换数据。如果为负值,表示倒数。
- start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
- end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
4. find()和findIndex()
find()用于找出第一个符合条件的数组成员,它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回
undefined。
[1, 4, -5, 10].find((n) => n < 0)
// -5
findIndex()方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。
function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);
这两个方法都可以发现NaN,弥补了indexof方法的不足。
[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0
5. entries(),keys(),values()
ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器对象,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a' 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
如果不使用for…of循环,可以手动调用遍历器对象的next方法,进行遍历。
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
onsole.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']
6. includes()
includes()在指定的在数组中查找是否包含给定的值
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
第二个参数是从什么位置开始查找,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
7. flat()
flat()方法将嵌套的数组进行拉平,变成一维数组,返回一个新的数组,对原数据没有影响
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
flat()默认只会拉平一层,如果想要拉平多层嵌套数组。可以将flat()方法的参数写成一个整数,表示想要拉平的层数。默认是1.
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
//参数为2
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
`
推荐阅读
-
Spark新手入门——1.Scala环境准备
-
1月6日A5域名拍卖:26万!“e搬家”ebj.com结拍
-
学习 Laravel - Web 开发实战入门笔记(1)
-
C语言入门1-计算机工作原理
-
坚果R1降价:6G内存+128G存储 感受下
-
贝尔金推出BMPCC 6K用SSD 写入速度达1GB/s
-
这一周股市价格为[2,6,1,4,8],求哪一天买入哪一天卖出,可获得最大收益,最大收益为多少
-
P6I845/P1D开机后到26自动断电维修
-
产后“黄金期”减肥入门三要则 产后6月瘦身指南
-
基于ECMAScript6即ECMAScript2015的javascriptclass类封装的简单使用实例讲解