您的当前位置:首页JavaScript笔记1

JavaScript笔记1

2024-12-14 来源:哗拓教育

主要记录:数值型、字符串、布尔值、null和undefined、数组、对象、变量、strict模式、iterable类型、简单函数、for in、for of、forEach、全局作用域、名字空间、let 、 const、this、apply、call

1. 数值型

JavaScript不区分整数和浮点数,统一用Number表示

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000,等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number,当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity

2. 字符串

字符串是以单引号'或双引号"括起来的任意文本。多行使用`来表示。

var string = ` aaa 

ccc

bbb`

console.log(string);

拼接字符串可以使用+来连接,也可以使用多行显示来表示。

var name = 'wangdaji';
var age = 26;

var string1 = 'hi! ' + name + ',' + '生日快乐! ' + '你已经' + age + '岁了!'; 

var string2 = `hi! ${name},生日快乐! 你已经${age}岁了!`;

console.log(string1);
console.log(string2);

操作字符串,可以根据索引来访问字符串的某一字符,修改成大小写、某一字符串出现的位置、根据index或者range获取截取字符串,但是不能修改原字符串的值。

var name = 'wangDaJi';
var j = name[6]; // 根据索引来访问
var nameLen = name.length;// 获取字符串的长度
var nameLen = name.length;// 获取字符串的长度
var nameLowerCase = name.toLowerCase();// 字符串变成小写
var nameUpperCase = name.toUpperCase();// 字符串变成大写
var daIndex = name.indexOf('Da');// da出现的位置
var nametemp = name.substring(4);// 获取名

name[0] = 'i';// 这不会改变原字符串的值


console.log(`我的名字:${name},我的小名的index:${nametemp},我的字符串长度:${nameLen},我的第六个字符:${j},名字小写:${nameLowerCase},名字大写:${nameUpperCase},da出现的index:${daIndex}`);

3. 布尔值

一个布尔值只有true、false两种值,要么是true,要么是false。在条件判断中,把null、undefined、0、NaN和空字符串''视为false,其他值一概视为true。

4.null和undefined

null表示一个空的值,而undefined表示值未定义。undefined仅仅在判断函数参数是否传递的情况下有用。

5. 数组

JavaScript的数组可以包括任意数据类型。

[1, 2, 3.14, 'Hello', null, true];
new Array(1, 2, 3); // 创建了数组[1, 2, 3]

这些操作会修改数组

通过sortreverse来排序和反转原数组。
splice从指定的索引开始删除若干元素,然后再从该位置添加若干元素。

通过修改数组的长度length、根据索引对应的元素来修改原数组。

这些操作会返回一个新的数组

通过slice来截取数组,从第几个元素开始的几个元素。

通过push在尾部添加若干元素和pop去除最后一个元素。

通过unshift往头部添加若干元素和shift去除头部的第一个元素。

concat拼接两个数组,并返回一个新的数组。

join会将数组使用指定的字符串连接起来,并返回一个字符串。

通过indexOf搜索元素值来返回元素对应的index。

多维数组:顺序的索引进行读写元素。

6. 对象

JavaScript的对象是一组由键-值组成的无序集合,键又称为对象的属性。对象的所有属性都是字符串,属性对应的值可以是任意数据类型。

var person = {
    name: 'wangwei',
    age: 26,
    tags: ['objective-c', 'swift', 'java', 'c', 'python', 'go'],
    city: 'shanghai'
};

// 获取属性
person.name;
person.tags;

通过点语法读写属性的值,访问一个没有定义的属性并赋值,会动态的添加这个属性。当然,也就可以使用delete删除一个属性,检查对象包含某一属性。

var person = {
    name: 'wangwei',
    age: 26,
    tags: ['objective-c', 'swift', 'java', 'c', 'python', 'go'],
    city: 'shanghai'
};

person.age = 27;
person.school = '家里登大学';

// 获取属性
console.log(person.name);
console.log(person.age); 
console.log(person.school); 

// delete school property
delete person.school;

// in判断一个属性存在,或是对象继承得到的属性:
if ('school' in person) {
   console.log('person.school存在哦'); 
} else {
   console.log('person.school不存在'); 
}

// hasOwnProperty判断当前对象是否包含这个属性
if (person.hasOwnProperty('school')) {
   console.log('person.school存在哦'); 
} else {
   console.log('person.school不存在'); 
}

7. 变量

JavaScript定义一个变量的方式:类型+变量名 = ...。
由于JavaScript是动态语言,变量可以被反复赋值,赋值的时候不会检查类型。

var x = 100;

var person = {
    name: 'wangwei',
    age: 26,
    tags: ['objective-c', 'swift', 'java', 'c', 'python', 'go'],
    city: 'shanghai'
};

x = person;

console.log(x);

8. strict模式

strict模式是弥补JavaScript在设计初期对于全局变量的一种声明方式,因为会导致具有相同变量名的两个变量使用时候发生错乱。开启strict模式可以强制定义变量时候添加‘var’字段。

9. for in

for in:遍历数组返回索引,遍历对象属性索引key值

// 数组的for in 
arr = ['aaa', 'bbb', 'ccc'];
for (var i in arr) {
    console.log(arr[i]);
}

console.log("");

// 对象的for in
var person = new {
    name: 'wangwei',
    age: 26,
    tags: ['objective-c', 'swift', 'java', 'c', 'python', 'go'],
    city: 'shanghai'
};
for (var key in person) {
    console.log(person[key]);
}

10. iterable

iterable类型(ES6引入)包括Array、Map、 Set。
,其key可以为任何对象。Map存储的是键值对,Set只存储的是key,两者的值都保持唯一性,重复值会被自动过滤。

11. for of

for of:遍历数组、Map、Set返回元素,遍历对象返回对象的值

// 数组的for in 
arr = ['aaa', 'bbb', 'ccc'];
for (var u of arr) {
    console.log(u);
}

console.log("");

// 对象的for of
var person = new Map();
person.set('name', 'wangwei');
person.set(12, 26);
person.set('tags', ['objective-c', 'swift', 'java', 'c', 'python', 'go']);
person.set('city', 'shanghai');

for (var u of person) {
    console.log(u);
}

console.log("");

// 对象的for of
var person1 = new Set();
person1.add('小名');
person1.add('王大吉');
person1.add('小名');
person1.add('小闯');

for (var u1 of person1) {
    console.log(u1);
}

12. forEach

// 数组的遍历
var myarr = ['A', 'B', 'C'];
myarr.forEach(function (e, i, a) {
    console.log(`arr的第${i}是${e}`);
});

// Set的遍历
var myset = new Set(['a', 'b', 'c']);
myset.forEach(function(value, same, set) {
   console.log(`set的是${value}`);
});

// map的遍历
var mymap = new Map([[name, 'wandaji'], ['score', 100], [10086, '移动号码']]);
mymap.forEach(function(value, key, map) {
   console.log(value);
});

13. 简单函数

函数在js中是一等公民。函数的定义方式:

// 函数定义的第一种方式
function abs(x, y, z) {
    if ((typeof x!= 'number') && (typeof y!= 'number') && (typeof z!= 'number')) {
       throw 'Not a number'
    } else {
      return x + y + z;
    }
}
console.log(abs(1, 2, 3));

// 函数定义的第二种方式,变量指向一个匿名函数
var abs1 = function (a, b, c) {
    if (typeof a!= 'number' && typeof b!= 'number' && typeof c!= 'number') {
       throw 'Not a number'
    } else {
        return a - b - c;
    }
};

console.log(abs1(1, 2, 3));

js函数的参数是可以接受任意多个的,arguments参数,来记录参数的所有数值,其类似一个数组。

// 函数定义的第二种方式
var abs1 = function (a, b, c) {
    
    if (arguments.length < 3) {
       throw 'arguments error'
    }
    
    console.log("arguments length:" + arguments.length);

    if (typeof a!= 'number' && typeof b!= 'number' && typeof c!= 'number') {
       throw 'Not a number'
    } else {
        return a - b - c;
    }
};

console.log(abs1(1, 2, 3, 4));

rest参数,可以用来装多参数的情况,或者装载多余的参数,rest是一个数组。

// 求一串数字的和
var sum = function (...rest) {
    var sum = 0;
    rest.forEach(function (e, i, rest) {
         sum = sum + e;
    });
    return sum;
};

console.log(sum(10, 11, 12, 13, 15));

14. 全局作用域、名字空间

全局作用域:不在任何函数内定义的变量就具有全局作用域。JavaScript默认有一个全局对象window,全局作用域的变量实际上被绑定到window的一个属性。

名字空间: 多个js文件中如果出现多个相同变量,会造成命名的冲突,有一个解决方法:就是值定义一个全局变量,将所有的变量放到这个全局变量中,可以减少全局变量的冲突的可能。

// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};

14. let 和 const

let: 块级作用域中使用

const:常量:

const const11 = 11;
const11 = 12;// 可能会报错
console.log(const11);

15. 解构赋值

ES6中,解构赋值可以大大简化代码量:
基本的理解:

// 数组解析赋值
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];

// 对象解析赋值
var p = {
name: 'wangdaji',
age: 16,
address: {
   city: 'shanghai'
}
}

var {name, age, address:{city}} = p;
console.log('name = ' + name + ', age = ' + age + ', city = ' + city);

使用场景:(1)交换两个变量的值(2)将一个对象传入函数参数(3)快速获取当前页面的域名和路径。

// 快速交换两个值
var x = 10;
var y = 20;
[x, y] = [y, x];
console.log('x:' + x);
console.log('y:' + y);


// 将一个对象传入函数参数
var p = {
name: 'wangdaji',
age: 16,
address: {
   city: 'shanghai'
}
}

function logpersion({name, age, address:{city}}) {
   console.log('name:' + name + ', age:' + age + ', city:' + city);
}
logpersion(p);

16. this、apply、call

this变量:this是一个特殊变量,它始终指向当前对象。this和它声明环境无关,而完全取决于他的运行时环境。

可以通过apply来指定需要绑定的this变量。

// this的使用1
var wangdaji = {
name: '王大吉',
address: {
   city: 'shanghai'
},
brith: 1993,
age: function() {
    let y = new Date().getFullYear();
    return y - this.brith;
}
}
console.log(wangdaji.age());

// this的使用2
function getAge() {
    let y = new Date().getFullYear();
    return y - this.brith;
}

var wangdaji1 = {
name: '王大吉',
address: {
   city: 'shanghai'
},
brith: 1994,
age: getAge
}
console.log(wangdaji1.age());

// 函数的apple方法,来指定this,第二个参数表示的是一个数组。
var wangdaji1Age = getAge.apply(wangdaji1, null);
console.log(wangdaji1Age);

apply()call()相比,call()的参数是一排顺序的参数,apply()则是一个参数数组。

装饰器:利用apply(),我们还可以动态改变函数的行为。

显示全文