let arr = [1, 'hello', [100,200], {a:1, b:2}, true, undefined];
let [a, b, c, d, e, f] = arr
console.log(a,b,c,d,e,f)
let x = 1, y = 2;
[x, y] = [y, x]
console.log(x, y)
let obj = {
a: 1,
b: [1,2,3],
c: false,
d: {name: 'geekxia', age: 10 }
}
let { a, b, c, d, e } = obj
console.log(a, b, c, d, e)
// 别名
let { b: bb } = obj
console.log(bb)
let str = 'hello world, my name is geekxia.';
// 获取指定索引处理字符
console.log(str.charAt(0))
// 查询字符串中是否包含指定片段,如果存在返回索引号,如果不存在返回-1
console.log(str.indexOf('name0'))
// 判断字符串是否包含指定片段,返回布尔值
console.log(str.includes('geekxia'))
// 判断字段串是否以指定片段开头,返回布尔值
console.log(str.startsWith('he'))
// 判断字段串是否以指定片段结尾,返回布尔值
console.log(str.endsWith('he'))
// 对字符串重复n次,返回新的字符串
console.log(str.repeat(2))
// 对字符串进行头部补全,返回新的字符串
console.log(str.padStart(100, '01'))
// 对字符串进行尾部补全,返回新的字符串
console.log(str.padEnd(100, '01'))
// 去除小数点部分
console.log(Math.trunc(5.5))
// 判断指定值是正数(1),负数(-1),还是零(0)
console.log(Math.sign(0))
// 计算立方根
console.log(Math.cbrt(-8))
// 计算两个数的平方和的平方根
console.log(Math.hypot(3, 4))
// 指数运算符
console.log(2**4)
function add ({ a = 0, b = 0 }) {
console.log(a + b)
}
add({a:2, b:3}) // 5
add({a:2}) // 2
add({}) // 0
add() // 报错
function sum(...values) {
let total = 0;
for (let value of values) {
total += value
}
console.log(total)
}
sum(1,2,3)
// 允许尾逗号
sum(1,2,3,4,5,)
let f1 = v => v;
let f2 = () => 5;
let f3 = (a, b) => a + b;
console.log(f1(1))
console.log(f2())
console.log(f3(1,2))
// 返回一个对象,对象要用()包裹
let f4 = (a, b) => ({a, b})
console.log(f4(1,2))
扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2, 7, 8, 9, 10];
console.log(arr)
let arr = [1, 2, 3, 4, 5, 6]
let [a, b, ...arr1] = arr
console.log(arr1)
let obj1 = { a:1, b:2 }
let obj2 = { c:3, d:4 }
let obj = { ...obj1, ...obj2, e:5, a:6 }
console.log(obj)
let obj = { a:1, b:2, c:3, d:4, e:5 }
let { a, b, ...obj1 } = obj
console.log(obj1)
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
var arr = Array.from(arrayLike);
console.log(arr) // ['a', 'b', 'c']
let a = Array.of(1,2); // [1, 2]
let b = Array.of(); // []
let c = Array.of(undefined); // [undefined]
console.log(a)
console.log(b)
console.log(c)
let res1 = [1,2,-5,10].find((ele,index,arr) => ele < 0);
console.log(res1)
let res2 = [1,5,10,15].findIndex((ele,index,arr) => ele > 9);
console.log(res2)
let res3 = new Array(4).fill(7);
console.log(res3)
let arr = [1, 2, 3]
console.log([1,2,3].includes(2))
console.log([1,2,3].includes(0,1)) // 第二参数表示索引号
ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
let foo = 'geekxia'
function fn1() {
console.log(1)
}
const obj = {
foo,
bar: 'hello',
fn1,
fn2() {
console.log(2)
},
fn3: function() {
console.log(3)
}
}
obj.fn1()
obj.fn2()
obj.fn3()
ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。
let arr1 = [1,2,2,2,3,4]
let arr2 = [...new Set(arr1)]
console.log(arr2)
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。
const map = new Map();
map.set({ p: 'hello world'}, 1)
map.set('hello', [1,2,3])
console.log(map.size)
Promise 是异步编程的一种解决方案。简单说它就像是一个容器,里面放着某个在未来才会执行结束的事件(一般是一个异步操作)的结果。它有三种状态:
pending(进行中)
fulfilled(已成功)
rejected(已失败)
只有异步操作的结果,可以决定当前是哪一种状态,其他的任何其他操作都无法改变这个状态,因为对象的状态不受外界的影响。而且状态一旦改变就不会再变(一旦状态变为 resolved 后,就不能再次改变),任何时候都会得到这个结果。以下是Promise的一个简单的示例:
const promise= new Promise((resolve, reject) => {
resolve('success')
// 以下无效
reject('reject')
})
promise.then(val => {
console.log('ok') // ok
}, err => {
console.log('err')
})
注意:当我们构造Promise的时候,构造函数内部大代码都是立即执行的。像这样
const promise= new Promise((resolve, reject) => {
console.log('promise')
resolve('success')
})
console.log('finish')
promise.then(val => {
console.log('ok') // ok
}, err => {
console.log('err')
})
// promise => finish => ok
Promise 实现了链式调用,也就是在每一次调用then 的时候都会返回一个Promise,并且是一个全新的promise,因为Promise的状态是不可变的。如果你在then中使用了return 那么return 的值也会被 Promise.resolve 包装。像这样:
Promise.resolve(1).then(res => {
console.log(res) // 1
return 2 // 包装成 Promise.resolve(2)
}, err => {
console.log('err')
}).then(res => {
console.log(res); // 2
})
而且在ES6之前我们使用ajax的异步请求的时候就会存在ajax内部嵌套ajax,像下面这样,有了 permise 之后就可以改写为较简洁的书写方式,如下所示:
ajax(url, () =>{
ajax(url_1, () =>{
ajax(url_2, () =>{
})
})
})
// 可改写成
ajax(url).then(res => {
console.log(res)
return ajax(url_1)
}).then(res => {
console.log(res);
return ajax(url_2)
}).then(res => console.log(res))
let arr = [1, 2, 3, 4, 5]
for(let ele of arr) {
if (ele > 2) {
break
}
console.log(ele)
}
let obj = {
a: 1,
b: 2,
c: 3
}
for(let k in obj) {
console.log(obj[k])
}
function add(a,b) {
// 返回一个promise对象
return new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve(a+b)
}, 2000)
})
}
// await is only valid in async function
// await 只在 async函数中有效
async function testAdd() {
let num = await add(2,3)
console.log(num)
}
testAdd()
class Point {};
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的 constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()方法
}
}
export default
抛出模块export default xxx; // 抛出模块
import xxx from './xxx' // 引入模块
export
抛出模块export const a = 1;
export function foo() {} // 抛出
import { a, foo } from './xxx' // 引入
许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为。
@decorator
class A {};
class Person {
@readonly
name() { return `${this.name}` }
}