js和ES6的相关知识点

JavaScript应用场景

1.网页特效
2.服务端开发(Node.js)
3.命令行工具
4.桌面程序(Electron)
5.App(Cordova)
6.控制硬件-物联网(Ruff)
7.游戏开发(cocos2d-js)

复习以下知识点

• 数据类型

  • 简单数据类型:Number,String,Boolean,Undefined和Null
  • 复杂数据类型:Object
  • 获取变量类型:typeof
  • 数据类型转换:toString(转换成字符du串),String(),num+"",Number(),parseInt(str),parseFloat(str),Boolean()

• 数组及数组常用的方法

  注意:直接给Array的length赋一个新的值会导致Array大小的变化:

arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr变为[1, 2]

• indexof

与String 类似，Array也可以通过indexof()来搜索一个指定的元素的位置:

arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2

• slince

slice()就是对String的substring()版本，它截取Array的部分元素，然后返回一个新的Array

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

注意:slice()的起止参数包括开始索引，不包括结束索引。还有就是如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array。

• push和pop

push()向Array的末尾添加若干元素,pop()则把Array的最后一个元素删除掉:

var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错，而是返回undefined
arr; // []

• unshift和shift
  如果要往Array的头部添加若干元素，使用unshift()方法，shift()则把Array的第一个元素删掉:

var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错，而是返回undefined
arr; // []

• sort

sort()可以对当前的Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认的顺序排序:

var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

• reverse

reverse()把整个Array的元素给掉个，也就是反转:

var arr = ['one', 'two', 'three'];
arr.reverse(); 
arr; // ['three', 'two', 'one']

• splice

splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

• concat

concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array：

var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']

concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里:

ar arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

• join

join()方法是一个非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

• 函数

  • 函数的调用:函数作为数据类型可以作为参数，返回值

    clipboard.png

  • 作用域

    • 全局变量:不使用var声明的变量(不推荐使用),关闭网页或浏览器才会销毁。
    • var申明的变量的作用域：
      1.如果一个变量在函数内部申明，则该变量的作用域为整个函数体，在函数体外不可以引用该变量
      2.如果两个不同的函数给自申明了同一个变量，那么该变量就只在各自的函数体内起作用。换句话说，函数内部的同名变量相互独立，互不影响
      3.由于Js的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行

  • 闭包

    • 闭包(closure)指有权访问另一个函数作用域中变量的函数
    • 简单理解:一个作用域可以访问另外一个函数内部的局部变量

• 递归

  • 如果函数在内部可以调用其本身，那么这个函数就是递归函数
    +由于递归很容易产生"栈溢出"错误(stack overflow)，所以必须要加推出条件return

• JS代码的执行过程

  • JavaScript的函数定义有一个特点，它会先扫描整个函数体的语句，将所有申明的变量"提升"到函数顶部

function foo() {
    var y; // 提升变量y的申明，此时y为undefined
    var x = 'Hello, ' + y;
    console.log(x);
    y = 'Bob';
}

• this详解

  • 一般函数直接执行，内部this指向全局window
  • 函数作为一个对象的方法，被该对象所调用，那么this指向的时该对象

  • 构造函数中的this时一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到这个隐式对象上，后续通过关键字调用，从而实现实例化

    
    
    this.png

ES6的知识点(补充)

• let/const

  • 两个重要的两个特性就是提供了块级作用域与不再具备变量提升。
  • let：不可重复声明，块级作用域；只能在{}里打印，外面就无法打印

  • const:声明常量

    
    
    let-const.png

• 解构赋值

  • 可以同时对一组变量进行赋值，什么是结构赋值，看例子:

var array = ['hello', 'JavaScript', 'ES6'];
var x = array[0];
var y = array[1];
var z = array[2];

• 注意，对数组元素进行解构赋值时，多个变量要用[...]括起来。
  如果数组本身还有嵌套，也可以通过下面的形式进行解构赋值，注意嵌套层次和位置要保持一致：

let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
x; // 'hello'
y; // 'JavaScript'
z; // 'ES6'

也可以忽略某些元素

let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素，只对z赋值第三个元素
z; // 'ES6'

• 使用注意事项:
  1.两边的结构必须一致
  2.两边必须是一个实际的内容:数组或对象

• 箭头函数：

function (x) {
    return x * x;
}

x => x * x

• map

配合数组使用，具有很棒的效果啊！

• 剩余参数

  • ...用于声明剩余的参数,a,b是命名参数，...c用来收集剩余参数
  • ...也称为扩展运算符，通过...运算使得两个数组实现深拷贝

• 参数模板

  • 模板字符串是为了解决使用"+"号拼接字符串的不便利而出现的
  • ${变量名称/常量名称},外面使用' '（反单引号）包裹

• 数组方法

  • Array.of(变量)：将变量转为数组，可以不要在使用eval进行替换，替代Array()或new Array()
  • reduce()：接收函数作为累加器，数组的元素从左到右缩减，最终计算为一个值
    例子：有一个数组，存取了6位学生的成绩，求六位学生的平均分

//求几位学生的平均分
let scores=[23,34,5,6,45];
let average=scores.reduce((tmp,score,index)=>{
    console.log(tmp,score,index);
    if(index==scores.length-1){
        return(tmp+score)/scores.length;
    }
    else{
        return tmp+score;
    }
})
console.log(average.toFixed(2));

• filter():创建新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

  
  
  filter.png