来自 https://www.cnblogs.com/lhl66/p/9555903.html 侵删
来自 https://www.cnblogs.com/lhl66/p/8862106.html 侵删
1
.
let,
const 都是块级作用域， 其有效范围仅在代码块中。
//es5
if (a == 1
) {
var b = 'xxx'
;
}
console.log(b); //xxx
//es6
if (a == 1
) {
let b = 'xxx'
;
}
console.log(b); //undefined
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
const sum = { num1: 1, num2: 2
};
sum.num2 = 6
;
console.log(sum); //{num1:1,num2:6}
常量只是指向了对象的指针， 对象本身的内容却依然可以被修改
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
2
. 模板字符串
//es5
$('#mark'
).append(
'出售中 <span>' obj.num '</span> '
'剩下的, ' '<span>' obj.showNum '</span> 卖完了!'
);
//es6
//在es6中，内容模板，可以定义在 `` 包起来的字符串中，其中的内容会保持原有格式
//另外可以在字符串中直接使用模板语言进行变量填充，优雅而简洁
$('#mark'
).append(`
出售 <span>${obj.num}</span> 剩下 <span>${obj.showNum}</span>
`);
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
3
. 字符串遍历输出, 补全
for (let item of 'str'
) {
console.log(item);
}
//s
//t
//r
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
//参数1：[number] 目标字符串长度
//参数2：[string] 进行补全的字符串
'123'.padStart(5, '0')
//00123 - 字符串不足5位，在头部补充不足长度的目标字符串
'345'.padEnd(5, '0')
//34500 - 在尾部进行字符串补全
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
4
. 数组扩展
let a = [1, 2
];
let b = [2， 3
];
let c = [...a, ...b];
//[1, 2, 2, 3] 所有内容合并，但并不会去除重复
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
Array.of(3, 4, 5)
//快速转换为数组 [3,4,5]
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
.keys() -
获得数组中所有元素的键名（ 实际上就是下标索引号）
.values() -
获得数组中所有元素的数据
.entries() -
获得数组中所有数据的键名和数据
for (let i of['x', 'y'
].keys()) {
console.log(i); //0 1
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
for (let elem of['x', 'y'
].values()) {
console.log(elem); //x y
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
for (let [index, elem] of['x', 'y'
].entries()) {
console.log(index, elem); // 0 "x" 1 "y"
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
5
. 对象扩展
//直接使用变量/常量的名称个为对象属性的名称
let a = 'abc'
;
let b = { a };
//{a: 'abc'}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
判断对象是否为数组
if (Object.isArray(obj)) {}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
对象内容合并
Object.keys() -
获得对象中所有的键名， 以数组的形式返回
var obj = { a: 1, b: 2
};
var names = Object.keys(obj);
//['a', 'b']
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
Object.values() -
获得对象中所有的值内容， 以数组的形式返回
var obj = { a: 1, b: 2
};
var values = Object.values(obj);
//[1, 2]
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
Object.entries() -
获得对象中所有的成员数据， 以数组的形式返回， 成员的内容也是数组形式
var obj = { a: 1, b: 2
};
var values = Object.entries(obj);
//[['a',1], ['b',2]]
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
解构赋值
let [a, …b] = [1, 2, 3
];
//这里 b 的值为[2，3]，这样可以快速使用剩余的数据赋值给变量，
let [a, b, c] = [1, 2, 3
];
//定义了三个变量，并对应赋了值；如果值的个数与变量名个数不匹配，没有对应上的变量值为 undefinedlet obj = {a: 1, b: 2};
let { a, b } = obj;
//a=1,b=2
使用变量的方式进行结构赋值， 需要严格匹配名称， 数组的模式是严格匹配下标
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
6
. 模块化
//app.js
let act = { a: 1, b: 2, c: 3
};
export default act;
//index.js
import act from 'app.js';
//假设 app.js 与index.js 同在一个目录中
console.log(act.a);
//1
//--------------------------------------------------------------------分割
//ES6字符串扩展方法,三个方法都支持第二个参数，表示开始搜索的位置;
let str = 'Hello world!'
;
console.log(str.includes('o'))
// true ----表示是否找到了参数字符串;类似ES5 indexOf()
console.log(str.startsWith('Hello'))
// true ----表示参数字符串是否在原字符串的头部;
console.log(str.endsWith('!'))
// true ----表示参数字符串是否在原字符串的尾部;
//ES6字符串扩展方法----模板字符串
let hello = '你好'
;
let str1 =
`${hello}，这节课学习字符串模板`;
console.log(str1); //你好，这节课学习字符串模板,省去拼接的烦恼；
alert `123
`
// 等同于
alert(123
)
//ES6解构赋值
let res =
{
id: 1
,
status: "OK"
,
list: [{
name: 'bob'
,
age: 20
}]
}
let {
id,
status,
list
} =
res;
console.log(id, status, list);
// 1, "OK", [{name: 'bob',age: 20}]
//const 声明常量 === var a = 1, b = 2, c = 3;or const a = 1;const b = 2;const c = 3;
const [a, b, c] = [1, 2, 3
];
console.log(a, 'aaaaa');
//1 "aaaaa"
console.log(b, 'bbbbb');
//2 "bbbbb"
console.log(c, 'ccccc');
//3 "ccccc"
//使用扩展运算符（...）拷贝数组
let test = [1, 2, 3, 4, 5
]
let [...test1] =
test
test[2] = 5
console.log(test, '原数组')
//[1, 2, 5, 4, 5] "原数组"
console.log(test1, '深拷贝的数组')
//[1, 2, 3, 4, 5] "深拷贝的数组"
//不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一个默认输出（export default）。
// bad
//import * as myObject from './importModule';
// good
//import myObject from './importModule';
//reset参数---rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中
function add(...values) {
let sum = 0
;
for (
var val of values) {
sum =
val;
}
return sum;
}
console.log(add(2, 5, 3))
// 10
//箭头函数
var sum = (num1, num2) => num1
num2;
// 等同于
var sum =
function(num1, num2) {
return num1
num2;
};
console.log(sum(1, 4), '求和')
//5 "求和"
//如果只有单个参数
var fun = age => age;
//or var fun = (age) => age;
// 等同于
var fun =
function(age) {
return age;
};
console.log(fun(20), '箭头函数单个参数')
//20 "箭头函数单个参数"
//扩展运算符加箭头函数
const sumList = (...num) =>
num;
console.log(sumList(1, 2, 3, 4, 5), '扩展运算符运用场景一')
// [1, 2, 3, 4, 5] "扩展运算符运用场景一"
const getList = (name, ...obj) =>
[name, obj];
console.log(getList(1, 2, 3, 4, 5), '扩展运算符运用场景二')
// [1,[2,3,4,5]] "扩展运算符运用场景二"
//ES6数组扩展******将一个数组添加到另一个数组的尾部
// ES5的 写法
var test2 = [0, 1, 2
];
var test3 = [3, 4, 5
];
//console.log(test2.push(test3),'push直接跟数组')// 4 "push直接跟数组" push方法的参数不能是数组;
Array.prototype.push.apply(test2, test3);
console.log(test2, '没用...前')
//[0, 1, 2, 3, 4, 5] "没用...前"
// ES6 的写法
let test4 = [0, 1, 2
];
let test5 = [3, 4, 5
];
test4.push(...test5);
console.log(test4, '使用...后')
//[0, 1, 2, 3, 4, 5] "使用...后"
//ES6将类数组转为数组的方法；dom类似除了document.getElementById()之外的找到的dom都为类数组;另外有length属性的;
let toList =
{
'0': 'bob'
,
'1': '20'
,
'2': 'man'
,
length: 3
};
// ES5的写法
var newArr =
[].slice.call(toList);
console.log(newArr, '[].slice.call的方法')
//["bob", "20", "man"] "[].slice.call的方法"
// ES6的写法
let newArr1 =
Array.from(toList);
console.log(newArr1, 'Array.from方法')
//["bob", "20", "man"] "Array.from方法"
//find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组;如果没有符合条件的成员，则返回undefined。
let numList = [1, 5, 15, 20, 25
];
let newNumList = numList.find((value, index, arr) =>
{
return value > 20
;
})
console.log(newNumList, '数组find方法')
//25 "数组find方法"
//findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
let numLogs = [5, 10, 15, 20
];
let newNumLogs = numLogs.findIndex((value, index, arr) =>
{
return value > 10
})
console.log(newNumLogs, '数组findIndex方法')
//2 "数组findIndex方法"
//ES6数组的 includes() 第一个参数是否包含一个指定的值，第二个参数表示搜索的起始位置，默认为0;
//如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始;
//没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值;
console.log([1, 2, 3].includes(4), 'includes一个参数')
//false "includes一个参数"
console.log([1, 2, 3].includes(3, -1), 'includes两个参数')
//true "includes两个参数"
//ES6对象的结构和扩展运算符的运用*****...扩展运算符 解构赋值必须是最后一个参数(数组和对象都是一样) 解构赋值的拷贝是浅拷贝；
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4
};
console.log(x, '对象的第一个值');
//1 "对象的第一个值"
console.log(y, '对象的第二个值');
//2 "对象的第二个值"
console.log(z, '对象的第三个值');
//{a: 3, b: 4} "对象的第三个值"
let obj =
{
name: 'bob'
,
age: 20
}
let obj1 =
{
sex: 'sex'
,
cash: 22
}
let newObj = {...obj, ...obj1 };
//等同于 let newObj = Object.assign({}, obj,obj1);
console.log(newObj, '扩展运算符合并对象')
//{name: "bob", age: 20, sex: "sex", cash: 22} "扩展运算符合并对象"
//ES6 async 函数 await 是顺序执行的，Promise.all() 是并行的;
function fun1() {
console.log('第一')
//第一
}
function fun2() {
console.log('第二')
//第二
}
function fun3() {
console.log('第三')
//第三
}
async function testasync() {
try {
await fun1()
await fun2()
await fun3()
} catch (error) {
console.log(error)
}
}
testasync();
//let [res1, res2, res3] = await Promise.all([fun1(), fun2(),fun3()])
//async 函数中 return 的结果将作为回调的参数;
async
function testCallback() {
return 'this is a test async function'
}
testCallback().then(
userName =>
console.log(userName)
)
// this is a test async function
更多专业前端知识，请上
【猿2048】www.mk2048.com
