0. 对于 HTTP 协议而言,HTML、CSS、JS、JSON 的本质都是什么?
本质是符合各自语法规则的字符串
1. 使用数组拼接出如下字符串 ,其中styles数组里的个数不定
var prod = {
name: '女装',
styles: ['短款', '冬季', '春装']
};
//-------方法一-------
function getTplStr(data){
var newData = '<dl class="product"><dt>' + data.name + '</dt>';
for (var i = 0;data['styles'].length>i;i++)
newData +='<dd>' + data.styles[i] + '</dd>';
newData +='</dl>';
return newData;
};
//-------方法二-------
function getTplStr2(data){
return '<dl class="product"><dt>'+data.name + '</dt><dd>'+ data.styles.join('</dd><dd>') + '</dd></dl>';
}
var result = getTplStr(prod); //result为下面的字符串
var result2= getTplStr2(prod); //result为下面的字符串
console.log(result);
console.log(result2);
<dl class="product"><dt>女装</dt><dd>短款</dd><dd>冬季</dd><dd>春装</dd></dl>
2. 写出两种以上声明多行字符串的方法
例如:
var str = 'abcdeabcdeabcdeancdeabcdeabcdeabcdeancdeabcdeabcdeabcdeancdeabcdeabcdeabcdeancde'
这段字符串很长,如何多行优雅的显示
- 字符串相加
var str =
"abcdeabcdea"+
" bcdeancdeab"+
" cdeabcdea"+
" bcdeancdeabcdeabcd"+
" eabcdeancde"+
"abcdeabcdeabcdeancde";
-
优点:
- 易理解,简单,可靠
- 足够灵活,可以在单个字符串中添加js逻辑
-
缺点 :
- 并不是真正意义上的多行字符串, 如果想要真正的多行,需要自己加
\n
- 大量的
+
号看上去满天星,大量的'
和"
, 丑陋
- 并不是真正意义上的多行字符串, 如果想要真正的多行,需要自己加
反斜线
var str = '\
abcdeabcdea\
bcdeancdeab\
cdeabcdea\
bcdeancdeabcdeabcd\
eabcdeancde\
abcdeabcdeabcdeancde';
-
优点:
- 简单,每一行只需要有多一个
\
- 高效!在大部分的浏览器上,这种方式都是最快的
- 简单,每一行只需要有多一个
-
缺点 :
- 致命缺陷,每一行的
\
必须不可以有空格,否则直接脚本错误 - 并不是真正意义上的多行字符串, 如果想要真正的多行,需要自己加
\n
- 致命缺陷,每一行的
字符串数组join
var str = [
'abcdeabcdea',
' bcdeancdeab',
' cdeabcdea',
' bcdeancdeabcdeabcd',
' eabcdeancde',
'abcdeabcdeabcdeancde',
].join('\n');
-
优点:
- 真正意义上的多行字符串
- 易理解,简单,可靠
- 足够灵活,可以在单个字符串中添加js逻辑
-
缺点 :
- 大量的
,
号和'
、"
, 丑陋
- 大量的
heredoc
function heredoc(fn) {
return fn.toString().split('\n').slice(1,-1).join('\n') + '\n'
}
var str = heredoc(function(){/*
abcdeabcdea
bcdeancdeab
cdeabcdea
bcdeancdeabcdeabcd
eabcdeancde
abcdeabcdeabcdeancde
*/});
- 优点:
- 模板字符串内不必写多余的任何字符,干净,简单
- 真正意义上的多行字符串, 有
\n
- 缺点 :
- 不可以在单个字符串中添加js逻辑
- 备注容易被压缩器压缩掉(不过可以具体设置,不是个大问题)
3. 补全如下代码,让输出结果为字符串: hello\\饥人谷
var str = "hello\\\\饥人谷"//补全代码
console.log(str)
4. 以下代码输出什么?为什么
var str = 'jirengu\nruoyu'
console.log(str.length)
>
13 // 因为 /n 是换行符,视作一个字符
5. 写一个函数,判断一个字符串是回文字符串,如 abcdcba是回文字符串, abcdcbb不是
function isPalindrome(str){
return str.split('').reverse().join('') === str;
}
console.log(isPalindrome('abcba'));
>true
console.log(isPalindrome('abcbb'));
>false
6 .写一个函数,统计字符串里出现出现频率最多的字符
var dic = {};
function calculate(str){
dic = {};
var c =str[0];
for (var i=0;i<str.length;i++){
if (dic[str[i]]) {
if (++dic[str[i]] > dic[c]) c = str[i];
}
else dic[str[i]] = 1;
}
return c
}
var result = calculate('my name is qiuchiyi!');
console.log(result+':'+dic[result]);
>
i : 4
7. 写一个camelize函数,把my-short-string形式的字符串转化成myShortString形式的字符串,如
//--------方法一--------
function camelize(str){
var k = str.indexOf('-');
if (k === -1) return str;
return camelize(str.slice(0,k) + String.fromCharCode(str[k+1].charCodeAt()-32) + str.slice(k+2));
}
//--------方法二--------
function camelize2(str){
var newStr = '';
var f=false;
for (var i=0;i<str.length;i++){
if (str[i] !== '-' ) {
if (f) {
newStr += str[i].toUpperCase();
f = false;
} else {
newStr += str[i]
}
} else{
f = true;
}
}
return newStr;
}
console.log(camelize("background-color"));
console.log(camelize("list-style-image"));
console.log(camelize2("background-color"));
console.log(camelize2("list-style-image"));
8. 写一个 ucFirst函数,返回第一个字母为大写的字符
//--------方法一--------
function upFirst(str){
if (str[0]>='a' && str[0]<='z')
return String.fromCharCode(str[0].charCodeAt()-32) + str.slice(1);
return str;
}
//--------方法二--------
function upFirst2(str){
if (str[0]>='a' && str[0]<='z')
return str[0].toUpperCase() + str.slice(1);
return str;
}
var s = 'quincy';
console.log(upFirst(s));
console.log(upFirst2(s));
9. 写一个函数truncate(str, maxlength), 如果str的长度大于maxlength,会把str截断到maxlength长,并加上...,如
function truncate(str,maxlength){
if (str.length <= maxlength){
return str;
} else {
return str.slice(0,maxlength)+'...';
}
}
console.log(truncate("hello, this is hunger valley,", 10));
console.log(truncate("hello world", 20));
>
hello, thi...
hello world
10. 什么是 JSON格式数据?JSON格式数据如何表示对象?window.JSON 是什么?
什么是 JSON格式数据?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。-
JSON格式数据如何表示对象?
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。
`
var json = {"name": "Quincy", "sex": "male","age":24}
- window.JSON 是什么?
window.json是浏览器内置对象,可用于判断浏览器是否兼容JSON的用法。
11. 如何把JSON 格式的字符串转换为 JS 对象?如何把 JS对象转换为 JSON 格式的字符串?
把JSON 格式的字符串转换为 JS 对象:JSON.stringify()
JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify("foo"); // '"foo"'
JSON.stringify([1, "false", false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'
把 JS对象转换为 JSON 格式的字符串:JSON.parse()
JSON.parse('{}'); // {}
JSON.parse('true'); // true
JSON.parse('"foo"'); // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null'); // null