JavaScript/ES6

轩萱
171 阅读6分钟

JavaScript

1、网页的生成

  • HTML代码转化为DOM
  • CSS代码转换为CSSON(CSS Object Model)
  • 结合DOM和CSSOM，生成一棵渲染树，包含每个节点的视觉信息
  • 生成布局(layout)，将所有渲染树的所有节点进行平面整合——耗时
  • 将布局绘制(paint)在屏幕上——耗时

2、渲染render

  • 生成布局flow和绘制paint这两步合称为渲染
  • 网页生成时至少渲染一次，用户访问过程中会不断重新渲染
  • 重新渲染包含：重排（reflow）和重绘（repaint），重绘不一定需要重排，重排必定重绘

3、数据类型

  • 简单数据类型:Number、String、Boolean、Undefined和Null
  • 复杂数据类型:Object
  • 获取变量类型:typeof
  • 数据类型转换:toString()、String、num+""、Number()、parseInt(str)、parseFloat(str)、Boolean()
  • 布尔类型的隐式转换：true（非空字符串、非0数字、true、任何对象）和false（空字符串、0、false、null、undefined）

4、数组（掌握）

  • 定义

    var arr=["red","green","blue"]

  • 获取

    console.log(arr[0]);

  • 遍历

    arr.forEach(e1 => {
   console.log(e1);
});

  • 替换

    arr[0]="yellow";

  • 新增

    arr[3]="pink0";

5、函数

  • 匿名函数的自调用

    (function(){
  alert(124);
})();

  • 函数作为返回值

    function fn(b){
    var a=10;
    return function(){
        alert(a+b);
    }
 }
 fn(15)();

6、作用域

  • 全局变量：不使用var声明的变量(不推荐使用)，关闭网页或浏览器才会销毁

  • 局部变量：固定代码片段内可访问的变量

  • 词法作用域：

    • 函数允许访问函数外的数据
    • 整个代码结构只有函数可以限定作用域
    • 若当前作用规则中已有名字，则不考虑外面的名字

  • 参考代码

    var num = 123;
function foo(){
    console.log(num);
}
foo();

7、闭包

  • 闭包：指有权访问另一个函数作用域中变量的函数

  • 简单理解：一个作用域可以访问另外一个函数内部的局部变量

  • 作用：延伸变量的作用域

  • 参考代码：

    var car=(function(){
    var start=13;
    var total=0;
    return {
        price:function(n){
            if(n<=3){
                total=start;
            }else{
                total=start+(n-3)*5
            }
            return total;
        },
        yd:function(flag){
            return flag?total+10:total;
        }
    }
} )();

8、递归

  • 递归函数：函数在内部可以调用本身

  • 递归函数的作用和循环效果一样

  • 递归很容易发生“栈溢出”错误，所以必须要加退出条件return

  • 参考代码（求n的阶乘）

    <script>
  var n=prompt("输入一个数:");
  console.log("n的阶乘为："+jiecheng(n));   
  function jiecheng(a){
      if(a==1){
          return 1;
      }
      return a*jiecheng(a-1);
  }
</script>

9、作用域链

  • 参考代码：

    function f1(){
   var num=123;
   function f2(){
       console.log(num);
   }
   f2();
}
var num=456;
f1();

10、new关键字

  • new会在内存中创建一个新的空对象
  • new会让this指向这个新的对象
  • 执行构造函数的目的：给这个新对象加属性和方法
  • new会返回这个新对象是

11、对象的使用

  • 遍历对象属性：通过for...in

  • 删除对象属性：使用delete

  • 代码参考：

    function Person(name,age,job){
    this.name=name;
    this.age=age;
    this.job=job;
    this.sayHi=function(){
        console.log('hello,everybody');
    }
}
//适用对象
var person = new Person("张三",22,"学生");
console.log(person);
//遍历对象属性
for(var key in person){
    console.log(key+"="+person[key]);
}
//获取对象的属性
console.log(person.name);
//删除对象的属性
delete person.sex
console.log(person.sex);

ES6

1、let/const的声明方式

  • let：不可重复声明（块级作用域，不存在变量提升，值可更改）
  • const：声明常量（块级作用域，不存在变量提升，值不可能改）

2、解构赋值

  • 解构赋值语法是一种JavaScript表达式，用来将数组中的值或对象中的属性取出来区分为不同变量

  • 可分为：对象解构赋值和数组解构赋值

  • 代码参考：

     let newPoint={
  x:2,
  y:4,
  z:5
 };
 let {x,y,z}=newPoint;
 console.log(Math.sqrt(x*x+y*y+z*z).toFixed(2));

  • 注意事项：

    1、两边的结构必须一致 2、右边必须是一个实际的内容，数组或对象

3、箭头函数

  • 箭头函数是ES6提供的新的语法结构，用于替换匿名函数

  • 相当于简写了function，使用()代替，使用=>代替{}

  • 代码参考：

    //源代码
 var show=function(){
 console.log("Hello world!");
}
 show();

//箭头函数
var show2=()=>{
 console.log("Hello world!");
}
show2();

  • 传递两个参数：

    //方法一
var add1=function(a,b){
  return a+b;
};
console.log(add1(1,3));
 //方法二
var add2=(a,b)=>{
  return a+b;
}
console.log(add2(1,2));
//方法三
var add3=(a,b)=>a+b;
console.log(add3(1,2));

    1、传递两个参数，参数必须使用括号包裹（方法二）

    2、如果使用return返回一个执行语句，可以省略return（方法三）

4、箭头函数与普通函数的区别

  • 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
  • 不可以当做构造函数，也就是不可以使用new命令，否则会抛出一个错误
  • 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替
  • 不可以使用yield命令，因此箭头函数不能用作Generator函数

5、剩余参数 ...

  • ... 用于声明剩余的参数，a、b是命名参数，...c用来收集成语参数

  • ... 也称为扩展运算符，通过...运算使得两个数组实现深拷贝

  • 代码参考：

     function show(a,b,...c){
  console.log(a);
  console.log(b);
  console.log(c);
}
show(1,2,4,6,7,9);

let arr=[1,2,3];
console.log(arr);
console.log(...arr);
function add(...arr){
  return arr.reduce((previous,current)=>{
      return previous+current;
  });
}

6、参数模板（模板字符串）

  • 模板字符串是为了解决使用 "+"号拼接字符串的不便利而出现

  • ${变量名称/常量名称}，外面使用反单引号（``）包裹

  • 参考代码

    let a="Hello"
let b="world"
let c=`${a+b}`
let d=`${a} ${b}`
console.log(c);
console.log(d);

7、数组的方法

  • Array.from(json):将json字符串转为数组，json字符串务必要有长度竖向

    let json={
 '0': 'niit',
 '1': 'computer',
 '2': 'mobile',
 length:3
}
let arr1=Array.from(json);
console.log(arr1);

function test(a,b){
 let arr=Array.from(arguments, value=>value+2);
 console.log(arr);
}
test(1,2);

  • 实例方法find():从数组中查找，传入一个有3个参数的匿名函数

    let arr3=[1,2,3,4,5,6,7,8,9];
console.log(arr3.find(function(value,index,arr3){
 return value>5;
}));
    • value：当前查找的值
    • index：当前查找的数组索引
    • arr：当前数组

  • Array.of(变量):将变量转为数组，可以不要再使用eval进行转换，替代Array()或new Array()

     let arr2=Array.of(1,2,3,4);
 console.log('arr2:',arr2);

  • 实例方法fill(value,start,end):使用给定值填充数组，数组中的原有元素会被抹去，从位置start开始填充，不包含end位置

  • 遍历数组，一下三个方法都返回一个遍历器对象，可以使用for...of循环遍历，或使用next()遍历

    // 数组遍历
let arr5=['niit','computer','mobile'];
// 输出索引
for(let index of arr5.keys()){
  console.log(index);
}
// 输出值
for(let index of arr5.values()){
  console.log(index);
}
// 输出索引和内容
for(let [index,val] of arr5.entries()){
  console.log(index+":"+val);
}
// entries()方法
let list=arr5.entries()
console.log(list.next().value);
    • entries():键值对遍历
    • keys():健名遍历
    • values():键值遍历

  • Array-map

    map():返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

    参考代码：

    let scores=[23,45,76,12,91];
let scores1=scores.map(score=>{
  if(scores>=60){
      return '及格';
  }
  else{
      return '不及格';
  }
})

  • Array-reduce

    reduce():接收函数作为累加器，数组的元素从左到右缩减，最终计算为一个值

    参考代码：

    let scores=[23,45,76,85,12,91];
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));

  • Array-filter

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

    代码参考：

    let scores=[23,45,76,85,12,91];
let newScores=scores.filter(function(item){
  console.log(item);
  if(item%2==0){
      return true;
  }else{
      return false;
  }
})
console.log(newScores);
console.log(scores.filter((item)=>item%2==0));

  • Array-forEach

    参考代码：

    let scores=[23,45,76,85,12,91];
 scores.forEach((item,index)=>{
  console.log(`第${index}个元素`+`是`+item);
})
avatar
文章
阅读
粉丝