第四十六天

Posted 2021-03-02 xueba

javascript

引入方式

1.body head 都可以放

<script>
  // 在这里写你的JS代码　//console.log(‘骑士计划！‘) #f12建打开浏览器的调试窗口，然后在console这个调试台就能看到这个内容了  //alert(‘骑士计划！‘)  #这个是浏览器窗口一打开咱们这个文件，就弹出一个窗口
</script>

2.引入额外的js文件

<script src="myscript.js"></script>

Console 就像一个解释器

直接可以写js 代码 然后执行

console.log(‘骑士计划‘)

语言规范

注释

// 这是单行注释

/*
这是
多行注释
*/

结束符

分号

javaScript语言基础

变量声明

1._，数字，字母，$组成，不能以数字开头。

2.声明变量使用 var 变量名;

var name = "Alex";
声明变量是name  吧alex 赋值给 name

var age =18

注意

　　注意：

　　　　　　变量名是区分大小写的。

　　　　　　推荐使用驼峰式命名规则。首字母大写

　　　　　　保留字不能用做变量名。

es6 的区别

补充：（ES6新特性，等咱们学到 VUE 在细说，简单了解一下就行了）

　　　　　　ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。

for (let i=0;i<arr.length;i++){...}
　　　　　　ES6新增const用来声明常量。一旦声明，其值就不能改变。这个东西就是为了定义一个固定的常量，供大家使用，这个常量不会改变

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

保留字列表

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile


保留字列表

不用记

数据类型 typeof b 查看数据的类型

JavaScript拥有动态类型 和Python一样

var x;
var x = 1;  // 此时x是数字
var x = "Alex" // 此时x是字符串 

数值

　数值(Number)
　只有一种类型  不区分浮点数 和整数
　
还有一种NaN，表示不是一个数字（Not a Number），也就是说是一个值，但不是数字。

parseInt("123")  // 返回123
parseInt("ABC")   // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")   // 返回123.456

字符串String

var a = "Hello";
var b = "world";
var c = a + b; 
console.log(c); 

常用方法

方法	说明
.length #不加括号的是属性 a.length	返回长度
.trim() #得到一个新值	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n) #n类似索引，从0开始，超过最大值返回‘‘空字符串 a.charAt(1) 第二个	返回第n个字符
.concat(value, ...) #s1=‘hello‘;s.concat(‘xx‘);得到helloxx	拼接
.indexOf(substring, start) #这个start是从索引几开始找，没有返回-1	子序列位置
.substring(from, to) #不支持负数，所以一般都不用它，了解一下就行了	根据索引获取子序列
.slice(start, end) #var s1=‘helloworld‘;s1.slice(0,-5)看结果，就用它	切片
.toLowerCase() #全部变小写	小写
.toUpperCase() #全部变大写	大写
.split(delimiter, limit)#分隔,s1.splite(‘ ‘),后面还可以加参数s1.split(‘ ‘，2),返回切割后的元素个数	分割

字符串拼接
    concat()
    var a =‘hello‘
    var b = ‘hi‘
    a.concat(b)
    ‘hellohi‘
    
寻找字符串在a的哪个位置
    var a =‘hello‘
	a.indexOf(‘e‘,0) 从第一个元素开始找  找不到返回-1

.slice(from,to)  切片

.split 字符串分割  第二个参数返回多少个数据
	var a=‘hello‘;
	a.spilt(‘e‘);
	a.split(‘e‘,1)  返回一个数据
	

	

布尔值

? var a=true

? var b = false

? ""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

null清空变量

• null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;

undefined

• undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

  ? null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

对象(Object)

万物皆对象 还可以自定义对象

JavaScript 提供多个内建对象，
比如 Number、String、Date、Array 等等，
通过new实例化的对象都是object类型
(var s = new String(‘hello‘)，
var n = new Number(12)等)，
数组不需要new生命，类型就是object类型。

对象只是带有属性和方法的特殊数据类型

数组

var a = [123, "ABC"]; 
console.log(a[1]);  // 输出"ABC"

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素 并 删除
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse() #在原数组上改的	反转
.join(seq)#a1.join(‘+‘)，seq是连接符	将数组元素连接成字符串
.concat(val, ...) #连个数组合并,得到一个新数组，原数组不变	连接数组
.sort()	排序
.forEach() #讲了函数再说	将数组的每个元素传递给回调函数
.splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)	删除元素，并向数组添加新元素。
.map() #讲了函数再说	返回一个数组元素调用函数处理后的值的新数组

排序

排序 自定义 函数

比较函数应该具有两个参数 a 和 b，其返回值如下：

　　　　　　若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
　　　　　　若 a 等于 b，则返回 0。
　　　　　　若 a 大于 b，则返回一个大于 0 的值。

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

对象数组排序：

var arr= [ 
    { ‘sortNo‘: 2},
    { ‘sortNo‘: 1},
    { ‘sortNo‘: 5},
    { ‘sortNo‘: 6},
    { ‘sortNo‘: 7},
    { ‘sortNo‘: 3},
    { ‘sortNo‘: 9},
    { ‘sortNo‘: 4},
    { ‘sortNo‘: 0}
];
arr.sort(function(a, b){
        return a.sortNo - b.sortNo;
});
console.log(arr);
//输出结果
//{ ‘sortNo‘: 0}
//{ ‘sortNo‘: 1}
//{ ‘sortNo‘: 2}
//{ ‘sortNo‘: 3}
//{ ‘sortNo‘: 4}
//{ ‘sortNo‘: 5}
//{ ‘sortNo‘: 6}
//{ ‘sortNo‘: 7}
//{ ‘sortNo‘: 9}

对象数组排序示例

遍历数组中的元素，

可以使用下面的两种方式：

var a = [10, 20, 30, 40];
#方式一
for (var i=0;i<a.length;i++) {
  console.log(a[i]);
}
#方式二
for (var i in a){
  console.log(a[i])
}

内置对象和方法

对象是拥有属性和方法的数据。

JavaScript中的Number对象、String对象、Array对象等。

注意var s1 = "abc"和var s2 = new String("abc")的区别：

typeof s1 --> string

typeof s2 --> Object