JavaScrpit入门笔记

JavaSript入门笔记

变量

1. Var: 全局作用域，大多数时候不要用
2. let： 可以重新赋值
3. const： 不可以重新赋值并且要初始化

大多数时候只用const，除非确定要重新赋值（增加鲁棒性）。

运算

逻辑运算

1. 与 $\&\&$
2. 或 $||$

==和===的区别

在Javascript中提供了两种判断相等的符号

1. == 等于，不必考虑类型
2. === 绝对等于
   举例

const x='10'
const y=10
//==
x==10// is true
y==10// is true
//===
x===10//is false
x===10//is true

数据类型

1. string
2. number
3. boolean
4. null
5. undefined

const name='john';//Strings
const age=30;//number
const rating=4.5;
const isCool=true;//Boolean
const x=null;//null(Object)
const y=undefined;//undefined
let z;//undefined

js中不是必须要些;
js中不区分浮点数，只是Numbers类型

字符串

拼接

1. Concatenation : +

console.log('i'+'am');

2. Template String

const hellow='i am ${name}';

${}中的是另一个字符串变量名

字符串的属性和方法

const s='hello';

console.log(s.length)//字符串长度

console.log(s.toUpperCase());//字符串全部转为大写
console.log(s.substring(0,5));//截取字串：
console.log(s.split(','));//字符串分割，返回一个字符串数组

属性没有括号，方法才有括号

js方法支持链接调用：

console.log(s.substring(0,5).toUpperCase());

截取字串的规则： 从0开始。截取第一个参数到第二个参数前一位的字串。

数组：保存多个值的变量

const numbers=new Array(1,2,3,4,5);//结构体方式创建数字数组
const fruit=['apple','orange'];//纯字符串数组
const mixe=['apple','orange',10,true]//混合数组

new 后面写构造函数
js的数组可以包括不同的类型，相当灵活

js数组从0开始计数并且可以使用[]进行下标访问：

fruits[0]//返回'apple'

const数组可以添加或删去值，唯一不能做的就是置为空，

fruits[2]='banana';//在数组末尾添加了一个值，但不是醉倒的方式（有时候不知道确切值）

/*好的方式*/
fruits.push('grape');//在末尾添加
fruits.unshift('strawberries');//从开头添加
fruits.pop();//从末尾删除

fruits.indexOf('banana');//返回 值对应的下标

fruits.isArray();//判断fruits是否为数组
fruits.isArray('hello');//判断某个值是否为数组

对象：键值对

创建对象

const person={
    firstName: 'John',
    lastName: 'Doe',
    age:30,
    hobbies: ['a','b'],
    address: {
        City: 'Boston',
        state: 'MA'
    }
}

Javascript中对象可以作为数组的值，数组也可以作为对象的值

avaScript中的任何数据类型都可以当作值(value)，甚至包括数组和对象。

访问对象: .

console.log(person.firstName);//'Jhon'
console.log(person.hobbies[0]);//'a'
console.log(person.address.City);//'Boston'

解构对象：获取与对象中的键同名的实际变量(ES6的新特性)

const {firstName , lastName} = person //firstName等于'John',lastName等于'Doe'

获取对象值中的对象的键的同名变量

解构对象：获取与对象中的键同名的实际变量

const {firstName , lastName，address:{City}} = person 

添加属性（添加键值对）

person.email='123@gmail.com';

对象数组

const todos = [
    {
        id: 1,
        text:'take out trash',
        isCompleted: true
    },
    {
        id: 2,
        text:'meeting with boss',
        isCompleted: true
    },
    {
        id: 3,
        text:'Dnetist appt',
        isCompleted: false
    }
]

JSON

JSON格式和上面的对象数组很类似，区别在于键值都加上了双引号
讲对象数组转化为JSON

const todoJSON=JSON.stringify(todos)；

循环

JavaScript中的基本循环(for,while)的句法和c++很相似,但是提供了一些独特的循环方式(for…of,for…each.map,filter)

For

for(let i=0;i <= 10; i++>)
{
    console.log(i);
}

While

let i = 0;
while(i < 10 )
{
    console.log(i);
    i++;
}

For… Of

和for循环很相似但是更具可读性

for(let todo of todos)
{
    console.log(todo.text);
}

*其中todo可以理解为循环变量，在第1次循环中，todo就是todos[0],在第2次循环中，todo就是todos[1];

迭代数组的方法:forEach map filter

forEach

todos.forEach(function(todo){   //todo是循环变量
    console.log(todo.text);
})

map

map: 从数组中创建数组

const todoText=todos.map(function(todo){
    return todo.text;
})

todoText中保存了一个有todos的每一个元素的text对应的值组成的数组

filter

filter: 根据条件创建新数组，在酒店数组中根据条件筛选出，满足条件的项

const todoCompleted = todos.map(function(todo){
    return todo.isCompleted === true;//筛选条件
})

剔除掉原数组里不满足条件的项，将满足条件的项组织成新的数组并返回

条件

Javascript的条件语句和c++的很类似，具体区别会说明

if

x=10
if(x === 10){
    console.log('x is 10')
}
else if (x > 10)
{
    console.log('x > 10');
}
else
{
    console.log('x > 10');
}

? :

const x=11;
const color= x>10 ? 'red' : 'blue';

三个参数第一个是条件，若条件满足则返回第二个参数，若不满足则返回第三个参数

switch

switch(color)
{
    case 'red':
        console.log('color is red');
        break;
    case 'blue':
        console.log('color is blue');
        break;
    default:
        console.log('color is not red or blue');
        break;
}

和c++的区别：JavaScript的switch语句当中传递的判断变量不一定要是整数。

函数

普通函数

示例: 函数声明+实现+调用

function addNums(num1=1,num2=2)
{
    console.log(num1+num2);
    return num1+num2;
}
addNume(5,5);

函数说明

1. 声明的括号中为形式参数
2. 可以添加默认参数，在无参数传入时就视为传入默认值
3. 如果函数没有默认值，且参数列表出错，那么函数会返回NaN(意为：not a number)，不会中断代码执行

箭头函数（ES6)

//无返回值
const addNums={num1=1,num2=1} => console.log(num1+num2);
//有返回值 写法一
const addNums={num1=1,num2=1} => num1+num2;//箭头后面的就是返回值
//有返回值 写法二
const addNums={num1=1,num2=1} => {
    return num1+num2;
    }

可以理解为箭头前面为参数列表，后面为提供了一些简化操作函数体

箭头函数的最简化形式：一个参数一句函数:

const addNums = num1 => num1+5;

面向对象编程

联系前面讲过的: 对象

用函数原型实现构造函数

实现构造函数和是实现普通函数的区别

1. 原型的首字母要到大写
2. 参数传入需要设置的属性
3. 将函数者只为对象的属性，使用this

示例: 构造+实例化:

//构造函数
function Person(firstName,lastName,dob)
{
    this.firstname = firstName;
    this.lastName = lastName;
    this.dob = dob;
}

//实例化
const person1=new Person('John','edo','4-3-1980');

延展示例: 对象包含对象&&对象包含函数:

function Person(firstName,lastName,dob)
{
    this.firstname = firstName;
    this.lastName = lastName;
    this.dob = Date(dob);//Data()为自定义构造函数，此时dob也是一个对象
    this.getBirthYear = function(){
        return this.dob.getFullYear();
    }
}
//实例化及函数调用
const person1=new Person('John','edo','4-3-1980');
console.log(person1.getBirthYear());

延展示例: 构造函数外实现对象中的函数

function Person(firstName,lastName,dob)
{
    this.firstname = firstName;
    this.lastName = lastName;
    this.dob = Date(dob);//Data()为自定义构造函数，此时dob也是一个对象
}

Person.prototype.getBirthYear=function(){
    return this.dob.getFullYear();
}//在构造函数中甚至连声明也不要写

类(ES6)

和其他编程语言的类很像，更好上手、漂亮、易读。

//class
class Person{
    constructor(firstName,lastName,dob)
    {
        this.firstname = firstName;
        this.lastName = lastName;
        this.dob = Date(dob);//Data()为自定义构造函数，此时dob也是一个对象
    }
    getBirthYear=function()
    {
        return this.dob.getFullYear();
    }   
}