javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍

简介: javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍


indexOf

indexOf()会搜索指定字符串出现的位置:

var s = ‘hello, world’;

s.indexOf(‘world’); // 返回7

s.indexOf(‘World’); // 没有找到指定的子串,返回-1

substring

substring()返回指定索引区间的子串:

var s = ‘hello, world’

s.substring(0, 5); // 从索引0开始到5(不包括5),返回’hello’

s.substring(7); // 从索引7开始到结束,返回’world’

数组

数组

JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素。

要取得Array的长度,直接访问length属性:

Array可以通过索引把对应的元素修改为新的值,因此,对Array的索引进行赋值会直接修改这个Array:

indexOf

与String类似,Array也可以通过indexOf()来搜索一个指定的元素的位置:

var arr = [10, 20, ‘30’, ‘xyz’];

arr.indexOf(10); // 元素10的索引为0

arr.indexOf(20); // 元素20的索引为1

arr.indexOf(30); // 元素30没有找到,返回-1

arr.indexOf(‘30’); // 元素’30’的索引为2

注意了,数字30和字符串’30’是不同的元素。

slice

slice()就是对应String的substring()版本,它截取Array的部分元素,然后返回一个新的Array:

var arr = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’];

arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: [‘A’, ‘B’, ‘C’]

arr.slice(3); // 从索引3开始到结束: [‘D’, ‘E’, ‘F’, ‘G’]

注意到slice()的起止参数包括开始索引,不包括结束索引

push和pop

push()向Array的末尾添加若干元素,pop()则把Array的最后一个元素删除掉:

var arr = [1, 2];

arr.push(‘A’, ‘B’); // 返回Array新的长度: 4

arr; // [1, 2, ‘A’, ‘B’]

arr.pop(); // pop()返回’B’

arr; // [1, 2, ‘A’]

arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次

arr; // []

arr.pop(); // 空数组继续pop不会报错,而是返回undefined

arr; // []

unshift和shift

如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉:

var arr = [1, 2];

arr.unshift(‘A’, ‘B’); // 返回Array新的长度: 4

arr; // [‘A’, ‘B’, 1, 2]

arr.shift(); // ‘A’

arr; // [‘B’, 1, 2]

arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次

arr; // []

arr.shift(); // 空数组继续shift不会报错,而是返回undefined

arr; // []

sort

sort()可以对当前Array进行排序,它会直接修改当前Array的元素位置,直接调用时,按照默认顺序排序:

var arr = [‘B’, ‘C’, ‘A’];

arr.sort();

arr; // [‘A’, ‘B’, ‘C’]

能否按照我们自己指定的顺序排序呢?完全可以,我们将在后面的函数中讲到。

reverse

reverse()把整个Array的元素给掉个个,也就是反转:

var arr = [‘one’, ‘two’, ‘three’];

arr.reverse();

arr; // [‘three’, ‘two’, ‘one’]

splice

splice()方法是修改Array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素:

var arr = [‘Microsoft’, ‘Apple’, ‘Yahoo’, ‘AOL’, ‘Excite’, ‘Oracle’];

// 从索引2开始删除3个元素,然后再添加两个元素:

arr.splice(2, 3, ‘Google’, ‘Facebook’); // 返回删除的元素 [‘Yahoo’, ‘AOL’, ‘Excite’]

arr; // [‘Microsoft’, ‘Apple’, ‘Google’, ‘Facebook’, ‘Oracle’]

// 只删除,不添加:

arr.splice(2, 2); // [‘Google’, ‘Facebook’]

arr; // [‘Microsoft’, ‘Apple’, ‘Oracle’]

// 只添加,不删除:

arr.splice(2, 0, ‘Google’, ‘Facebook’); // 返回[],因为没有删除任何元素

arr; // [‘Microsoft’, ‘Apple’, ‘Google’, ‘Facebook’, ‘Oracle’]

concat

concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array:

var arr = [‘A’, ‘B’, ‘C’];

var added = arr.concat([1, 2, 3]);

added; // [‘A’, ‘B’, ‘C’, 1, 2, 3]

arr; // [‘A’, ‘B’, ‘C’]

请注意,concat()方法并没有修改当前Array,而是返回了一个新的Array。

实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里:

var arr = [‘A’, ‘B’, ‘C’];

arr.concat(1, 2, [3, 4]); // [‘A’, ‘B’, ‘C’, 1, 2, 3, 4]

join

join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串:

var arr = [‘A’, ‘B’, ‘C’, 1, 2, 3];

arr.join(’-’); // ‘A-B-C-1-2-3’

如果Array的元素不是字符串,将自动转换为字符串后再连接。

对象

JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。

var xiaoming = {

name: ‘小明’,

birth: 1990,

school: ‘No.1 Middle School’,

height: 1.70,

weight: 65,

score: null

};

JavaScript用一个{…}表示一个对象,键值对以xxx: xxx形式申明,用,隔开。注意,最后一个键值对不需要在末尾加,,如果加了,有的浏览器(如低版本的IE)将报错。

访问属性是通过.操作符完成的,但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符,就必须用’'括起来

也可以用xiaohong[‘name’]来访问xiaohong的name属性,不过xiaohong.name的写法更简洁

JavaScript规定,访问不存在的属性不报错,而是返回undefined:

由于JavaScript的对象是动态类型,你可以自由地给一个对象添加或删除属性:

var xiaoming = {

name: ‘小明’

};

xiaoming.age; // undefined

xiaoming.age = 18; // 新增一个age属性

xiaoming.age; // 18

delete xiaoming.age; // 删除age属性

xiaoming.age; // undefined

delete xiaoming[‘name’]; // 删除name属性

xiaoming.name; // undefined

delete xiaoming.school; // 删除一个不存在的school属性也不会报错

如果我们要检测xiaoming是否拥有某一属性,可以用in操作符:

‘name’ in xiaoming; // true

‘grade’ in xiaoming; // false

不过要小心,如果in判断一个属性存在,这个属性不一定是xiaoming的,它可能是xiaoming继承得到的:

‘toString’ in xiaoming; // true

因为toString定义在object对象中,而所有对象最终都会在原型链上指向object,所以xiaoming也拥有toString属性。

要判断一个属性是否是xiaoming自身拥有的,而不是继承得到的,可以用hasOwnProperty()方法:

var xiaoming = {

name: ‘小明’

};

xiaoming.hasOwnProperty(‘name’); // true

xiaoming.hasOwnProperty(‘toString’); // false

条件判断

JavaScript使用if () { … } else { … }来进行条件判断

如果语句块只包含一条语句,那么可以省略{}

JavaScript把null、undefined、0、NaN和空字符串’'视为false,其他值一概视为true,因此上述代码条件判断的结果是true。

循环

JavaScript的循环有两种,一种是for循环,通过初始条件、结束条件和递增条件来循环执行语句块:

for … in

for循环的一个变体是for … in循环,它可以把一个对象的所有属性依次循环出来:

var o = {

name: ‘Jack’,

age: 20,

city: ‘Beijing’

};

for (var key in o) {

console.log(key); // ‘name’, ‘age’, ‘city’

}

要过滤掉对象继承的属性,用hasOwnProperty()来实现:

var o = {

name: ‘Jack’,

age: 20,

city: ‘Beijing’

};

for (var key in o) {

if (o.hasOwnProperty(key)) {

console.log(key); // ‘name’, ‘age’, ‘city’

}

}

由于Array也是对象,而它的每个元素的索引被视为对象的属性,因此,for … in循环可以直接循环出Array的索引:

var a = [‘A’, ‘B’, ‘C’];

for (var i in a) {

console.log(i); // ‘0’, ‘1’, ‘2’

console.log(a[i]); // ‘A’, ‘B’, ‘C’

}

请注意,for … in对Array的循环得到的是String而不是Number。

while

for循环在已知循环的初始和结束条件时非常有用。而上述忽略了条件的for循环容易让人看不清循环的逻辑,此时用while循环更佳。

while循环只有一个判断条件,条件满足,就不断循环,条件不满足时则退出循环。比如我们要计算100以内所有奇数之和,可以用while循环实现:

var x = 0;

var n = 99;

while (n > 0) {

x = x + n;

n = n - 2;

}

x; // 2500

在循环内部变量n不断自减,直到变为-1时,不再满足while条件,循环退出。

do … while

最后一种循环是do { … } while()循环,它和while循环的唯一区别在于,不是在每次循环开始的时候判断条件,而是在每次循环完成的时候判断条件

var n = 0;

do {

n = n + 1;

} while (n < 100);

n; // 100

用do { … } while()循环要小心,循环体会至少执行1次,而for和while循环则可能一次都不执行。

函数定义和调用

请注意,函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回。因此,函数内部通过条件判断和循环可以实现非常复杂的逻辑。

如果没有return语句,函数执行完毕后也会返回结果,只是结果为undefined。

arguments

JavaScript还有一个免费赠送的关键字arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数

实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法:

// foo(a[, b], c)

// 接收2~3个参数,b是可选参数,如果只传2个参数,b默认为null:

function foo(a, b, c) {

if (arguments.length === 2) {

// 实际拿到的参数是a和b,c为undefined

c = b; // 把b赋给c

b = null; // b变为默认值

}

// …

}

要把中间的参数b变为“可选”参数,就只能通过arguments判断,然后重新调整参数并赋值。

rest参数

由于JavaScript函数允许接收任意个参数,于是我们就不得不用arguments来获取所有参数:

function foo(a, b) {

var i, rest = [];

if (arguments.length > 2) {

for (i = 2; i<arguments.length; i++) {

rest.push(arguments[i]);

}

}

console.log('a = ’ + a);

console.log('b = ’ + b);

console.log(rest);

}

为了获取除了已定义参数a、b之外的参数,我们不得不用arguments,并且循环要从索引2开始以便排除前两个参数,这种写法很别扭,只是为了获得额外的rest参数,有没有更好的方法?

ES6标准引入了rest参数,上面的函数可以改写为:

function foo(a, b, …rest) {

console.log('a = ’ + a);

console.log('b = ’ + b);

console.log(rest);

}

foo(1, 2, 3, 4, 5);

// 结果:

// a = 1

// b = 2

// Array [ 3, 4, 5 ]

foo(1);

// 结果:

// a = 1

// b = undefined

// Array []

rest参数只能写在最后,前面用…标识,从运行结果可知,传入的参数先绑定a、b,多余的参数以数组形式交给变量rest,所以,不再需要arguments我们就获取了全部参数。

如果传入的参数连正常定义的参数都没填满,也不要紧,rest参数会接收一个空数组(注意不是undefined)。

浏览器对象

window

window对象不但充当全局作用域,而且表示浏览器窗口。

innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度。

内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高

outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高。

navigator

navigator对象表示浏览器的信息,最常用的属性包括:

navigator.appName:浏览器名称;

navigator.appVersion:浏览器版本;

navigator.language:浏览器设置的语言;

navigator.platform:操作系统类型;

navigator.userAgent:浏览器设定的User-Agent字符串。

请注意,navigator的信息可以很容易地被用户修改

screen

screen对象表示屏幕的信息,常用的属性有:

screen.width:屏幕宽度,以像素为单位;

screen.height:屏幕高度,以像素为单位;

screen.colorDepth:返回颜色位数,如8、16、24。

location

location对象表示当前页面的URL信息。

例如,一个完整的URL:

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用location.href获取。要获得URL各个部分的值,可以这么写:

location.protocol; // ‘http’

location.host; // ‘www.example.com

location.port; // ‘8080’

location.pathname; // ‘/path/index.html’

location.search; // ‘?a=1&b=2’

location.hash; // ‘TOP’

要加载一个新页面,可以调用location.assign()。如果要重新加载当前页面,调用location.reload()方法非常方便。

history

history对象保存了浏览器的历史记录,JavaScript可以调用history对象的back()或forward (),相当于用户点击了浏览器的“后退”或“前进”按钮。

document

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节点。

document的title属性是从HTML文档中的xxx读取的,但是可以动态改变:

document.title = ‘努力学习JavaScript!’;

请观察浏览器窗口标题的变化。

要查找DOM树的某个节点,需要从document对象开始查找。最常用的查找是根据ID和Tag Name

我们先准备HTML数据:

摩卡热摩卡咖啡酸奶北京老酸奶果汁鲜榨苹果汁

用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点:

var menu = document.getElementById(‘drink-menu’);
var drinks = document.getElementsByTagName(‘dt’);
var i, s, menu, drinks;
menu = document.getElementById(‘drink-menu’);
menu.tagName; // ‘DL’
drinks = document.getElementsByTagName(‘dt’);
s = ‘提供的饮料有:’;
for (i=0; i<drinks.length; i++) {
s = s + drinks[i].innerHTML + ‘,’;
}
console.log(s);

摩卡

热摩卡咖啡

酸奶

北京老酸奶

果汁

鲜榨苹果汁

document对象还有一个cookie属性,可以获取当前页面的Cookie。

Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的,但是服务器要区分到底是哪个用户发过来的请求,就可以用Cookie来区分。当一个用户成功登录后,服务器发送一个Cookie给浏览器,例如user=ABC123XYZ(加密的字符串)…,此后,浏览器访问该网站时,会在请求头附上这个Cookie,服务器根据Cookie即可区分出用户。

Cookie还可以存储网站的一些设置,例如,页面显示的语言等等。

JavaScript可以通过document.cookie读取到当前页面的Cookie:

document.cookie; // ‘v=123; remember=true; prefer=zh’

由于JavaScript能读取到页面的Cookie,而用户的登录信息通常也存在Cookie中,这就造成了巨大的安全隐患,这是因为在HTML页面中引入第三方的JavaScript代码是允许的:

如果引入的第三方的JavaScript中存在恶意代码,则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。

为了解决这个问题,服务器在设置Cookie时可以使用httpOnly,设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现,主流浏览器均支持httpOnly选项,IE从IE6 SP1开始支持。

为了确保安全,服务器端在设置Cookie时,应该始终坚持使用httpOnly。


DOM操作
  1. 更新DOM

拿到一个DOM节点后,我们可以对它进行更新。可以直接修改节点的文本,方法有两种:

  • 一种是修改innerHTML属性

这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树:

// 获取
var p = document.getElementById(‘p-id’);
// 设置文本为abc:
p.innerHTML = ‘ABC’; //
ABC
// 设置HTML:
p.innerHTML = ‘ABC RED XYZ’;
//

的内部结构已修改

用innerHTML时要注意,是否需要写入HTML。如果写入的字符串是通过网络拿到了,要注意对字符编码来避免XSS攻击。

  • 第二种是修改innerText或textContent属性

这样可以自动对字符串进行HTML编码,保证无法设置任何HTML标签:


相关文章
|
1天前
|
SQL JavaScript Java
java程序员面试题大全含答案(2018--2019)
java程序员面试题大全含答案(2018--2019)
|
1月前
|
前端开发 JavaScript 程序员
2024年最新65% 的程序员竟都是自学成才?_为啥学技术都自学,2024年最新42岁程序员面试
2024年最新65% 的程序员竟都是自学成才?_为啥学技术都自学,2024年最新42岁程序员面试
2024年最新65% 的程序员竟都是自学成才?_为啥学技术都自学,2024年最新42岁程序员面试
|
19天前
|
前端开发 程序员 JavaScript
9年程序员总结个人的面试技巧
9年程序员总结个人的面试技巧
21 2
|
1天前
|
JavaScript
three.js入门第一个案例
three.js入门第一个案例
|
23天前
|
JavaScript
分享经典面试题:JS数组去重的多种方法
分享经典面试题:JS数组去重的多种方法
|
28天前
|
移动开发 缓存 JavaScript
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
24 6
|
4天前
|
缓存 前端开发 JavaScript
【JavaScript】JavaScript 中的闭包:从入门到精通
【JavaScript】JavaScript 中的闭包:从入门到精通
11 0
|
5天前
|
JavaScript 安全 前端开发
【Node.js】从入门到精通(一)—— fs 模块全解析
【Node.js】从入门到精通(一)—— fs 模块全解析
10 0
|
5天前
|
JavaScript 前端开发 物联网
【Nodejs】从入门到精通 —— Node.js 基础知识与常用命令
【Nodejs】从入门到精通 —— Node.js 基础知识与常用命令
28 0
|
30天前
|
JavaScript
学习Node.js入门范例
然后,cmd中运行命令node E:/Test/server.js
20 2