1-let和const定义变量以及相关作用域
//示例1
/* var temp = new Date();
function test1(){
console.log("msg1",temp); //object date
var temp = "123";
console.log("msg2",temp); //123
}
console.log("msg3",temp) //123
test1() */
//示例2
/* function test2(){
temp = "123"
test3()
}
function test3(){
console.log("msg4",temp) //123
}
test2() */
//示例3
/* var a = []
for(let i = 0;i < 10;i++){
a[i] = function(){
console.log("msg5",i)
}
}
a[6]()
console.log("msg6",i)//6 undefined */
/* // var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log("bar",bar); // 报错ReferenceError not defined
let bar = 2; */
/* var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
console.log(tmp)
} */
/* function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); //
} */
//示例1
/* const PI = 3.141592
PI = 2 */
//示例2
/* const max; // Missing initializer in const declaration */
//示例三
let message = "123"
const message = "456"
2-数组的解构赋值
-------------------------------------一维数组的解构
/* let arr = [10,20,30]
let [a,b,c] = arr
console.log(a,b,c) */
-------------------------------------多维数组解构
/* let arr1 = [10,[20,30],40]
let [a,[b],c] = arr1
console.log(a,b,c) */
-------------------------------------交换变量
/* let x=1;
let y=2;
[x,y]=[y,x]
console.log(x,y) */
-------------------------------------带默认值
/* let [foo = '123'] = []
console.log("foo",foo) //foo */
//示例1
/* let [x, y = 'b'] = ['a'];
console.log(x,y) */
//示例2
/* let [x, y = 'b'] = ['a', undefined];
console.log(x,y)
/* //示例3
let [x = 1] = [undefined]; */
//示例4
/* let [x = 1] = [null];
console.log(x) */
3-对象的解构
/* var {a,b} = {a:'1',b:'2'} // var {a:a,b:b} = {a:'1',b:'2'}
console.log(a,b) */
//示例1
/* var data = {
'ok':1,
'data':{
'top':[1,2,3],
'center':[2,3,4]
},
'mis':'请求成功'
};
let {ok,data,mis} = data;
*/
//示例2
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
4-函数的解构
/* function add([x, y]){
return x + y;
}
add([1, 2]); // 3 */
/* let arr = [1,2,3,4,5]
for(let item of arr){
console.log(item)
} */
//示例1
/* [[1, 2], [3, 4]].map(([a, b]) => a + b);
/* let arr = [1,2,3,4]
arr.map(function(item){
console.log(item)
}) */
//示例2
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); //[3,8]
move({x: 3}); //;[3,0]
move({});//[0,0]
move();//[0,0]
//示例3 解构顺序跟 变量的顺序没有关系
/* function f({x, y, z}) {
console.log(x,y,z)
}
f({z: 3, y: 2, x: 1}); */
5-字符串的解构
const [a,b,c,d,e] = "hello"
console.log(a,b,c,d,e)
6-数值和布尔值解构赋值
let {toString: s} = 123;
s === Number.prototype.toString // true
console.log(s)
//let {toString: s} = true;
//s === Boolean.prototype.toString // true
7-字符串模板
let obj = {id:'1',name:'张三'}
let result = '用户编号是:'+obj.id+",用户名称是:"+obj.name
console.log(result)
let result1 = `用户编号是:${obj.id},用户名称是:${obj.name}`
console.log(result1)
for(let i of 'hello'){
console.log(i)
}
8-箭头函数
var f = v => v;
// 等同于
var f = function (v) {
return v;
};
var f1 = () => 5
var f2 = (sum1,sum2) => sum1+sum2
var f3 = (sum1,sum2) => {
console.log(this)
return sum1+sum2
}
f3(1,2)
//示例1 使用箭头函数简化写法
[1,2,3].map(function(val){
return val+1
})
let arr = [1,2,3].map(item => item+1)
console.log(arr)
/**************箭头函数使用注意************/
//（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
//（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
//（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
//（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
// 上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。
9-rest参数
/* function add(...values){
let sum = 0;
for(let i of values){
sum+=i
}
return sum
}
console.log(add(2,3,5,6,7,8))
*/
//示例1
// arguments变量的写法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
console.log(sortNumbers(2,3,7,8,1,5,0)) */
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
console.log(sortNumbers(2,3,7,8,1,5,0))
// rest参数后不能再有其他参数，否则报错
function f(a,c,...b) {
console.log(a,c,b)
}
f(1,2,3,4,5,6)
10-扩展运算符
/* console.log(...[1,2,3])
console.log(1, ...[2, 3, 4], 5)
/* [...document.querySelectorAll('div')] */ */
/* //示例1 复制数组
let arr1 = [1,2,3]
let arr2 = [...arr1] //写法1
console.log(arr2)
let [...arr3] = arr1 //写法2 */
//示例2 合并数组
/* const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
const arr4 = [...arr1,...arr2,...arr3]
console.log(arr4) */
//示例3 解构赋值结合
/* const arr5=[1,2,3,4,5]
const [a,...list] = arr5
console.log(a,list)
//示例4 字符串
const arr6 = [..."hello"] */
let obj = {
id: '1',
name: '张三'
}
let {id} = {...obj}
[...arr]
{...obj}
/* let a = [1,2,3]
let b = [...a]
console.log(b)
11-Map和Set对象
/* let map1 = new Map()
console.log(map1)
let json = {
id: '1',
name: '张三',
age: 20
}
for(let key in json){
map1.set(key,json[key])
}
console.log(map1)
let json2 = {}
for(let [k,v] of map1){
json2[k] = v
} */
let set1 = new Set([1,2,3,4,5,2,3,4,5])
console.log(set1)
12-无
13-promise对象
function promiseQuery(){
let p = new Promise(function(resolve,reject){
setTimeout(function(){
let num = Math.ceil(Math.random()*20); //生成1-10的随机数
if(num <= 10){
resolve(num)
}else{
reject("数字大于了10")
}
},3000)
})
return p
}
promiseQuery().then(function(data){
console.log("成功",data)
},function(reason){
console.log("失败",reason)
})
/* promiseQuery().then(res =>{
console.log(res)
})
*/
promiseQuery().then(function(data){
console.log("成功",data)
}).catch(function(reason){
console.log("失败",reason)
})
js module 导出
module1.js
/****导出变量***********/
export let a1 = "123";
//等价于
/* let a1 = "123"; export {a1} */
let b1 = "张三";
let b2 = "李四";
let b3 = "王五";
export{b1,b2,b3}
/******导出对象***********/
let obj={
color: 'red',
addr: '四川'
}
export {obj}
/*****导出函数************/
export function add(a,b){
return a+b
}
module2.js
let a=1;
let b=2;
let c=3;
export {a,b,c}
/**********按别名导出*****************/
export {a as x,b as y, c as z}
/*********export不能用于函数语句中******/
function foo(){
console.log("foo")
//export {foo} 不能在函数内部使用导出
}
export {foo}
module3.js
//导出方式一
export function foo1(){
console.log("foo1")
}
//导出方式二
export default function foo2(){
console.log("foo2")
}
moudle4.js
//在一个模块中，先输入后输出其他模块，import语句可以和export语句写在一起
export {foo1} from './module3.js'
等同于，建议采用标准写法
import {foo1} from './module/module3.js'
export {foo1} from './module/module3.js'
export * from './module3.js'
/**
*1、export * 表示导入并导出模块的所有成员
* 2、export * 会自动忽略default方法
**/
导出后的引用
module1.html
module2.html
module3.html
module4.html