Javascript 教程 在线

2514搜索数组中的元素 返回它最后出现的位置 map()

接口数据映射

从接口得到数据 res:

let r = res.map(item => {
    return {
        title: item.name,
        sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
        age: item.age,
        avatar: item.img
    }
})

也可以省略 return:

const users=res.items.map(item => ({
    url: item.html_url,      
    img: item.avatar_url,      
    name: item.login,
    })
);

2513允许你向数组对象添加属性或方法 Array 对象方法 方法 描述 concat()

一道面试题:传递两个参数m,n,返回长度为m,所有元素都为n的数组,要求不能用循环。

利用函数的递归和 concat() 方法可以实现,代码如下:

function fn(m, n) {
  return m ? fn(m - 1, n).concat(n) : [];
}

2512textarea

1、给 input 文本框和 textarea 多行文本框添加发光焦点响应特效

input[type=text], textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #ddd;
}
  
input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(81, 203, 238, 1);
}

尝试一下 »

2、可以使用 resize: none; 来禁用 textarea 右下角的拖动图标。

textarea {
    resize: none;
}

3、只是固定大小,右下角的拖动图标仍在:

textarea {
    width: 200px;
    height: 100px;
    max-width: 200px;
    max-height: 100px;
}

2511Location 对象

window.location.assign(url) : 加载 URL 指定的新的 HTML 文档。就相当于一个链接,跳转到指定的url,当前页面会转为新页面内容,可以点击后退返回上一个页面。

window.location.replace(url) : 通过加载 URL 指定的文档来替换当前文档,这个方法是替换当前窗口页面,前后两个页面共用一个窗口,所以是没有后退返回上一页的

2210JavaScript reduce() 方法

var url = 'http: //www.a.com/index.php?route=main&nav&user=tom&id=123&profile';

var querys = url

.substring(url.indexOf('?') + 1)

.split('&')

.map((query) => query.split('='))

.reduce((params, pairs) => (params[pairs[0]] = pairs[1] || '', params), {});

console.log(querys);