JavaScript学习笔记-01

数组

常见方法

1、arr.push(elem) 将一个或多个元素添加到数组末尾，并返回数组新长度

2、arr.pop() 取出数组最后一个元素

3、arr.shift() 取出数组第一个元素

4、arr.unshift(elem) 将一个或多个元素添加到数组开头，并返回数组新长度

Rest和Spread

1、Rest

将多个元素收集起来“凝聚”为单个数组

function test(a,b,...rest){
    console.log(rest);
}
test(1,2,3,4,5); //打印3,4,5

2、Spread      

与Rest相反，展开

const tags = [];
function storeTags(...input) {
  tags.unshift(...input);
  console.log(tags);
}
storeTags('形状', '大小', '高度'); 
// 打印['形状', '大小', '高度']

函数

函数作用域

1、全局作用域

全局作用域下声明的变量、函数，可在全局使用，包括子作用域

2、块作用域

if for while try/catch等由{}包裹的代码块中的作用域。块作用域中声明的变量、函数只能在块内及其子作用域被使用

3、函数作用域      

被函数包裹的作用域。函数作用域生命的变量、函数只能在函数内和其子作用域内使用

闭包

        闭包可以理解为“能够读取其他函数内部变量的函数”，闭包的常见用途有二：一是读取函数内部的变量，二是使这些变量的值始终保存在内存中（正常来说，当一个作用域内的代码执行完后，该作用域内的变量和函数都会被销毁）。

/** 
 * 计数器函数 makeCounter，从 0 开始计数，每次返回结果都在之前的返回结果上递增 1，且对外隐藏计数变量（无法从外部访问）。
 */
function makeCounter() {
  let count=0;
  return ()=>{
      return count++;
  }
}
let counter = makeCounter();
console.log(counter());  // 打印0
console.log(counter());  // 打印1
console.log(counter());  // 打印2
console.log(counter());  // 打印3

this

this指向当前执行上下文（this绑定的上下文取决于函数调用方式，不一定指向函数作用域）

绑定this上下文对象

1、fn.call(context,...args)

将函数fn的this绑定到上下文对象context上，且可传入任意数量的参数

2、fn.apply(context,args)

与call相似，不同的是传入的args是数组或类数组对象

3、fn.bind(context,...args)

与call相似，不同的是call/apply立即执行函数，bind只绑定this上下文对象，需要再调用函数执行

fn.call(obj,1,2,3);
fn.apply(obj,[1,2,3]);
let fn1=fn.bind(obj,1,2,3); fn1();

/** 
 * 有一个乘法计算器函数 multipleCaculator，
 * 二倍数计算器函数 doubleCaculator，
 * 用multipleCaculator 做三倍数的计算。
 */
var factor = 1;
function multipleCaculator(num) {
  return this.factor * num;
}
var double = { factor: 2 };
var triple = { factor: 3 };
// 二倍数计算器函数
const doubleCaculator = multipleCaculator.bind(double);
console.log(doubleCaculator(10)); // 20

// 三倍数的计算
const multipleCaculator1=multipleCaculator.bind(triple);
console.log(multipleCaculator1(10)); //30

 

箭头函数

(...params)=>{statements}

function test(a,b) {
    return a+b;
}

const test1=(a,b)=>{
    return a+b;
}

//单行不含花括号，可以省略return
const test2=(a,b)=>a+b;

//只有一个参数，可以省略括号
const test3=a=>{
    console.log(a);
}

//没有参数，要写圆括号
const test4=()=>{
    console.log("Hello world");
}

箭头函数中的this

箭头函数默认绑定外层的this（即外层的第一个非箭头函数的this），无法用call方法指定this（箭头函数没有自己的this）