javascript初学教程 js入门教程视频

文章目录

• 前端学习（JS学习第五天 尚硅谷JS基础视频）

• 1. 数组（Array）

• 1.1 数组的创建和使用
• 1.2 数组的属性
• 1.3 数组的方法
• 1.3 数组的遍历
• 1.3 练习

• 2. 函数对象的方法
• 3. argument
• 4. Date对象

• 4.1 方法

• 5. Math对象
• 6. 包装类
• 5. 字符串的属性和方法

• 5.1 属性
• 5.2 方法

前端学习（JS学习第五天 尚硅谷JS基础视频）

1. 数组（Array）

  数组也是一个对象。和普通的对象功能类似，也是用来存储一些值的。不同的是普通对象使用字符串作为属性名，数组是使用数字来作为索引来操作元素。数组中可以是任意的数据类型。

1.1 数组的创建和使用

  数组的创建如下：

var array = new Array();
var array1 = new Array(10,20);

  向数组中添加元素，语法：数组[索引] = 值

var array = new Array();
array[0] = 90;

  读取数组中的元素，语法：数组[索引]。如果读取不存在的索引，不会报错而是返回undefined。

var array = new Array();
array[0] = 90;
console.log(array[0]);

  使用字面量创建数组。语法：[]。

var array = [];

  使用字面量创建数组，可以在创建时就指定数组中的元素。

var array = [1,2,3];

创建一个数组只有一个元素10
arr = [10];
创建一个长度为10的数组
arr = new Array(10);

1.2 数组的属性

  获取数组的长度，通过length属性。语法：数组.length。对于连续的数组，使用length可以获取到数组的长度（元素的个数）；对于非连续的数组，使用length会获取到数组的最大索引+1。

var array = new Array();
array[0] = 90;
console.log(array.length);

  修改length。如果修改的length大于原长度，则多出的部分会空出来。如果修改的length小于原数组，则多出的元素会被删除。语法：数组.length = 新值。

var array = new Array();
array.length = 10;

  向数组最后一个位置添加元素。语法：数组[数组.length] = 新值。

var array = new Array();
array[array.length] = 10;

1.3 数组的方法

• push()
  向数组末尾添加一个或多个元素，并返回新的长度。将要添加的元素作为方法的参数传递。

var array = new Array();
var result = array.push(10,20); //返回新的长度

• pop()
  删除并返回数组的最后一个元素。

var array = new Array();
var result = array.pop(); //返回新的长度

• unshift()
  向数组的开头添加一个或多个元素，并返回新的数组长度。

var array = new Array();
var result = array.unshift(); //返回新的长度

• shift()
  删除并返回数组的第一个元素。

var array = new Array();
var result = array.shift(); //返回新的长度

• slice(start,end)
  从某个已有的数组，返回选定的元素。start表示截取开始位置的索引，end表示截取结束位置的索引，end可以省略，左闭右开。索引可以传递一个负值，如果传递负值，则从后往前计算。

var array = [11, 12, 12, 13, 24];
var result = array.slice(0,2); //返回新的数组
var result = array.slice(1);

• splice(start,number,value)
  可以用于删除数组中的指定元素，直接更改原数组，返回删除的元素。start表示删除开始位置的索引，number表示删除几个元素。value可以传递一些新的元素，这些元素会自动插入开始位置索引处。

var array = [11, 12, 12, 13, 24];
array.splice(0,2); //返回新的数组
var result = array.splice(1);

• concat()
  连接两个或更多的数组，并返回结果。

var array = [11, 12, 12, 13, 24];
var array2 = [11, 23];
var result = array.concat(array2);

• join(value)
  把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔，并返回转换后的字符串。value表示分隔符，若不指定分隔符，默认为,。

var array = [11, 12, 12, 13, 24];
var result = array.join("hello");

• reverse()
  颠倒数组中元素的顺序，对原数组进行更改。

var array = [11, 12, 12, 13, 24];
array.reverse();
console.log(array);

• sort()
  对数组的元素进行排序，对原数组进行更改，默认按照Unicode编码进行排序。
  对数字进行排序可能会出现错误，可以自己指定排序规则。可以在sort()添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，浏览器会分别使用数组中的元素，作为实参去调用回调函数。使用哪个元素调用不确定，a一定是b前面的值。
  浏览器会根据回调函数的返回值来决定元素的顺序，如果返回一个大于0的值，则元素会交换位置；若返回一个小于等于0的值，则元素位置不变。如果需要升序排列，则返回a-b；如果需要降序排列，则返回b-a。

var array = [11, 12, 12, 13, 24];
array.sort(a, b);
console.log(array);

1.3 数组的遍历

  遍历数组，就是将数组中的所有元素都取出来。一般使用for循环遍历数组。JS还提供了forEach()方法，用来遍历数组。但是不支持IE8即以下的浏览器。
  forEach()方法需要一个函数作为参数。像这种函数，由我们创建，但是不由我们调用的，称为回调函数。数组中有几个元素，回调函数就执行几次，每次执行时，浏览器会将遍历到的元素，以实参的形式传递进来，可以定义形参，来读取这些内容。语法:数组.forEach(function(){});
  浏览器会在回调函数中传递三个参数：

• 第一个参数，就是当前正在遍历的元素
• 第二个参数，就是当前正在遍历元素的索引
• 第三个参数，就是当前正在遍历的数组

var array = [11, 12, 12, 13, 24];
array.forEach(function(value, index, obj){
	console.log("value = " +value); //数组中的元素
	console.log("index = " +index); //数组中的元素的索引
	console.log("obj = " +obj); //数组
});

1.3 练习

  练习：去除数组中重复的数字。

var array = [1,2,3,2,4,1,3,4,6,6];
	for(i = 0; i < array.length; i++) {
		for(j = i + 1; j < array.length; j++) {
			if(array[i] == array[j]) {
				array.splice(j, 1);
				j--;
			}
		}
	}
console.log(array);

2. 函数对象的方法

  call()和apply()都是函数对象的方法，需要通过函数对象来调用。当对函数调用call()和apply()都会调用函数执行。
  在调用call()和apply()时，可以将一个对象指定为第一个参数。此时这个对象将会成为函数执行时的this。
  call()方法可以将实参在对象之后依次传递；apply()方法需要将实参封装到一个数组中统一传递。

this的情况：
1.以函数形式调用时，this永远都是window
2.以方法形式调用时，this是调用方法的对象
3.以构造函数调用时，this是新创建的那个对象
4.使用call和apply调用时，this是指定的那个对象

3. argument

  在调用函数时，浏览器每次都会传递进两个隐含的参数，一个是函数的上下文对象this，另一个是封装实参的对象arguments。
  arguments是一个类数组对象（arguments instanceof Array 结果是false，还可以用Array.isArray()）。它可以通过多音来操作数据，也可以获取长度。再调用函数时，传递的实参都会在arguments中保存。arguments.length
用来表示实参的个数。
  arguments中有一个属性callee，这个属性对应一个函数对象，就是当前正在执行的函数对象。

4. Date对象

  使用Date对象表示一个时间。如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行时间。创建一个指定的时间对象，需要在构造函数中传递一个表示时间的字符串作为参数。日期格式：月份/日/年 时：分：秒

//创建一个Date对象
var d = new Date();

4.1 方法

• getDate()
  获取日期对象是几日。
• getDay()
  获取日期对象是周几。0-6中的一个值。
• getMonth()
  获取日期的月份。0-11中的一个值。
• getFullYear
  获取年份。
• getTime
  获取当前日期的时间戳。

5. Math对象

  Math和其他对象不同，不是一个构造函数，属于一个工具类，不用创建对象，里面封装了数学运算相关的属性和方法。

6. 包装类

  JS中为我们提供三个包装类，String、Number、Boolean。通过三个包装类可以将基本数据类型的数据转换为对象。但是基本不用基本数据类型的对象。

var num = new Number(3);

  当对一些基本数据类型去调用属性和方法时，浏览器会临时使用包装类，将其转换为对象，然后再调用对象的属性和方法。调用完后，会将其转换为基本数据类型。

5. 字符串的属性和方法

  字符串在底层是以字符数组的形式保存的。

5.1 属性

• length
  字符串长度

5.2 方法

• charAt()
  返回指定位置的字符。
• charCodeAt()
  返回指定位置字符的Unicode编码。
• formCharCode()
  可以根据字符编码获取字符。
  语法：String.formCharCode()
• concat()
  可以用来连接两个或多个字符，返回新的字符串。
• indexOf()
  可以检索一个字符串是否含有指定内容，如果有，并返回索引；如果没有，则返回-1。可以指定第二个参数，指定开始查找的位置。
• lastIndeOf()
  从后往前找元素，如果有，并返回索引；如果没有，则返回-1。可以指定第二个参数，指定开始查找的位置。
• slice(start，end)
  截取字符串，并返回截取内容。左闭右开。
• subString(start，end)
  截取字符串，与slice()类似，不同的是该方法不能接收传递负值，如果传递负值，则默认使用0，还会自动调节参数位置，如果第二个小于第一个，则自动交换。
• subStr(start，length)
  截取字符串，第一个表示开始位置，第二个表示截取的个数。
• split(str)
  将会根据str来拆分成数组。若传入空串，将会把每个字母都分开。
• toUpperCase()
  将字符串转化为大写，并返回。
• toLowerCase()
  将字符串转化为小写，并返回。