前端学习DAY-3

Java_Xjc

已于 2022-07-22 21:47:15 修改

阅读量172

点赞数

文章标签：前端学习 javascript

于 2022-07-22 16:53:02 首次发布

本文链接：https://blog.csdn.net/m0_56017821/article/details/125924756

版权

HTML+CSS+JS属于前端三剑客

HTML:基于编写网页文档结构，版本是HTML5，简称H5

CSS:基于选择器和属性美化，布局排版网页，版本是CSS3

JS:嵌入在网页中的编程语言，也称为“脚本（script）语言”，负责编写网页交互操作

Javascript

数组 - 廖雪峰的官方网站

1.JS的数据类型

2.函数

3.函数的返回值

4.回调函数

5.立即执行函数

6.立即执行函数的作用

7.数组的使用

数组 - 廖雪峰的官方网站


  var arr1 = [1,2,3.14,'Hello',null,true];
  console.log(arr1.length)

  var arr2 = [1,2,3];
  arr2.length;  //3
  arr2.length = 6
  console.log(arr2.length)   //length = 6
  arr2.length = 2;
  console.log(arr2.length);

  var arr3 = ['A','B','C']
  arr3[1] = 99;
  console.log(arr3)
  arr3[5] = 'x';
  console.log(arr3)

  var arr4 = [10,20,'30','xjc']
  arr4.indexOf(10)  //元素10的索引为0
  arr4.indexOf(20)
  arr4.indexOf(30)
  console.log(arr4.indexOf(30))   //没找到元素30,返回-1
  console.log(arr4.indexOf('30'))   //元素‘30’ 索引为2


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

  //如果不给slice()传递任何参数，它就会从头到尾截取所有元素，利用这一点，可以很容易的复制一个Array
  var aCopy = arr5.slice()
  aCopy
  console.log(aCopy)

  var arr6 = [1,2]
  arr6.push('A','B')  //push 向Array的末尾添加若干元素
  console.log(arr6)
  arr6.pop(); //pop把Array最后一个元素删除
  console.log(arr6)
  arr6.pop();arr6.pop();arr6.pop();   //连续pop三次
  console.log(arr6)
  arr6.pop()
  console.log(arr6)   //空数组继续pop不会报错，而是返回underfined


  var arr7 = [1,2]
  arr7.unshift('A','B')   //unshift() 向Array的头部添加若干元素
  console.log(arr7)
  arr7.shift()    //shift() 方法则把Array的第一个元素删掉
  console.log(arr7)
  arr7.shift();arr7.shift();arr7.shift()
  console.log(arr7)
  arr7.shift()
  console.log(arr7)   //空数组继续删不会报错，而是返回underfined


  var arr8 = ['B','C','A']
  arr8.sort();    //会按照默认顺序排序
  console.log(arr8);

  var arr9 = ['one','two','three','four']
  arr9.reverse();   //反转数组
  console.log(arr9)

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

  var arr11 = ['A','B','C']
  var added = arr11.concat([1,2,3])   //concat()  连接两个数组
  console.log(added)

  var newarr = ['A','B','C']
  var newarr2 = newarr.concat(1,2,[3,4])  //会自动拆开数组，添加进新的数组中
  console.log(newarr2)

  var arr12 = ['A','B','C',1,2,3]
  arr12.join('-')   //把当前Arr的每个元素都用指定的字符串连接起来
  console.log(arr12.join('-'))

Map和Set的使用

8.定时器

9.数组的高阶函数

10.标准对象

JS继承

JS没有类但是有继承，没有向上转型和向下转型，没有重写和重载，没有抽象类和接口

js创建对象的几种方式

JS的继承依靠的是原型链

1.同一个构造方法构造出来的对象拥有一个_ _ proto_ _指针，指向同一个原型对象

2.构造方法身上有一个prototype指针，与该构造方法构造出来的所有对象的_ _ proto_ _指向同一个原型对象，原型对象是js实现继承的原理

3.通过指针 “. _ _ proto_ _ .成员” 或者 “构造方法 .prototype.成员 ”可以设置一个所有该构造方法构造出来的对象都可以继承的成员

4.通过“Object.prototype.成员”，可以设置一个任意构造方法构造出来的对象都可以继承的成员

面试题：

什么是原型对象，什么是对象原型

构造方法身上有一个prototype指针，与该构造方法构造出来的所有对象的身上都有一个_ _ proto_ _指针指向同一个原型对象

什么是原型链

所有的对象和构造函数身上都有指针指向一个原型对象，原型对象身上又有指针指向其继承的构造方法的原型对象，最顶层是Object的原型对象，由子构造函数及其父辈构造函数的原型对象组成单向链表称为原型链，在对象身上访问成员的时候，会沿着原型链一直向上追溯，如果追溯到顶层Object的原型对象还是找不到，返回undefined